În acest tutorial vom folosi animația cronologică pentru a crea o clasă personalizată. Apoi vom folosi clasa pe două filme MovieClips diferite și distincte, duplicând efectiv animația la aceste simboluri.
Prezentare scurta
Una dintre noile caracteristici care au apărut în Flash CS3, împreună cu ActionScript 3, a fost abilitatea de a copia animația cronologică ca și codul AS3. În acest tutorial vom crea o clasă personalizată care poate fi utilizată în orice clip video pe care îl alegeți. Clasa rezultată este în mare parte bazată pe XML și nu este ceva ce ați dori să scrieți manual - bine, dacă nu sunteți pregătiți pentru o mulțime de muncă și frustrare!
În exemplul SWF de mai sus, noi doar creștem și estompăm filmul MovieClips, însă ar putea să aveți o animație foarte complexă și să copiați la ActionScript la fel de bine. Cel mai bun lucru despre copierea animației cronologiei într-o clasă este reutilizarea. Puteți observa că cele două simboluri urmăresc exact același model de animație.
Pasul 1: Configurarea documentului
Deschideți un nou document Flash și setați următoarele proprietăți
Dimensiune document: 400x200px
Culoare fundal: #FFFFFF
Pasul 2: Configurarea filmului
Din panoul Instrumente selectați Instrumentul Oval și desenați un cerc verde pe scenă. Puteți ține apăsată tasta Shift în timp ce trageți cercul în formă conformă unui cerc și nu o elipsă extinsă.
În panoul Proprietăți, dați cercului următoarele dimensiuni
W: 27,00
H: 27,00
Faceți clic dreapta pe cercul pe care tocmai l-ați creat și alegeți "Convertire la simbol". introduce cerc ca nume și asigurați-vă că este setat tipul Clip video.
Pasul 3: Adăugarea animației la clipul video
În linia de timp, faceți clic dreapta pe cadrul 60 și alegeți "Insert KeyFrame".
Asigurați-vă că sunteți încă în rama 60 și în panoul Instrumente utilizați instrumentul Transformare liberă pentru a glisa cercul la aproximativ două ori mai mare decât dimensiunea originală.
Asigurați-vă că sunteți încă în rama 60 din cercul MovieClip. În panoul Properties alegeți "Color Effect". În meniul Style, alegeți "Alpha" și setați-l la 0%.
Faceți clic pe stratul pe care este activ cercul pentru a vă asigura că toate cadrele sunt evidențiate. Alternativ, puteți face clic pe primul cadru, apoi faceți clic pe Shift pe ultimul cadru pentru a vă asigura că toate cadrele sunt evidențiate. Apoi faceți clic dreapta oriunde între cadrele evidențiate și alegeți "Creare Clasic Tween".
Acum puteți testa animația dvs., mergând la Meniu> Control> Redare. Ar trebui să ai un film de filmare care crește și se estompează.
Pasul 4: Copierea animației
Acum suntem gata să copiem animația cronologică și să codificăm clasa noastră.
Asigurați-vă că toate cadrele sunt evidențiate folosind tehnica de mai sus. Apoi, faceți clic dreapta pe tween în cronologie și alegeți "Copy Motion As ActionScript 3.0". În promptitudinea care apare, dați-i numele instanței "GrowFade"
Copiați codul care apare în clipboard.
Pasul 5: Codarea clasei
Creați un nou fișier ActionScript accesând Meniu> Fișier> Nou și apoi alegerea Fișier ActionScript.
Adăugați următorul cod în noul fișier AS:
pachet import flash.display.MovieClip; import fl.motion.Animator; clasa publică GrowFade extinde MovieClip var GrowFade_animator: Animator; funcția publică GrowFade () // constructor code funcția publică cresAndFade (): void
Aici ne deschidem pachetul și facem câteva importuri. Clasa Animator este ceea ce este folosit pentru a face animația în clasa noastră. Functia growAndFade () este locul în care vom lipi acțiunea ActionScript copiată din pasul de mai sus. Facem acest lucru în continuare.
În interiorul growAndFade () introduceți funcția ActionScript. Dacă trebuie să o copiați din nou, urmați pașii de mai sus și asigurați-vă că îi dați numele instanței "GrowFade".
growAndFade funcția ar trebui să pară acum așa ceva
pachet funcția publică cresAndFade (): void import fl.motion.Animator; var. GrowFade_xml: XML = ; Var GrowFade_animator: Animator = Animator nou (GrowFade_xml, GrowFade); GrowFade_animator.play ();
Trebuie să efectuăm niște lucrări de curățire pe această temă.
Mai întâi trebuie să eliminăm declarația de import, deoarece am făcut deja acest lucru la începutul clasei.
În continuare vom dori să declarăm GrowFade_animator ca variabilă locală la clasă, așa că o mutăm în partea de sus și o instanțiăm în cadrul growAndFade funcționează ca atare: GrowFade_animator = Animator nou (GrowFade_xml, acest lucru)
S-ar putea să fi observat că am schimbat și al doilea parametru acest. Motivul pentru care am făcut acest lucru este să putem folosi această clasă pe orice filmuleț; dacă n-ar fi schimbat-o acest atunci numai clasele cu numele de instanță "GrowFade" ar putea utiliza această clasă.
Aici este clasa completă cu noile modificări și un mic plus. Vom discuta această adăugire în continuare.
pachet import flash.display.MovieClip; import fl.motion.Animator; clasa publica GrowFade extinde MovieClip var GrowFade_animator: funcția publică animator GrowFade () // constructor code funcția publică cresAndFade (): void import fl.motion.Animator; var. GrowFade_xml: XML = ; GrowFade_animator = Animator nou (GrowFade_xml, acest lucru); GrowFade_animator.play (); // Câte ori să repetați animația 0 = pentru totdeauna GrowFade_animator.repeatCount = 0;
Veți observa că am adăugat repeatCount proprietate. Această setare specifică de câte ori să repetați animația. Setarea la zero înseamnă că se va repeta pentru totdeauna.
Pasul 6: Configurarea filmelor
Înapoi în FLA, ștergeți cercul din scenă și eliminați toate cadrele din cronologie.
În bibliotecă, dați clic dreapta pe cerc clipul video și alegeți "Proprietăți".
Dați cercului numele de clasă "Cerc" și setați Clasa de bază la "GrowFade"; deoarece clasa GrowFade extinde filmulClipClip îl putem folosi ca clasă de bază a cercului. Nu am creat o clasă Circle, ci pentru că am introdus GrowFade ca clasă de bază, Flash va crea automat o clasă pentru Cercul care extinde GrowFade, când este creat SWF. Acesta este modul în care putem folosi cât mai multe clipuri video pe care le dorim, toți împărtășind clasa GrowFade.
Apoi, trageți un dreptunghi albastru pe scenă.
În panoul Proprietăți, dați dreptunghiului următoarele proprietăți:
W: 83,00
H: 30:00
Faceți clic dreapta pe dreptunghi și alegeți "Convertire la simbol"; dă-i numele pătrat.
Ștergeți dreptunghiul din scenă. În bibliotecă, faceți clic dreapta pe pătratul MovieClip. Alegeți "Proprietăți" și dați-i numele de clasă "Pătrat" și setați Clasa de bază la "GrowFade", așa cum am făcut-o cu cercul de mai sus.
Pasul 6: Aplicarea clasei la clipurile video
Creați un nou fișier ActionScript și adăugați următorul cod:
pachet import flash.display.MovieClip; public class Main extinde MovieClip var cerc: Circle; var pătrat: Pătrat; funcția publică principală () cerc = cerc nou (); cerc.x = 50 cerc.y = 50; addChild (cerc); circle.growAndFade (); pătrat = pătrat nou; square.x = 200; square.y = 50; addChild (pătrat); square.growAndFade ();
Deoarece am setat clasa de bază a cercului și pătrat la GrowFade, putem apela growAndFade () pe ele.
Setați clasa de documente a filmului la Main și testați filmul. Ar trebui să aveți două clipuri video separate utilizând aceeași animație GrowAndFade.
Concluzie
Fiind capabil să copiați animația cronologică este o mare plus față de Flash. Indiferent cât de complexă este o animație pe care o aveți, Flash se poate ocupa de ea pentru dvs. și posibilitatea de a împărtăși aceeași animație în mai multe clipuri video este un economizor de timp uriaș.
Sper că te-ai bucurat de acest tutorial, mulțumesc pentru lectură!
Share
Accentsconagua
