Share
In questo tutorial imparerai come creare una lista a scorrimento attivata muovendo il mouse su e giù, con velocità diverse in base alla posizione del cursore. Tratterò anche la preparazione dei dati dell'elenco con PHP, il caricamento dei dati XML e una breve spiegazione dell'algoritmo che ho elaborato. Godere!
L'altro giorno, mentre stavo testando uno smart phone, ho visto uno di questi fantastici effetti di interpolazione per scroller. Così, ho iniziato a pensare a come avrei potuto ottenere un simile effetto in Flash, ho fatto delle ricerche sul web e onestamente non ho trovato esattamente quello che stavo cercando. Quindi ecco il risultato del mio piccolo incarico.
Dopo alcune ricerche ho trovato un buon algoritmo. Mette semplicemente in relazione il movimento del mouse con la percentuale dell'area visibile (in seguito, questa verrà identificata come la maschera) che viene effettivamente indicata. Successivamente, il contenitore viene spostato nella stessa proporzione.
Diciamo, ad esempio, che il mouse si trova vicino alla parte inferiore della parentesi graffa blu. In questo scenario il contenitore si sposta del 20% verso l'alto.
Come puoi vedere, funziona abbastanza bene. Quando il cursore del mouse raggiunge la parte superiore o inferiore dell'area visibile, abbiamo la certezza di aver raggiunto l'inizio o la fine dell'elenco. Questa tecnica è abbastanza semplice perché non dobbiamo preoccuparci che la lista raggiunga, ad esempio, l'inizio e il continuo movimento.
Ma ... E se avessimo centinaia di articoli della lista? Ora abbiamo un problema Se la nostra area visibile (maschera) ha, diciamo, 500 pixel di altezza e abbiamo un elenco di 100 elementi (tutta l'area del contenuto), ciascuno con un'altezza di 20 pixel, spostando il mouse 1/5 dell'area visibile (maschera) risulterebbe nella transizione di 20 elementi (400px / 20px) alla velocità della luce. Quindi immagino che questo approccio non risulterebbe molto bene.
Quindi, ho trovato questa soluzione:
Fondamentalmente, ho definito due zone: sotto e sopra il centro. Ogni zona ha un valore associato. Questo valore viene calcolato in base alla distanza tra il cursore del mouse e il centro. Quindi, se effettivamente associamo questo valore con una variabile, potremmo cambiare la velocità in base alla posizione del mouse. Il segno meno è solo per decidere la direzione del movimento.
Detto questo, prendiamo del vero contenuto.
Utilizzeremo un file xml esterno per alimentare l'applicazione perché:
Quindi, abbiamo bisogno di una grande lista di articoli ... Che dire dell'elenco di paesi in tutto il mondo?
(Questo passaggio è una specie di argomento in più perché userò un altro linguaggio per aiutarmi con la preparazione del file xml. Quindi, se questo non è di vostro interesse, non preoccupatevi, questo sarà nei file di download)
Ho appena cercato su Google [elenco dei paesi del mondo] e nel primo risultato ho ottenuto questo elenco:
(fonte: http://www.listofcountriesoftheworld.com)
Copia tutto in un file di testo e salvalo. L'ho chiamato countries.txt.
Lo script qui sotto è scritto in PHP. Avrai bisogno di un server web per eseguirlo. Sto usando wampserver, un bel pacchetto che installa PHP, MySQL e Apache con un paio di clic.
Per utilizzare questo script, è necessario inizializzare il server Web ed eseguire lo script in una sottodirectory della directory \ www \. Un'ultima nota: lo script e il countries.txt devono essere nella stessa cartella.
'. "\ N"); fwrite ($ fp, ''. "\ N"); foreach ($ lines as $ line) $ line = rtrim ($ line, "\ r \ n"); $ modello = '/ \ d + \ s * /'; $ replacement = "; $ line = preg_replace ($ pattern, $ replacement, $ line); $ str =" \ t ". ' '); fclose ($ fp); ?>- '. $ line. '
'. "\ N"; fwrite ($ fp, $ str); fwrite ($ fp, '
L'output di questo script verrà salvato in un file con il nome data.xml. Se non capisci questo passaggio, non preoccuparti perché puoi scaricarlo da qui.
Se guardi la demo, noterai che la nostra applicazione ha un'interfaccia, pulsanti e così via. Quindi iniziamo a mettere insieme tutti i grafici.
Apri Adobe Flash e crea un nuovo file ActionScript 3 con le seguenti impostazioni:
Salva il file. Ho chiamato il mio scroll.fla.
File> Importa> Importa nello stage e seleziona l'immagine background.jpg (tutte le immagini sono incluse in assets.zip, all'interno del download sorgente).
Adesso:
Finestra> allinea
Questo aprirà il pannello Allinea. Centra l'immagine sul palco, facendo clic sui pulsanti mostrati nell'immagine sottostante.
E ora dai al tuo livello il nome Sfondo (non dimenticare di bloccarlo):
Crea un nuovo livello e importa image pad.png. Il processo di importazione è esattamente lo stesso del passaggio precedente. Premi F8 per convertirlo in MovieClip e assegnagli il nome mcPad. Quindi fare clic sulla casella di controllo Esporta per ActionScript e, nel campo di input Classe, digitare il nome Pad.
Fondamentalmente stiamo definendo il pad MovieClip come sottoclasse della classe MovieClip stessa. Quindi siamo in grado di usarlo direttamente dal nostro codice e trattarlo come una normale MovieClip poiché eredita dalla classe MovieClip. Molto carino eh?
Ora, elimina questa istanza dallo stage, ma non dalla libreria (perché come ho detto lo useremo dal codice).
Importa l'elemento immagineBackground.jpg, premi F8 per convertirlo in MovieClip. Dagli il nome mcItem. Ancora una volta esporta per ActionScript e assegna un nome all'elemento della classe.
Ora il processo sarà leggermente diverso:
Infine, blocca il livello Sopra, torna alla timeline principale ed elimina l'istanza del clip filmato mcItem dallo stage.
Per questa applicazione sto usando il font Arial Rounded MT Bold Negrito (è un font gratuito, ho scaricato il mio da qui). Dato che non è un font di sistema, lo dovremo importare anche:
Nella linea temporale principale abbiamo solo bisogno del livello Sfondo, quindi puoi eliminare i livelli rimanenti.
Questo è tutto per lo strumento di authoring di Flash. Iniziamo la codifica.
Creare un nuovo file ActionScript, salvarlo come DocumentClass.as. Quindi, aggiungi questo codice:
package import flash.display.MovieClip; public class DocumentClass estende MovieClip private var _pad: MovieClip; funzione pubblica DocumentClass () _pad = new Pad (); addChild (_pad); _pad.x = stage.stageWidth / 2 - _pad.width / 2; _pad.y = stage.stageHeight / 2 - _pad.height / 2;
(Se non sei sicuro di cosa stiamo facendo qui, dai un'occhiata a questa breve introduzione alle classi di documenti.)
Ricorda il mdPad Un filmato? Ricorda che l'abbiamo esportato per ActionScript. Quindi, ogni volta che vogliamo creare un'istanza di questo MovieClip, dobbiamo solo digitare
nuovo Pad ();
Questo codice crea fondamentalmente un'istanza di mcPad MovieClip e lo aggiunge allo stage usando il metodo addChild (). Quindi ora, il _pad è sulla nostra DisplayList!
Poi l'ho centrato sul palco (verticalmente e orizzontalmente).
Prova l'applicazione e dovresti vedere il layout di sfondo sul flash player.
La nostra applicazione utilizzerà un contenitore per contenere tutti gli elementi. Quindi, creeremo una nuova Movie Clip in DocumentClass. Dichiara la proprietà:
private var _container: MovieClip;
All'interno del costruttore, alla fine:
_container = new MovieClip (); addChild (_container);
Aggiungi le seguenti istruzioni di importazione:
import flash.events.Event; import flash.net.URLRequest; import flash.net.URLLoader;
Dichiarare le seguenti proprietà:
var loader pubblico: URLLoader; dati var pubblici: XML; articoli var pubblici: XMLList;
Quindi implementare i seguenti metodi:
Accentsconagua
funzione privata dataLoad (): void loader = new URLLoader (); loader.addEventListener (Event.COMPLETE, dataLoaded); loader.load (new URLRequest ("data.xml")); private function dataLoaded (event: Event): void trace ("Dati caricati."); Infine aggiungi questa chiamata di metodo al costruttore:
dataLoad ();
Finora abbiamo:
package import flash.display.MovieClip; import flash.events.Event; import flash.net.URLRequest; import flash.net.URLLoader; public class DocumentClass estende MovieClip private var _pad: MovieClip; private var _container: MovieClip; var loader pubblico: URLLoader; funzione pubblica DocumentClass () _pad = new Pad (); addChild (_pad); _pad.x = stage.stageWidth / 2 - _pad.width / 2; _pad.y = stage.stageHeight / 2 - _pad.height / 2; _container = new MovieClip (); addChild (_container); dataLoad (); private function dataLoad (): void loader = new URLLoader (); loader.addEventListener (Event.COMPLETE, dataLoaded); loader.load (new URLRequest ("data.xml")); private function dataLoaded (event: Event): void trace (new XML (event.target.data.toString ())); Prova l'applicazione e dovresti vedere, nella console, tutti i dati xml. Andiamo avanti.
Aggiungi le seguenti istruzioni di importazione:
import flash.text.TextFormat; import flash.text.TextField; import flash.text.TextFieldAutoSize; import flash.text.Font;
Aggiungi queste nuove variabili:
dati var pubblici: XML; articoli var pubblici: XMLList; private var _item: Item; private var _itemTextField: TextField; private var _defaultFormat: TextFormat = new TextFormat (); private var _arialRounded: Font = new ArialRounded (); private var _textFieldXPosition: uint = 10; private var _textFieldYPosition: uint = 13; private var _textFieldWidth: uint = 240; private var _textFieldHeight: uint = 25; private var _itemPosition: uint = 49;
Aggiorna il metodo dataLoaded:
funzione privata dataLoaded (event: Event): void // questa proprietà contiene i dati xml caricati = nuovo XML (event.target.data); // la proprietà items contiene tutti gli elementi item ripetuti items = data.item; // questo itera su ogni oggetto per (var i = 0; i < items.length(); i++) // remember the mcItem? We are instantiating that MovieClip _item = new Item(); // sets the Over layer MovieClip's alpha to 0 _item.item_btn_over.alpha = 0; // creates the Item textfield _itemTextField = new TextField(); _itemTextField.x = _textFieldXPosition; _itemTextField.y = _textFieldYPosition; _itemTextField.selectable = false; _itemTextField.width = _textFieldWidth; _itemTextField.height = _textFieldHeight; _itemTextField.embedFonts = true; _defaultFormat.color = 0x111112; _defaultFormat.font = _arialRounded.fontName; _defaultFormat.size = 18; _itemTextField.defaultTextFormat = _defaultFormat; _itemTextField.text = items[i].toString(); // adds the textfield to the item's display list _item.addChild(_itemTextField); // positions each item vertically based on the iteration value _item.y = i * _itemPosition; _item.buttonMode = true; _item.mouseChildren = false; // adds the item to the container display list _container.addChild(_item);
Ora abbiamo creato i 200 pulsanti e li abbiamo messi sullo schermo. Se esegui l'applicazione, noterai che questa lista inizia da postion (0, 0) e riempie l'intera fase. Questo non è ciò che vogliamo, quindi gestiamolo nel prossimo passaggio.
Creiamo una forma per mascherare l'elenco in modo da vedere solo l'area visibile, come nella foto di prima:
Alla fine centreremo la maschera e il contenitore. Quindi, aggiungi un'altra dichiarazione di importazione:
import flash.display.Shape;
Proprietà:
private var _mask: Shape; private var _maskWidth: uint = 288; private var _maskHeight: uint = 290; private var _paddingTop: uint = 120;
E ... Nel metodo dataLoaded alla fine, aggiungi il seguente codice:
_mask = new Shape (); _mask.graphics.beginFill (0xFF0000); _mask.graphics.drawRect (0, 0, _maskWidth, _maskHeight); _mask.graphics.endFill (); // centra la maschera orizzontalmente sullo stage _mask.x = stage.stageWidth / 2 - _container.width / 2; // posiziona la maschera verticalmente a 120px dall'alto _mask.y = _paddingTop; addChild (_mask); // assegna la maschera al contenitore _container.mask = _mask; // centra orizzontalmente il contenitore sul palco _container.x = stage.stageWidth / 2 - _container.width / 2; // posiziona il contenitore verticalmente ad un determinato valore _container.y = _paddingTop;
Solo un piccolo miglioramento ... In questo momento il nostro contenitore ha un sacco di buchi perché c'è un margine tra ogni oggetto. Quindi diamo uno sfondo per evitare risultati indesiderati durante l'ascolto di eventi.
Proprietà:
private var _background: Shape;
Sempre nel metodo dataLoaded, sotto il codice esistente:
_background = new Shape (); _background.graphics.beginFill (0xFFFFFF); _background.graphics.drawRect (0, 0, _container.width, _container.height); _background.graphics.endFill (); _container.addChildAt (_background, 0);
Come probabilmente sai, gli ascoltatori ascoltano gli eventi. Qui ne useremo uno per l'evento MouseOver e un altro per l'evento MouseOut.
Aggiungi questo alla fine del metodo dataLoaded:
_container.addEventListener (MouseEvent.MOUSE_OVER, movingOver); _container.addEventListener (MouseEvent.MOUSE_OUT, movingOut);
Ora implementiamo i metodi movingOver e movingOut:
funzione privata movingOver (event: MouseEvent): void _container.removeEventListener (MouseEvent.MOUSE_OVER, movingOver); funzione privata movingOut (event: MouseEvent): void _container.addEventListener (MouseEvent.MOUSE_OVER, movingOver);
Ora possiamo ascoltare gli eventi, in particolare MOUSE_OVER e MOUSE_OUT. Gli eventi sono come messaggi che notificano qualsiasi oggetto in attesa dello stesso evento. Il "messaggio" trasmette semplicemente che l'evento si è verificato. In questo caso il _contenitore l'oggetto ascolterà gli eventi MouseOver e MouseOut. Quando hanno luogo il _contenitore ha la capacità di rispondere di conseguenza.
Quindi, per prima cosa assegniamo gli ascoltatori dell'evento a _contenitore oggetto e poi, in seguito, se il _contenitore viene passato sopra il listener di MouseOver rimosso. Al contrario, quando il mouse è fuori dal _contenitore oggetto il mouse sull'ascoltatore viene nuovamente assegnato al _contenitore.
Il flusso di eventi è un potente meccanismo che consente al programmatore di gestire diversi oggetti con un solo listener di eventi. Quindi, come probabilmente immagini, _container.addEventListener "ascolterà" gli eventi che riguardano il contenitore, gli oggetti e la forma dello sfondo, cioè il contenitore e tutto ciò che contiene. Puoi confermare questo aggiungendo il seguente codice in movingOver e movingOut metodi:
trace (event.target);
Questo traccerà l'oggetto che ha inviato l'evento.
Quando ascoltiamo questo evento possiamo definire un comportamento che avverrà ogni fotogramma, nel nostro caso 63 volte al secondo. Ecco perché l'evento OnEnterFrame è molto utile per le animazioni basate su fps. Avremo bisogno di questo per spostare la nostra pergamena, quindi movingOver e movingOut i metodi dovrebbero assomigliare a questo:
funzione privata movingOver (event: MouseEvent): void _container.removeEventListener (MouseEvent.MOUSE_OVER, movingOver); addEventListener (Event.ENTER_FRAME, enterFrame); funzione privata movingOut (event: MouseEvent): void removeEventListener (Event.ENTER_FRAME, enterFrame); _container.addEventListener (MouseEvent.MOUSE_OVER, movingOver);
Aggiungi queste proprietà:
private var _maxSpeed: uint = 15; private var _speed: Number;
Aggiungere il seguente metodo alla fine del codice (sotto il movingOut metodo) . Questo verrà eseguito su ogni frame, grazie al listener di eventi EnterFrame creato in precedenza. Spiegherò che cosa fa questo codice qui sotto.
function enterFrame (event: Event): void _speed = (_mask.height / 2 - _mask.mouseY) / (masch.height / 2) * _maxSpeed; _container.y + = _speed; if (_container.y> = _paddingTop) removeEventListener (Event.ENTER_FRAME, enterFrame); _container.y = _paddingTop; if (_container.y <= _mask.height - _container.height + _paddingTop) removeEventListener(Event.ENTER_FRAME, enterFrame); _container.y = _mask.height - _container.height + _paddingTop;
Ed ecco la logica dello scroller:
_speed = (_mask.height / 2 - _mask.mouseY) / (masch.height / 2) * _maxSpeed;
Questa linea di codice ottiene la velocità dividendo metà dell'altezza del palco con la posizione del mouse Y..
Diciamo che metà dello stage è 200 px e il cursore del mouse è in posizione 300 px. Applicando la formula otteniamo:
(200 - 300) / 200 * 15 (_massima velocità proprietà) = -7.5 che è negativo, quindi la lista ci darà un movimento verso il basso. Questo è esattamente quello che stiamo cercando. Se il cursore del mouse fosse sopra il centro avremmo un valore positivo e la lista si alzerebbe.
Successivamente, con questa affermazione:
_container.y + = _speed;
Stiamo assegnando la velocità effettiva, ogni frame (63 volte al secondo) al _container.y posizione. Quindi controlliamo con le affermazioni if se la posizione y del container è dove dovrebbe essere. Ricorda questa immagine:
Userò la TweenMax Library di greensock (puoi scaricarla da qui) per animare a ogni pulsante on e off (quando il mouse passa sopra o esce dall'elemento).
Aggiungi questa dichiarazione di importazione:
import gs. *;
Aggiorna il movingOver e movingOut metodi:
funzione privata movingOver (event: MouseEvent): void _container.removeEventListener (MouseEvent.MOUSE_OVER, movingOver); addEventListener (Event.ENTER_FRAME, enterFrame); if (event.target è Item) TweenMax.to (Item (event.target) .item_btn_over, .2, alpha: 1); funzione privata movingOut (event: MouseEvent): void removeEventListener (Event.ENTER_FRAME, enterFrame); _container.addEventListener (MouseEvent.MOUSE_OVER, movingOver); if (event.target è Item) TweenMax.to (Item (event.target) .item_btn_over, .2, alpha: 0);
Analizziamo questo codice in dettaglio. Il event.target farà riferimento all'oggetto che invierà l'evento, in questo caso MouseOver o MouseOut. Questo oggetto potrebbe essere un _articolo, il _sfondo o il _contenitore ma ci interessa solo Articolo oggetti così specifichiamo:
if (event.target è Item)
Quindi, in tal caso, animeremo qualsiasi oggetto oggetto inviato dall'evento digitandolo Prodotto (event.target) .item_btn_over. Il item_btn_over è il nome dell'istanza di mcItemOver MovieClip che abbiamo creato nel passaggio 7. .2 è l'ora dell'animazione e nell'ultimo parametro specificiamo quale proprietà vogliamo animare (alpha).
In questo momento, la nostra applicazione funziona abbastanza bene. Tuttavia, abbiamo qualche codice ripetuto e un'applicazione molto centralizzata. Si noti che il dataloaded il metodo sta facendo quasi tutto.
Actionscript ha un eccellente supporto per la programmazione orientata agli oggetti. Potremmo usarlo per staccare il caricamento dei dati dalla logica dell'applicazione ecc.
C'è un bel modello di design chiamato Model View Controller che funziona molto bene con le interfacce utente. Questo schema separa fondamentalmente l'applicazione in tre livelli distinti. Il modello si occupa della logica aziendale, della gestione dei dati. Il controller tratta dell'interazione umana con l'applicazione. E infine la View si occupa dell'interfaccia visiva dell'applicazione.
In questo caso la nostra applicazione è troppo piccola per implementare questo modello. Quindi, adattiamo solo il Modello e una Vista / Controller vari alla nostra applicazione. Per prima cosa gestiamo un po 'di codice ripetuto.
Crea un nuovo file ActionScript e digita il seguente codice:
pacchetto com.tutsplus.active.util import flash.display. *; public class Align public static function centerInStage (stage: Stage, mc: DisplayObject): void mc.x = stage.stageWidth / 2 - mc.width / 2; mc.y = stage.stageHeight / 2 - mc.height / 2; public static function centerHorizontallyInStage (stage: Stage, mc: DisplayObject): void mc.x = stage.stageWidth / 2 - mc.width / 2; public static function centerVerticallyInStage (stage: Stage, mc: DisplayObject): void mc.y = stage.stageHeight / 2 - mc.height / 2;
Dobbiamo svolgere questo compito più volte. Così ho deciso di creare una classe che allinea qualsiasi oggetto di visualizzazione al palco ogni volta che lo chiamiamo. Per fare questo lavoro devi creare una struttura di directory come questa:
\ Com \ tutsplus \ attivo \ util \
nella tua directory di produzione o all'interno del tuo percorso di classe. Successivamente, nella DocumentClass refactored vedrai come usare questa classe.
Il modello gestisce il comportamento e i dati del dominio dell'applicazione, risponde alle richieste di informazioni sul suo stato (di solito dalla vista) e risponde alle istruzioni per cambiare stato (di solito dal controller)
fonte: MSDN.
Caricare i dati e archiviarli in strutture di dati sono operazioni utili per comporre il nostro modello. Crea un nuovo file ActionScript e chiamalo ScrollModel.as:
package import flash.events.Event; import flash.net.URLRequest; import flash.net.URLLoader; import flash.events.EventDispatcher; class ScrollModel estende EventDispatcher public var loader: URLLoader; dati var pubblici: XML; articoli var pubblici: XMLList; public static const MODEL_UPDATE: String = "modelChange"; funzione pubblica ScrollModel () loader = new URLLoader (); loader.addEventListener (Event.COMPLETE, dataLoaded); public function load (req: URLRequest): void loader.load (req); private function dataLoaded (event: Event): void data = new XML (event.target.data); items = data.item; dispatchEvent (new Event (ScrollModel.MODEL_UPDATE));
Con questo aggiornamento, il nostro dataloaded il metodo ha solo 3 linee di codice ora!
È quasi lo stesso codice che abbiamo usato in DocumentClass per caricare i dati, con una sola differenza:
dispatchEvent (new Event (ScrollModel.MODEL_UPDATE));
Dopo aver assegnato i nostri oltre 200 articoli alla proprietà XMLList, questa riga di codice invia un evento a chiunque stia ascoltando. In pratica dovremo sapere quando questo si verifica per utilizzare questi dati in un'altra classe.
Crea un nuovo file Actionscript e chiamalo ScrollBox.as:
pacchetto import flash.display.Sprite; import flash.display.Stage; import flash.events.Event; import flash.events.MouseEvent; import flash.display.Shape; import flash.text.TextFormat; import flash.text.TextField; import flash.text.TextFieldAutoSize; import flash.text.Font; import gs. *; import com.tutsplus.active.util.Align; ScrollBox di classe pubblica estende Sprite private var _container: Sprite; private var _item: Item; private var _itemTextField: TextField; private var _defaultFormat: TextFormat = new TextFormat (); private var _arialRounded: Font = new ArialRounded (); private var _textFieldXPosition: uint = 10; private var _textFieldYPosition: uint = 13; private var _textFieldWidth: uint = 240; private var _textFieldHeight: uint = 25; private var _itemPosition: uint = 49; private var _mask: Shape; private var _maskWidth: uint = 288; private var _maskHeight: uint = 290; private var _paddingTop: uint = 120; private var _background: Shape; private var _maxSpeed: uint = 15; private var _speed: Number; private var _items: XMLList; private var _stage: Stage; public var scrollModel: ScrollModel; funzione pubblica ScrollBox (stage: Stage, m: ScrollModel) this.scrollModel = m; this._stage = stage; scrollModel.addEventListener (ScrollModel.MODEL_UPDATE, createRollingScroller); funzione privata createRollingScroller (event: Event = null): void _container = new Sprite (); _stage.addChild (_container); _items = scrollModel.items; per (var i = 0; i < _items.length(); i++) _item = new Item(); _item.item_btn_over.alpha = 0; _itemTextField = new TextField(); _itemTextField.x = _textFieldXPosition; _itemTextField.y = _textFieldYPosition; _itemTextField.selectable = false; _itemTextField.width = _textFieldWidth; _itemTextField.height = _textFieldHeight; _itemTextField.embedFonts = true; _defaultFormat.color = 0x111112; _defaultFormat.font = _arialRounded.fontName; _defaultFormat.size = 18; _itemTextField.defaultTextFormat = _defaultFormat; _itemTextField.text = _items[i].toString(); _item.addChild(_itemTextField); _item.y = i * _itemPosition; _item.buttonMode = true; _item.mouseChildren = false; _container.addChild(_item); _background = new Shape(); _background.graphics.beginFill(0xFFFFFF); _background.graphics.drawRect(0, 0, _container.width, _container.height); _background.graphics.endFill(); _container.addChildAt(_background, 0); _mask = new Shape(); _mask.graphics.beginFill(0xFF0000); _mask.graphics.drawRect(0, 0, _maskWidth, _maskHeight); _mask.graphics.endFill(); Align.centerHorizontallyInStage(_stage, _mask); _mask.y = _paddingTop; addChild(_mask); _container.mask = _mask; Align.centerHorizontallyInStage(_stage, _container); _container.y = _paddingTop; _container.addEventListener(MouseEvent.MOUSE_OVER, movingOver); _container.addEventListener(MouseEvent.MOUSE_OUT, movingOut); private function movingOver (event:MouseEvent):void _container.removeEventListener(MouseEvent.MOUSE_OVER, movingOver); addEventListener(Event.ENTER_FRAME, enterFrame); if (event.target is Item) TweenMax.to(Item(event.target).item_btn_over, .2, alpha:1); private function movingOut (event:MouseEvent):void removeEventListener(Event.ENTER_FRAME, enterFrame); _container.addEventListener(MouseEvent.MOUSE_OVER, movingOver); if (event.target is Item) TweenMax.to(Item(event.target).item_btn_over, .2, alpha:0); function enterFrame(event:Event):void _speed = (_mask.height / 2 - _mask.mouseY) / (_mask.height / 2) * _maxSpeed; _container.y += _speed; if (_container.y >= _paddingTop) removeEventListener (Event.ENTER_FRAME, enterFrame); _container.y = _paddingTop; if (_container.y <= _mask.height - _container.height + _paddingTop) removeEventListener(Event.ENTER_FRAME, enterFrame); _container.y = _mask.height - _container.height + _paddingTop;
Nota i metodi di allineamento della classe che stiamo utilizzando:
Align.centerHorizontallyInStage (_stage, _mask); Align.centerHorizontallyInStage (_stage, _container);
Ora dobbiamo solo usare il metodo Align.centerHorizontallyInStage () per allineare qualsiasi oggetto di visualizzazione orizzontalmente.
Il createRollingScroller il metodo inizierà solo quando finiremo di memorizzare tutti i dati nel articoli: XMLList proprietà.
Cambia il DocumentClass:
package import flash.display.MovieClip; import flash.display.Sprite; import flash.events.Event; import flash.net.URLRequest; import flash.net.URLLoader; import flash.events. *; import com.tutsplus.active.util.Align; public class DocumentClass estende MovieClip private var _pad: MovieClip; public var scrollModel: ScrollModel; public var scrollBox: ScrollBox; funzione pubblica DocumentClass () config (); scrollModel = new ScrollModel (); scrollModel.load (new URLRequest ("data.xml")); scrollBox = new ScrollBox (stage, scrollModel); private function config (): void _pad = new Pad (); addChild (_pad); Align.centerInStage (stage, _pad); Ancora una volta, nota come è facile centrare gli oggetti display sul palco con Align.centerInStage () metodo:
Align.centerInStage (stage, _pad);
Questo è tutto per ora ragazzi! Ho trattato alcuni argomenti di Actionscript 3 interessanti e spero che tu li abbia trovati utili. Perché non migliorare questa applicazione ad un livello successivo, ricofattando, aggiungendo funzionalità, ecc?
Grazie per il seguito. Stai attento!
