In questo tutorial useremo l'animazione della timeline per creare una classe personalizzata. Utilizzeremo quindi la classe su due MovieClip diversi e distinti, duplicando efficacemente l'animazione con questi simboli.
Breve panoramica
Una delle nuove funzionalità di Flash CS3, insieme a ActionScript 3, era la possibilità di copiare l'animazione della timeline come codice AS3. In questo tutorial creeremo una classe personalizzata che può essere utilizzata su qualsiasi clip filmato che scegli. La classe risultante è per lo più basata su XML e non è qualcosa che vorresti scrivere a mano - beh, a meno che tu non sia impegnato in un sacco di duro lavoro e frustrazione!
Nell'esempio di SWF sopra, stiamo solo crescendo e sbiadendo le MovieClip, ma potreste avere un'animazione molto complessa e copiarne anche su ActionScript. La cosa migliore di copiare l'animazione della timeline in una classe è la riusabilità. Puoi vedere che i due simboli seguono lo stesso identico schema di animazione.
Passaggio 1: impostazione del documento
Aprire un nuovo documento Flash e impostare le seguenti proprietà
Dimensioni del documento: 400x200px
Colore di sfondo: #FFFFFF
Passaggio 2: impostazione del MovieClip
Dal pannello Strumenti seleziona lo strumento Ovale e disegna un cerchio verde sul palco. Puoi tenere premuto il tasto Maiusc mentre trascini il cerchio verso la forma conforme a un cerchio e non un'ellisse estesa.
Nel pannello Proprietà, assegna al cerchio le seguenti dimensioni
O: 27.00
H: 27,00
Fai clic con il pulsante destro del mouse sul cerchio appena creato e scegli "Converti in simbolo". accedere cerchio come il nome e assicurarsi che il Tipo sia impostato su Un filmato.
Passaggio 3: aggiunta dell'animazione alla MovieClip
Sulla timeline, fai clic con il pulsante destro del mouse sul frame 60 e scegli "Inserisci KeyFrame".
Assicurati di essere ancora sul frame 60 e nel pannello Strumenti usa lo strumento Trasformazione libera per trascinare il cerchio approssimativamente il doppio della sua dimensione originale.
Assicurati di essere ancora sul frame 60 sul cerchio MovieClip. Nel pannello Proprietà scegli "Effetto colore". Nel pulldown Style scegli "Alpha" e impostalo su 0%.
Fai clic sul livello su cui si trova il cerchio per assicurarti che tutti i fotogrammi siano evidenziati. In alternativa, puoi fare clic sul primo fotogramma, quindi premere Maiusc e fare clic sull'ultimo fotogramma per accertarsi che tutti i fotogrammi siano evidenziati. Quindi fai clic con il tasto destro in qualsiasi punto tra i frame evidenziati e scegli "Crea Tween classico".
Ora puoi testare la tua animazione andando su Menu> Controllo> Riproduci. Dovresti avere un MovieClip in crescita e in dissolvenza.
Passaggio 4: copia dell'animazione
Ora siamo pronti per copiare la nostra animazione della timeline e codificare la nostra classe.
Assicurati che tutti i fotogrammi siano evidenziati usando la tecnica sopra. Quindi, fai clic con il pulsante destro del mouse sull'interpolazione nella timeline e scegli "Copia movimento come ActionScript 3.0". Nel prompt che appare, dargli il nome di istanza di "GrowFade"
Copia il codice che appare negli appunti.
Passaggio 5: codifica della classe
Crea un nuovo file ActionScript andando a Menu> File> Nuovo e quindi scegliendo File ActionScript.
Aggiungi il seguente codice al nuovo file AS:
package import flash.display.MovieClip; import fl.motion.Animator; la classe pubblica GrowFade estende MovieClip var GrowFade_animator: Animator; funzione pubblica GrowFade () // codice costruttore funzione pubblica growAndFade (): void
Qui apriamo il nostro pacchetto e facciamo alcune importazioni. La classe Animator è ciò che viene utilizzato per animare la nostra classe. La funzione growAndFade () è dove incolleremo il codice ActionScript copiato dal passaggio precedente. Lo facciamo dopo.
Dentro il growAndFade () funzione incolla il codice ActionScript. Se hai bisogno di copiarlo di nuovo, segui i passaggi precedenti e assicurati di dargli il nome dell'istanza "GrowFade".
Il growAndFade la funzione dovrebbe ora assomigliare a questo
package public function growAndFade (): void import fl.motion.Animator; var GrowFade_xml: XML = ; var GrowFade_animator: Animator = new Animator (GrowFade_xml, GrowFade); GrowFade_animator.play ();
Abbiamo bisogno di eseguire alcuni lavori di pulizia su questo.
Per prima cosa dobbiamo rimuovere la dichiarazione di importazione dal momento che l'abbiamo già fatta all'inizio della classe.
In seguito vorremmo dichiarare il GrowFade_animator come variabile locale alla classe, quindi la spostiamo verso l'alto e la istanziamo all'interno di growAndFade funzione in questo modo: GrowFade_animator = new Animator (GrowFade_xml, questo)
Avrai notato che abbiamo anche cambiato il secondo parametro in Questo. Il motivo per cui lo abbiamo fatto è che possiamo usare questa classe su qualsiasi MovieClip; se non lo avessimo cambiato Questo quindi solo le classi con il nome di istanza "GrowFade" sarebbero in grado di utilizzare questa classe.
Ecco la classe completa con le nuove modifiche e una piccola aggiunta. Discuteremo di questa aggiunta il prossimo.
package import flash.display.MovieClip; import fl.motion.Animator; classe pubblica GrowFade estende MovieClip var GrowFade_animator: funzione pubblica Animatore GrowFade () // codice costruttore funzione pubblica growAndFade (): void import fl.motion.Animator; var GrowFade_xml: XML = ; GrowFade_animator = new Animator (GrowFade_xml, this); GrowFade_animator.play (); // Quante volte ripetere l'animazione 0 = per sempre GrowFade_animator.repeatCount = 0;
Noterai che abbiamo aggiunto il repeatCount proprietà. Impostando questo specifica quante volte ripetere l'animazione. Impostarlo a zero significa che si ripeterà per sempre.
Passaggio 6: impostazione dei MovieClip
Di nuovo nel FLA, elimina il cerchio dallo stage e rimuovi tutti i fotogrammi dalla timeline.
Nella libreria, fare clic con il tasto destro del mouse su cerchio filmato e scegliere "Proprietà".
Dare al cerchio il nome di classe "Circle" e impostare la Base Class su "GrowFade"; poiché la classe GrowFade estende MovieClip, possiamo usarla come classe base del cerchio. Non abbiamo creato una classe Circle, ma poiché abbiamo inserito GrowFade come Base Class, Flash creerà automaticamente una classe per il Circle che estende GrowFade, quando viene creato il file SWF. Questo è il modo in cui siamo in grado di utilizzare tutti i film clip che vogliamo, tutti condividendo la classe GrowFade.
Quindi, disegna un rettangolo blu sul palco.
Nel pannello Proprietà assegna a questo rettangolo le seguenti proprietà:
W: 83,00
H: 30:00
Fare clic con il tasto destro sul rettangolo e scegliere "Converti in simbolo"; dagli il nome piazza.
Elimina il rettangolo dallo stage. Nella Libreria, fai clic con il tasto destro del mouse sul quadrato MovieClip. Scegli "Proprietà" e assegnagli il nome di classe "Square" e imposta la classe base su "GrowFade" come abbiamo fatto con il cerchio sopra.
Passaggio 6: Applicazione della classe ai clip filmato
Crea un nuovo file ActionScript e aggiungi il seguente codice:
package import flash.display.MovieClip; public class Main estende MovieClip var circle: Circle; var square: Square; funzione pubblica Main () circle = new Circle (); circle.x = 50 circle.y = 50; addChild (cerchio); circle.growAndFade (); quadrato = nuovo quadrato; square.x = 200; square.y = 50; addChild (quadrato); square.growAndFade ();
Poiché impostiamo la classe base del cerchio e del quadrato su GrowFade, possiamo chiamare il growAndFade () metodo su di loro.
Imposta la classe di documento del film su Principale e prova il film. Dovresti avere due clip film separati usando la stessa animazione GrowAndFade.
Conclusione
Essere in grado di copiare l'animazione della timeline è una grande aggiunta a Flash. Indipendentemente dalla complessità di un'animazione, Flash è in grado di gestirlo per te e la possibilità di condividere la stessa animazione su molti filmati diversi è un enorme risparmio di tempo.
Spero ti sia piaciuto questo tutorial, grazie per la lettura!
Share
Accentsconagua
