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.
Diamo un'occhiata al risultato finale su cui lavoreremo:
Usando ActionScript, duplicheremo un MovieClip, quindi modificheremo le sue proprietà alfa, scala e posizione per ottenere un buon effetto trailer.
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.
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".
Crea un nuovo file ActionScript (Command + N) e salvalo come "MouseTrailer.as"
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;
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
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;
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);
Questa funzione gestirà il trailer, impostandone le proprietà.
funzione privata startTrailer (e: MouseEvent): void
Questo codice crea una nuova LightBall quando il mouse viene spostato.
/ * Crea un nuovo oggetto LightBall * / lightBall = new LightBall ();
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;
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);
L'alfa, la scala e la posizione verticale vengono gestiti in questa funzione.
funzione privata animate (e: Event): void
L'alfa viene ridotta del 5% per ogni fotogramma.
/ * Alpha * / e.target.alpha - = 0.05;
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);
La scala viene ridotta del 10% ogni fotogramma.
/ * Scala * / e.target.scaleX - = 0,1; e.target.scaleY - = 0,1;
/ * Posizione Y * / e.target.y + = 3;
È ora di tornare al Fla.
Apri il pannello Proprietà, aggiungi "MouseTrailer" come Classe documento e sarai pronto per testare il tuo film!
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.