Crea una lista di prodotti caldi con la classe Tweener Caurina

In questo, il suo primo tut di Flashtuts +, Yanko ti porta a creare un elenco di prodotti "Hot" dinamici utilizzando i vecchi elementi preferiti di ActionScript 3.0 e XML. Inoltre aggiusta le cose utilizzando la classe Caurina Tweener. Godere…




Passaggio 1: Struttura del file

Inizieremo dando uno sguardo alla struttura dei file del nostro progetto. La cartella "caurina" è la cartella della classe Tweener. Puoi scaricare tweener da qui: Tweener. Nella cartella "img" memorizzeremo le nostre immagini che verranno utilizzate nell'applicazione.
Le immagini nel mio caso avranno dimensioni 60 px di larghezza e 55 px di altezza.

Passaggio 2: XML

Creiamo il file XML. Apri il tuo editor di testo e scrivi:

            

Salvalo come "data.xml" nella cartella "project".

Step 3: L'idea

L'idea è di passare i parametri alla funzione principale "showData". Questi parametri sono i valori "loopMin" e "loopMax" (vedere il codice) per un ciclo for (). Quindi filtreremo i risultati con un'istruzione if () e li mostreremo.

Passaggio 4: avvio

Crea un nuovo file Flash (ActionScript 3).

Imposta le dimensioni dello stage su 350x350 px

Passaggio 5: sfondo

Con lo strumento Rettangolo (R) traccia una forma con dimensioni 350x350 px, digita lineare e colori # d3d3d3, # f1f1f1. Utilizzare lo strumento Trasformazione sfumatura (F) per regolare la sfumatura.

Fai clic sulla forma, quindi apri la finestra di allineamento e assicurati che il pulsante "In scena" sia abilitato. Allinea la tua forma verticalmente e orizzontalmente.

Crea un nuovo livello, quindi con lo strumento rettangolo disegna una forma 350x40 px con il colore # 333333 e allineala al fondo.

Ora seleziona entrambe le forme e premi F8 o Modifica> Converti in simbolo, imposta il tipo su clip filmato e chiamalo "principale".

Passaggio 6: aggiunta di pulsanti

Fare doppio clic sul clip filmato per aprirlo, quindi rinominare il livello 1 su "sfondo" e bloccarlo. Crea un nuovo livello e chiamalo "btns". Seleziona lo strumento Ovale (O), quindi tieni premuto Maiusc e trascina un cerchio con il colore del tratto: # 0098FF e colore di riempimento: #FFFFFF dimensioni 20X20px. Fare clic sul tratto e modificare l'altezza del tratto su 3.

Seleziona la tua forma e premi F8 per convertirla in simbolo. Scegli il tipo "Button" e chiamalo "btn".

Fare doppio clic sul pulsante, quindi fare clic con il tasto destro sulla cornice "Sopra". Seleziona Inserisci fotogramma chiave.

Seleziona il colore di riempimento e cambialo in # d3d3d3.

Inserisci il fotogramma chiave nella cornice in basso e modifica il colore di riempimento in # 999999. Tornare al clip filmato "principale" e selezionare il pulsante. Cambia il nome dell'istanza in "btn1". Quindi trascina il pulsante in basso, trascina verso destra tenendo premuto "Alt" e rilascia per creare un secondo pulsante. Cambia il nome dell'istanza in "btn2".

Ripeti la procedura ancora una volta per aggiungere un terzo pulsante allo stage e cambia il nome dell'istanza in "btn3". Apri la finestra Align e disabilita il pulsante "To stage". Seleziona i tre pulsanti e allineali orizzontalmente e verticalmente. Abilita ancora "In scena" e allineali verticalmente.

Passaggio 7: Articoli

Crea un nuovo livello e chiamalo "oggetti". Disegna un rettangolo di colore 320x90px: digita: linear # D3D3D3, # BBBBBB. Ancora una volta, usa lo strumento di trasformazione del gradiente per regolare la sfumatura. Seleziona la forma e allinearla verticalmente allo stage. Premere F8, digitare: Clip filmato e denominarlo "elemento" - selezionare il centro in alto come punto di registrazione.

