Share
În acest tutorial vă voi arăta cum să creați un meniu ca Dock-ul Apple folosind clasele AS3. Vom crea un singur fișier AS care va efectua toate magia, extinzându-l pentru a adăuga noi caracteristici.
Tutorial publicatLa fiecare câteva săptămâni, revizuim câteva postări preferate ale cititorului nostru de-a lungul istoriei site-ului. Acest tutorial a fost publicat pentru prima dată în martie 2010.
Mai întâi, să aruncăm o privire la ceea ce vom crea. Rulați mouse-ul peste pictograme pentru a vedea cum se mișcă și se scindează.
Începeți prin crearea unui nou fișier ActionScript și salvând-l ca "DockItem.as". Mă salvez la c: /macmenu/org/effects/DockItem.as.
Rețineți că rădăcina documentului nostru (în care trăiește .fla) va fi c: / macmenu; directorul / org / efecte va forma pachetul pentru clasa DockItem.
Creați un nou fișier Flash ActionScript 3.0 și deschideți-l, astfel încât să avem atât dosarul DockItem.as cât și fișierul .fla deschis. Salvați acest fișier .fla în directorul rădăcină (DockItem.as este la c: / macmenu / org / efecte, deci rădăcina site-ului nostru este c: / macmenu) / org / efecte este pachetul DockItem Object și salvăm. fla ca c: /macmenu/macmenu.fla.
Acum importăm sau desenăm câteva icoane către .fla. Am importat câteva pictograme pe care le am aici dintr-un fișier Illustrator, dar puteți, desigur, să vă desenați și să le aplicați un gradient.
Selectați orice pictogramă și faceți clic pe Modificare> Conversie la simbol.
În caseta care se deschide, dați-i un nume (am denumit acest simbol "Steaua") și acordați atenție punctului de înregistrare; trebuie să fie centrul de jos. Pentru clasa folosiți același nume (amintiți-vă că nu puteți folosi spații) și pentru clasa Base, utilizați org.effects.DockItem (clasa pe care o vom crea). De asemenea, asigurați-vă că tipul dvs. este setat la Film Clip.
Apoi, aliniați toate obiectele în partea de jos: selectați toate, faceți clic pe Fereastră> Aliniere, asigurați-vă că butonul "La scenă" este deselectat (altfel se va alinia la partea inferioară a scenei), apoi faceți clic pe butonul din dreapta sus pentru alinierea tuturor obiectelor.
Putem avea la fel de multe butoane pe care le dorim, așa că să transformăm toate simbolurile noastre în simboluri. Amintiți-vă să le dați un nume și o clasă, stabiliți toate punctele lor de înregistrare în centru și setați clasa Base la org.effects.DockItem.
Vedeți mai jos cum ar trebui să arate biblioteca și icoanele noastre; notați spațiul dintre ele, este important pentru crearea unui efect bun.
Dacă vom testa filmul acum, se va afișa o eroare care spune că un fișier ActionScript trebuie să aibă cel puțin o definiție externă și vizibilă; pentru că toate elementele noastre de meniu extind clasa DockItem, pe care nu am scris încă. Să scriem acum ...
Începeți să creați pachetul prin extinderea clasei Sprite (vom extinde Sprite deoarece nu avem animație cronologică).
pachetul org.effects import flash.display.Sprite; clasa publică DockItem extinde Sprite
În acest moment, DockItem-ul nostru extinde clasa Sprite, deci dacă îl testați acum, va funcționa, dar nu veți vedea efecte.
(Confuz? Nu se utilizează pentru a codifica cu clase? Verificați acest sfat rapid pentru utilizarea unei clase de documente pentru o introducere.)
Acum vom importa toate clasele necesare. O clasă personalizată este utilizată aici, clasa TweenLite, pe care o puteți descărca de la GreenSock.com. După ce ați descărcat TweenLite, extrageți-l în folderul / macmenu / (deci veți avea un folder / macmenu / com / greensock /).
pachetul org.effects import flash.display.Sprite; importul flash.events.Event; importul flash.events.MouseEvent; import com.greensock.TweenLite; //http://www.greensock.com/tweenlite import com.greensock.plugins.TweenPlugin; import com.greensock.plugins.TintPlugin; clasa publică DockItem extinde Sprite
Am importat clasa Sprite deoarece este ceea ce prelungim; dacă aveți animații pe cronologie, extindeți clasa MovieClip. Vom folosi clasa evenimentului când obiectul obișnuit este adăugat la etapă și vom folosi MouseEvent când verificăm distanța fiecărei pictograme de la mouse.
În timpul acestui pas, vom declara variabilele necesare:
pachetul org.effects import flash.display.Sprite; importul flash.events.Event; importul flash.events.MouseEvent; import com.greensock.TweenLite; import com.greensock.plugins.TweenPlugin; import com.greensock.plugins.TintPlugin; public class DockItem extinde Sprite private var _initPosition: Number; public var maxXDistance: Număr; public var maxDistance: Număr; public var maxScale: Număr;
Rețineți că am folosit _initPosition ca privat: setează doar poziția inițială x a pictogramei. Distanța mouse-ului va fi întotdeauna măsurată de la acest punct, deoarece poziția reală x a elementului se va schimba întotdeauna.
maxXDistance este distanța maximă x pe care mouse-ul va afecta pictograma, maxYDistance este distanța maximă y peste care mouse-ul va afecta pictograma și maxScale este scara maximă care va fi adăugată la pictogramă (de exemplu, dacă ați setat-o la 2, scara maximă la care obiectul poate ajunge este 3.)
Am folosit variabile publice pentru ultimele trei astfel încât să le putem modifica în timpul execuției.
Funcția constructor trebuie să aibă același nume ca și clasa (și, prin urmare, același nume ca fișierul), prin urmare DockItem ():
pachetul org.effects import flash.display.Sprite; importul flash.events.Event; importul flash.events.MouseEvent; import com.greensock.TweenLite; import com.greensock.plugins.TweenPlugin; import com.greensock.plugins.TintPlugin; public class DockItem extinde Sprite private var _initPosition: Number; public var maxXDistance: Număr; public var maxDistance: Număr; public var maxScale: Număr; funcția publică DockItem ($ maxXDistance: Number = 60, $ maxYDistance: Number = 30, $ maxScale: Number = 2): void maxXDistance = $ maxXDistance; maxYDistance = $ maxYDistance; maxScale = $ maxScale; dacă (etapa) init (); altfel addEventListener (Event.ADDED_TO_STAGE, init); addEventListener (Event.REMOVED_FROM_STAGE, final);
De ce avem aici niște parametri? Acest lucru ne permite să folosim diferite combinații de distanțe și scale: putem avea o distanță scurtă cu o scară foarte mare sau o distanță lungă, cu o scară mică. De asemenea, putem determina distanța y în care mouse-ul va afecta pictograma.
Pe măsură ce extindem clasa Sprite, putem adăuga copii sau chiar codificăm o clasă personalizată pentru fiecare pictogramă care extinde clasa DockItem, deci dacă o extindem, putem folosi funcția super () pentru a transmite noilor parametri superclasei. Apoi putem folosi clasa DockItem oricând și oriunde.
În acest pas am setat variabila maxXDistance, variabila maxYDistance și variabila maxScale la valorile trecute ca parametri. De asemenea, verificăm dacă obiectul este pe scenă - dacă nu, adăugăm un Eveniment pentru a verifica când este. De asemenea, adăugăm un alt ascultător al evenimentului pentru a detecta când pictograma este eliminată din scenă. Vom adăuga un eveniment MOUSE_MOVE pe scenă pentru a obține distanța, deci este important să știți dacă este pe scenă.
Aceasta este funcția care va fi rulată odată ce pictograma este creată și adăugată la scenă. În funcția init (), adăugăm un ascultător MouseEvent.MOUSE_MOVE pe scenă, setăm variabila _initPosition la valoarea x a obiectului și ascultăm mouse-ul părăsind zona de scenă.
pachetul org.effects import flash.display.Sprite; importul flash.events.Event; importul flash.events.MouseEvent; import com.greensock.TweenLite; import com.greensock.plugins.TweenPlugin; import com.greensock.plugins.TintPlugin; public class DockItem extinde Sprite private var _initPosition: Number; public var maxXDistance: Număr; public var maxDistance: Număr; public var maxScale: Număr; funcția publică DockItem ($ maxXDistance: Number = 60, $ maxYDistance: Number = 30, $ maxScale: Number = 2): void maxXDistance = $ maxXDistance; maxYDistance = $ maxYDistance; maxScale = $ maxScale; dacă (etapa) init (); altfel addEventListener (Event.ADDED_TO_STAGE, init); addEventListener (Event.REMOVED_FROM_STAGE, final); funcția privată init (e: Event = null): void _initPosition = x; stage.addEventListener (MouseEvent.MOUSE_MOVE, mousemove); stage.addEventListener (Event.MOUSE_LEAVE, mouseLeave);
Când mouse-ul se mișcă peste scenă, această funcție (declanșată de evenimentul MOUSE_MOVE pe care am adăugat un ascultător în ultimul pas) verifică poziția mouse-ului pentru obiectul parental și măsoară distanța de la obiect la poziția părintelui mouse-ului.
Folosim parent.mouseX pentru că asta ne face poziția x a mouse-ului relativ la oricare obiect care conține pictograma, mai degrabă decât relativ la punctul de înregistrare al pictogramei.
De asemenea, adăugăm icoanele înapoi la pozițiile lor de pornire dacă mouse-ul părăsește scena în mânerul mouse-uluiLeave ().
pachetul org.effects import flash.display.Sprite; importul flash.events.Event; importul flash.events.MouseEvent; import com.greensock.TweenLite; import com.greensock.plugins.TweenPlugin; import com.greensock.plugins.TintPlugin; public class DockItem extinde Sprite private var _initPosition: Number; public var maxXDistance: Număr; public var maxDistance: Număr; public var maxScale: Număr; funcția publică DockItem ($ maxXDistance: Number = 60, $ maxYDistance: Number = 30, $ maxScale: Number = 2): void maxXDistance = $ maxXDistance; maxYDistance = $ maxYDistance; maxScale = $ maxScale; dacă (etapa) init (); altfel addEventListener (Event.ADDED_TO_STAGE, init); addEventListener (Event.REMOVED_FROM_STAGE, final); funcția privată init (e: Event = null): void _initPosition = x; stage.addEventListener (MouseEvent.MOUSE_MOVE, mousemove); stage.addEventListener (Event.MOUSE_LEAVE, mouseLeave); funcția privată mouseMove (e: MouseEvent): void var yDistance: Number = Math.abs (parent.mouseY-y); dacă (yDistance> maxYDistance) if (_initPosition == x) retur; altfel TweenLite.to (aceasta, .3, x: _initPosition, scaleX: 1, scaleY: 1); întoarcere; // obține diferența dintre poziția x a mouse-ului părinte și poziția inițială a obiectului var xDistance: Number = parent.mouseX -ininfoPosition; // verificați dacă distanța dintre mouse și obiect este mai mare decât distanța maximă, nu poate fi mai mare ... xDistance = xDistance> maxXDistance? maxXDistance: xDistance; // verificați dacă distanța este mai mică decât negativul distanței max, nu poate fi mai mică ... xDistance = xDistance < -maxXDistance ? -maxXDistance : xDistance; //create a variable for the position, assuming that the x position must be the initial position plus the distance of the mouse, but it can't be more than the max distance. var posX=_initPosition-xDistance; //we get the scale proportion here, it goes from 0 to maxScale variable var scale:Number=(maxXDistance-Math.abs(xDistance))/maxXDistance; //the minimum scale is 1, the original size, and the max scale will be maxScale variable + 1 scale=1+(maxScale*scale); //here we use a Tween to set the new position according to the mouse position TweenLite.to(this,.3,x:posX,scaleX:scale,scaleY:scale); private function mouseLeave(e:Event):void TweenLite.to(this,.3,x:_initPosition,scaleX:1,scaleY:1);
În primul rând, verificăm distanța y (distanța verticală dintre pictogramă și mouse); dacă este mai departe decât intervalul pe care l-am stabilit cu variabila maximă de rezistență, atunci verificăm dacă pictograma se află în poziția inițială și, dacă nu, am adăugat-o acolo. întoarcere cuvântul cheie se desprinde din funcție, astfel încât în acest caz nu se va executa niciunul din restul codului.
Dacă mouse-ul este aproape de pictogramă pe verticală, folosim câteva matematici pentru a afla o nouă scară și o poziție pentru pictogramă pe baza distanței orizontale de la mouse, apoi adăugați-o la acele valori.
Dacă scoatem obiectul de pe scenă, trebuie să eliminăm ascultătorii mouse-ului și mouse-ului; dacă nu putem să obținem erori de fiecare dată când mouse-ul este mutat. Această funcție este manipulatorul pentru ascultătorul REMOVED_FROM_STAGE pe care l-am adăugat mai devreme, așa că va fi declanșat atunci când obiectul este eliminat.
pachetul org.effects import flash.display.Sprite; importul flash.events.Event; importul flash.events.MouseEvent; import com.greensock.TweenLite; import com.greensock.plugins.TweenPlugin; import com.greensock.plugins.TintPlugin; public class DockItem extinde Sprite private var _initPosition: Number; public var maxXDistance: Număr; public var maxDistance: Număr; public var maxScale: Număr; funcția publică DockItem ($ maxXDistance: Number = 60, $ maxYDistance: Number = 30, $ maxScale: Number = 2): void maxXDistance = $ maxXDistance; maxYDistance = $ maxYDistance; maxScale = $ maxScale; dacă (etapa) init (); altfel addEventListener (Event.ADDED_TO_STAGE, init); addEventListener (Event.REMOVED_FROM_STAGE, final); funcția privată init (e: Event = null): void _initPosition = x; stage.addEventListener (MouseEvent.MOUSE_MOVE, mousemove); stage.addEventListener (Event.MOUSE_LEAVE, mouseLeave); funcția privată mouseMove (e: MouseEvent): void var yDistance: Number = Math.abs (parent.mouseY-y); dacă (yDistance> maxYDistance) if (_initPosition == x) retur; altfel TweenLite.to (aceasta, .3, x: _initPosition, scaleX: 1, scaleY: 1); întoarcere; // obține diferența dintre poziția x a mouse-ului părinte și poziția inițială a obiectului var xDistance: Number = parent.mouseX -ininfoPosition; // verificați dacă distanța dintre mouse și obiect este mai mare decât distanța maximă, nu poate fi mai mare ... xDistance = xDistance> maxXDistance? maxXDistance: xDistance; // verificați dacă distanța este mai mică decât negativul distanței max, nu poate fi mai mică ... xDistance = xDistance < -maxXDistance ? -maxXDistance : xDistance; //create a variable for the position, assuming that the x position must be the initial position plus the distance of the mouse, but it can't be more than the max distance. var posX=_initPosition-xDistance; //we get the scale proportion here, it goes from 0 to maxScale variable var scale:Number=(maxXDistance-Math.abs(xDistance))/maxXDistance; //the minimum scale is 1, the original size, and the max scale will be maxScale variable + 1 scale=1+(maxScale*scale); //here we use a Tween to set the new position according to the mouse position TweenLite.to(this,.3,x:posX,scaleX:scale,scaleY:scale); private function mouseLeave(e:Event):void TweenLite.to(this,.3,x:_initPosition,scaleX:1,scaleY:1); private function end(e:Event=null):void stage.removeEventListener(MouseEvent.MOUSE_MOVE,mouseMove); stage.removeEventListener(Event.MOUSE_LEAVE,mouseLeave);
Tot ce facem în această funcție este eliminarea ascultătorului evenimentului din scenă.
În acest moment, putem deja să testăm; acesta va funcționa deoarece fiecare obiect este legat de clasa de bază DockItem. Cu toate acestea, nu avem o casetă de restricționare pentru clic (dacă setăm obiectul nostru buttonMode proprietatea la adevărat, vom vedea că putem da clic pe el doar atunci când este peste graficul real.)
Până acum putem vedea efectul de lucru, așa că acum să transformăm fiecare element într-un buton. Vom crea un nou fișier ActionScript și acesta va extinde DockItem - să îl denumim DockButton. Pachetul său va fi același ca DockItem (org.effects), așa că îl vom salva în același director ca și DockItem.as (exemplu: c: /macmenu/org/effects/DockButton.as)
Acum schimbăm clasa de bază a fiecărui obiect din bibliotecă. În prezent, folosim org.effects.DockItem ca clasă de bază, să folosim acum org.effects.DockButton.
Dacă îl vom testa acum, va exista o eroare. Acest lucru se datorează faptului că DockButton.as este încă gol, deci hai să îl codificăm.
OK, acum vom extinde clasa DockItem, pentru că vrem să folosim tot ce avem în DockItem și să adăugăm câteva trucuri (care să îi permită să acționeze ca un buton), dar nu vrem să adăugăm noi funcții în DockItem direct. În acest fel, dacă vrem să folosim DockItem ca pe altceva decât un Button mai târziu, putem, dar dacă vrem să îl folosim ca buton putem folosi DockButton.
pachetul org.effects public class DockButton extinde DockItem
Dacă vom testa proiectul nostru acum, acesta va funcționa, dar va funcționa exact ca DockItem, deoarece nu am adăugat încă nimic nou.
Să importăm câteva lucruri de care avem nevoie pentru a extinde DockItem-ul. Pe măsură ce extindeți DockItem, nu este nevoie să importați clasele care sunt deja acolo, deoarece nu le vom folosi direct în DockButton.
pachet org.effects import flash.geom.Rectangle; clasa publică DockButton extinde DockItem
Am importat clasa Rectangle, dar de ce? Aceasta se întâmplă deoarece vom folosi caseta de încadrare a obiectelor noastre pentru a crea un fundal fals, pentru a permite clicului pe buton chiar dacă mouse-ul nu se află exact peste o zonă colorată. Să creați un grafic de fundal cu alfa 0 (transparent), așa că vom avea un pătrat pentru a face clic.
Deoarece trebuie să creăm o casetă de legare pentru DockButton, vom obține propriile limite, de aceea am importat clasa flash.geom.Rectangle
pachet org.effects import flash.geom.Rectangle; clasa publică DockButton extinde DockItem funcția publică DockButton (): void buttonMode = true; mouseChildren = false; var limite: Rectangle = getBounds (acest lucru); this.graphics.beginFill (0,0); this.graphics.drawRect (bounds.x, bounds.y, bounds.width, bounds.height); this.graphics.endFill ();
Ce am făcut? Am creat un constructor care stabilește mai întâi buttonMode-ul obiectului la adevărat, astfel că DockButton-ul nostru va fi tratat ca un buton. Apoi am setat mouseChildren la false, deci evenimentele mouse-ului vor veni de la obiectul DockButton, nu orice alt obiect din interiorul acestuia. Apoi vom obține limitele obiectului folosind getBounds () și tragem un dreptunghi transparent folosind obiectul grafic. (Proprietatea grafică vine cu clasa Sprite și am extins Sprite pentru a face obiectul DockItem. Acum ne-am extins DockItem-ul pentru a face obiectul DockButton, DockButton are totul din clasa Sprite și din clasa DockItem.)
OK, hai să facem un cec:
Dacă totul este OK, testați filmul ...
(În acest moment, dacă doriți să puneți folderul org / efecte pe clasa dvs. de cursă puteți, deci nu va trebui să copiați acest dosar pentru fiecare proiect pe care îl creați și să utilizați DockItem sau DockButton.)
De ce nu schimbați culoarea butonului când mouse-ul trece peste el? În această secțiune voi învăța cum. Pentru aceasta vom folosi din nou motorul TweenLite pentru a da o anumită nuanță obiectului. Cu toate acestea, deja folosim TweenLite în obiectul DockItem și extindem acest obiect la DockButton. Vrem să extindem DockButton pentru a schimba culoarea, dar nu mai putem folosi TweenLite în același obiect, deoarece noul obiect TweenLite îl va suprascrie pe celălalt (chiar și cu proprietatea suprascrie: fals în TweenLite va reduce foarte mult performanța dacă îl vom folosi direct în același obiect). Totul nu este pierdut; avem o icoană în interiorul fiecărui obiect al bibliotecii și putem aplica acea nuanță.
Pentru a face acest lucru, să creați un alt fișier ActionScript, dar acum să îl salvați în același director ca fișierul .fla cu numele "OverButton.as" (exemplu: c: /macmenu/OverButton.as.)
Mai întâi vom crea pachetul și vom importa clasele necesare; deoarece am salvat fișierul OverButton.as în același director al fișierului .fla pachetul va fi la nivel superior, deci nu este nevoie să scrieți "org.effects pachet":
pachet import org.effects.DockButton; import flash.display.DisplayObject; importul flash.events.MouseEvent; import com.greensock.TweenLite; import com.greensock.plugins.TweenPlugin; import com.greensock.plugins.TintPlugin; clasa publica OverButton extinde DockButton
OK, deci extindem DockButton de această dată și am importat clasa DisplayObject deoarece vom trata pictograma ca DisplayObject. De asemenea, am importat MouseEvent pe care o vom folosi pentru a verifica când mouse-ul este deasupra pictogramei și când este afară. Avem, de asemenea, TweenLite pentru a crea unele efecte tween cu culoarea.
pachet import org.effects.DockButton; import flash.display.DisplayObject; importul flash.events.MouseEvent; import com.greensock.TweenLite; import com.greensock.plugins.TweenPlugin; import com.greensock.plugins.TintPlugin; clasa publica OverButton extinde DockButton private var _object: DisplayObject; funcția publică OverButton (): void _object = this.getChildAt (0) ca DisplayObject; this.addEventListener (MouseEvent.MOUSE_OVER, mouseOver); this.addEventListener (MouseEvent.MOUSE_OUT, mouseOut); TweenPlugin.activate ([TintPlugin]);
De ce am creat un obiect privat var ca DisplayObject? Pictograma noastră reală este stocată în această variabilă (asta este ceea ce face linia 13) și este tratată ca un DisplayObject; vom folosi efectul de culoare pe pictograma noastră, nu pe întregul obiect.
Adăugăm ascultătorii de evenimente ale mouse-ului pentru a verifica când mouse-ul sa terminat și când mouse-ul este în afara.
Din moment ce am creat ascultătorii pentru mouse-ul peste și mouse-out, vom crea acum funcțiile lor:
pachet import org.effects.DockButton; import flash.display.DisplayObject; importul flash.events.MouseEvent; import com.greensock.TweenLite; import com.greensock.plugins.TweenPlugin; import com.greensock.plugins.TintPlugin; clasa publica OverButton extinde DockButton private var _object: DisplayObject; funcția publică OverButton (): void _object = this.getChildAt (0) ca DisplayObject; this.addEventListener (MouseEvent.MOUSE_OVER, mouseOver); this.addEventListener (MouseEvent.MOUSE_OUT, mouseOut); TweenPlugin.activate ([TintPlugin]); funcția privată mouseOver (e: MouseEvent): void new TweenLite (_object, .5, tint: 0x990099); funcția privată mouseOut (e: MouseEvent): void new TweenLite (_object, .5, tint: null);
Rețineți că acum folosim TweenLite pe _object, nu pe "this". Acest lucru se datorează faptului că OverButton extinde DockButton-ul care extinde DockItem unde există deja un TweenLite utilizat. De asemenea, în DockButton avem un fundal fals alfa 0 care nu trebuie să fie vopsit.
Pentru proprietatea de tenta a TweenLite am folosit un cod de culoare de 0x990099, care este un mediu violet; dacă utilizați nul ca valoare, tonul va fi îndepărtat încet.
În acest moment, dacă testați filmul, nu veți vedea schimbări de culoare, deoarece trebuie să modificăm din nou clasa de bază a fiecărui obiect din bibliotecă. Deschideți Biblioteca încă o dată în .fla (Fereastră> Bibliotecă). Faceți clic cu butonul din dreapta pe fiecare obiect și modificați clasa de bază la OverButton (nu org.effects.OverButton, deoarece fișierul de clasă nu se află în dosarul / org / effects).
OK, acum poți testa!
În acest tutorial am explicat despre extinderea obiectelor. Efectul efectiv de andocare este matematică pură - sunt calcule la distanță, setări de scală - dar este important să vedem în codul pe care nu putem folosi proprietatea "x" ca referință de poziție, deoarece proprietatea "x" este schimbată de fiecare dată. Sper că acum toți aveți o mai bună înțelegere a cuvântului cheie "extinde" și puteți aprecia cum se fac calculele aici. Vă mulțumim pentru lectură :)
Accentsconagua