I dette tar han sin første tut på Flashtuts +, gjennom å bygge en dynamisk "Hot Products" -liste ved hjelp av gamle favoritter ActionScript 3.0 og XML. Han glatter også ut ting ved å benytte Caurina Tweener-klassen. Nyt…
Trinn 1: Filstruktur
Vi starter med å se på filstrukturen i prosjektet vårt. Mappen "caurina" er Tweener-klassen mappen. Du kan laste ned tweener herfra: Tweener. I mappen "img" lagrer vi bildene våre som skal brukes i applikasjonen. Bildene i mitt tilfelle vil ha dimensjoner 60px bred og 55px høy.
Trinn 2: XML
La oss lage XML-filen. Åpne teksteditoren din og skriv:
Lagre det som "data.xml" i "prosjekt" -mappen.
Trinn 3: Ideen
Tanken er å sende parametere til hovedfunksjonen "showData". Disse parametrene er "loopMin" og "loopMax" (se koden) verdier for en for () loop. Da filtrerer vi resultatene med en if () setning og viser dem.
Trinn 4: Starte
Opprett en ny Flash-fil (ActionScript 3).
Still scenestørrelsen til 350x350px
Trinn 5: Bakgrunn
Med Rektangelverktøyet (R) tegne en form med dimensjoner 350x350px, skriv lineær og farger # d3d3d3, # f1f1f1. Bruk Gradient transformeringsverktøyet (F) til å justere graden.
Klikk på formen så åpne justeringsvinduet og kontroller at "Til scenen" -knappen er aktivert. Juster formen vertikalt og horisontalt.
Lag et nytt lag, deretter med rektangelverktøyet tegne en form 350x40px med farge # 333333 og juster den til bunnen.
Nå velger du begge figurene og trykker på F8 eller Endre> Konverter til symbol, sett type til filmklipp og navnet "hoved".
Trinn 6: Legge til knapper
Dobbeltklikk på filmklippet for å åpne det, og gi nytt navn til Lag 1 til "bakgrunn" og lås det. Opprett et nytt lag og betegn det "btns". Velg det ovale verktøyet (O), hold deretter skift og dra en sirkel med slagfarge: # 0098FF og fyll farge: #FFFFFF dimensjoner 20X20px. Klikk på slag og endre slaghøyde til 3.
Velg din form og trykk F8 for å konvertere den til symbol. Velg type "Knapp" og navnet "btn".
Dobbeltklikk på knappen, og høyreklikk deretter på "Over" -rammen. Velg Sett inn nøkkelramme.
Velg fyllfarge og endre den til # d3d3d3.
Sett inn Keyframe på Down-rammen og endre fyllfargen til # 999999. Gå tilbake til "hoved" filmklipp og velg knappen. Bytt forekomstnavn til "btn1". Dra deretter knappen til bunnen, dra til høyre mens du holder "Alt" og slipp for å opprette en ny knapp. Endre forekomstnavnet til "btn2".
Gjenta prosedyren en gang til for å legge til en tredje knapp til scenen og endre forekomstnavnet til "btn3". Åpne vinduet Juster og deaktiver "Til scenen" -knappen. Velg de tre knappene og juster dem horisontalt og vertikalt. Aktiver "Til scene" igjen og juster dem vertikalt.
Trinn 7: Elementer
Opprett et nytt lag og kaller det "elementer". Tegn et rektangel på det på 320x90px farge: type: lineær # D3D3D3, # BBBBBB. Igjen, bruk gradienttransformeringsverktøyet til å justere gradienten. Velg formen og juster den vertikalt til scenen. Trykk F8, skriv: Filmklipp og kaller det "element" - velg topp midten som registreringspunkt.
Dobbeltklikk på filmklippet. De omdøper "lag 1" til "bakgrunn". Opprett et nytt lag og kaller det "txt". Velg tekstverktøyet (T) og sett teksttypen til Dynamisk tekst. Tegn deretter et tekstfelt, og sett instansnavnet til "txt". Skriv litt tekst og sett disse egenskapene:
Opprett nytt lag og kaller det "pris". Med tekstverktøyet tegner du et annet tekstfelt og angir navnet til "pris". Sett tekstfargen til: # 0099FF.
Nå skal vi lage en ny knapp ...
Opprett et nytt lag og kaller det "btn_more". Nå tegne en form med rektangelverktøyet på 60x20px med farge: # 666666. Velg den og trykk F8. Velg type: Knapp og tilordne den navnet "mer". Endre også navnet på forekomsten til "mer". Åpne knappen og legg til et nytt lag, ring det til tekst. Velg tekstverktøyet og bruk det til å tegne et tekstfelt, skriv: statisk tekst. Skriv inn teksten "mer" i feltet, farge: #FFFFFF; størrelse: 12; format: align center;.
Sett inn nøkkelrammer i Over og Ned-rammer, og endre farge som du vil. Jeg bruker: over: # 999999; ned: # 333333;
Gå tilbake til hovedfilmen, velg elementet og bytt forekomstnavn til element1. Hold Alt-tasten, dra elementet nede for å legge til en kopi til scenen. Gi det andre elementet forekomstnavnet til "item2". Legg til en annen kopi og endre forekomstnavnet til "item3". Juster elementene, og du bør ha noe slikt:
Trinn 8: Mask
Nå skal vi lage en maske for elementene. Lag et nytt lag, betegne det "maske" og trekk et rektangel på 350x310px.
Høyreklikk på maskelaget, velg deretter maske:
Lag nytt lag, navngi det "handlinger" og lim inn koden som er i følgende trinn.
Trinn 9: Actionscript
Ta en titt på hele koden:
// Import Tweener import caurina.transitions. *; // // var xmlPath: String = "data.xml"; // holder lenke til xml-filen var data_xml: XML; // XML Object var data_Req: URLRequest = ny URLRequest (xmlPath); // URL Request var data_Loader: URLLoader = ny URLLoader ); // Loader var xml_length: Nummer; // xml lengde // // var tid: Nummer = 5000; // 5000 = 5 sekunder var timer: Timer = Ny Timer (Tid); // Timer // // var imgPath: String; // bildebane for første element var imgPath2: String; // bildebane for andre element var imgPath3: String; // bildebane for tredje element var item1Y: Number = item1.y; // item 1 y verdi var item2Y: Number = item2.y; // item 2 y verdi var item3Y: Number = item3.y; // item 3 y value // // var currentBtn: Number = 1; // hvor btn er trykket var min: Nummer; // min verdi brukt i funksjonen hideNshow () var max: Nummer; // maks verdi brukt i funksjonen hideNshow () // // //---------------------------------------------------- funksjon xmlLoaded (event: Event): void // xml Loaded funksjon data_xml = ny XML (data_Loader.data); // få data prom XML-fil xml_length = data_xml.item.length (); // xml lengde min = xml_length- 6; // sett min verdi til andre resultat max = xml_length-2; // sett maks vellyd til andre resuld funksjon showData (loopMin: Number, loopMax: Number) // Hovedfunksjon var i: Nummer; // Var for loop var loopMaxResult = loopMax-2; // var for tredje resultat var loopSecondResult = loopMax-3; // var for andre resultat for (i = loopMin; i imgPath = data_xml.item [i]. @ img; // få img url fra xml var imgRequest: URLRequest = ny URLRequest (imgPath); // URL forespørsel var imgLader: Loader = ny Loader (); // bilde Loader imgLoader. last (imgRequest); // laste bildet item1.addChild (imgLoader); // legge første bilde til element 1 imgLoader.x = -150; // bilde x verdi imgLoader.y = 15; // bilde y verdi // // slutt hvis hvis (i == loopSecondResult) // andre resultat fData (element2, i); // ring fData funksjon for å fylle element 2 // imgPath2 = data_xml.item [i]. @ img; // få img url fra xml var imgRequest2: URLRequest = ny URLRequest (imgPath2); // URL-forespørsel var imgLoader2: Loader = ny Loader (); // image Loader imgLoader2. load (imgRequest2); // laste bildet item2.addChild (imgLoader2); // legge første bilde til element 2 imgLoader2.x = -150; // bilde x verdi imgLoader2.y = 15; // bilde y verdi // // slutt hvis hvis (i == loopMaxResult) // tredje resultat fData (element3, i); // ring fData funksjon for å fylle element 3 // imgPath3 = data_xml.item [i]. @ img; // få img url fra xml var imgRequest3: URLRequest = ny URLRequest (imgPath3); // URL forespørsel var imgLoader3: Loader = ny Loader (); // bilde Loader imgLoader3. load (imgRequest3); // laste bildet item3.addChild (imgLoader3); // legge første bilde til element 3 imgLoader3.x = -150; // bilde x verdi imgLoader3.y = 15; // bilde y verdi // // end if // end for funksjon fData (element: MovieClip, iValue: int) // funksjon som fyller data i elementer var moreURL: String; // url for knappen mer item.txt.text = data_xml.item [iValue]. @ title; // fyll elementet item item.price.text = data_xml.item [iValue]. @ pris; // fyll elementet merURL = data_xml.item [iValue]. @ link; // element koblingsobjekt .more.addEventListener (MouseEvent.CLICK, gotoURL); // hendelseslytter for mer btn-funksjon gotoURL (e: MouseEvent): void // klikk hendelsesfunksjon var myURL: URLRequest = ny URLRequest (moreURL); // URL request navigateToURL (myURL); // gå til elementkobling // sluttfunksjon gotoURL // funksjon for visning N skjul elementer funksjon hideNshow (effTime: Nummer, effTransisjon: String, iMin: Nummer, iMax: Nummer) // timer.stop (); // stopp timeren Tweener.addTween (item3, y: 330, alfa: 0, tid: effTime, overgang: effTransition); // skjul element 3 Tweener.addTween (item2, y: 247, alfa: 0, tid: effTime, forsinkelse: 0,3, overgang: effTransisjon); / / skjul element 2 Tweener.addTween (item1, y: 163, alfa: 0, tid: effTime, forsinkelse: 0,6, overgang: effTransition, onComplete: Show); // skjul element 1, // når ferdig samtalefunksjon Vis () // funksjon Vis () // vis elementer // currentBtn + = 1; // legg til 1 til nåværende btn verdi hvis (currentBtn == 4) // hvis currentBtn verdi er lik 4 sett verdi til 1 fordi vi har bare 3 btns currentBtn = 1; // sett til 1 // fjerne hvis item1.removeChild (imgLoader); // fjern bilde fra element 1 item2.removeChild (imgLoader2); // fjern bilde fra element 2 item3.removeChild (imgLoader3); // fjern bilde fra element 3 showData (iMin, iMax); / / call function showData med parametre iMin og iMax (verdier min og max vars) min- = 3; // redusere minverdien for å vise de neste 3 resultatene fra xml max- = 3; // redusere maksverdien for å vise de neste 3 resultatene fra xml hvis (maks == xml_length-8) // hvis max verdi min = xml_length-3; // sett min verdi for å vise første resultat max = xml_length + 1; // angi maksimal verdi for å vise første resultat // slutt hvis Tweener.addTween (item3, y: item3Y, alfa: 1, tid: 2, forsinkelse: 0,6, overgang: "easeOutExpo"); // vise element3 Tweener.addTween (item2, y : item2Y, alfa: 1, tid: 2, forsinkelse: 0,3, overgang: "easeOutExpo"); // vise element2 Tweener.addTween (item1, y: item1Y, alfa: 1, tid: 2, transitio n: "easeOutExpo"); // vise item1 timer.start (); // // End Funksjon Show // End Funksjon HideNshow Funksjon TimerEvent () // Funksjon for Timer-hendelsen HideNshow (2, "EasyInOutQuart", Min, Maks); // Oppringingsfunksjon hideNshow // BTN 1 Funksjonsfunksjon btn1Clicked ( e: MouseEvent) min = xml_length-3; // sett min verdi max = xml_length + 1; // angi maksimal verdi hideNshow (2, "easeInOutQuart", min, maks); // samtalefunksjon hideNshow currentBtn = 0; / / sett surrent Btn btnControl (1); / / funksjon for funksjon btnControl // btn 2 funksjonsfunksjon btn2Clicked (e: MouseEvent) min = xml_length-6; max = xml_length-2; hideNshow (2, "easeInOutQuart", min, max); currentBtn = 1; btnControl (2); // btn 3 funksjonsfunksjon btn3Clicked (e: MouseEvent) min = xml_length-9; max = xml_length-5; hideNshow (2, "easeInOutQuart", min, max); currentBtn = 2; btnControl (3); funksjon btnControl (btnNumber: Number) // noen tilfellebryter ... bryter (btnNumber) tilfelle 1: // når btn 1 er aktiv btn1.alpha = 0.5; // sett alfa btn1.mouseEnabled = false; // deaktiver knapp Tweener.addTween (btn1, width: 30, height: 30, time: 2, overgang: "easeOutExpo"); / / endre btn bredde og høyde btn2.alpha = 1; // sett alpha btn2.mouseEnabled = true; // enable btn Tweener.addTween (btn2, width: 20, height: 20, time: 2, overgang: "easeOutExpo"); / / endre btn bredde og høyde btn3.alpha = 1; // set alpha btn3. mouseEnabled = true; // enable btn Tweener.addTween (btn3, bredde: 20, høyde: 20, tid: 2, overgang: "easeOutExpo"); / / endre btn bredde og høydebrudd; tilfelle 2: // når btn 2 er aktiv btn1.alpha = 1; // sett alfa btn1.mouseEnabled = true; // aktiver btn Tweener.addTween (btn1, bredde: 20, høyde: 20, tid: 2, overgang : "easeOutExpo"); // endre btn bredde og høyde btn2.alpha = 0.5; // sett alpha btn2.mouseEnabled = false; // deaktiver knapp Tweener.addTween (btn2, width: 30, height: 30 time : 2, overgang: "easeOutExpo"); // endre btn bredde og høyde btn3.alpha = 1; // sett alpha btn3.mouseEnabled = true; // aktiver btn Tweener.addTween (btn3, width: 20, height : 20, tid: 2, overgang: "easeOutExpo"); // endre btn bredde og høyde pause; tilfelle 3: // når btn 3 er aktiv btn1.alpha = 1; // sett alpha btn1.mouseEnabled = true; // aktiver btn Tweener.addTween (btn1, width: 20, height: 20, time: 2, overgang : "easeOutExpo"); // endre btn bredde og høyde btn2.alpha = 1; // sett alpha btn2.mouseEnabled = true; // aktiver btn Tweener.addTween (btn2, width: 20, height: 20, time : 2, overgang: "easeOutExpo"); // endre btn bredde og høyde btn3.alpha = 0.5; // sett alpha btn3.mouseEnabled = false; // deaktiver knapp Tweener.addTween (btn3, width: 30, height : 30, tid: 2, overgang: "easeOutExpo"); // endre btn bredde og høyde pause; // End Switch // End-funksjon btnControl // // timer timer.addEventListener (TimerEvent.TIMER, timerEvent); timer.start (); // knapper btn1.addEventListener (MouseEvent.CLICK, btn1Clicked); // Lytter til btn1 klikk og ring funksjon btn2.addEventListener (MouseEvent.CLICK, btn2Clicked); // Lytter til btn2 klikk og ring funksjon btn3.addEventListener (MouseEvent.CLICK , btn3Clicked); // Lytter til btn3 klikk og ring funksjon // // vis hvor btns er aktiv hvis (currentBtn == 1) btnControl (1); // call btnControl funksjon annet hvis (currentBtn == 2) btnControl (2); // call btnControl funksjon annet hvis (currentBtn == 3) btnControl (3); // ende hvis // sluttfunksjon fData // endefunksjon ShowData showData (xml_length-3, xml_length + 1); // vis første resultat // end xml Lastet funksjon //--------------------------------------------------- // data_Loader.load (data_Req); data_Loader.addEventListener (Event.COMPLETE, xmlLoaded); //
Trinn 10: Vars
// Import Tweener import caurina.transitions. *; // // var xmlPath: String = "data.xml"; // holder lenke til xml-filen var data_xml: XML; // XML Object var data_Req: URLRequest = ny URLRequest (xmlPath); // URL Request var data_Loader: URLLoader = ny URLLoader ); // Loader var xml_length: Nummer; // xml lengde // // var tid: Nummer = 5000; // 5000 = 5 sekunder var timer: Timer = Ny Timer (Tid); // Timer // // var imgPath: String; // bildebane for første element var imgPath2: String; // bildebane for andre element var imgPath3: String; // bildebane for tredje element var item1Y: Number = item1.y; // item 1 y verdi var item2Y: Number = item2.y; // item 2 y verdi var item3Y: Number = item3.y; // item 3 y value // // var currentBtn: Number = 1; // hvor btn er trykket var min: Nummer; // min verdi brukt i funksjonen hideNshow () var max: Nummer; // maks verdi brukt i funksjonen hideNshow () // //
Trinn 11: xmlLoaded
funksjon xmlLoaded (event: Event): void // xml Loaded funksjon data_xml = ny XML (data_Loader.data); // få data prom XML-fil xml_length = data_xml.item.length (); // xml lengde min = xml_length- 6; // sett min verdi til andre resultat max = xml_length-2; // sett maks vellyd til andre resuld
Når xml-filen er lastet, ringer en hendelseslytter til funksjonen xmlLoaded.
Trinn 12: showData
funksjon showData (loopMin: Number, loopMax: Number) // Hovedfunksjon var i: Nummer; // var for for loop var loopMaxResult = loopMax-2; // var for tredje resultat var loopSecondResult = loopMax-3; // var for andre resultat for (i = loopMin; i imgPath = data_xml.item [i]. @ img; // få img url fra xml var imgRequest: URLRequest = ny URLRequest (imgPath); // URL forespørsel var imgLader: Loader = ny Loader (); // bilde Loader imgLoader. last (imgRequest); // laste bildet item1.addChild (imgLoader); // legge første bilde til element 1 imgLoader.x = -150; // bilde x verdi imgLoader.y = 15; // bilde y verdi // // slutt hvis hvis (i == loopSecondResult) // andre resultat fData (element2, i); // ring fData funksjon for å fylle element 2 // imgPath2 = data_xml.item [i]. @ img; // få img url fra xml var imgRequest2: URLRequest = ny URLRequest (imgPath2); // URL-forespørsel var imgLoader2: Loader = ny Loader (); // image Loader imgLoader2. load (imgRequest2); // laste bildet item2.addChild (imgLoader2); // legge første bilde til element 2 imgLoader2.x = -150; // bilde x verdi imgLoader2.y = 15; // bilde y verdi // // slutt hvis hvis (i == loopMaxResult) // tredje resultat fData (element3, i); // ring fData funksjon for å fylle element 3 // imgPath3 = data_xml.item [i]. @ img; // få img url fra xml var imgRequest3: URLRequest = ny URLRequest (imgPath3); // URL forespørsel var imgLoader3: Loader = ny Loader (); // bilde Loader imgLoader3. load (imgRequest3); // laste bildet item3.addChild (imgLoader3); // legge første bilde til element 3 imgLoader3.x = -150; // bilde x verdi imgLoader3.y = 15; // bilde y verdi // // ende hvis // slutt for
Funksjonen "showData" passerer to parametere "loopMin" og "loopMax" Dette er verdiene for for () -løkken. "loopMaxResult" og "loopSecondResult" vi bruker i en if () setning for å skille tre resultater. Hvis vi har en matrise med 3 elementer, vil det første elementet være med nøkkel [0] og det siste med nøkkel [2] (0,1,2). For å gå gjennom arrayet med for () må vår loopMin-verdi være = 0 og vår loopMax = 4. For å vite hvilket element vi trenger for å sette data vi bruker hvis (i == loopMin) vil dette vise det første resultatet i det første elementet, hvis (i == loopSecondResult) viser det andre resultatet og hvis (i == loopMaxResult) tredje resultat.
Trinn 13: Funksjon fData
funksjon fData (element: MovieClip, iValue: int) // funksjon som fyller data i elementer var moreURL: String; // url for knapp mer item.txt.text = data_xml.item [iValue]. @ title; // fill elementtittel item.price.text = data_xml.item [iValue]. @ pris; // fylle varepris merURL = data_xml.item [iValue]. @ link; // item link item.more.addEventListener (MouseEvent.CLICK, gotoURL ); // hendelseslytter for mer btn-funksjon gotoURL (e: MouseEvent): void // klikk hendelsesfunksjon var myURL: URLRequest = ny URLRequest (moreURL); // URL forespørsel navigateToURL (myURL); // gå til elementlink // sluttfunksjon gotoURL
Funksjon fData passerer to parametere. En er filmen klippet forekomst navn og den andre er jeg verdi. Her legger vi til data fra XML-dokumentet til våre filmklipp og gjør også knappen "mer" åpne koblinger fra XML.
Trinn 14: HideNshow
// funksjon for visning N skjul elementer funksjon hideNshow (effTime: Nummer, effTransition: String, iMin: Nummer, iMax: Nummer) // timer.stop (); // stopp timeren Tweener.addTween (item3, y: 330, alfa: 0, tid: effTime, overgang: effTransition); // skjul element 3 Tweener.addTween (item2, y: 247, alfa: 0, tid: effTime, forsinkelse: 0,3, overgang: effTransisjon); / / skjul element 2 Tweener.addTween (item1, y: 163, alfa: 0, tid: effTime, forsinkelse: 0,6, overgang: effTransition, onComplete: Show); // skjul element 1, // når ferdig samtalefunksjon Vis () // funksjon Vis () // vis elementer // currentBtn + = 1; // legg til 1 til nåværende btn verdi hvis (currentBtn == 4) // hvis currentBtn verdi er lik 4 sett verdi til 1 fordi vi har bare 3 btns currentBtn = 1; // sett til 1 // fjerne hvis item1.removeChild (imgLoader); // fjern bilde fra element 1 item2.removeChild (imgLoader2); // fjern bilde fra element 2 item3.removeChild (imgLoader3); // fjern bilde fra element 3 showData (iMin, iMax); / / call function showData med parametre iMin og iMax (verdier min og max vars) min- = 3; // redusere minverdien for å vise de neste 3 resultatene fra xml max- = 3; // redusere maksverdien for å vise de neste 3 resultatene fra xml hvis (maks == xml_length-8) // hvis max verdi min = xml_length-3; // sett min verdi for å vise første resultat max = xml_length + 1; // angi maksimal verdi for å vise første resultat // slutt hvis Tweener.addTween (item3, y: item3Y, alfa: 1, tid: 2, forsinkelse: 0,6, overgang: "easeOutExpo"); // vise element3 Tweener.addTween (item2, y : item2Y, alfa: 1, tid: 2, forsinkelse: 0,3, overgang: "easeOutExpo"); // vise element2 Tweener.addTween (item1, y: item1Y, alfa: 1, tid: 2, transitio n: "easeOutExpo"); // vise item1 timer.start (); // // sluttfunksjon Vis // sluttfunksjon hideNshow
Funksjon hideNshow passerer 4 parametere.
effTime - tid i sekunder som brukes i tweener animasjon
effeffTransition - type tweener overgang
iMin - var min verdi
iMax - var maks verdi
Når element 1 animasjon er fullført, kalles tweener funksjonen "Vis" (som bringer gjenstander tilbake, men fjerner bilder fra hver enkelt) og kjører "showData" -funksjonen for å fylle dem med de neste resultatene fra vår xml-fil. I tillegg er verdien av currentBtn økt med en. Til slutt begynner timeren.
Denne funksjonen kalles når timeren teller ned 5 sekunder.
Trinn 16: Knapper fungerer
// btn 1 funksjonsfunksjon btn1Clicked (e: MouseEvent) min = xml_length-3; // sett min verdi max = xml_length + 1; // sett maks verdi hideNshow (2, "easeInOutQuart", min, maks); // anropsfunksjon hideNshow currentBtn = 0; // sett surrent Btn btnControl (1); / / funksjon for funksjon btnControl // btn 2 funksjonsfunksjon btn2Clicked (e: MouseEvent) min = xml_length-6; max = xml_length-2; hideNshow (2, "easeInOutQuart", min, max); currentBtn = 1; btnControl (2); // btn 3 funksjonsfunksjon btn3Clicked (e: MouseEvent) min = xml_length-9; max = xml_length-5; hideNshow (2, "easeInOutQuart", min, max); currentBtn = 2; btnControl (3);
Dette er de funksjonene som hendelseslyttere for knapper ringer.
Trinn 17: btnControl funksjon
funksjon btnControl (btnNumber: Number) // noen tilfellebryter ... bryter (btnNumber) tilfelle 1: // når btn 1 er aktiv btn1.alpha = 0.5; // sett alpha btn1.mouseEnabled = false; // deaktiver knapp Tweener .addTween (btn1, width: 30, height: 30, time: 2, overgang: "easeOutExpo"); / / endre btn bredde og høyde btn2.alpha = 1; // sett alpha btn2.mouseEnabled = true; / / aktiver btn Tweener.addTween (btn2, bredde: 20, høyde: 20, tid: 2, overgang: "easeOutExpo"); / / endre btn bredde og høyde btn3.alpha = 1; // sett alpha btn3.mouseEnabled = true; // enable btn Tweener.addTween (btn3, bredde: 20, høyde: 20, tid: 2, overgang: "easeOutExpo"); / / endre btn bredde og høydebrudd; tilfelle 2: // når btn 2 er aktiv btn1.alpha = 1; // sett alfa btn1.mouseEnabled = true; // aktiver btn Tweener.addTween (btn1, bredde: 20, høyde: 20, tid: 2, overgang : "easeOutExpo"); // endre btn bredde og høyde btn2.alpha = 0.5; // sett alpha btn2.mouseEnabled = false; // deaktiver knapp Tweener.addTween (btn2, width: 30, height: 30 time : 2, overgang: "easeOutExpo"); // endre btn bredde og høyde btn3.alpha = 1; // sett alpha btn3.mouseEnabled = true; // aktiver btn Tweener.addTween (btn3, width: 20, height : 20, tid: 2, overgang: "easeOutExpo"); // endre btn bredde og høyde pause; tilfelle 3: // når btn 3 er aktiv btn1.alpha = 1; // sett alpha btn1.mouseEnabled = true; // aktiver btn Tweener.addTween (btn1, width: 20, height: 20, time: 2, overgang : "easeOutExpo"); // endre btn bredde og høyde btn2.alpha = 1; // sett alpha btn2.mouseEnabled = true; // aktiver btn Tweener.addTween (btn2, width: 20, height: 20, time : 2, overgang: "easeOutExpo"); // endre btn bredde og høyde btn3.alpha = 0.5; // sett alpha btn3.mouseEnabled = false; // deaktiver knapp Tweener.addTween (btn3, width: 30, height : 30, tid: 2, overgang: "easeOutExpo"); // endre btn bredde og høyde pause; // sluttbryter // sluttfunksjon btnControl
btnControl passerer en parameter "btnNumber" som brukes i en bryteretning for å endre egenskapene til knappene når de klikkes eller er aktive.
Trinn 18: Event Lyttere
// // timer timer.addEventListener (TimerEvent.TIMER, timerEvent); timer.start (); // knapper btn1.addEventListener (MouseEvent.CLICK, btn1Clicked); // Lytter til btn1 klikk og ring funksjon btn2.addEventListener (MouseEvent.CLICK, btn2Clicked); // Lytter til btn2 klikk og ring funksjon btn3.addEventListener (MouseEvent.CLICK , btn3Clicked); // Lytter til btn3 klikk og ring funksjon //
Trinn 19: Hvilken knapp er aktiv?
// vis hvilken knapp er aktiv hvis (currentBtn == 1) btnControl (1); // call btnControl funksjon ellers hvis (currentBtn == 2) btnControl (2); // call btnControl funksjon ellers hvis (currentBtn == 3) btnControl (3); //slutt om
Vi bruker tre if () setninger for å se hvilken knapp som for øyeblikket er aktiv.
Trinn 20: Samtalefunksjoner
// sluttfunksjon fData // endefunksjon ShowData showData (xml_length-3, xml_length + 1); // vise Første resultat // end xml Lastet funksjon //--------------------------------------------------- // data_Loader.load (data_Req); data_Loader.addEventListener (Event.COMPLETE, xmlLoaded); //
Etter at funksjonen "ShowData" er avsluttet, kjører vi den med parametere (xml_length-3, xml_length + 1) for å se de første resultatene når vi kjører programmet. Vi legger til hendelselytter til data_loader, så når xml-filen er lastet og klar til bruk, kaller vi "xmlLoaded" -funksjonen.
Konklusjon
Du kan endre appen som du vil, endre overgangstyper, timers sekunder eller for eksempel gjøre det til å vise nye innlegg, nyheter, tweets etc. Jeg håper du likte å følge med!
Share
Accentsconagua
