1. Location:
  2. / Computer learning >> Datamaskin læring >> Programvaren kunnskap >> Grafisk Programvare >> flash >>

Bygg en Jevn varme produkter List med Caurina Tweener Class

Build en Jevn varme produkter List med Caurina Tweener Class
Del
Del
Del
Share < .no> Dette Cyber ​​mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.

I denne, hans første tut på Flashtuts +, tar Yanko deg gjennom å bygge en dynamisk "Hot Products 'liste ved hjelp av gamle favoritter Actionscript 3.0 og XML. Han jevner også ut ting ved å utnytte Caurina Tweener klassen. Nyt ..



Trinn 1: filstruktur

Vi vil begynne med å ta en titt på filstrukturen på vårt prosjekt . Mappen "caurina" er den Tweener klasse mappen. Du kan laste ned tweener herfra: Tweener. I mappen "img" vi vil lagre våre bilder som skal brukes i programmet
Bildene i mitt tilfelle vil ha dimensjoner 60px bred og 55 x høy

Trinn 2:.. XML Anmeldelser

La oss lage XML-filen. Åpne din tekst editor og skrive:?
≪ xml version = "1.0" encoding = "utf-8" > < elementer > < element title = "Apple" pris = "$ 10" img = "img /apple.jpg "link =" http://www.google.com/"/> < element title =" Orange "pris =" $ 30 "img =" img /orange.jpg "link =" http: //cg.tutsplus.com/"/><item title = "Lemon" pris = "$ 5" img = "img /lemon.jpg" link = "http://ae.tutsplus.com/" /> < element title = "Banana" pris = "$ 100" img = "img /banana.jpg" link = "http://audio.tutsplus.com/" /> < element title = "Vann melon" pris = "$ 33" img = "img /water_melon.jpg" link = "http://vector.tutsplus.com/" /> < element title = "Lime" pris = "$ 21" img = "img /lime.jpg "link =" http://net.tutsplus.com/"/> < element title =" ananas "pris =" $ 20 "img =" img /pinapple.jpg "link =" http: //psd.tutsplus .com /"/> < element title =" Strawberry "pris =" $ 6 "img =" img /strawberry.jpg "link =" http://tutsplus.com/"/> < element title =" Druer "pris =" $ 15 "img =" img /grapes.jpg "link =" http://flash.tutsplus.com/"/> < /elementer >

Lagre det som" data.xml "i den "prosjektet" -mappen

Trinn 3:. The Idea

Tanken er å sende parametre til den viktigste funksjonen "showData". Disse parameterne er "loopMin" og "loopMax» (se koden) verdier for et for () løkke. Så får vi filtrere resultatene med en if () uttalelse og vise dem

Trinn 4:.. Starte

Opprett en ny Flash-fil (Actionscript 3)

Set scenen størrelse til 350x350px

Trinn 5: Bakgrunn

Med rektangelverktøyet (R) tegne en figur med dimensjoner 350x350px, type lineære og farger # d3d3d3, # f1f1f1. Bruk Gradient transform tool (F) for å justere gradient.

Klikk på formen deretter åpne justere vinduet og sørge for at "Å iscenesette" knappen er aktivert. Juster din form vertikalt og horisontalt.

Lag et nytt lag, og deretter med rektangel verktøyet tegne en figur 350x40px med farge # 333333 og justere den til bunns.

Nå velger både former og trykk F8 eller Modify > Konverter til symbol, angi typen til filmklipp og gi den navnet "main"

Trinn 6:. Legge Knapper

Dobbeltklikk på filmklipp å åpne den deretter endre navn på Layer 1 til "bakgrunns "og låse den. Lag et nytt lag og gi den navnet "btns". Velg Oval verktøyet (O) så hold shift og dra en sirkel med strek color: # 0098FF og fylle farge: #FFFFFF dimensjoner 20X20px. Klikk på hjerneslag og endre hjerneslag høyden til 3.

Velg form og trykke F8 for å konvertere den til symbol. Velg type "Button" og gi den navnet "btn".

Dobbeltklikk på knappen og høyreklikk på "Over" ramme. Velg Sett inn Keyframe.

