Crea un trailer del mouse luminoso in Flash

I trailer del mouse sono oggetti che seguono il cursore del mouse mentre lo sposti. In questo tutorial, ti aiuterò a creare un trailer del mouse blu e lucido utilizzando ActionScript 3.0.


Anteprima del risultato finale

Diamo un'occhiata al risultato finale su cui lavoreremo:

Passaggio 1: breve panoramica

Usando ActionScript, duplicheremo un MovieClip, quindi modificheremo le sue proprietà alfa, scala e posizione per ottenere un buon effetto trailer.

Passaggio 2: avvio

Apri Flash e crea un nuovo file Flash (ActionScript 3).

Imposta le dimensioni dello stage sulla risoluzione desiderata e aggiungi un colore di sfondo. Ho usato dimensioni 600x300 e aggiunto un gradiente radiale blu (# 4584D4, # 184D8F). Inoltre, ho aggiunto un rettangolo nero con alfa al 60% e testo per visualizzare un messaggio di istruzioni. Diamo un'occhiata all'immagine.

Passaggio 3: creazione della forma principale

Questo trailer è composto da una semplice forma che viene duplicata e ridimensionata quando si sposta il mouse.

Seleziona lo strumento Ovale, disegna un cerchio di 6x6 px e riempilo con un gradiente radiale (#FFFFFF, # 5CFAFF).

Converti questa forma in un MovieClip aggiungi un filtro Glow, usa i valori nella seguente immagine:

Convertilo in MovieClip e chiamalo "LightBall", ricorda di selezionare l'opzione "Esporta per ActionScript".

Passaggio 4: ActionScript

Crea un nuovo file ActionScript (Command + N) e salvalo come "MouseTrailer.as"

Passaggio 5: Importa classi necessarie

Queste sono le classi di cui avremo bisogno, se hai bisogno di aiuto specifico con qualcuno di loro, consulta la guida di Flash (F1).

 pacchetto import flash.display.Sprite; import flash.ui.Mouse; import flash.events.MouseEvent; import flash.events.Event;

Passaggio 6: Classi del trailer del mouse

Estendiamo la classe Sprite per accedere al metodo addChild (). Ricorda che il nome della classe deve essere uguale al nome del file.

la classe pubblica MouseTrailer estende Sprite 

Passaggio 7: variabili

C'è solo una variabile in questa classe, la variabile LightBall. Questo è usato per creare una nuova istanza della LightBall che abbiamo creato nel Fla.

var lightBall: LightBall;

Passaggio 8: costruttore

Nella funzione di costruzione aggiungeremo le linee che nascondono il cursore del mouse e l'ascoltatore che avvierà il trailer.

 public function MouseTrailer (): void Mouse.hide (); stage.addEventListener (MouseEvent.MOUSE_MOVE, startTrailer); 

Passaggio 9: avviare la funzione Trailer

Questa funzione gestirà il trailer, impostandone le proprietà.

 funzione privata startTrailer (e: MouseEvent): void 

Passaggio 10: Duplicazione della LightBall

Questo codice crea una nuova LightBall quando il mouse viene spostato.

 / * Crea un nuovo oggetto LightBall * / lightBall = new LightBall ();

Passaggio 11: posizione

La nuova posizione di LightBall si basa sulla larghezza e altezza della clip e sulla posizione del cursore del mouse.

 / * Posizione * / lightBall.x = mouseX + Math.random () * lightBall.width; lightBall.y = mouseY - Math.random () * lightBall.height;

Passaggio 12: aggiunta allo stage

Aggiungiamo la LightBall allo stage con il seguente codice:

 / * Aggiungi a Stage * / addChild (lightBall); / * Aggiungi funzione Listener to Animate * / lightBall.addEventListener (Event.ENTER_FRAME, animato);

Passaggio 13: funzione di animazione

L'alfa, la scala e la posizione verticale vengono gestiti in questa funzione.

 funzione privata animate (e: Event): void 

Step 14: Alpha

L'alfa viene ridotta del 5% per ogni fotogramma.

 / * Alpha * / e.target.alpha - = 0.05;

Passaggio 15: rimuovere oggetti invisibili

Quando la LightBall non è più visibile (alpha < 0) the object is removed.

 / * Se lightBall non è più visibile, rimuovilo * / if (e.target.alpha <= 0)  e.target.removeEventListener(Event.ENTER_FRAME, animate); removeChild(e.target as Sprite); 

Step 16: Scala

La scala viene ridotta del 10% ogni fotogramma.

 / * Scala * / e.target.scaleX - = 0,1; e.target.scaleY - = 0,1;

Passaggio 17: posizione verticale

 / * Posizione Y * / e.target.y + = 3; 

Passaggio 18: utilizzo della classe

È ora di tornare al Fla.

Apri il pannello Proprietà, aggiungi "MouseTrailer" come Classe documento e sarai pronto per testare il tuo film!

Conclusione

Ora hai un bel trailer per il mouse che puoi personalizzare come vuoi. Prova a cambiare la forma di MovieClip, le dimensioni, il colore: ci sono molte opzioni! Spero che ti sia piaciuto questo tutorial, grazie per la lettura.