Fare doppio clic sulla voce del filmato. Li rinominano "livello 1" in "sfondo". Crea un nuovo livello e chiamalo "txt". Seleziona lo strumento testo (T) e imposta il tipo di testo su Testo dinamico. Quindi disegna un campo di testo, impostando il nome dell'istanza su "txt". Digita del testo e imposta queste proprietà:

Crea un nuovo livello e chiamalo "prezzo". Con lo strumento testo, traccia un altro campo di testo e imposta il nome dell'istanza su "prezzo". Imposta il colore del testo su: # 0099FF.

Ora faremo un nuovo pulsante ...

Crea un nuovo livello e chiamalo "btn_more". Ora disegna una forma con lo strumento rettangolo di 60x20px con il colore: # 666666. Selezionalo e premi F8. Scegli il tipo: Button e assegnagli un nome di "more". Inoltre, cambia il nome dell'istanza in "more". Apri il pulsante e aggiungi un nuovo livello, chiamalo testo. Seleziona lo strumento di testo e usalo per disegnare un campo di testo, digita: testo statico. Inserisci il testo "altro" nel campo, colore: #FFFFFF; dimensione: 12; formato: allinea il centro;.

Inserisci i fotogrammi chiave nei riquadri Su e Giù e cambia colore come preferisci. Io uso: oltre: # 999999; giù: # 333333;

Ritornare al clip filmato principale, selezionare l'elemento e modificare il nome dell'istanza in item1. Tenere premuto il tasto Alt, trascinare l'elemento in basso per aggiungere una copia allo stage. Denominare il nome dell'istanza del secondo elemento su "item2". Aggiungi un'altra copia e cambia il nome dell'istanza in "item3". Allinea gli oggetti e dovresti avere qualcosa del genere:

Passaggio 8: Maschera

Ora faremo una maschera per gli oggetti. Crea un nuovo livello, chiamalo "maschera" e disegnalo su un rettangolo 350x310px.

Fare clic con il tasto destro sul livello maschera, quindi selezionare maschera:

Crea un nuovo livello, chiamalo "azioni" e incolla il codice nel seguente passaggio.

Passaggio 9: Actionscript