Velg fyllfarge og endre den til # d3d3d3.

Sett inn Keyframe på Down rammen og endre fyllfargen til # 999999. Gå tilbake til "main" filmklipp og velg knappen. Endre eksempel navn til "btn1". Deretter drar du knappen til bunnen, dra til høyre mens du holder "Alt" og slipp for å opprette en ny knapp. Endre forekomst navn til «btn2".

Gjenta prosedyren en gang til for å legge til en tredje knapp for å iscenesette og endre forekomsten navn til "btn3". Åpne Align vinduet og deaktivere "Å iscenesette" -knappen. Velg de tre knappene og justere dem horisontalt og i høyden. Aktiver "Å iscenesette" igjen og justere dem vertikalt

Trinn 7:. Elementer

Lag et nytt lag og gi den navnet "elementer". Tegn et rektangel på det av 320x90px farge: Type: lineær # D3D3D3, # BBBBBB. Igjen, bruk gradient forvandle verktøy for å justere gradient. Velg form og juster den vertikalt til scenen. Trykk F8, type: Movie Clip og gi den navnet "element" - velg øverste midten som registreringspunkt

Dobbeltklikk på filmklippet elementet.. Dem nytt navn "lag 1" til "bakgrunn". Lag et nytt lag og gi den navnet "txt". Merk teksten verktøyet (T) og angi teksttypen til Dynamic Text. Deretter tegner et tekstfelt, sette forekomsten navn til "txt". Skriv inn tekst og sette disse egenskapene:

Opprett ny layer og kall den "pris". Med tekstverktøyet tegne et annet tekstfelt og sette eksempel navn til "pris". Sett tekstfarge til:. # 0099FF

Nå vi skal lage en ny knapp ..

Lag et nytt lag og gi den navnet "btn_more". Nå tegne en figur med rektangel verktøyet 60x20px med color: # 666666. Velg den og trykke F8. Velg Type: Knapp og tilordne det et navn på "mer". Også endre eksempel navn til "mer". Åpne knappen og legge til et nytt layer, kall det tekst. Velg tekst verktøyet og bruke den til å tegne et tekstfelt, type: statisk tekst. Skriv inn teksten "mer" inn i feltet, farge: #FFFFFF; størrelse: 12; format: justere sentrum;.

Sett nøkkelbilder i Over og Ned rammer, og skifter farge som du vil. Jeg bruker: over: # 999999; ned: # 333333;

Gå tilbake til hovedfilmklippet, velger du elementet og endre forekomst navn til item1. Hold Alt-tasten, dra elementet ned for å legge en kopi til scenen. Navngi andre elementet forekomst navn til «item2". Legg til en annen kopi og endre forekomsten navnet til "item3". Juster elementer, og du bør ha noe sånt som dette:

Trinn 8: Mask

Nå skal vi lage en maske for varene. Lag et nytt lag, kall den "maske" og på den tegne et rektangel 350x310px

Høyreklikk på maske laget, og velg deretter maske.

Gjør nytt lag, Name It "handlinger "og lim koden som ligger i følgende trinn

Trinn 9: Action

