Share
În acest tutorial veți învăța cum să faceți o listă de derulare activată de mișcările mouse-ului în sus și în jos, cu viteze diferite bazate pe poziția cursorului. Voi acoperi, de asemenea, pregătirea datelor din listă cu PHP, încărcarea datelor XML și o scurtă explicație a algoritmului cu care am venit. se bucura!
În ziua următoare, când testaam un telefon inteligent, am văzut unul dintre aceste efecte de răsturnare a scroller-ului. Deci, m-am gândit cum aș putea realiza un astfel de efect în Flash, am făcut niște cercetări pe internet și sincer nu am găsit exact ceea ce căutam. Deci aici este rezultatul misiunii mele.
După unele cercetări am găsit un algoritm plăcut. Pur și simplu se referă la mișcarea mouse-ului cu procentul din zona vizibilă (mai târziu, aceasta va fi identificată ca masca) care este de fapt indicată. Ulterior, containerul este mutat în aceeași proporție.
Să spunem, de exemplu, că mouse-ul este aproape de partea inferioară a brațului albastru creț. În acest scenariu, containerul ar deplasa cu 20% în partea de sus.
După cum puteți vedea acest lucru funcționează destul de bine. Când cursorul mouse-ului ajunge în partea de sus sau în partea inferioară a zonei vizibile, avem siguranța că am ajuns la începutul sau la sfârșitul listei. Această tehnică este destul de simplă, deoarece nu trebuie să ne facem griji că lista ajunge, de exemplu, la începutul și continuarea mișcării.
Dar ... Dacă avem sute de articole din listă? Acum avem o problemă. Dacă suprafața vizibilă (masca) are, să zicem, 500 de pixeli înălțime și avem o listă cu 100 de elemente (toată zona de conținut), fiecare cu o înălțime de 20 pixeli, deplasând mouse-ul 1/5 din zona vizibilă (masca) ar duce la trecerea a 20 de elemente (400px / 20px) la viteza luminii. Deci, cred că această abordare nu ar rezulta foarte bine.
Deci, am venit cu această soluție:
Practic, am definit două zone - deasupra și deasupra centrului. Fiecare zonă are o valoare asociată. Această valoare se calculează pe baza distanței dintre cursorul mouse-ului și centrul. Dacă, de fapt, asociem această valoare cu o variabilă, putem schimba viteza bazată pe poziția mouse-ului. Semnul minus este doar pentru a decide direcția mișcării.
Acestea fiind spuse, să luăm conținut real.
Vom folosi un fișier extern xml pentru a alimenta aplicația deoarece:
Deci, avem nevoie de o mare listă de articole ... Dar lista țărilor din întreaga lume?
(Acest pas este un fel de subiect suplimentar pentru că voi folosi altă limbă pentru a mă ajuta cu pregătirea fișierului xml. Deci, dacă acest lucru nu este de interes, nu vă faceți griji, acest lucru va fi în fișierele de descărcare)
Tocmai am googled [lista țărilor lumii] și în primul rezultat am primit această listă:
(sursa: http://www.listofcountriesoftheworld.com)
Copiați totul la un fișier text și salvați-l. L-am numit countries.txt.
Scriptul de mai jos este scris în PHP. Veți avea nevoie de un server web pentru al rula. Folosesc wampserver, un pachet frumos care instalează PHP, MySQL și Apache cu câteva clicuri.
Pentru a utiliza acest script, va trebui să inițializați serverul web și să rulați scriptul într-un subdirector al directorului \ www \. O ultimă notă: scriptul și țările.txt trebuie să fie în același folder.
". "\ N"); fwrite ($ fp, '". "\ N"); foreach ($ liniile ca linie $) $ line = rtrim ($ line, "\ r \ n"); $ model = '/ \ d + \ s * /'; $ înlocuire = "; $ line = preg_replace ($ pattern, înlocuire $, $ linie); $ str =" \ t "." „); fclose ($ fp); ?>- ". $ linie. '
". "\ N"; fwrite ($ fp, $ str); fwrite ($ fp, '
Rezultatul acestui script va fi salvat într-un fișier cu numele data.xml. Dacă nu înțelegeți acest pas, nu vă faceți griji pentru că îl puteți descărca de aici.
Dacă urmăriți demonstrația, veți observa că aplicația noastră are o interfață, butoane și așa mai departe. Deci, să începem să punem toate graficele împreună.
Deschideți Adobe Flash și creați un nou fișier ActionScript 3 cu următoarele setări:
Salvați fișierul. Am sunat scroll.fla mea.
Fișier> Import> Importare în scenă și selectați imaginea de fundal.jpg (toate imaginile sunt incluse în assets.zip, în cadrul sursei de descărcare).
Acum:
Fereastră> aliniere
Aceasta va deschide panoul Aliniere. Centrarea imaginii pe scenă, făcând clic pe butoanele din imaginea de mai jos.
Și acum, dați-le stratului numele de fundal (nu uitați să-l blocați):
Creați un nou strat și importați imaginea. Procesul de import este exact la fel ca pasul anterior. Apăsați F8 pentru ao converti la un MovieClip și dați-i numele mcPad. Apoi, faceți clic pe caseta de selectare Export pentru ActionScript și, în câmpul de introducere a clasei, introduceți numele plăcii.
În principiu, definim filtrele de film ca un subclasă a clasei MovieClip în sine. Prin urmare, suntem capabili să o folosim direct din codul nostru și să îl tratăm ca un film normal, deoarece acesta moștenește din clasa MovieClip. Destul de cool?
Acum, ștergeți acest exemplu din scenă, dar nu din bibliotecă (pentru că am spus că o vom folosi din cod).
Importați imaginea itemBackground.jpg, apăsați F8 pentru ao converti la un MovieClip. Dați-i numele mcItem. Exportați din nou pentru ActionScript și denumiți articolul din clasă.
Acum, procesul va fi ușor diferit:
În cele din urmă, blocați stratul Over, reveniți la cronologia principală și ștergeți instanța clipului filmului mcItem din scenă.
Pentru această aplicație folosesc fontul Arial Rounded MT Bold Negrito (este un font gratuit, de unde am descărcat-o de aici). Deoarece nu este un sistem de fonturi, va trebui să îl importăm:
În cronologia principală avem nevoie doar de stratul Fundal, pentru a putea șterge straturile rămase.
Asta este pentru instrumentul Flash Authoring. Să începem codarea.
Creați un nou fișier ActionScript, salvați-l ca DocumentClass.as. Apoi, adăugați acest cod:
pachet import flash.display.MovieClip; clasa publica DocumentClass extinde MovieClip private var _pad: MovieClip; funcția publică DocumentClass () _pad = new Pad (); addChild (_pad); _pad.x = stage.stageWidth / 2 - _pad.width / 2; _pad.y = stage.stageHeight / 2 - _pad.height / 2;
(Dacă nu sunteți sigur ce facem aici, consultați această introducere rapidă la clasele de documentare.)
Amintiți-vă mdPad MovieClip? Rețineți că l-am exportat pentru ActionScript. Deci, ori de câte ori dorim să instanțiăm acest film, trebuie să tastăm
nou Pad ();
Acest cod creează în principiu o instanță a mcPad MovieClip și o adaugă la scenă folosind metoda addChild (). Deci, acum, _pad este pe DisplayList!
Apoi l-am centrat pe scenă (vertical și orizontal).
Testați aplicația și ar trebui să vedeți aspectul de fundal al playerului flash.
Aplicația noastră va folosi un container pentru a ține toate elementele împreună. Deci, vom crea un nou MovieClip în DocumentClass. Declarați proprietatea:
privat var _container: MovieClip;
În interiorul constructorului, la final:
_container = new MovieClip (); addChild (_container);
Adăugați următoarele declarații de import:
importul flash.events.Event; import flash.net.URLRequest; import flash.net.URLLoader;
Declarați următoarele proprietăți:
public var loader: URLLoader; public var data: XML; public var items: XMLList;
Aplicați apoi următoarele metode:
Accentsconagua
funcția privată dataLoad (): void loader = new URLLoader (); loader.addEventListener (Event.COMPLETE, dataLoaded); loader.load (noua adresă URLRequest ("data.xml")); funcția privată dataLoaded (eveniment: Eveniment): void trace ("Data Loaded."); În cele din urmă, adăugați acest apel la constructor:
dataLoad ();
Până acum, avem:
pachet import flash.display.MovieClip; importul flash.events.Event; import flash.net.URLRequest; import flash.net.URLLoader; clasa publica DocumentClass extinde MovieClip private var _pad: MovieClip; privat var _container: MovieClip; public var loader: URLLoader; funcția publică 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 (); funcția privată dataLoad (): void loader = new URLLoader (); loader.addEventListener (Event.COMPLETE, dataLoaded); loader.load (noua adresă URLRequest ("data.xml")); funcția privată dataLoaded (eveniment: Eveniment): void trace (XML nou (event.target.data.toString ())); Testați aplicația și ar trebui să vedeți, în consola, toate datele xml. Sa trecem peste.
Adăugați următoarele declarații de import:
import flash.text.TextFormat; import flash.text.TextField; import flash.text.TextFieldAutoSize; import flash.text.Font;
Adăugați aceste variabile noi:
public var data: XML; public var items: XMLList; privat var _item: Articol; privat var _itemTextField: TextField; privat var _defaultFormat: TextFormat = TextFormat nou (); privat var _arialRounded: font = nou ArialRounded (); privat var _textFieldXPoziție: uint = 10; privat var _textFieldYPosition: uint = 13; privat var _textFieldWidth: uint = 240; privat var _textFieldHeight: uint = 25; privat var _itemPosition: uint = 49;
Actualizați metoda dataLoaded:
funcția privată de dateLoaded (eveniment: Eveniment): void // această proprietate deține datele de date xml încărcate = XML nou (event.target.data); // proprietatea de elemente deține toate elementele elementului repetitiv items = data.item; // aceasta iterează peste fiecare element pentru (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);
Acum am creat butoanele de 200+ și le-am pus pe ecran. Dacă rulați aplicația veți observa că această listă începe la poziția (0, 0) și umple toată etapa. Asta nu este ceea ce dorim, așa că să ne ocupăm de asta în pasul următor.
Să creați o formă pentru a masca lista astfel încât să vedem numai zona vizibilă, ca în imaginea de mai înainte:
În final, vom concentra masca și containerul. Deci, adăugați o altă declarație de import:
import flash.display.Shape;
Proprietăți:
privat var _mask: Formă; privat var _maskWidth: uint = 288; privat var _maskHeight: uint = 290; privat var _paddingTop: uint = 120;
Și ... În metoda dataLoaded la sfârșit, adăugați următorul cod:
_mask = new Shape (); _mask.graphics.beginFill (0xFF0000); _mask.graphics.drawRect (0, 0, _maskWidth, _maskHeight); _mask.graphics.endFill (); // centrați masca orizontal pe scena _mask.x = stage.stageWidth / 2 - _container.width / 2; // poziționează masca vertical la 120px din partea de sus _mask.y = _paddingTop; addChild (_mask); // atribuie masca containerului _container.mask = _mask; // centrele containerul orizontal pe scena _container.x = stage.stageWidth / 2 - _container.width / 2; // poziționează containerul vertical într-o anumită valoare _container.y = _paddingTop;
Doar o mică îmbunătățire ... Acum containerul nostru are multe găuri deoarece există o marjă între fiecare articol. Deci, să-i oferim un fundal pentru a evita rezultatele nedorite atunci când ascultați evenimente.
Proprietate:
privat var _background: Shape;
Încă în metoda dataLoaded, sub codul existent:
_background = noua formă (); _background.graphics.beginFill (0xFFFFFF); _background.graphics.drawRect (0, 0, _container.width, _container.height); _background.graphics.endFill (); _container.addChildAt (_background, 0);
După cum probabil știți, ascultătorii ascultă evenimentele. Aici vom folosi unul pentru evenimentul MouseOver și altul pentru evenimentul MouseOut.
Adăugați acest lucru la sfârșitul metodei DataLoaded:
_container.addEventListener (MouseEvent.MOUSE_OVER, movingOver); _container.addEventListener (MouseEvent.MOUSE_OUT, movingOut);
Să implementăm acum metodele movingOver și movingOut:
funcția privată movingOver (eveniment: MouseEvent): void _container.removeEventListener (MouseEvent.MOUSE_OVER, movingOver); funcția privată movingOut (eveniment: MouseEvent): void _container.addEventListener (MouseEvent.MOUSE_OVER, movingOver);
Acum putem asculta evenimente, mai exact MOUSE-UL PESTE și MOUSE_OUT. Evenimentele sunt ca mesaje care notifică orice obiect care așteaptă același eveniment. "Mesajul" doar difuzează faptul că evenimentul a avut loc. În acest caz _container obiect va fi ascult pentru evenimente MouseOver și MouseOut. Când au loc _container are capacitatea de a răspunde în mod corespunzător.
Deci, mai întâi atribuim ascultătorilor evenimentului _container obiect și apoi, mai târziu, în cazul în care _container este ascuns peste ascultător MouseOver este eliminat. Dimpotrivă, atunci când mouse-ul este în afara _container obiect mouse-ul peste ascultător este alocat din nou la _container.
Fluxul de evenimente este un mecanism puternic care permite programatorului să gestioneze mai multe obiecte cu un singur ascultător de evenimente. Asa cum probabil va imaginati, _container.addEventListener va "asculta" evenimentele care implică containerul, elementele și forma de fundal - adică containerul și tot ce se află în interiorul acestuia. Puteți confirma acest lucru prin adăugarea următorului cod în movingOver și mutarea metode:
trace (event.target);
Aceasta va urmări obiectul care a expediat evenimentul.
Când ascultăm pentru acest eveniment putem defini un comportament care va avea loc în fiecare cadru, în cazul nostru 63 de ori pe secundă. De aceea, evenimentul OnEnterFrame este foarte util pentru animațiile bazate pe fps. Vom avea nevoie de acest lucru pentru a muta parcurgerea noastră, așa că movingOver și mutarea metodele ar trebui să arate astfel:
funcția privată movingOver (eveniment: MouseEvent): void _container.removeEventListener (MouseEvent.MOUSE_OVER, movingOver); addEventListener (Event.ENTER_FRAME, enterFrame); funcția privată movingOut (eveniment: MouseEvent): void removeEventListener (Event.ENTER_FRAME, enterFrame); _container.addEventListener (MouseEvent.MOUSE_OVER, movingOver);
Adăugați următoarele proprietăți:
privat var _maxSpeed: uint = 15; privat var _speed: Număr;
Adăugați următoarea metodă la sfârșitul codului (sub mutarea metoda). Acest lucru va fi rulat în fiecare cadru, datorită ascultătorului evenimentului EnterFrame pe care l-am creat mai devreme. Voi explica ce face codul de mai jos.
funcția enterFrame (eveniment: Eveniment): void _speed = (_mask.height / 2 - _mask.mouseY) / (_mask.height / 2) * _maxSpeed; _container.y + = _speed; dacă (_container.y> = _paddingTop) removeEventListener (Event.ENTER_FRAME, enterFrame); _container.y = _paddingTop; dacă (_container.y <= _mask.height - _container.height + _paddingTop) removeEventListener(Event.ENTER_FRAME, enterFrame); _container.y = _mask.height - _container.height + _paddingTop;
Iată logica scrollerului:
_speed = (_mask.height / 2 - _mask.mouseY) / (_mask.height / 2) * _maxSpeed;
Această linie de cod primește viteza împărțind jumătate din înălțimea treptei cu poziția Y a mouse-ului.
Să presupunem că jumătate din scenă este de 200px și cursorul mouse-ului este la 300px. Aplicând formula obținem:
(200-300) / 200 * 15 (_viteza maxima proprietate) = -7,5 care este negativ, astfel că lista ne va da o mișcare descendentă. Este exact ceea ce căutăm. Dacă cursorul mouse-ului era deasupra centrului, am avea o valoare pozitivă și lista s-ar mișca în sus.
Apoi, cu această afirmație:
_container.y + = _speed;
Atribuiți viteza reală, în fiecare cadru (63 de ori pe secundă) la _container.y poziţie. Apoi verificăm dacă afirmațiile dacă poziția containerului este locul în care ar trebui să fie. Amintiți-vă această imagine:
Voi folosi Biblioteca TweenMax a lui Greensock (îl puteți descărca de aici) pentru a anima fiecare buton pe și în afara (când mouse-ul se deplasează peste sau iese din element).
Adăugați această declarație de import:
import gs. *;
Actualizați movingOver și mutarea metode:
funcția privată movingOver (eveniment: MouseEvent): void _container.removeEventListener (MouseEvent.MOUSE_OVER, movingOver); addEventListener (Event.ENTER_FRAME, enterFrame); dacă (event.target este elementul) TweenMax.to (element (event.target) .item_btn_over, .2, alpha: 1); funcția privată movingOut (eveniment: MouseEvent): void removeEventListener (Event.ENTER_FRAME, enterFrame); _container.addEventListener (MouseEvent.MOUSE_OVER, movingOver); dacă (event.target este elementul) TweenMax.to (element (event.target) .item_btn_over, .2, alpha: 0);
Să analizăm în detaliu acest cod. event.target va face referință la obiectul care va expedia evenimentul, în acest caz MouseOver sau MouseOut. Acest obiect ar putea fi unul _articol, _fundal sau _container dar ne interesează numai Articol astfel încât să specificăm:
dacă (event.target este elementul)
Apoi, dacă este așa, vom anima orice element de obiect expediat evenimentul introducând Articol (event.target) .item_btn_over. item_btn_over este numele instanței mcItemOver MovieClip pe care l-am creat în Pasul 7. .2 este timpul animației și în ultimul parametru specificăm ce proprietate dorim să animăm (alfa).
În prezent, aplicația noastră funcționează destul de bine. Cu toate acestea, avem un cod repetat și o aplicație foarte centralizată. Observați că dataLoaded metoda face aproape totul.
Actionscript are un suport excelent pentru programarea orientată pe obiecte. Am putea folosi asta pentru a detașa încărcarea datelor de logica aplicațiilor etc..
Există un model de design frumos denumit Model View Controller, care funcționează foarte bine cu interfețele utilizatorilor. Acest model separă în principiu aplicarea în trei straturi distincte. Modelul se ocupă de logica de afaceri, prelucrarea datelor. Controlorul se ocupă de interacțiunea umană cu aplicația. În sfârșit, vizualizarea privește interfața vizuală a aplicației.
În acest caz, cererea noastră este prea mică pentru a implementa acest model. Deci, hai să adaptăm doar modelul și un View / Controller diverse pentru aplicația noastră. Mai întâi să ne ocupăm de un cod repetat.
Creați un nou fișier ActionScript și introduceți următorul cod:
pachet com.tutsplus.active.util import flash.display. *; public class Align funcția publică statică centerInStage (stadiu: Stage, mc: DisplayObject): void mc.x = stage.stageWidth / 2 - mc.width / 2; mc.y = stadiu.altitudineHeight / 2 - mc.height / 2; centrul public de funcții staticeHorizontallyInStage (stadiu: Stadiu, mc: DisplayObject): void mc.x = stage.stageWidth / 2 - mc.width / 2; funcția publică statică centralVerticalInStage (stadiu: Stage, mc: DisplayObject): void mc.y = stage.stageHeight / 2 - mc.height / 2;
Trebuie să îndeplinim această sarcină de mai multe ori. Așa că am decis să fac o clasă care aliniază orice obiect afișat pe scenă ori de câte ori îl numim. Pentru a face acest lucru, trebuie să faceți o structură de directoare, cum ar fi:
\ Com \ tutsplus \ activ \ UTIL \
în directorul de producție sau în interiorul căii de clasă. Apoi, în DocumentClass refăcut veți vedea cum să utilizați această clasă.
Modelul gestionează comportamentul și datele domeniului aplicației, răspunde solicitărilor de informații despre starea sa (de obicei din vizualizare) și răspunde la instrucțiunile de modificare a stării (de regulă de la controler)
sursa: MSDN.
Încărcarea datelor și stocarea acestora în structurile de date reprezintă o operație plăcută pentru compunerea modelului nostru. Creați un nou fișier ActionScript și îl numiți ScrollModel.as:
pachet import flash.events.Event; import flash.net.URLRequest; import flash.net.URLLoader; import flash.events.EventDispatcher; clasa ScrollModel extinde EventDispatcher public var loader: URLLoader; public var data: XML; public var items: XMLList; statică statică publică MODEL_UPDATE: String = "modelChange"; funcția publică ScrollModel () loader = new URLLoader (); loader.addEventListener (Event.COMPLETE, dataLoaded); încărcarea funcției publice (req: URLRequest): void loader.load (req); funcția privată dataLoaded (eveniment: Eveniment): void data = new XML (event.target.data); items = data.item; dispatchEvent (noul eveniment (ScrollModel.MODEL_UPDATE));
Cu această actualizare, serviciul nostru dataLoaded metoda are doar 3 linii de cod acum!
Este aproape același cod pe care l-am folosit în DocumentClass pentru încărcarea datelor, cu o singură diferență:
dispatchEvent (noul eveniment (ScrollModel.MODEL_UPDATE));
După ce atribuiți obiectele noastre de 200+ către proprietatea XMLList, această linie de cod trimite un eveniment oricui asculta. În practică, va trebui să știm când apare utilizarea acestor date într-o altă clasă.
Creați un nou fișier Actionscript și îl numiți ScrollBox.as:
pachet import flash.display.Sprite; import flash.display.Stage; importul flash.events.Event; importul 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; clasa publica ScrollBox extinde Sprite private var _container: Sprite; privat var _item: Articol; privat var _itemTextField: TextField; privat var _defaultFormat: TextFormat = TextFormat nou (); privat var _arialRounded: font = nou ArialRounded (); privat var _textFieldXPoziție: uint = 10; privat var _textFieldYPosition: uint = 13; privat var _textFieldWidth: uint = 240; privat var _textFieldHeight: uint = 25; privat var _itemPosition: uint = 49; privat var _mask: Formă; privat var _maskWidth: uint = 288; privat var _maskHeight: uint = 290; privat var _paddingTop: uint = 120; privat var _background: Shape; privat var _maxSpeed: uint = 15; privat var _speed: Număr; private var _items: XMLList; privat var _stage: Stage; public var scrollModel: ScrollModel; funcția publică ScrollBox (stadiu: Stadiu, m: ScrollModel) this.scrollModel = m; this._stage = etapa; scrollModel.addEventListener (ScrollModel.MODEL_UPDATE, createRollingScroller); funcția privată createRollingScroller (eveniment: Event = null): void _container = new Sprite (); _stage.addChild (_container); _items = scrollModel.items; pentru (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; dacă (_container.y <= _mask.height - _container.height + _paddingTop) removeEventListener(Event.ENTER_FRAME, enterFrame); _container.y = _mask.height - _container.height + _paddingTop;
Observați metodele de clasificare aliniate pe care le folosim:
Alinierea centruluiContinuare pe direcție orizontală (stadiu, mască); Alinierea centruluiContinuare pe direcție orizontală (stadiu, _container);
Acum trebuie să folosim metoda Align.centerHorizontallyInStage () pentru a alinia orice obiect de afișare pe orizontală.
createRollingScroller metoda va începe numai atunci când terminăm stocarea tuturor datelor din articole: ListăXML proprietate.
Schimbați DocumentClass:
pachet import flash.display.MovieClip; import flash.display.Sprite; importul flash.events.Event; import flash.net.URLRequest; import flash.net.URLLoader; import flash.events. *; import com.tutsplus.active.util.Align; clasa publica DocumentClass extinde MovieClip private var _pad: MovieClip; public var scrollModel: ScrollModel; public var scrollBox: ScrollBox; funcția publică DocumentClass () config (); scrollModel = nou ScrollModel (); scrollModel.load (noua adresă URLRequest ("data.xml")); scrollBox = ScrollBox nou (scena, ScrollModel); funcția privată config (): void _pad = new Pad (); addChild (_pad); Align.centerInStage (stadiu, _pad); Încă o dată, rețineți cât de ușor este să centrați obiectele de afișare pe scenă cu Align.centerInStage () metodă:
Align.centerInStage (stadiu, _pad);
Asta e pentru moment băieți! Am acoperit câteva subiecte interesante Actionscript 3 și sper că veți găsi acest lucru util. De ce să nu îmbunătățiți această aplicație la un nivel următor, recalcularea, adăugarea de funcționalități etc?
Multumesc pentru urmarire. Ai grijă!
