In deze, zijn eerste tut op Flashtuts +, neemt Yanko je mee door een dynamische lijst met 'Hot Products' te bouwen met behulp van de oude favorieten ActionScript 3.0 en XML. Hij maakt ook dingen glad door gebruik te maken van de Caurina Tweener-klasse. Genieten…
Stap 1: Bestandsstructuur
We zullen beginnen met het bekijken van de bestandsstructuur van ons project. De map "caurina" is de map Tweener-klasse. Je kunt tweener downloaden vanaf hier: Tweener. In de map "img" slaan we onze afbeeldingen op die in de applicatie zullen worden gebruikt. De afbeeldingen in mijn geval hebben de afmetingen 60px breed en 55px hoog.
Stap 2: XML
Laten we het XML-bestand maken. Open je teksteditor en schrijf:
Sla het op als "data.xml" in de map "project".
Stap 3: Het idee
Het idee is om parameters door te geven aan de hoofdfunctie "showData". Deze parameters zijn "loopMin" en "loopMax" (zie de code) waarden voor een for () lus. Vervolgens filteren we de resultaten met een if () -instructie en tonen deze.
Stap 4: starten
Maak een nieuw Flash-bestand (ActionScript 3).
Stel de stage in op 350x350 px
Stap 5: Achtergrond
Teken met het gereedschap Rechthoek (R) een vorm met afmetingen 350x350px, type lineair en kleuren # d3d3d3, # f1f1f1. Gebruik het gereedschap Gradiënttransformatie (F) om het verloop aan te passen.
Klik op de vorm en open het aligneervenster en zorg ervoor dat de knop "To stage" is ingeschakeld. Lijn uw vorm verticaal en horizontaal uit.
Maak een nieuwe laag en teken met het gereedschap Rechthoek een vorm van 350x40px met kleur # 333333 en lijn het uit met de onderkant.
Selecteer nu beide vormen en druk op F8 of Wijzigen> Converteren naar symbool, stel het type in op filmclip en noem het "hoofd".
Stap 6: Knoppen toevoegen
Dubbelklik op de filmclip om deze te openen en wijzig vervolgens Laag 1 in "achtergrond" en vergrendel deze. Maak een nieuwe laag en noem deze "btns". Selecteer het gereedschap Ovaal (O) en houd dan shift ingedrukt en sleep een cirkel met lijnkleur: # 0098FF en vul de kleur: #FFFFFF-afmetingen 20X20px. Klik op de lijn en verander de slaghoogte naar 3.
Selecteer uw vorm en druk op F8 om deze naar symbool te converteren. Kies type "Button" en noem deze "btn".
Dubbelklik op de knop en klik met de rechtermuisknop op het frame "Over". Selecteer Insert Keyframe.
Selecteer vulkleur en wijzig deze in # d3d3d3.
Voeg keyframe in het frame Omlaag in en verander de vulkleur in # 999999. Keer terug naar de "hoofd" filmclip en selecteer de knop. Wijzig de naam van het exemplaar in "btn1". Sleep de knop vervolgens naar de bodem, sleep naar rechts terwijl u "Alt" ingedrukt houdt en laat los om een tweede knop te maken. Verander de naam van het exemplaar in "btn2".
Herhaal de procedure nog een keer om een derde knop toe te voegen en de instantienaam te wijzigen in "btn3". Open het venster Uitlijnen en schakel de knop "Naar fase" uit. Selecteer de drie knoppen en lijn ze horizontaal en verticaal uit. Schakel "To stage" opnieuw in en lijn ze verticaal uit.
Stap 7: Items
Maak een nieuwe laag en noem deze "items". Teken een rechthoek erop van 320x90px kleur: type: lineair # D3D3D3, # BBBBBB. Gebruik opnieuw het verlooptransformatietool om het verloop aan te passen. Selecteer de vorm en lijn deze verticaal uit op het podium. Druk op F8, typ: Movie Clip en noem deze "item" - selecteer bovenaan midden als het registratiepunt.
Dubbelklik op het filmclipitem. Ze hernoemen "laag 1" in "achtergrond". Maak een nieuwe laag en noem deze "txt". Selecteer de teksttool (T) en stel het teksttype in op Dynamische tekst. Teken vervolgens een tekstveld en stel de instantienaam in op "txt". Typ wat tekst en stel deze eigenschappen in:
Maak een nieuwe laag en noem deze "prijs". Teken met de tekentool een ander tekstveld en stel de naam van het exemplaar in op "prijs". Stel de tekstkleur in op: # 0099FF.
Nu gaan we een nieuwe knop maken ...
Maak een nieuwe laag en noem deze "btn_more". Teken nu een vorm met het gereedschap Rechthoek van 60x20px met kleur: # 666666. Selecteer het en druk op F8. Kies type: Knop en wijs het een naam van "meer" toe. Wijzig ook de instantienaam in "more". Open de knop en voeg een nieuwe laag toe, noem het de tekst. Selecteer de teksttool en gebruik deze om een tekstveld te tekenen, typ: statische tekst. Voer de tekst "more" in het veld in, kleur: #FFFFFF; size: 12; format: align centre;.
Voeg hoofdframes toe in de frames Over en Down en verander de kleur naar wens. Ik gebruik: over: # 999999; naar beneden: # 333333;
Keer terug naar de hoofdfilmclip, selecteer het item en wijzig de instantienaam in item1. Houd de Alt-toets ingedrukt en sleep het item naar beneden om een exemplaar aan het podium toe te voegen. Geef de naam van de tweede iteminstantie de naam "item2". Voeg nog een kopie toe en verander de naam van het exemplaar in "item3". Lijn de items uit en je zou zoiets als dit moeten hebben:
Stap 8: Masker
Nu maken we een masker voor de items. Maak een nieuwe laag, noem deze "masker" en teken daarop een rechthoek van 350x310 px.
Klik met de rechtermuisknop op de maskerlaag en selecteer vervolgens masker:
Maak een nieuwe laag, noem deze "acties" en plak de code die in de volgende stap staat.
Stap 9: Actionscript
Bekijk de volledige code:
// import Tweener import caurina.transitions. *; // // var xmlPath: String = "data.xml"; // bevat een koppeling naar xml-bestand var data_xml: XML; // XML-object var data_Req: URLRequest = nieuwe URLRequest (xmlPath); // URL-aanvraag var data_Loader: URLLoader = new URLLoader ( ); // Loader var xml_length: Number; // xml length // // var time: Number = 5000; // 5000 = 5 seconds var timer: Timer = new Timer (time); // timer // // var imgPath: String; // afbeeldingspad voor eerste item var imgPath2: String; // afbeeldingspad voor tweede item var imgPath3: String; // afbeeldingspad voor derde item var item1Y: Number = item1.y; // item 1 y waarde var item2Y: Number = item2.y; // item 2 y value var item3Y: Number = item3.y; // item 3 y value // // var currentBtn: Number = 1; // waarmee btn wordt ingedrukt var min: Number; // min value gebruikt in functie hideNshow () var max: Number; // max value gebruikt in function hideNshow () // // //---------------------------------------------------- functie xmlLoaded (event: Event): void // xml Loaded function data_xml = nieuwe XML (data_Loader.data); // haal data prom XML-bestand xml_length = data_xml.item.length (); // xml length min = xml_length- 6; // stel minwaarde in op tweede resultaat max = xml_length-2; // stel max velue in op tweede resuld-functie showData (loopMin: Number, loopMax: Number) // Hoofdfunctie var i: Number; // var for for loop var loopMaxResult = loopMax-2; // var voor derde resultaat var loopSecondResult = loopMax-3; // var voor tweede resultaat voor (i = loopMin; i imgPath = data_xml.item [i]. @ img; // haal img url op van xml var imgRequest: URLRequest = new URLRequest (imgPath); // URL request var imgLoader: Loader = new Loader (); // image Loader imgLoader. laden (imgRequest); // laad het afbeeldingsitem item.addChild (imgLoader); // eerste afbeelding toevoegen aan item 1 imgLoader.x = -150; // afbeeldingswaarde x imgLoader.y = 15; // afbeeldingswaarde y // // end if if (i == loopSecondResult) // tweede resultaat fData (item2, i); // call fData-functie om item 2 // te vullen imgPath2 = data_xml.item [i]. @ img; // haal img-URL op van xml var imgRequest2: URLRequest = nieuwe URLRequest (imgPath2); // URL-aanvraag var imgLoader2: Loader = new Loader (); // image Loader imgLoader2. laden (imgRequest2); // laad de afbeelding item2.addChild (imgLoader2); // eerste afbeelding toevoegen aan item 2 imgLoader2.x = -150; // afbeelding x waarde imgLoader2.y = 15; // afbeelding y waarde // // end if if (i == loopMaxResult) // derde resultaat fData (item3, i); // call fData-functie om item 3 // te vullen imgPath3 = data_xml.item [i]. @ img; // haal img-URL van xml var imgRequest3: URLRequest = nieuwe URLRequest (imgPath3); // URL-aanvraag var imgLoader3: Loader = new Loader (); // image Loader imgLoader3. laden (imgRequest3); // laad de afbeelding item3.addChild (imgLoader3); // eerste afbeelding toevoegen aan item 3 imgLoader3.x = -150; // afbeelding x waarde imgLoader3.y = 15; // afbeelding y waarde // // end if // end for function fData (item: MovieClip, iValue: int) // functie die gegevens opvult in items var moreURL: String; // url voor knop more item.txt.text = data_xml.item [iValue]. @ title; // titelitem item.price.text = data_xml.item [iValue]. @ prijs; // artikelprijs invullen moreURL = data_xml.item [iValue]. @ link; // item item item .more.addEventListener (MouseEvent.CLICK, gotoURL); // gebeurtenislistener voor meer btn-functie gotoURL (e: MouseEvent): void // klik op evenementfunctie var myURL: URLRequest = nieuwe URL-vraag (moreURL); // URL-aanvraag navigateToURL (myURL); // ga naar itemlink // eindfunctie gotoURL // functie voor show N verberg items functie hideNshow (effTime: Number, effTransition: String, iMin: Number, iMax: Number) // timer.stop (); // stop de timer Tweener.addTween (item3, y: 330, alpha: 0, time: effTime, transition: effTransition); // verberg item 3 Tweener.addTween (item2, y: 247, alpha: 0, time: effTime, delay: 0.3, transition: effTransition); // hide item 2 Tweener.addTween (item1, y: 163, alpha: 0, time: effTime, delay: 0.6, transition: effTransition, onComplete: Show); // verberg item 1, // wanneer klaar call-functie Show () // function Show () // show items // currentBtn + = 1; // voeg 1 toe aan huidige btn-waarde als (currentBtn == 4) // als currentBtn-waarde gelijk is aan 4 setwaarde naar 1 omdat we slechts 3 btns currentBtn = 1 hebben; // stel het in op 1 // end if item1.removeChild (imgLoader); // verwijder afbeelding uit item 1 item2.removeChild (imgLoader2); // verwijder afbeelding uit item 2 item3.removeChild (imgLoader3); // verwijder afbeelding uit item 3 showData (iMin, iMax); // call-functie showData met parameters iMin en iMax (waarden van min en max vars) min- = 3; // verlaag de min-waarde om de volgende 3 resultaten van xml max- = 3 te tonen; // verlaag de max-waarde om volgende 3 resultaten te tonen van xml if (max == xml_length-8) // if max value min = xml_length-3; // stel min in als eerste resultaat max = xml_length + 1; // stel max waarde in om te laten zien eerste resultaat // einde als Tweener.addTween (item3, y: item3Y, alpha: 1, time: 2, delay: 0.6, transition: "easeOutExpo"); // show item3 Tweener.addTween (item2, y : item2Y, alpha: 1, time: 2, delay: 0.3, transition: "easeOutExpo"); // show item2 Tweener.addTween (item1, y: item1Y, alpha: 1, time: 2, transitio n: "easeOutExpo"); // toon item1 timer.start (); // // einde functie Tonen // einde functie hideNshow functie timerEvent () // functie voor timergebeurtenis hideNshow (2, "easeInOutQuart", min, max); // call functie hideNshow // btn 1 functie functie btn1Clicked ( e: MouseEvent) min = xml_length-3; // set min value max = xml_length + 1; // set max value hideNshow (2, "easeInOutQuart", min, max); // call functie hideNshow currentBtn = 0; / / set surrent Btn btnControl (1); // call-functie btnControl // btn 2-functie btn2Clicked (e: MouseEvent) min = xml_length-6; max = xml_length-2; hideNshow (2, "easeInOutQuart", min, max); currentBtn = 1; btnControl (2); // btn 3-functie btn3Clicked (e: MouseEvent) min = xml_length-9; max = xml_length-5; hideNshow (2, "easeInOutQuart", min, max); currentBtn = 2; btnControl (3); functie btnControl (btnNumber: Number) // some case switch ... switch (btnNumber) case 1: // wanneer btn 1 actief is btn1.alpha = 0.5; // stel alpha btn1.mouseEnabled = false; // uitschakelknop in Tweener.addTween (btn1, width: 30, height: 30, time: 2, transition: "easeOutExpo"); // change btn width and height btn2.alpha = 1; // set alpha btn2.mouseEnabled = true; // enable btn Tweener.addTween (btn2, width: 20, height: 20, time: 2, transition: "easeOutExpo"); // change btn width and height btn3.alpha = 1; // stel alpha btn3 in. mouseEnabled = true; // enable btn Tweener.addTween (btn3, width: 20, height: 20, time: 2, transition: "easeOutExpo"); // change btn width and height break; geval 2: // wanneer btn 2 actief is btn1.alpha = 1; // stel alpha in btn1.mouseEnabled = true; // schakel btn Tweener.addTween in (btn1, width: 20, height: 20, time: 2, transition : "easeOutExpo"); // verandering btn breedte en hoogte btn2.alpha = 0.5; // stel alpha in btn2.mouseEnabled = false; // knop uitschakelen Tweener.addTween (btn2, width: 30, height: 30, time : 2, transition: "easeOutExpo"); // verander btn breedte en hoogte btn3.alpha = 1; // stel alpha in btn3.mouseEnabled = true; // schakel btn Tweener.addTween in (btn3, width: 20, height : 20, time: 2, transition: "easeOutExpo"); // change btn width en height break; geval 3: // wanneer btn 3 actief is btn1.alpha = 1; // stel alpha in btn1.mouseEnabled = true; // schakel btn Tweener.addTween in (btn1, width: 20, height: 20, time: 2, transition : "easeOutExpo"); // verander btn breedte en hoogte btn2.alpha = 1; // stel alpha in btn2.mouseEnabled = true; // schakel btn Tweener.addTween in (btn2, width: 20, height: 20, time : 2, transition: "easeOutExpo"); // verander btn breedte en hoogte btn3.alpha = 0.5; // stel alpha btn3.mouseEnabled = false; // schakel knop Tweener.addTween in (btn3, width: 30, height : 30, time: 2, transition: "easeOutExpo"); // change btn width en height break; // einde Schakelaar // eindfunctie btnControl // // timer timer.addEventListener (TimerEvent.TIMER, timerEvent); timer.start (); // knoppen btn1.addEventListener (MouseEvent.CLICK, btn1Clicked); // Luistert naar btn1 klik- en oproepfunctie btn2.addEventListener (MouseEvent.CLICK, btn2Clicked); // Luistert naar btn2 klik- en oproepfunctie btn3.addEventListener (MouseEvent.CLICK , btn3Clicked); // Luistert naar btn3 klik- en oproepfunctie // // laat zien welke btns actief is als (currentBtn == 1) btnControl (1); // call btnControl-functie else if (currentBtn == 2) btnControl (2); // call btnControl-functie else if (currentBtn == 3) btnControl (3); // end if // eindfunctie fData // eindfunctie ShowData showData (xml_length-3, xml_length + 1); // toon eerste resultaat // einde xml Geladen functie //--------------------------------------------------- // data_Loader.load (data_Req); data_Loader.addEventListener (Event.COMPLETE, xmlLoaded); //
Stap 10: Vars
// import Tweener import caurina.transitions. *; // // var xmlPath: String = "data.xml"; // bevat een koppeling naar xml-bestand var data_xml: XML; // XML-object var data_Req: URLRequest = nieuwe URLRequest (xmlPath); // URL-aanvraag var data_Loader: URLLoader = new URLLoader ( ); // Loader var xml_length: Number; // xml length // // var time: Number = 5000; // 5000 = 5 seconds var timer: Timer = new Timer (time); // timer // // var imgPath: String; // afbeeldingspad voor eerste item var imgPath2: String; // afbeeldingspad voor tweede item var imgPath3: String; // afbeeldingspad voor derde item var item1Y: Number = item1.y; // item 1 y waarde var item2Y: Number = item2.y; // item 2 y value var item3Y: Number = item3.y; // item 3 y value // // var currentBtn: Number = 1; // waarmee btn wordt ingedrukt var min: Number; // min value gebruikt in functie hideNshow () var max: Number; // max value gebruikt in function hideNshow () // //
Stap 11: xmlLoaded
functie xmlLoaded (event: Event): void // xml Loaded function data_xml = nieuwe XML (data_Loader.data); // haal data prom XML-bestand xml_length = data_xml.item.length (); // xml length min = xml_length- 6; // stel minwaarde in op tweede resultaat max = xml_length-2; // stel max velue in op tweede resuld
Wanneer het xml-bestand is geladen, roept een gebeurtenislistener de functie xmlLoaded aan.
Stap 12: showData
function showData (loopMin: Number, loopMax: Number) // Hoofdfunctie var i: Number; // var for voor loop var loopMaxResult = loopMax-2; // var voor derde resultaat var loopSecondResult = loopMax-3; // var voor het tweede resultaat voor (i = loopMin; i imgPath = data_xml.item [i]. @ img; // haal img url op van xml var imgRequest: URLRequest = new URLRequest (imgPath); // URL request var imgLoader: Loader = new Loader (); // image Loader imgLoader. laden (imgRequest); // laad het afbeeldingsitem item.addChild (imgLoader); // eerste afbeelding toevoegen aan item 1 imgLoader.x = -150; // afbeeldingswaarde x imgLoader.y = 15; // afbeeldingswaarde y // // end if if (i == loopSecondResult) // tweede resultaat fData (item2, i); // call fData-functie om item 2 // te vullen imgPath2 = data_xml.item [i]. @ img; // haal img-URL op van xml var imgRequest2: URLRequest = nieuwe URLRequest (imgPath2); // URL-aanvraag var imgLoader2: Loader = new Loader (); // image Loader imgLoader2. laden (imgRequest2); // laad de afbeelding item2.addChild (imgLoader2); // eerste afbeelding toevoegen aan item 2 imgLoader2.x = -150; // afbeelding x waarde imgLoader2.y = 15; // afbeelding y waarde // // end if if (i == loopMaxResult) // derde resultaat fData (item3, i); // call fData-functie om item 3 // te vullen imgPath3 = data_xml.item [i]. @ img; // haal img-URL van xml var imgRequest3: URLRequest = nieuwe URLRequest (imgPath3); // URL-aanvraag var imgLoader3: Loader = new Loader (); // image Loader imgLoader3. laden (imgRequest3); // laad de afbeelding item3.addChild (imgLoader3); // eerste afbeelding toevoegen aan item 3 imgLoader3.x = -150; // afbeelding x waarde imgLoader3.y = 15; // afbeelding y waarde // // end if // end for
De functie "showData" passeert twee parameters "loopMin" en "loopMax" dit zijn de waarden voor de lus for (). "loopMaxResult" en "loopSecondResult" gebruiken we in een if () -instructie om drie resultaten te scheiden. Als we een array met 3 elementen hebben, zal het eerste element zijn met toets [0] en de laatste met toets [2] (0,1,2). Om door de array te lopen met voor () moet onze loopMin-waarde = 0 zijn en onze loopMax = 4. Om te weten in welk item we gegevens moeten plaatsen die we gebruiken als (i == loopMin), zal dit het eerste resultaat in het eerste item weergeven, als (i == loopSecondResult) het tweede resultaat toont en als (i == loopMaxResult) de derde resultaat.
Stap 13: Functie fData
function fData (item: MovieClip, iValue: int) // functie die gegevens opvult in items var moreURL: String; // url voor knop more item.txt.text = data_xml.item [iValue]. @ title; // invullen itemtitel item.price.text = data_xml.item [iValue]. @ prijs; // itemprijs meer vullenURL = data_xml.item [iValue]. @ link; // itemlink item.more.addEventListener (MouseEvent.CLICK, gotoURL ); // gebeurtenislistener voor meer btn-functie gotoURL (e: MouseEvent): void // klik op gebeurtenisfunctie var myURL: URLRequest = nieuwe URLRequest (moreURL); // URL-aanvraag navigateToURL (myURL); // ga naar itemlink // eindfunctie gotoURL
Functie fData passeert twee parameters. Een daarvan is de naam van de filmclipinstantie en de tweede is i-waarde. Hier voegen we gegevens uit het xml-document toe aan onze filmclips en maken we ook de knop 'meer' open links van de xml.
Stap 14: hideNshow
// functie voor show N items verbergen functie hideNshow (effTime: Number, effTransition: String, iMin: Number, iMax: Number) // timer.stop (); // stop de timer Tweener.addTween (item3, y: 330, alpha: 0, time: effTime, transition: effTransition); // verberg item 3 Tweener.addTween (item2, y: 247, alpha: 0, time: effTime, delay: 0.3, transition: effTransition); // hide item 2 Tweener.addTween (item1, y: 163, alpha: 0, time: effTime, delay: 0.6, transition: effTransition, onComplete: Show); // verberg item 1, // wanneer klaar call-functie Show () // function Show () // show items // currentBtn + = 1; // voeg 1 toe aan huidige btn-waarde als (currentBtn == 4) // als currentBtn-waarde gelijk is aan 4 setwaarde naar 1 omdat we slechts 3 btns currentBtn = 1 hebben; // stel het in op 1 // end if item1.removeChild (imgLoader); // verwijder afbeelding uit item 1 item2.removeChild (imgLoader2); // verwijder afbeelding uit item 2 item3.removeChild (imgLoader3); // verwijder afbeelding uit item 3 showData (iMin, iMax); // call-functie showData met parameters iMin en iMax (waarden van min en max vars) min- = 3; // verlaag de min-waarde om de volgende 3 resultaten van xml max- = 3 te tonen; // verlaag de max-waarde om volgende 3 resultaten te tonen van xml if (max == xml_length-8) // if max value min = xml_length-3; // stel min in als eerste resultaat max = xml_length + 1; // stel max waarde in om te laten zien eerste resultaat // einde als Tweener.addTween (item3, y: item3Y, alpha: 1, time: 2, delay: 0.6, transition: "easeOutExpo"); // show item3 Tweener.addTween (item2, y : item2Y, alpha: 1, time: 2, delay: 0.3, transition: "easeOutExpo"); // show item2 Tweener.addTween (item1, y: item1Y, alpha: 1, time: 2, transitio n: "easeOutExpo"); // toon item1 timer.start (); // // einde functie Tonen // einde functie hideNshow
Functie hideNshow geeft 4 parameters door.
effTime - tijd in seconden die wordt gebruikt in tweener-animatie
effeffTransition - type tweener-overgang
iMin - var min value
iMax - var max-waarde
Wanneer de animatie van item1 voltooid is, roept tweener de functie "Show" aan (die items terugbrengt maar afbeeldingen van elke functie verwijdert) en voert de "showData" -functie uit om ze te vullen met de volgende resultaten van ons xml-bestand. Bovendien wordt de waarde van currentBtn met één verhoogd. Ten slotte wordt de timer gestart.
Stap 15: timeEvent
function timerEvent () // functie voor timergebeurtenis hideNshow (2, "easeInOutQuart", min, max); // oproepfunctie hideNshow
Deze functie wordt aangeroepen wanneer de timer 5 seconden aftelt.
Stap 16: Knoppenfuncties
// btn 1-functie btn1Clicked (e: MouseEvent) min = xml_length-3; // set min value max = xml_length + 1; // set max value hideNshow (2, "easeInOutQuart", min, max); // call functie hideNshow currentBtn = 0; // set surrent Btn btnControl (1); // call-functie btnControl // btn 2 functie btn2Clicked (e: MouseEvent) min = xml_length-6; max = xml_length-2; hideNshow (2, "easeInOutQuart", min, max); currentBtn = 1; btnControl (2); // btn 3-functie btn3Clicked (e: MouseEvent) min = xml_length-9; max = xml_length-5; hideNshow (2, "easeInOutQuart", min, max); currentBtn = 2; btnControl (3);
Dit zijn de functies die gebeurtenislisteners voor knoppen oproepen.
btnControl geeft de parameter "btnNumber" door die wordt gebruikt in een switchinstructie om de eigenschappen van knoppen te wijzigen wanneer erop wordt geklikt of actief.
Stap 18: Event Luisteraars
// // timer timer.addEventListener (TimerEvent.TIMER, timerEvent); timer.start (); // knoppen btn1.addEventListener (MouseEvent.CLICK, btn1Clicked); // Luistert naar btn1 klik- en oproepfunctie btn2.addEventListener (MouseEvent.CLICK, btn2Clicked); // Luistert naar btn2 klik- en oproepfunctie btn3.addEventListener (MouseEvent.CLICK , btn3Clicked); // Luistert naar btn3 klik- en oproepfunctie //
Stap 19: Welke knop is actief?
// laat zien welke knop actief is als (currentBtn == 1) btnControl (1); // call btnControl-functie else if (currentBtn == 2) btnControl (2); // call btnControl-functie else if (currentBtn == 3) btnControl (3); //stop als
We gebruiken drie if () -instructies om te zien welke knop momenteel actief is.
Stap 20: oproepfuncties
// eindfunctie fData // eindfunctie ShowData showData (xml_length-3, xml_length + 1); // toon eerste resultaat // end xml Loaded-functie //--------------------------------------------------- // data_Loader.load (data_Req); data_Loader.addEventListener (Event.COMPLETE, xmlLoaded); //
Na afloop van de functie "ShowData" voeren we het uit met parameters (xml_length-3, xml_length + 1) om de eerste resultaten te zien wanneer we de applicatie uitvoeren. We voegen gebeurtenislistener toe aan data_loader dus wanneer het XML-bestand is geladen en klaar voor gebruik, noemen we de functie "xmlLoaded".
Conclusie
Je kunt de app naar eigen inzicht aanpassen, overgangstypes wijzigen, seconden timen of bijvoorbeeld recente berichten, nieuws, tweets enz. Tonen. Ik hoop dat je het leuk vond om mee te volgen!
Share
Accentsconagua
