Share
În acest tutorial veți învăța cum să creați o roată de rotire folosind Flash și AS3, cu o interfață potrivită atât pentru dispozitivele cu mouse, cât și pentru dispozitivele touch.
Să aruncăm o privire asupra rezultatului final pe care îl vom strădui:
Faceți clic și trageți mouse-ul vertical pentru a roti roata; cu cât linia pe care o trageți mai mult, cu atât mai repede se va roti roata! Odată ce acesta se oprește, bara colorată din partea de jos va afișa culoarea pe care a apărut roata.
Folosind elemente grafice pre-create, vom crea o interfață colorată care va fi alimentată de mai multe clase ActionScript 3.
Utilizatorul va putea să rotească roata folosind un gest de tragere reprezentat de o linie pe ecran; o linie mai înaltă va face o rotire mai rapidă.
Deschideți Flash și creați un document de 500x300px. Setați rata cadrelor la 24fps.
Va fi afișată o interfață colorată frumos, formată din mai multe forme, MovieClips și multe altele.
Formele simple au fost create folosind instrumentele de desen Flash Pro și, din moment ce sunt ușor de duplicat, nu voi explica crearea lor. Asigurați-vă că punctul de rotație a roții este în centru.
Puteți să vă uitați întotdeauna la FLA în fișierele sursă de descărcare.
Imaginea de mai sus arată Nume de instanță a diferitelor filme MovieClips. Acordați o atenție deosebită wheel.p MovieClips; acestea sunt mici linii negre care împart culorile din roată, și sunt interior roată MovieClip. Sunt numite p1 la p10, în sensul acelor de ceasornic.
Vom folosi un alt motor Tween decât cel implicit inclus în Flash; acest lucru va face trecerea de culoare a colorMC simbol mult mai ușor.
Poti descarca TweenMax de pe site-ul web Greensock.
Adăugați numele clasei, Principal, la Clasă domeniu în Publica secțiunea din Proprietăți pentru a asocia FLA cu clasa de documente principale.
Creați o nouă clasă ActionScript 3.0 (Cmd + N) și salvați-o ca Main.as în dosarul dvs. de clasă.
Creați structura claselor de bază pentru a începe să scrieți codul.
pachet import flash.display.Sprite; clasa publică principală extinde Sprite funcția publică Main (): void // code constructor
Acestea sunt clasele pe care va trebui să le importăm pentru ca clasa noastră să funcționeze. import directiva face ca clasele și pachetele definite extern să fie disponibile pentru codul dvs..
import flash.display.Sprite; import flash.display.Shape; importul flash.events.MouseEvent; importul flash.events.Event; import com.greensock.TweenMax;
Acestea sunt variabilele pe care le vom folosi; citiți comentariile din cod pentru a afla mai multe despre ele:
viteza privată var: Număr = 0; // viteza actuală a padurilor private de var: Vector.= Vector nou. (); // un vector care deține MC-urile p1, p2 etc în stadiul priv privat var: Shape; // linia trasată ca gestul de a muta roata private var lastPaddle: String; // va detecta valoarea curentă a roții
Constructorul este o funcție care rulează atunci când un obiect este creat dintr-o clasă și este primul care se execută când faceți o instanță a unui obiect. Din moment ce aceasta este clasa noastră de documente, va funcționa de îndată ce SWF se încarcă.
funcția publică finală Main (): void // code ...
Mai întâi adăugăm diferitele variante de vâscari la vector și adăugăm ascultătorii - vom scrie (ascultători) funcția următoare.
funcția publică finală Main (): void paddles.push (roată.p1, roată.p2, roată.p3, roată.p4, roată.p5, roată.p6, roată.p7, roată.p8, roată.p9, roată .p10); ascultători ( 'add');
Această funcție va adăuga sau elimina ascultătorii în funcție de parametru. Dispozitivul de ascultare a mouse-ului este setat să deseneze linia care va controla roata.
ascultători de funcții finale private (acțiune: șir): void if (action == 'add') stage.addEventListener (MouseEvent.MOUSE_DOWN, startDraw); stage.addEventListener (MouseEvent.MOUSE_UP, spinWheel); altceva stage.removeEventListener (MouseEvent.MOUSE_DOWN, startDraw); stage.removeEventListener (MouseEvent.MOUSE_UP, spinWheel);
Următoarea funcție începe să creeze o linie bazată pe poziția actuală a mouse-ului și o plasează pe scenă. Se declanșează când mouse-ul este apăsat.
funcția finală privată startDraw (e: MouseEvent): void line = new Shape (); addChild (line); line.graphics.moveTo (mouseX, mouseY); line.graphics.lineStyle (8, 0x000000, 0.3); // puteți schimba culoarea și stilul liniei aici stage.addEventListener (MouseEvent.MOUSE_MOVE, drawLine);
În timp ce mouse-ul este mutat, linia continuă în acea direcție.
funcția finală privată drawLine (e: MouseEvent): void line.graphics.lineTo (mouseX, mouseY);
Următorul cod rulează când butonul mouse-ului este eliberat, terminând linia. Ascultătorii desenului sunt eliminați pentru a evita trasarea mai multor linii, iar viteza este calculată în funcție de înălțimea liniei. În cele din urmă, un eveniment EnterFrame este invitat să rotească efectiv roata.
funcția privată finală spinWheel (e: MouseEvent): void stage.removeEventListener (MouseEvent.MOUSE_MOVE, drawLine); ascultători ( 'rm'); viteză = linie. removeChild (line); line = null; stage.addEventListener (Event.ENTER_FRAME, spin);
Aceasta este funcția care va roti roata și va detecta valoarea pe care o atinge:
funcția finală privată finală (e: Event): void / * rotiți roata * / wheel.rotationZ + = viteza;
Aici detectăm valoarea curentă a roții pe baza ultimei palete pe care a atins-o.
/ * Detect Value * / pentru (var i: int = 0; i < 10; i++) if(indicator.hArea.hitTestObject(paddles[i])) lastPaddle = paddles[i].name;
Viteza roții este redusă la fiecare cadru pentru a opri în cele din urmă centrifugarea.
/ * Reducerea vitezei * / vitezei - = 0,1;
Toate valorile sunt resetate atunci când roata se oprește. Se numește o funcție care va executa o acțiune în funcție de valoarea finală.
Accentsconagua
/ * Scoaterea ascultătorului și resetarea vitezei când se oprește roata * / dacă (viteza <= 0) stage.removeEventListener(Event.ENTER_FRAME, spin); speed = 0; setBarColor(lastPaddle); listeners('add'); Această funcție va executa o acțiune personalizată în funcție de ultima valoare a roții. În acest caz, se schimbă culoarea barei de fund, dar ați putea face orice altceva.
setBarColor (acțiune: String): void comutare (acțiune) caz 'p1': TweenMax.to (colorMC, 0.5, colorTransform: tint: 0xF15D5D, tintAmount: 1); pauză; cazul "p2": TweenMax.to (colorMC, 0,5, colorTransform: tint: 0xC06CA8, tintAmount: 1); pauză; cazul "p3": TweenMax.to (colorMC, 0,5, colorTransform: tint: 0x644D9B, tintAmount: 1); pauză; cazul "p4": TweenMax.to (colorMC, 0,5, colorTransform: tint: 0x5E98C6, tintAmount: 1); pauză; cazul "p5": TweenMax.to (colorMC, 0,5, colorTransform: tint: 0x4789C2, tintAmount: 1); pauză; cazul "p6": TweenMax.to (colorMC, 0,5, colorTransform: tint: 0x55C4CB, tintAmount: 1); pauză; cazul "p7": TweenMax.to (colorMC, 0,5, colorTransform: tint: 0x57BC80, tintAmount: 1); pauză; cazul "p8": TweenMax.to (colorMC, 0,5, colorTransform: tint: 0x90CC6C, tintAmount: 1); pauză; cazul "p9": TweenMax.to (colorMC, 0,5, colorTransform: tint: 0xEBE666, tintAmount: 1); pauză; cazul "p10": TweenMax.to (colorMC, 0,5, colorTransform: tint: 0xF29C69, tintAmount: 1); pauză;
Modificați codul pentru a efectua propriile acțiuni!
Sper că ți-a plăcut acest tutorial, mulțumesc pentru lectură!