Ta en titt på den fullstendige koden..
//import Tweenerimport caurina.transitions *; //< vars > //< xml > Var XMLPATH: String = "data.xml"; //har link til xml filevar data_xml: XML; //XML Objectvar data_Req: URLRequest = new URLRequest (XMLPATH); //URL Requestvar data_Loader: URLLoader = new URLLoader (); //Loadervar xml_length: Number; //xml lengde //< /xml > //< tidsur > Var tid: Antall = 5000; //5000 = 5 secondsvar timer: Timer = new Timer (tid); //timer //< /timer > //< elementer > Var imgPath: String; //bilde bane for første itemvar imgPath2: String; //bildesti for andre itemvar imgPath3: String; //bilde banen for tredje itemvar item1Y: Number = item1.y; //punkt 1 y valuevar item2Y: Number = item2.y; //punkt 2 y valuevar item3Y: Number = item3.y; //punkt 3 y verdi //< /elementer > //< andre > Var currentBtn: Number = 1; //wich btn er pressedvar min: Number; //min verdien som brukes i funksjon hideNshow () Var max: Number; //max verdien som brukes i funksjon hideNshow()//</other>//</vars>//<functions>----------------------------------------------------function xmlLoaded (hendelse: Hendelse): void {//xml Lastet funksjon data_xml = new XML (data_Loader.data); //få data prom XML fil xml_length = data_xml.item.length (); //xml lengde min = xml_length-6; //satt min verdi til andre resultat max = xml_length-2; //satt max velue til andre resuld funksjon showData (loopMin: Antall, loopMax: Number) {//Main Funksjon Var jeg: Number; //Var for for loop Var loopMaxResult = loopMax-2; //Var for tredje resultat Var loopSecondResult = loopMax-3; //Var for andre resultat for (i = loopMin; i < loopMax; i ++) {//for loop hvis (i == loopMin) {//første resultatet punkt 1 fData (item1, i); //kaller fData funksjon å fylle punkt 1 //< laste bildet > imgPath = data_xml.item [i] @ img; //få img url fra xml Var imgRequest. URLRequest = new URLRequest (imgPath); //URL forespørsel Var imgLoader: Loader = new Loader (); //bilde Loader imgLoader. belastning (imgRequest); //laste bildet item1.addChild (imgLoader); //legge første bildet til punkt 1 imgLoader.x = -150; //image x-verdi imgLoader.y = 15; //bilde y verdi //< /load image > } //end if if (i == loopSecondResult) {//andre resultat fData (item2, i); //kaller fData funksjon å fylle punkt 2 //< laste bildet > imgPath2 = data_xml.item [i] @ img; //få img url fra xml Var imgRequest2. URLRequest = new URLRequest (imgPath2); //URL forespørsel Var imgLoader2: Loader = new Loader (); //bilde Loader imgLoader2. belastning (imgRequest2); //laste bildet item2.addChild (imgLoader2); //legge første bilde i punkt 2 imgLoader2.x = -150; //image x-verdi imgLoader2.y = 15; //bilde y verdi //< /load image > } //end if if (i == loopMaxResult) {//tredje resultat fData (item3, i); //kaller fData funksjon å fylle punkt 3 //< laste bildet > imgPath3 = data_xml.item [i] @ img; //få img url fra xml Var imgRequest3. URLRequest = new URLRequest (imgPath3); //URL forespørsel Var imgLoader3: Loader = new Loader (); //bilde Loader imgLoader3. belastning (imgRequest3); //laste bildet item3.addChild (imgLoader3); //legge første bildet til punkt 3 imgLoader3.x = -150; //image x-verdi imgLoader3.y = 15; //bilde y verdi //< /load image > } //end if} //end for funksjon fData (element: MovieClip, iValue: int) {//funksjon som fyller data inn elementer Var moreURL: String; //url for knappen mer item.txt.text = data_xml.item . [iValue] @ title; //fylle element tittelen item.price.text = data_xml.item [iValue] @ prisen;. //fylle vareprisen moreURL = data_xml.item [iValue] @ link;. //element lenken element .more.addEventListener (MouseEvent.CLICK, gotoURL); //arrangementet lytteren for mer btn funksjon gotoURL (e: MouseEvent): void {//klikkhendelsen funksjon Var myURL: URLRequest = new URLRequest (moreURL); //URL forespørsel navigateToURL (myURL); //gå til punkt link} //end funksjon gotoURL //funksjon for show N skjule elementer funksjon hideNshow (effTime: Antall, effTransition: String, Imin: Number, IMAX: Number) {//< skjule elementer > timer.stop (); //stoppe tidtakeren Tweener.addTween (item3, {y: 330, alpha: 0, tid: effTime, overgang: effTransition}); //hide punkt 3 Tweener.addTween (item2, {y: 247, alpha: 0, tid: effTime, delay: 0,3, overgang: effTransition}); //hide punkt 2 Tweener.addTween (item1, {y: 163, alpha: 0, tid: effTime, delay: 0,6, overgang: effTransition, onComplete: Show}); //skjul punkt 1, //når det gjøres samtalefunksjonen Show () //< /skjule elementer > funksjon Show () {//viser elementer //< vise elementer > currentBtn + = 1; //legger en til gjeldende btn verdi if (currentBtn == 4) {//hvis currentBtn verdi er lik fire sett verdien til 1 fordi vi har bare tre btns currentBtn = 1; //sette den til en} //slutt hvis item1.removeChild (imgLoader); //fjerne bildet fra punkt 1 item2.removeChild (imgLoader2); //fjerne bildet fra punkt 2 item3.removeChild (imgLoader3); //fjerne bildet fra punkt 3 showData (Imin, iMax); //samtalefunksjonen showData med parametre Imin og Imax (verdier av min og max vars) min.- = 3; //redusere min verdi å vise neste 3 resultater fra xml maks- = 3; //redusere max verdi vise neste 3 resultater fra xml if (maks == xml_length-8) {//hvis max verdi min = xml_length-3; //satt min verdi å vise første resultatet max = xml_length + 1; //satt maksimumsverdi for å vise første resultatet} //slutt hvis Tweener.addTween (item3, {y: item3Y, alfa: 1, tid: to, delay: 0,6, overgang: "easeOutExpo"}); //viser item3 Tweener.addTween (item2, {y : item2Y, alfa: 1, tid: to, delay: 0,3, overgang: "easeOutExpo"}); //viser item2 Tweener.addTween (item1, {y: item1Y, alfa: 1, tid: to, overgang: "easeOutExpo "}); //viser item1 timer.start (); //< /vise elementer > } //end funksjon Show} //end funksjon hideNshow funksjon Timerevent () {//funksjon for timer hendelsen hideNshow (2, "easeInOutQuart", min, maks); //samtalefunksjonen hideNshow} //btn en funksjon funksjon btn1Clicked ( e: MouseEvent) {min = xml_length-3; //satt min verdi max = xml_length + 1; //satt max verdi hideNshow (2, "easeInOutQuart", min, maks); //samtalefunksjonen hideNshow currentBtn = 0; //set surrent Btn btnControl (1); //samtalefunksjonen btnControl} //btn to funksjon funksjon btn2Clicked (e: MouseEvent) {min = xml_length-6; max = xml_length-2; hideNshow (2, "easeInOutQuart", min, maks); currentBtn = 1; btnControl (2); } //Btn 3 funksjon funksjon btn3Clicked (e: MouseEvent) {min = xml_length-9; max = xml_length-5; hideNshow (2, "easeInOutQuart", min, maks); currentBtn = 2; btnControl (3); } Funksjon btnControl (btnNumber: Number) {//noen tilfeller bryter ...... bryteren (btnNumber) {case 1: //når btn en er aktiv btn1.alpha = 0,5; //satt alpha btn1.mouseEnabled = false; //deaktiver knappen Tweener.addTween (btn1, {width: 30, høyde: 30: 2, overgang: "easeOutExpo"}); //endring btn bredde og høyde btn2.alpha = 1; //satt alpha btn2 .mouseEnabled = true; //aktivere btn Tweener.addTween (btn2, {width: 20, høyde: 20: 2, overgang: "easeOutExpo"}); //endring btn bredde og høyde btn3.alpha = 1; //sett alpha btn3.mouseEnabled = true; //aktivere btn Tweener.addTween (btn3, {width: 20, høyde: 20: 2, overgang: "easeOutExpo"}); //endring btn bredde og høyde break; case 2: //når btn 2 er aktiv btn1.alpha = 1; //satt alpha btn1.mouseEnabled = true; //aktivere btn Tweener.addTween (btn1, {width: 20, høyde: 20: 2, overgang : "easeOutExpo"}); //endring btn bredde og høyde btn2.alpha = 0,5; //satt alpha btn2.mouseEnabled = false; //deaktiver knappen Tweener.addTween (btn2, {width: 30, høyde: 30, tid : 2, overgang: "easeOutExpo"}); //endring btn bredde og høyde btn3.alpha = 1; //satt alpha btn3.mouseEnabled = true; //aktivere btn Tweener.addTween (btn3, {width: 20, høyde : 20: 2, overgang: "easeOutExpo"}); //endring btn bredde og høyde break; case 3: //når btn 3 er aktiv btn1.alpha = 1; //satt alpha btn1.mouseEnabled = true; //aktivere btn Tweener.addTween (btn1, {width: 20, høyde: 20: 2, overgang : "easeOutExpo"}); //endring btn bredde og høyde btn2.alpha = 1; //satt alpha btn2.mouseEnabled = true; //aktivere btn Tweener.addTween (btn2, {width: 20, høyde: 20, tid : 2, overgang: "easeOutExpo"}); //endring btn bredde og høyde btn3.alpha = 0,5; //satt alpha btn3.mouseEnabled = false; //deaktiver knappen Tweener.addTween (btn3, {width: 30, høyde : 30: 2, overgang: "easeOutExpo"}); //endring btn bredde og høyde break; } //end Switch} //end funksjon btnControl //< hendelsen lyttere > //timer timer.addEventListener (TimerEvent.TIMER, Timerevent); timer.start (); //knapper btn1.addEventListener (MouseEvent.CLICK, btn1Clicked); //lytter etter btn1 klikk og kaller funksjonen btn2.addEventListener (MouseEvent.CLICK, btn2Clicked); //Lytter for btn2 klikk og kaller funksjonen btn3.addEventListener (MouseEvent.CLICK , btn3Clicked); //Lytter for btn3 klikk og kaller funksjonen //< /event lyttere > //vise wich btns er aktiv if (currentBtn == 1) {btnControl (1); //kaller btnControl funksjon} else if (currentBtn == 2) {btnControl (2); //kaller btnControl funksjon} else if (currentBtn == 3) {btnControl (3); } //end if} //end funksjon fData} //end funksjon ShowData showData (xml_length-3, xml_length + 1); //viser første resultatet} //end xml Lastet funksjon //< /funksjoner > --- ------------------------------------------------ //< kalle funksjoner > data_Loader.load (data_Req); data_Loader.addEventListener (Event.COMPLETE, xmlLoaded); //< /samtalefunksjoner >
Trinn 10: Vars
//import Tweenerimport caurina.transitions *.; //< vars > //< xml > Var XMLPATH: String = "data.xml"; //har link til xml filevar data_xml: XML; //XML Objectvar data_Req: URLRequest = new URLRequest (XMLPATH); //URL Requestvar data_Loader: URLLoader = new URLLoader (); //Loadervar xml_length: Number; //xml lengde //< /xml > //< tidsur > Var tid: Antall = 5000; //5000 = 5 secondsvar timer : Timer = new Timer (tid); //timer //< /timer > //< elementer > Var imgPath: String; //bilde bane for første itemvar imgPath2: String; //bildesti for andre itemvar imgPath3: String; //bilde banen for tredje itemvar item1Y: Number = item1.y; //punkt 1 y valuevar item2Y: Number = item2.y; //punkt 2 y valuevar item3Y: Number = item3.y; //punkt 3 y verdi //< /elementer > //< andre > Var currentBtn: Number = 1; //wich btn er pressedvar min: Number; //min verdien som brukes i funksjon hideNshow () Var max: Number; //max verdi brukes i funksjon hideNshow () //< /annen > //< /vars >
Trinn 11: xmlLoaded
funksjon xmlLoaded (hendelse: Hendelse): void {//xml Lastet funksjon data_xml = new XML ( data_Loader.data); //få data prom XML fil xml_length = data_xml.item.length (); //xml lengde min = xml_length-6; //satt min verdi til andre resultat max = xml_length-2; //set max velue til andre resuld

Når xml filen er lastet, kaller en hendelse lytteren xmlLoaded funksjon

Trinn 12:. showData
funksjon showData (loopMin: Antall, loopMax: Number) {//Hoved Funksjon Var i: Number; //Var for for loop Var loopMaxResult = loopMax-2; //Var for tredje resultat Var loopSecondResult = loopMax-3; //Var for andre resultat for (i = loopMin; i < loopMax; i ++) {//for loop hvis (i == loopMin) {//første resultatet punkt 1 fData (item1, i); //kaller fData funksjon å fylle punkt 1 //< laste bildet > imgPath = data_xml.item [i] @ img; //få img url fra xml Var imgRequest. URLRequest = new URLRequest (imgPath); //URL forespørsel Var imgLoader: Loader = new Loader (); //bilde Loader imgLoader. belastning (imgRequest); //laste bildet item1.addChild (imgLoader); //legge første bildet til punkt 1 imgLoader.x = -150; //image x-verdi imgLoader.y = 15; //bilde y verdi //< /load image > } //end if if (i == loopSecondResult) {//andre resultat fData (item2, i); //kaller fData funksjon å fylle punkt 2 //< laste bildet > imgPath2 = data_xml.item [i] @ img; //få img url fra xml Var imgRequest2. URLRequest = new URLRequest (imgPath2); //URL forespørsel Var imgLoader2: Loader = new Loader (); //bilde Loader imgLoader2. belastning (imgRequest2); //laste bildet item2.addChild (imgLoader2); //legge første bilde i punkt 2 imgLoader2.x = -150; //image x-verdi imgLoader2.y = 15; //bilde y verdi //< /load image > } //end if if (i == loopMaxResult) {//tredje resultat fData (item3, i); //kaller fData funksjon å fylle punkt 3 //< laste bildet > imgPath3 = data_xml.item [i] @ img; //få img url fra xml Var imgRequest3. URLRequest = new URLRequest (imgPath3); //URL forespørsel Var imgLoader3: Loader = new Loader (); //bilde Loader imgLoader3. belastning (imgRequest3); //laste bildet item3.addChild (imgLoader3); //legge første bildet til punkt 3 imgLoader3.x = -150; //image x-verdi imgLoader3.y = 15; //bilde y verdi //< /load image > } //end if} //end for

Funksjonen "showData" passerer to parametre "loopMin" og "loopMax" dette er verdier for for () loop. "loopMaxResult" og "loopSecondResult" vi bruker i en if () uttalelse for å skille tre resultater. Hvis vi har en matrise med 3 elementer, vil det første elementet være med nøkkelen [0] og den siste med nøkkelen [2] (0,1,2). Å sløyfe gjennom rekke med for () vår loopMin Verdien må være = 0 og vår loopMax = 4. Å vite i hvilket element vi trenger å sette data vi bruke hvis (i == loopMin) dette vil vise den første resultat i det første elementet, hvis (i == loopSecondResult) viser andre resultat, og hvis (i == loopMaxResult) den tredje resultat

Trinn 13: Funksjon fData
funksjon fData (element: MovieClip, iValue: int) {//funksjon som fyller data inn elementer Var moreURL:. String; //url for knappen mer element. txt.text = data_xml.item [iValue] @ title;. //fylle element tittelen item.price.text = data_xml.item [iValue] @ prisen;.. //fylle vareprisen moreURL = data_xml.item [iValue] @ link; //element lenken item.more.addEventListener (MouseEvent.CLICK, gotoURL); //arrangementet lytteren for mer btn funksjon gotoURL (e: MouseEvent): void {//klikkhendelsen funksjon Var myURL: URLRequest = new URLRequest (moreURL ); //URL forespørsel navigateToURL (myURL); //gå til punkt link} //end funksjon gotoURL

Funksjon fData passerer to parametere. Den ene er filmklipp eksempel navnet og den andre er i verdi. Her legger vi data fra xml dokumentet til våre filmklipp og også gjøre på knappen "mer" åpne koblinger fra xml

Trinn 14:. HideNshow
//funksjon for show N skjule elementer funksjon hideNshow ( effTime: Antall, effTransition: String, Imin: Number, IMAX: Number) {//< skjule elementer > timer.stop (); //stoppe tidtakeren Tweener.addTween (item3, {y: 330, alpha: 0, tid: effTime, overgang: effTransition}); //hide punkt 3 Tweener.addTween (item2, {y: 247, alpha: 0, tid: effTime, delay: 0,3, overgang: effTransition}); //hide punkt 2 Tweener.addTween (item1, {y: 163, alpha: 0, tid: effTime, delay: 0,6, overgang: effTransition, onComplete: Show}); //skjul punkt 1, //når det gjøres samtalefunksjonen Show () //< /skjule elementer > funksjon Show () {//viser elementer //< vise elementer > currentBtn + = 1; //legger en til gjeldende btn verdi if (currentBtn == 4) {//hvis currentBtn verdi er lik fire sett verdien til 1 fordi vi har bare tre btns currentBtn = 1; //sette den til en} //slutt hvis item1.removeChild (imgLoader); //fjerne bildet fra punkt 1 item2.removeChild (imgLoader2); //fjerne bildet fra punkt 2 item3.removeChild (imgLoader3); //fjerne bildet fra punkt 3 showData (Imin, iMax); //samtalefunksjonen showData med parametre Imin og Imax (verdier av min og max vars) min.- = 3; //redusere min verdi å vise neste 3 resultater fra xml maks- = 3; //redusere max verdi vise neste 3 resultater fra xml if (maks == xml_length-8) {//hvis max verdi min = xml_length-3; //satt min verdi å vise første resultatet max = xml_length + 1; //satt maksimumsverdi for å vise første resultatet} //slutt hvis Tweener.addTween (item3, {y: item3Y, alfa: 1, tid: to, delay: 0,6, overgang: "easeOutExpo"}); //viser item3 Tweener.addTween (item2, {y : item2Y, alfa: 1, tid: to, delay: 0,3, overgang: "easeOutExpo"}); //viser item2 Tweener.addTween (item1, {y: item1Y, alfa: 1, tid: to, overgang: "easeOutExpo "}); //viser item1 timer.start (); //< /vise elementer > } //end funksjon Show} //end funksjon hideNshow

Funksjon hideNshow passerer 4 parametre


    effTime -. sekunder som brukes i tweener animasjon

    effeffTransition - typen av tweener overgang

    Imin - Var min verdi

    iMax - Var max verdi

    Når item1 animasjonen er ferdig tweener kaller funksjonen "Show" (som bringer varer tilbake, men fjerner bilder fra hver enkelt) og driver "showData" -funksjonen til å fylle dem med de neste resultatene fra vår xml fil. I tillegg er verdien av currentBtn økes med en. Endelig er timeren startes

    Trinn 15:. TimeEvent
    funksjon Timerevent () {//funksjon for timer hendelsen hideNshow (2, "easeInOutQuart", min, maks); //samtalefunksjonen hideNshow}

    Denne funksjonen kalles når tidtakeren teller ned 5 sekunder

    Trinn 16: Knapper funksjoner
    //btn en funksjon funksjon btn1Clicked (e: MouseEvent). {min = xml_length-3; //satt min verdi max = xml_length + 1; //satt max verdi hideNshow (2, "easeInOutQuart", min, maks); //samtalefunksjonen hideNshow currentBtn = 0; //satt surrent Btn btnControl (1); //samtalefunksjonen btnControl} //btn to funksjon funksjon btn2Clicked (e: MouseEvent) {min = xml_length-6; max = xml_length-2; hideNshow (2, "easeInOutQuart", min, maks); currentBtn = 1; btnControl (2); } //Btn 3 funksjon funksjon btn3Clicked (e: MouseEvent) {min = xml_length-9; max = xml_length-5; hideNshow (2, "easeInOutQuart", min, maks); currentBtn = 2; btnControl (3); }

    Dette er funksjoner som hendelsen lyttere for knapper kaller

    Trinn 17:. btnControl funksjon
    funksjon btnControl (btnNumber: Number) {//noen tilfeller bryter ...... bryteren ( btnNumber) {case 1: //når btn en er aktiv btn1.alpha = 0,5; //satt alpha btn1.mouseEnabled = false; //deaktiver knappen Tweener.addTween (btn1, {width: 30, høyde: 30, tid: 2 overgang,: "easeOutExpo"}); //endring btn bredde og høyde btn2.alpha = 1; //satt alpha btn2.mouseEnabled = true; //aktivere btn Tweener.addTween (btn2, {width: 20, høyde: 20: 2, overgang: "easeOutExpo"}); //endring btn bredde og høyde btn3.alpha = 1; //satt alpha btn3.mouseEnabled = true; //aktivere btn Tweener.addTween (btn3, {width: 20, høyde: 20: 2, overgang: "easeOutExpo"}); //endring btn bredde og høyde break; case 2: //når btn 2 er aktiv btn1.alpha = 1; //satt alpha btn1.mouseEnabled = true; //aktivere btn Tweener.addTween (btn1, {width: 20, høyde: 20: 2, overgang : "easeOutExpo"}); //endring btn bredde og høyde btn2.alpha = 0,5; //satt alpha btn2.mouseEnabled = false; //deaktiver knappen Tweener.addTween (btn2, {width: 30, høyde: 30, tid : 2, overgang: "easeOutExpo"}); //endring btn bredde og høyde btn3.alpha = 1; //satt alpha btn3.mouseEnabled = true; //aktivere btn Tweener.addTween (btn3, {width: 20, høyde : 20: 2, overgang: "easeOutExpo"}); //endring btn bredde og høyde break; case 3: //når btn 3 er aktiv btn1.alpha = 1; //satt alpha btn1.mouseEnabled = true; //aktivere btn Tweener.addTween (btn1, {width: 20, høyde: 20: 2, overgang : "easeOutExpo"}); //endring btn bredde og høyde btn2.alpha = 1; //satt alpha btn2.mouseEnabled = true; //aktivere btn Tweener.addTween (btn2, {width: 20, høyde: 20, tid : 2, overgang: "easeOutExpo"}); //endring btn bredde og høyde btn3.alpha = 0,5; //satt alpha btn3.mouseEnabled = false; //deaktiver knappen Tweener.addTween (btn3, {width: 30, høyde : 30: 2, overgang: "easeOutExpo"}); //endring btn bredde og høyde break; } //end Switch} //end funksjon btnControl

    btnControl passerer en parameter "btnNumber" som er brukt i en bryter uttalelse for å endre egenskapene til knappene når de er klikket eller aktiv.

    Trinn 18 : Arrangement Lyttere
    //< hendelsen lyttere > //timer timer.addEventListener (TimerEvent.TIMER, Timerevent); timer.start (); //knapper btn1.addEventListener (MouseEvent.CLICK, btn1Clicked); //lytter etter btn1 klikk og kaller funksjonen btn2.addEventListener (MouseEvent.CLICK, btn2Clicked); //Lytter for btn2 klikk og kaller funksjonen btn3.addEventListener (MouseEvent.CLICK , btn3Clicked); //Lytter for btn3 klikk og kaller funksjonen //< /hendelsen lyttere >
    Trinn 19: Hvilken Button er Aktiv
    //show som er aktiv if (currentBtn == 1) { btnControl (1); //kaller btnControl funksjon} else if (currentBtn == 2) {btnControl (2); //kaller btnControl funksjon} else if (currentBtn == 3) {btnControl (3); } //end if

    Vi bruker tre hvis () uttalelser for å se hvilken knapp er aktive

    Trinn 20:. Ring funksjoner
    } //end funksjon fData} //end funksjon ShowData showData (xml_length-3, xml_length + 1); //viser første resultatet} //end xml Lastet funksjon //< /funksjoner > --------------------- ------------------------------ //< kalle funksjoner > data_Loader.load (data_Req); data_Loader.addEventListener (Event. KOMPLETT, xmlLoaded); //< /samtalefunksjoner >

    Etter utløpet av funksjonen "ShowData" vi kjøre det med parametre (xml_length-3, xml_length + 1) for å se de første resultatene når vi kjører programmet. Vi legger hendelsen lytteren til data_loader så når xml filen er lastet og klar til bruk vi kaller "xmlLoaded" -funksjonen.

    Konklusjon

    Du kan endre app som du liker, endre overgangstyper , timer sekunder eller for eksempel gjør det for å vise de siste innleggene, nyheter, tweets osv Jeg håper du likte å følge med! Anmeldelser