Share
In questo tutorial imparerai come creare una ruota che gira usando Flash e AS3, con un'interfaccia adatta sia per dispositivi basati su mouse che su touch.
Diamo un'occhiata al risultato finale su cui lavoreremo:
Clicca e trascina il tuo mouse verticalmente per far girare la ruota; più lunga è la linea che si trascina, più velocemente la ruota girerà! Una volta che si ferma, la barra colorata in basso mostrerà il colore su cui è posizionata la ruota.
Usando elementi grafici pre-creati creeremo un'interfaccia colorata che sarà alimentata da diverse classi ActionScript 3.
L'utente sarà in grado di girare la ruota usando un gesto di trascinamento rappresentato da una linea sullo schermo; una linea più alta farà una rotazione più veloce.
Apri Flash e crea un documento 500x300px. Imposta la frequenza dei fotogrammi su 24 fps.
Verrà visualizzata un'interfaccia colorata dall'aspetto piacevole, composta da più forme, MovieClip e altro.
Le forme semplici sono state create utilizzando gli strumenti di disegno di Flash Pro e, poiché sono facili da duplicare, non spiegherò la loro creazione. Assicurati che il punto di rotazione della ruota sia al centro.
Puoi sempre guardare il FLA nei file di download di origine.
L'immagine sopra mostra il Nomi di istanza dei vari MovieClip. Prestare particolare attenzione al wheel.p MovieClip; queste sono le piccole linee nere che dividono i colori nella ruota, e lo sono dentro il ruota Un filmato. Sono nominati p1 a p10, andando in senso orario.
Useremo un motore di interpolazione diverso da quello predefinito incluso in Flash; questo renderà la transizione di colore del colorMC simbolo molto più facile.
Puoi scaricare TweenMax dal sito Web di Greensock.
Aggiungi il nome della classe, Principale, al Classe campo nel Pubblicare sezione del Proprietà pannello per associare il FLA alla classe del documento principale.
Creare una nuova classe ActionScript 3.0 (Cmd + N) e salvarla come Main.as nella tua cartella di classe.
Crea la tua struttura di base per iniziare a scrivere il tuo codice.
pacchetto import flash.display.Sprite; public class Main estende Sprite public function Main (): void // constructor code
Queste sono le classi che dovremo importare affinché la nostra classe funzioni. Il importare direttiva rende disponibili classi e pacchetti definiti esternamente al codice.
import flash.display.Sprite; import flash.display.Shape; import flash.events.MouseEvent; import flash.events.Event; import com.greensock.TweenMax;
Queste sono le variabili che useremo; leggi i commenti nel codice per saperne di più su di loro:
velocità var privata: Number = 0; // la velocità attuale della ruota private var paddle: Vector.= nuovo vettore. (); // un vettore che contiene gli MC p1, p2, ecc. nella riga var privata di stage: Shape; // la linea disegnata come il gesto per spostare la ruota private var lastPaddle: String; // rileverà il valore corrente della ruota
Il costruttore è una funzione che viene eseguita quando un oggetto viene creato da una classe ed è il primo da eseguire quando si crea un'istanza di un oggetto. Poiché questa è la nostra classe di documenti, verrà eseguita non appena viene caricato il file SWF.
funzione public final Main (): void // code ...
Per prima cosa aggiungiamo i vari Movie Clip a forma di paddle al vettore e aggiungiamo gli ascoltatori - scriviamo il ascoltatori () funzione successiva.
funzione public final Main (): void paddles.push (wheel.p1, wheel.p2, wheel.p3, wheel.p4, wheel.p5, wheel.p6, wheel.p7, wheel.p8, wheel.p9, wheel .p10); ascoltatori ( 'add');
Questa funzione aggiungerà o rimuoverà gli ascoltatori in base al parametro. I mouse ascoltatori sono impostati per disegnare la linea che controllerà la ruota.
ascoltatori di funzioni finali private (action: String): void if (action == 'add') stage.addEventListener (MouseEvent.MOUSE_DOWN, startDraw); stage.addEventListener (MouseEvent.MOUSE_UP, spinWheel); else stage.removeEventListener (MouseEvent.MOUSE_DOWN, startDraw); stage.removeEventListener (MouseEvent.MOUSE_UP, spinWheel);
La funzione successiva inizia a creare una linea in base alla posizione corrente del mouse e la posiziona sul palco. Viene attivato quando si fa clic sul mouse.
funzione finale privata startDraw (e: MouseEvent): void line = new Shape (); addChild (line); line.graphics.moveTo (mouseX, mouseY); line.graphics.lineStyle (8, 0x000000, 0.3); // è possibile modificare il colore e lo stile della linea qui stage.addEventListener (MouseEvent.MOUSE_MOVE, drawLine);
Mentre il mouse viene spostato, la linea continua in quella direzione.
private final function drawLine (e: MouseEvent): void line.graphics.lineTo (mouseX, mouseY);
Il prossimo codice viene eseguito quando viene rilasciato il pulsante del mouse, terminando la linea. Gli ascoltatori del disegno vengono rimossi per evitare di disegnare più righe e la velocità viene calcolata in base all'altezza della linea. Infine, viene chiamato un evento EnterFrame per ruotare effettivamente la ruota.
funzione finale privata spinWheel (e: MouseEvent): void stage.removeEventListener (MouseEvent.MOUSE_MOVE, drawLine); ascoltatori ( 'rm'); speed = line.height * 0.1; removeChild (line); riga = null; stage.addEventListener (Event.ENTER_FRAME, spin);
Questa è la funzione che gira la ruota e rileva il valore su cui atterra:
spin funzione privata finale (e: Evento): void / * Rotate Wheel * / wheel.rotationZ + = speed;
Qui rileviamo il valore corrente della ruota in base all'ultima pala toccata.
/ * Rileva valore * / per (var i: int = 0; i < 10; i++) if(indicator.hArea.hitTestObject(paddles[i])) lastPaddle = paddles[i].name;
La velocità della ruota viene ridotta ad ogni fotogramma per interrompere definitivamente la rotazione.
/ * Diminuisce velocità * / velocità - = 0,1;
Tutti i valori vengono resettati quando la ruota si ferma. Viene chiamata una funzione che eseguirà un'azione in base al valore finale.
Accentsconagua
/ * Rimuovi l'ascoltatore e ripristina la velocità quando la ruota si ferma * / se (velocità <= 0) stage.removeEventListener(Event.ENTER_FRAME, spin); speed = 0; setBarColor(lastPaddle); listeners('add'); Questa funzione eseguirà un'azione personalizzata in base all'ultimo valore della ruota. In questo caso cambia il colore della barra in basso, ma potresti farlo fare qualsiasi altra cosa.
function setBarColor (action: String): void switch (action) case 'p1': TweenMax.to (colorMC, 0.5, colorTransform: tinta: 0xF15D5D, tintAmount: 1); rompere; case 'p2': TweenMax.to (colorMC, 0.5, colorTransform: tinta: 0xC06CA8, tintAmount: 1); rompere; case 'p3': TweenMax.to (colorMC, 0.5, colorTransform: tinta: 0x644D9B, tintAmount: 1); rompere; case 'p4': TweenMax.to (colorMC, 0.5, colorTransform: tinta: 0x5E98C6, tintAmount: 1); rompere; case 'p5': TweenMax.to (colorMC, 0.5, colorTransform: tinta: 0x4789C2, tintAmount: 1); rompere; case 'p6': TweenMax.to (colorMC, 0.5, colorTransform: tinta: 0x55C4CB, tintAmount: 1); rompere; case 'p7': TweenMax.to (colorMC, 0.5, colorTransform: tinta: 0x57BC80, tintAmount: 1); rompere; case 'p8': TweenMax.to (colorMC, 0.5, colorTransform: tinta: 0x90CC6C, tintAmount: 1); rompere; case 'p9': TweenMax.to (colorMC, 0.5, colorTransform: tinta: 0xEBE666, tintAmount: 1); rompere; case 'p10': TweenMax.to (colorMC, 0.5, colorTransform: tinta: 0xF29C69, tintAmount: 1); rompere;
Cambia il codice per eseguire le tue azioni!
Spero che questo tutorial ti sia piaciuto, grazie per la lettura!