Dai un'occhiata al codice completo:

 // import Tweener import caurina.transitions. *; // // var xmlPath: String = "data.xml"; // contiene il collegamento al file xml var data_xml: XML; // Oggetto XML var data_Req: URLRequest = new URLRequest (xmlPath); // URL Request var data_Loader: URLLoader = new URLLoader ( ) // Loader var xml_length: Number; // xml length // // var time: Number = 5000; // 5000 = 5 secondi var timer: Timer = new Timer (orario); // timer // // var imgPath: String; // percorso dell'immagine per il primo oggetto var imgPath2: String; // percorso dell'immagine per il secondo elemento var imgPath3: String; // percorso dell'immagine per il terzo elemento var item1Y: Number = item1.y; // item 1 y valore var item2Y: Number = item2.y; // item 2 y valore var item3Y: Number = item3.y; // item 3 y value // // var currentBtn: Number = 1; // che btn viene premuto var min: Number; // valore min utilizzato nella funzione hideNshow () var max: Number; // valore massimo utilizzato nella funzione hideNshow () // // //---------------------------------------------------- function xmlLoaded (event: Event): void // xml Loaded function data_xml = new XML (data_Loader.data); // get data XML file XML xml_length = data_xml.item.length (); // lunghezza xml min = xml_length- 6; // imposta il valore minimo sul secondo risultato max = xml_length-2; // imposta il valore massimo sulla seconda funzione showData (loopMin: Number, loopMax: Number) // Funzione principale var i: Number; // var for for loop var loopMaxResult = loopMax-2; // var per il terzo risultato var loopSecondResult = loopMax-3; // var per il secondo risultato per (i = loopMin; i imgPath = data_xml.item [i]. @ img; // get img url da xml var imgRequest: URLRequest = new URLRequest (imgPath); // URL richiesta var imgLoader: Loader = new Loader (); // image Loader imgLoader. carica (imgRequest); // carica l'immagine item1.addChild (imgLoader); // aggiungi la prima immagine all'elemento 1 imgLoader.x = -150; // immagine x valore imgLoader.y = 15; // immagine y valore //  // end if if (i == loopSecondResult) // second result fData (item2, i); // chiama fData function per riempire l'elemento 2 // imgPath2 = data_xml.item [i]. @ img; // get img url da xml var imgRequest2: URLRequest = new URLRequest (imgPath2); // URL richiesta var imgLoader2: Loader = new Loader (); // image Loader imgLoader2. carica (imgRequest2); // carica l'immagine item2.addChild (imgLoader2); // aggiungi la prima immagine all'elemento 2 imgLoader2.x = -150; // immagine x valore imgLoader2.y = 15; // immagine y valore //  // end if if (i == loopMaxResult) // terzo risultato fData (item3, i); // chiama la funzione fData per riempire l'elemento 3 // imgPath3 = data_xml.item [i]. @ img; // get img url da xml var imgRequest3: URLRequest = new URLRequest (imgPath3); // URL richiesta var imgLoader3: Loader = new Loader (); // image Loader imgLoader3. load (imgRequest3); // carica l'immagine item3.addChild (imgLoader3); // aggiungi la prima immagine all'elemento 3 imgLoader3.x = -150; // immagine x valore imgLoader3.y = 15; // immagine valore y //  // end if // end per function fData (item: MovieClip, iValue: int) // funzione che riempie i dati in items var moreURL: String; // url per button più item.txt.text = data_xml.item [iValue]. @ title; // inserisci il titolo dell'articolo item.price.text = data_xml.item [iValue]. @ price; // riempi il prezzo dell'articolo moreURL = data_xml.item [iValue]. @ link; // articolo di collegamento articolo .more.addEventListener (MouseEvent.CLICK, gotoURL); // listener di eventi per ulteriori funzioni btn gotoURL (e: MouseEvent): void // funzione click click var myURL: URLRequest = new URLRequest (moreURL); // richiesta URL navigateToURL (myURL); // vai all'elemento link // end function gotoURL // funzione per mostrare N nascondere gli elementi function hideNshow (effTime: Number, effTransition: String, iMin: Number, iMax: Number) // timer.stop (); // interrompe il timer Tweener.addTween (item3, y: 330, alpha: 0, time: effTime, transition: effTransition); // hide 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); // nasconde l'elemento 1, // quando viene eseguita la funzione function Show () // function Show () // mostra elementi // currentBtn + = 1; // aggiungi 1 al valore corrente di btn if (currentBtn == 4) // se il valore di CurrentBtn è uguale a 4 valore impostato a 1 perché abbiamo solo 3 btns currentBtn = 1; // lo imposta su 1 // termina se item1.removeChild (imgLoader); // rimuove l'immagine dall'elemento 1 item2.removeChild (imgLoader2); // rimuove l'immagine dall'elemento 2 item3.removeChild (imgLoader3); // rimuove l'immagine dall'elemento 3 showData (iMin, iMax); // chiama la funzione showData con i parametri iMin e iMax (valori di min e max vars) min- = 3; // diminuisce il valore minimo per mostrare i successivi 3 risultati da xml max- = 3; // diminuisce il valore massimo per mostrare i prossimi 3 risultati da xml if (max == xml_length-8) // se valore massimo min = xml_length-3; // imposta il valore minimo per mostrare il primo risultato max = xml_length + 1; // imposta il valore massimo per mostrare primo risultato // end se Tweener.addTween (item3, y: item3Y, alpha: 1, time: 2, delay: 0.6, transition: "easeOutExpo"); // mostra item3 Tweener.addTween (item2, y : item2Y, alpha: 1, time: 2, delay: 0.3, transition: "easeOutExpo"); // mostra item2 Tweener.addTween (item1, y: item1Y, alpha: 1, time: 2, transitio n: "easeOutExpo"); // mostra item1 timer.start (); //  // end function Show // end function hideNshow function timerEvent () // funzione per l'evento timer hideNshow (2, "easeInOutQuart", min, max); // chiama la funzione hideNshow // btn 1 funzione function btn1Clicked ( e: MouseEvent) min = xml_length-3; // imposta il valore minimo max = xml_length + 1; // imposta il valore massimo hideNshow (2, "easeInOutQuart", min, max); // chiama la funzione hideNshow currentBtn = 0; / / imposta surren Btn btnControl (1); // chiama funzione btnControl // btn 2 funzione funzione btn2Clicked (e: MouseEvent) min = xml_length-6; max = xml_length-2; hideNshow (2, "easeInOutQuart", min, max); currentBtn = 1; btnControl (2);  // btn 3 function function btn3Clicked (e: MouseEvent) min = xml_length-9; max = xml_length-5; hideNshow (2, "easeInOutQuart", min, max); currentBtn = 2; btnControl (3);  function btnControl (btnNumber: Number) // some case switch ... switch (btnNumber) case 1: // quando btn 1 è attivo btn1.alpha = 0.5; // imposta alpha btn1.mouseEnabled = false; // disabilita il pulsante Tweener.addTween (btn1, width: 30, height: 30, time: 2, transition: "easeOutExpo"); // cambia btn width e height btn2.alpha = 1; // set alpha btn2.mouseEnabled = true; // enable btn Tweener.addTween (btn2, width: 20, height: 20, time: 2, transition: "easeOutExpo"); // cambia btn width e height btn3.alpha = 1; // imposta alpha btn3. mouseEnabled = true; // enable btn Tweener.addTween (btn3, width: 20, height: 20, time: 2, transition: "easeOutExpo"); // cambia btn width e height break; caso 2: // quando btn 2 è attivo btn1.alpha = 1; // imposta alpha btn1.mouseEnabled = true; // enable btn Tweener.addTween (btn1, width: 20, height: 20, time: 2, transition : "easeOutExpo"); // cambia btn width e height btn2.alpha = 0.5; // imposta alpha btn2.mouseEnabled = false; // disabilita il pulsante Tweener.addTween (btn2, width: 30, height: 30, time : 2, transizione: "easeOutExpo"); // cambia btn larghezza e altezza btn3.alpha = 1; // imposta alpha btn3.mouseEnabled = true; // abilita btn Tweener.addTween (btn3, larghezza: 20, altezza : 20, time: 2, transition: "easeOutExpo"); // cambia btn width e height break; caso 3: // quando btn 3 è attivo btn1.alpha = 1; // imposta alpha btn1.mouseEnabled = true; // enable btn Tweener.addTween (btn1, width: 20, height: 20, time: 2, transition : "easeOutExpo"); // cambia btn width e height btn2.alpha = 1; // imposta alpha btn2.mouseEnabled = true; // abilita btn Tweener.addTween (btn2, width: 20, height: 20, time : 2, transizione: "easeOutExpo"); // cambia btn width e height btn3.alpha = 0.5; // imposta alpha btn3.mouseEnabled = false; // disabilita il pulsante Tweener.addTween (btn3, width: 30, height : 30, time: 2, transition: "easeOutExpo"); // cambia btn width e height break;  // end Switch // end function btnControl // // timer timer.addEventListener (TimerEvent.TIMER, timerEvent); timer.start (); // pulsanti btn1.addEventListener (MouseEvent.CLICK, btn1Clicked); // Ascolta btn1 funzione click e call btn2.addEventListener (MouseEvent.CLICK, btn2Clicked); // Ascolta btn2 click and call function btn3.addEventListener (MouseEvent.CLICK , btn3Clicked); // Ascolta la funzione click e call di btn3 // // mostra wich btns è attivo if (currentBtn == 1) btnControl (1); // chiama btnControl function else if (currentBtn == 2) btnControl (2); // chiama btnControl function else if (currentBtn == 3) btnControl (3);  // end if // end function fData // end function ShowData showData (xml_length-3, xml_length + 1); // mostra First Result // end xml Loaded function //--------------------------------------------------- // data_Loader.load (data_Req); data_Loader.addEventListener (Event.COMPLETE, xmlLoaded); //

