Share
În acest sfat rapid veți învăța cum să utilizați clasa Tween AS3 pentru a crea un meniu cu o bară de alunecare rece. Excelent pentru navigație!
Să aruncăm o privire asupra rezultatului final pe care îl vom strădui:
Porniți un nou document Flash Actionscript 3.0 cu o dimensiune de 600 x 300 pixeli.
Mai întâi, selectați instrumentul Text și introduceți meniul de navigare. De dragul acestui tutorial am folosit Butonul 1 | Butonul 2 | Butonul 3 | Butonul 4, folosind "Arista Light" la 30pt pentru font și # 999999 pentru culoare.
Apoi mergeți la fila aliniere (dacă nu vedeți să faceți clic pe ea Fereastra> Aliniere) apoi aliniați textul vertical și orizontal centrat pe scenă.
Redenumiți stratul existent la "Text" și blocați-l astfel încât să nu mutați în mod accidental textul. Apoi creați un nou strat numit "Butoane". Selectați instrumentul dreptunghi și trageți un dreptunghi (de orice culoare) peste butonul "1" astfel încât să se potrivească perfect marginilor. Aceasta va fi zona de lovit pentru elementul de meniu.
Selectați dreptunghiul pe care tocmai l-ați atras, faceți clic pe Modificați> Conversie la simbol și numește-o buton. Asigurați-vă că punctul de înregistrare se află în centru (poate fi necesar să utilizați din nou panoul Aliniere).
Apoi, în panoul Proprietăți, dați acestui buton un nume de instanță Button1 și setați alfa la 0%.
Copiați și inserați butonul nou "invizibil" peste celelalte trei butoane și dați-le numele de instanțe BUTTON2, button3 și button4 respectiv. Utilizați instrumentul Transformare liberă pentru a le întinde sau micșora, astfel încât fiecare să se potrivească cu ușurință cu elementul de meniu, fără întreruperi între.
Selectați din nou instrumentul Rectangular, setați colțurile rotunjite la 5 pixeli și trageți un dreptunghi cu o înălțime de 4 pixeli și aproximativ lățimea primului buton.
Poziționați-l sub primul buton, faceți clic pe Modificați> Conversia la simbol și numește-o bar. Din nou, asigurați-vă că punctul de înregistrare este în centru.
Dați-i un nume de instanță bar și un alfa de 0%, la fel ca butoanele. Blocați stratul de butoane și creați un strat nou numit acţiuni; blocați și acest lucru. Acum faceți clic dreapta pe primul cadru al noului dvs. acţiuni strat și faceți clic pe acţiuni.
// Importul claselor necesare pentru îmbunătățirea importului fl.transitions.Tween; import fl.transitions.easing. *;
Vom folosi Tween pentru a face barul să se deplaseze folosind codul, deci importați-l. easingpachetul este, de asemenea, necesar, astfel încât să putem specifica tipul exact al mișcării tween care trebuie utilizată.
// Definiți variabila tween pentru poziția "x" a barei var barX: Tween; // Definiți variabila tween pentru bara de estompare barAlphaIn: Tween; // Definiți variabila tween pentru variația variației bar barAlphaOut: Tween; // Definirea variabilei tween pentru lățimea barelor var barWidth: Tween;
Definiți variabilele pe care le vom folosi pentru a adăuga bara.
// Adăugați un ascultător de evenimente pentru redarea butonului 1 button1.addEventListener (MouseEvent.ROLL_OVER, rollOverHandler); // Adăugați un ascultător de evenimente pentru lansarea butonului 1 button1.addEventListener (MouseEvent.ROLL_OUT, rollOutHandler); // Adăugați un ascultător de evenimente pentru redarea butonului 2 button2.addEventListener (MouseEvent.ROLL_OVER, rollOverHandler); // Adăugați un ascultător de evenimente pentru lansarea butonului 2 button2.addEventListener (MouseEvent.ROLL_OUT, rollOutHandler); // Adăugați un ascultător al evenimentului pentru redarea butonului 3 button3.addEventListener (MouseEvent.ROLL_OVER, rollOverHandler); // Adăugați un ascultător de evenimente pentru lansarea butonului 3 button3.addEventListener (MouseEvent.ROLL_OUT, rollOutHandler); // Adăugați un ascultător al evenimentului pentru redarea butonului 4 button4.addEventListener (MouseEvent.ROLL_OVER, rollOverHandler); // Adăugați un ascultător de evenimente pentru lansarea butonului 4 button4.addEventListener (MouseEvent.ROLL_OUT, rollOutHandler);
Acest lucru poate arata ca o multime de cod, dar este de fapt foarte simplu.
Mai întâi adăugăm un ascultător al evenimentului care ascultă mouse-ul să răstoarne butonul1 și apoi execută rollOverHandler funcţie. Apoi adăugăm un alt ascultător de evenimente care ascultă mouse-ul să se rostogolească afară de buton1 și execută rollOutHandler funcţie.
Noi repetăm acei ascultători pentru toate cele patru butoane.
// Funcția Execute pentru funcția evenimentului rollover rollOverHandler (e: MouseEvent): void // Reglați poziția "x" a barei la aceeași poziție cu butonul. Parametrii sunt: // object to tween (adică animat) // proprietatea obiectului care urmează să fie modificat // tipul de relaxare (tip de mișcare) de utilizat // valoarea inițială (adică valoarea de la proprietatea de la) // end (adică valoarea proprietății se va încheia cu momentul finalizării adăugării) // durata adăugării // dacă se va măsura durata în secunde (adevărat) sau în cadre (falsă) barX = nou Tween (bar, "x", înapoi. easeOut, bar.x, e.target.x, 1, adevărat); // Tween alpha barului pentru a face să se estompeze în barAlphaIn = nou Tween (bar, "alpha", Regular.easeOut, bar.alpha, 1, 1, true); // Tween lățimea barei pentru a deveni aceeași cu barul butonuluiWidth = nou Tween (bar, "width", Regular.easeOut, bar.width, e.target.width, 1, true); // Executa funcția pentru funcția de lansare rollOutHandler (e: MouseEvent): void // Tween alpha al barei pentru a face să se estompeze barAlphaOut = nou Tween (bar, "alpha", Regular.easeOut, bar.alpha, 0, 1, adevărat);
Când rotim un buton, funcția rollOverHandler este executată, care va trece de la poziția x curentă la poziția x a butonului care este în prezent rulat. (Notă: e.target se referă întotdeauna la butonul care a declanșat rollOverHandler Funcția.) Aceasta conferă barei o mișcare orizontală netedă.
Apoi, se estompează alfa al barei de la alfa curent la 1 (100% alfa), iar lățimea de la lățimea curentă la lățimea butonului care a declanșat funcția de manipulare.
Când scoatem butonul, funcția rollOutHandler este executată și bara este decolorată din alfa curentă la 0 (complet transparent).
Deoarece butoanele se potrivesc strâns, fără nici un spațiu între ele, veți vedea numai că bara se estompează dacă vi se închide toate elementele de meniu simultan, în caz contrar se va estompa din nou prea repede pentru ca tu să-l vezi!
Ar trebui să aveți acum ceva similar cu previzualizarea. Grozav! Ați învățat cum să utilizați clasa Tween în ActionScript 3.0 pentru a crea o animație eficientă a meniurilor care va atrage atenția oamenilor și va ieși din meniurile obișnuite. Posibilitățile sunt nesfârșite.
Următorul pas: cum să adăugați o MouseEvent.CLICK ascultător și manipulator la fiecare buton pentru a permite utilizatorului să declanșeze diferite acțiuni cu un clic?
Sper că ți-a plăcut acest tutorial și mulțumesc pentru lectură.
Accentsconagua