Passaggio 10: Vars

 // import Tweener import caurina.transitions. *; // // var xmlPath: String = "data.xml"; // contiene il collegamento al file xml var data_xml: XML; // Oggetto XML var data_Req: URLRequest = new URLRequest (xmlPath); // URL Request var data_Loader: URLLoader = new URLLoader ( ) // Loader var xml_length: Number; // xml length // // var time: Number = 5000; // 5000 = 5 secondi var timer: Timer = new Timer (orario); // timer // // var imgPath: String; // percorso dell'immagine per il primo oggetto var imgPath2: String; // percorso dell'immagine per il secondo elemento var imgPath3: String; // percorso dell'immagine per il terzo elemento var item1Y: Number = item1.y; // item 1 y valore var item2Y: Number = item2.y; // item 2 y valore var item3Y: Number = item3.y; // item 3 y value // // var currentBtn: Number = 1; // che btn viene premuto var min: Number; // valore min utilizzato nella funzione hideNshow () var max: Number; // valore massimo utilizzato nella funzione hideNshow () // //

Passaggio 11: xmlLoaded

 function xmlLoaded (event: Event): void // xml Loaded function data_xml = new XML (data_Loader.data); // get data XML file XML xml_length = data_xml.item.length (); // lunghezza xml min = xml_length- 6; // imposta il valore minimo sul secondo risultato max = xml_length-2; // imposta il valore massimo sul secondo valore

Quando viene caricato il file xml, un listener di eventi chiama la funzione xmlLoaded.

Passaggio 12: showData

 function showData (loopMin: Number, loopMax: Number) // Funzione principale var i: Number; // var for for loop var loopMaxResult = loopMax-2; // var per il terzo risultato var loopSecondResult = loopMax-3; // var per il secondo risultato per (i = loopMin; i imgPath = data_xml.item [i]. @ img; // get img url da xml var imgRequest: URLRequest = new URLRequest (imgPath); // URL richiesta var imgLoader: Loader = new Loader (); // image Loader imgLoader. carica (imgRequest); // carica l'immagine item1.addChild (imgLoader); // aggiungi la prima immagine all'elemento 1 imgLoader.x = -150; // immagine x valore imgLoader.y = 15; // immagine y valore //  // end if if (i == loopSecondResult) // second result fData (item2, i); // chiama fData function per riempire l'elemento 2 // imgPath2 = data_xml.item [i]. @ img; // get img url da xml var imgRequest2: URLRequest = new URLRequest (imgPath2); // URL richiesta var imgLoader2: Loader = new Loader (); // image Loader imgLoader2. carica (imgRequest2); // carica l'immagine item2.addChild (imgLoader2); // aggiungi la prima immagine all'elemento 2 imgLoader2.x = -150; // immagine x valore imgLoader2.y = 15; // immagine y valore //  // end if if (i == loopMaxResult) // terzo risultato fData (item3, i); // chiama la funzione fData per riempire l'elemento 3 // imgPath3 = data_xml.item [i]. @ img; // get img url da xml var imgRequest3: URLRequest = new URLRequest (imgPath3); // URL richiesta var imgLoader3: Loader = new Loader (); // image Loader imgLoader3. load (imgRequest3); // carica l'immagine item3.addChild (imgLoader3); // aggiungi la prima immagine all'elemento 3 imgLoader3.x = -150; // immagine x valore imgLoader3.y = 15; // immagine valore y //  // end if // end for

La funzione "showData" passa due parametri "loopMin" e "loopMax" questi sono i valori per il ciclo for (). "loopMaxResult" e "loopSecondResult" vengono utilizzati in un'istruzione if () per separare tre risultati. Se abbiamo un array con 3 elementi, il primo elemento sarà con il tasto [0] e l'ultimo con il tasto [2] (0,1,2). Per scorrere l'array con for () il nostro valore loopMin deve essere = 0 e il nostro loopMax = 4. Per sapere in quale oggetto dobbiamo inserire i dati che usiamo se (i == loopMin) questo mostrerà il primo risultato nel primo elemento, se (i == loopSecondResult) mostra il secondo risultato e se (i == loopMaxResult) il terzo risultato.

Passaggio 13: Funzione fData

 funzione fData (elemento: MovieClip, iValue: int) // funzione che riempie i dati in elementi var moreURL: String; // url per il pulsante più item.txt.text = data_xml.item [iValue]. @ title; // fill item title item.price.text = data_xml.item [iValue]. @ price; // fill price item moreURL = data_xml.item [iValue]. @ link; // articolo link item.more.addEventListener (MouseEvent.CLICK, gotoURL // listener di eventi per più funzioni btn gotoURL (e: MouseEvent): void // funzione evento click // var myURL: URLRequest = new URLRequest (moreURL); // URL richiesta navigateToURL (myURL); // vai al collegamento articolo  // end function gotoURL

La funzione fData passa due parametri. Uno è il nome dell'istanza del clip filmato e il secondo valore. Qui aggiungiamo i dati dal documento xml ai nostri filmati e rendiamo anche il pulsante "more" collegamenti aperti da xml.

Passaggio 14: hideNshow

 // function for show N nascondi la funzione items hideNshow (effTime: Number, effTransition: String, iMin: Number, iMax: Number) // timer.stop (); // interrompe il timer Tweener.addTween (item3, y: 330, alpha: 0, time: effTime, transition: effTransition); // hide 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); // nasconde l'elemento 1, // quando viene eseguita la funzione function Show () // function Show () // mostra elementi // currentBtn + = 1; // aggiungi 1 al valore corrente di btn if (currentBtn == 4) // se il valore di CurrentBtn è uguale a 4 valore impostato a 1 perché abbiamo solo 3 btns currentBtn = 1; // lo imposta su 1 // termina se item1.removeChild (imgLoader); // rimuove l'immagine dall'elemento 1 item2.removeChild (imgLoader2); // rimuove l'immagine dall'elemento 2 item3.removeChild (imgLoader3); // rimuove l'immagine dall'elemento 3 showData (iMin, iMax); // chiama la funzione showData con i parametri iMin e iMax (valori di min e max vars) min- = 3; // diminuisce il valore minimo per mostrare i successivi 3 risultati da xml max- = 3; // diminuisce il valore massimo per mostrare i prossimi 3 risultati da xml if (max == xml_length-8) // se valore massimo min = xml_length-3; // imposta il valore minimo per mostrare il primo risultato max = xml_length + 1; // imposta il valore massimo per mostrare primo risultato // end se Tweener.addTween (item3, y: item3Y, alpha: 1, time: 2, delay: 0.6, transition: "easeOutExpo"); // mostra item3 Tweener.addTween (item2, y : item2Y, alpha: 1, time: 2, delay: 0.3, transition: "easeOutExpo"); // mostra item2 Tweener.addTween (item1, y: item1Y, alpha: 1, time: 2, transitio n: "easeOutExpo"); // mostra item1 timer.start (); //  // end function Show // end function hideNshow

La funzione hideNshow passa 4 parametri.

  1. effTime: il tempo in secondi che viene utilizzato nell'animazione tweener
  2. effeffTransition - tipo di transizione tweener
  3. iMin - var valore min
  4. iMax - var valore massimo

Quando l'animazione item1 è completata, tweener chiama la funzione "Mostra" (che riporta gli elementi indietro ma rimuove le immagini da ciascuno) e avvia la funzione "showData" per riempirli con i risultati successivi dal nostro file xml. Inoltre, il valore di currentBtn è aumentato di uno. Infine, il timer è avviato.

Step 15: timeEvent

 function timerEvent () // function per l'evento timer hideNshow (2, "easeInOutQuart", min, max); // chiama function hideNshow

Questa funzione viene chiamata quando il timer esegue il conto alla rovescia per 5 secondi.

Passaggio 16: funzioni dei pulsanti

 // btn 1 funzione funzione btn1Clicked (e: MouseEvent) min = xml_length-3; // imposta valore min max = xml_length + 1; // imposta valore max hideNshow (2, "easeInOutQuart", min, max); // funzione call hideNshow currentBtn = 0; // imposta surren Btn btnControl (1); // chiama funzione btnControl // btn 2 funzione funzione btn2Clicked (e: MouseEvent) min = xml_length-6; max = xml_length-2; hideNshow (2, "easeInOutQuart", min, max); currentBtn = 1; btnControl (2);  // btn 3 function function btn3Clicked (e: MouseEvent) min = xml_length-9; max = xml_length-5; hideNshow (2, "easeInOutQuart", min, max); currentBtn = 2; btnControl (3); 

Queste sono le funzioni che gli ascoltatori di eventi chiamano per i pulsanti.

Passaggio 17: funzione btnControl

 function btnControl (btnNumber: Number) // some case switch ... switch (btnNumber) caso 1: // quando btn 1 è attivo btn1.alpha = 0.5; // imposta alpha btn1.mouseEnabled = false; // disabilita il pulsante Tweener .addTween (btn1, width: 30, height: 30, time: 2, transition: "easeOutExpo"); // cambia btn width e height btn2.alpha = 1; // imposta alpha btn2.mouseEnabled = true; / / enable btn Tweener.addTween (btn2, width: 20, height: 20, time: 2, transition: "easeOutExpo"); // cambia btn width e height btn3.alpha = 1; // imposta alpha btn3.mouseEnabled = true; // enable btn Tweener.addTween (btn3, width: 20, height: 20, time: 2, transition: "easeOutExpo"); // cambia btn width e height break; caso 2: // quando btn 2 è attivo btn1.alpha = 1; // imposta alpha btn1.mouseEnabled = true; // enable btn Tweener.addTween (btn1, width: 20, height: 20, time: 2, transition : "easeOutExpo"); // cambia btn width e height btn2.alpha = 0.5; // imposta alpha btn2.mouseEnabled = false; // disabilita il pulsante Tweener.addTween (btn2, width: 30, height: 30, time : 2, transizione: "easeOutExpo"); // cambia btn larghezza e altezza btn3.alpha = 1; // imposta alpha btn3.mouseEnabled = true; // abilita btn Tweener.addTween (btn3, larghezza: 20, altezza : 20, time: 2, transition: "easeOutExpo"); // cambia btn width e height break; caso 3: // quando btn 3 è attivo btn1.alpha = 1; // imposta alpha btn1.mouseEnabled = true; // enable btn Tweener.addTween (btn1, width: 20, height: 20, time: 2, transition : "easeOutExpo"); // cambia btn width e height btn2.alpha = 1; // imposta alpha btn2.mouseEnabled = true; // abilita btn Tweener.addTween (btn2, width: 20, height: 20, time : 2, transizione: "easeOutExpo"); // cambia btn width e height btn3.alpha = 0.5; // imposta alpha btn3.mouseEnabled = false; // disabilita il pulsante Tweener.addTween (btn3, width: 30, height : 30, time: 2, transition: "easeOutExpo"); // cambia btn width e height break;  // end Switch // end function btnControl

btnControl passa un parametro "btnNumber" che viene utilizzato in un'istruzione switch per modificare le proprietà dei pulsanti quando vengono cliccati o attivi.

Passaggio 18: ascoltatori di eventi

 // // timer timer.addEventListener (TimerEvent.TIMER, timerEvent); timer.start (); // pulsanti btn1.addEventListener (MouseEvent.CLICK, btn1Clicked); // Ascolta btn1 funzione click e call btn2.addEventListener (MouseEvent.CLICK, btn2Clicked); // Ascolta btn2 click and call function btn3.addEventListener (MouseEvent.CLICK , btn3Clicked); // Ascolta la funzione click e call di btn3 //

Passaggio 19: quale pulsante è attivo?

 // mostra quale pulsante è attivo if (currentBtn == 1) btnControl (1); // chiama btnControl function else if (currentBtn == 2) btnControl (2); // chiama btnControl function else if (currentBtn == 3) btnControl (3); //finisci se

Utilizziamo tre istruzioni if ​​() per vedere quale pulsante è attualmente attivo.

Passaggio 20: chiamate le funzioni

  // end function fData // end function ShowData showData (xml_length-3, xml_length + 1); // mostra First Result // end xml Loaded function //--------------------------------------------------- // data_Loader.load (data_Req); data_Loader.addEventListener (Event.COMPLETE, xmlLoaded); //

Dopo la fine della funzione "ShowData" lo eseguiamo con parametri (xml_length-3, xml_length + 1) per vedere i primi risultati quando eseguiamo l'applicazione. Aggiungiamo listener di eventi a data_loader, quindi quando il file xml è caricato e pronto per l'uso, chiamiamo la funzione "xmlLoaded".

Conclusione

Puoi modificare l'app come preferisci, modificare i tipi di transizione, i secondi del timer o, ad esempio, farlo visualizzare per post recenti, notizie, tweet, ecc. Spero ti sia piaciuto seguirlo!