Animați o explozie de desene animate cu Flash Professional - Basix

În acest tutorial vă vom arăta cum să animați o explozie minunată în Flash, pe care o puteți folosi pentru un joc de acțiune cartoons. Vă vom duce de la concepție la finalizare, apoi vă vom arăta cum să îl exportați, precum și cum să îl importați în alte scene.


Rezultatul final al rezultatelor

Să aruncăm o privire la rezultatul final la care vom lucra:


Pasul 1: Alegeți tipul de explozie dorit

Decideți ce fel de explozie ar fi cel mai potrivit pentru scena dvs. Este o mică explozie? Un nucleu? A 60-a Batman-esque, flashy, "WHAM"? În acest caz, vom face o explozie mai mică, dar cu experiență puteți face orice doriți.


Pasul 2: Căutați referințe

Odată ce știți ce doriți să animați căutați pentru referință. Internetul este uimitor pentru asta, deoarece puteți căuta clipuri video legate de ceea ce doriți să faceți și studiați-le cu atenție.


Pasul 3: Începeți să desenați

Odată ce sunteți gata apucați câteva bucăți de hârtie și începeți să vă trageți explozia. Animația este planificată prin keyframes, care sunt, în general, părțile cele mai extreme ale animației care spun povestea bruta a modului în care se va mișca ceva. În acest caz, primul lucru pe care ar trebui să vă gândiți este lumina inițială a luminii.


Pasul 4: Desenați toate cadrele cheie

Apoi, trageți cheile care explică modul în care fumul și lumina ies din bomba. Veți dori cel puțin să ajungeți acolo unde fumul apare mai întâi din lumină, atunci când fumul este la cel mai mare și cel mai mare și apoi un cadru la sfârșit. Iată desenele noastre cheie, care ilustrează acest proces:


Pasul 5: Desenați toate interfața

Desenați interfața pentru aceste cadre. Practic, acum desenați toate cadrele care se încadrează în mijlocul acestor cadre cheie. Vom include schițele noastre aici pentru referință.


Pasul 6: Scanați desenele

În acest moment, scanăm toate desenele noastre, astfel încât să le putem urmări în Flash.


Pasul 7: Modificați setările de bază pentru Flash

Deschideți Flash și schimbați setările la ceea ce ar fi cel mai potrivit pentru scena dvs. curentă. Puteți vedea toate setările dvs. de bază în panoul proprietăților din partea dreaptă a ecranului. În cazul nostru, vom lucra la 550x500px și 24 de cadre pe secundă, cu un fundal alb.


Pasul 8: Importați desenele

Apoi trebuie să importați toate desenele de linie în Flash Pro Bibliotecă. Biblioteca este, în principiu, un loc unde toate fișierele pe care le utilizați în animația dvs. sunt stocate pentru păstrare. Puteți face acest lucru prin a merge la Fișier> Import> Importare în scenă, apoi selectând toate desenele și lovind Open.

După aceasta, acestea vor apărea pe același chenar cheie, dar dacă le selectați pe toate, faceți clic dreapta și apăsați pe "Distribuire la straturi", acestea vor apărea ca straturi separate, toate pe același cadru cheie. Apoi puteți glisa și arunca cu ușurință tastele individuale în pozițiile corecte, fie pe propriile lor straturi pe toate pe un singur strat, oricare ar prefera.


Pasul 9: Desenați liniile inițiale

Adăugați un strat nou pe cronologia dvs., apoi începeți să desenați linii vechi utilizând instrumentul Linie. În general, nu ne deranjăm cu ajutorul instrumentului perie deoarece ajungeți la prea multe noduri pe linii care pot face lucrurile extrem de greu de schimbat în orice mod mai târziu. Ceea ce trebuie practic să faceți este să trageți linii folosind instrumentul de linie, apoi să utilizați instrumentul de selecție pentru a manipula curba dintre cele două puncte. (Mai multe sfaturi despre desenul Flash sunt disponibile aici).


Pasul 10: Conversia liniilor în Umpleri

Odată ce cadrul a fost complet urmărit cu instrumentul de linie, selectăm toate liniile, apoi mergeți la Modificați> Formă> Conversia liniilor în Umpleri. Ocazional vor exista probleme când biții de linie vor dispărea. Dacă se întâmplă acest lucru, începeți prin a selecta bucăți mai mici ale imaginii, apoi faceți totul împreună. Odată ce faceți acest lucru, puteți edita adâncimea liniei utilizând instrumentul de selecție și făcând clic și trasând marginile liniilor.


Pasul 11: Culoarea desenelor

Culoarea în liniile care utilizează scula de vopsea.


Pasul 12: Finalizați toate cadrele de animație

Repetați pașii 9-11 până când toate cadrele sunt terminate.


Pasul 13: Organizați-vă animația

Selectați totul pe un cadru, apăsați F8 și transformați-l într-un simbol. Denumiți-o corect și va apărea în biblioteca dvs. pentru a fi utilizată și reutilizată în orice moment. Organizarea este foarte importantă în timp ce animați. Lucrurile pot deveni rapid confuze dacă nu numiți și nu sortați totul în mod corespunzător, așa că vă rugăm să faceți acest lucru. Puteți chiar crea foldere în bibliotecă.


Pasul 14: Îndepărtarea cepei

Un instrument important care vă poate ajuta să vă animați este instrumentul pentru piele de ceapă. Cu Ceiling Skinning puteți vizualiza cu ușurință cadrele mai apropiate de cea pe care o editați, astfel încât să puteți spune imediat dacă o animație va funcționa conform planului sau nu. Butonul de piele de ceapă este situat în partea de jos a liniei de timp.


Pasul 15: Previzualizați animația

Pentru a previzualiza animația completă în orice moment, accesați Control> Test Movie> Test. Acesta vă va preîncărca întreaga animație și vă va arăta exact cum va arăta odată exportată.


Pasul 16: Exportați filmul

Când sunteți gata să exportați doar mergeți la Fișier> Export> Export film. Denumiți-vă ce doriți, alegeți .swf din meniul derulant și apoi salvați. În funcție de mărimea animației dvs., va trebui să așteptați puțin timp.


Pasul 17: Exportați ca GIF

Exportul de imagini .gif este aproape același. Când ai lovit Fișier> Export> Export film doar alege .gif in loc de .swf din meniul drop-down.


Pasul 18: Importați animația într-o scenă existentă

Pentru a importa o explozie într-o scenă deja existentă, deschideți mai întâi ambele scene. Apoi, selectați toate cadrele animației de explozie de pe cronologie, copiați toate cadrele, apoi apăsați Ctrl + F8. Va apărea un dialog. Denumiți explozia, apoi salvați-o ca grafică. Apăsați OK. Un ecran gol ar trebui să apară fără animație. Apoi faceți clic pe primul cadru al liniei temporale noi și inserați toate cadrele dvs. După aceasta, apăsați butonul "Scenă 1" de sub cronologie, dar deasupra ferestrei de animație pentru a reveni la cronologia originală. Odată ce faceți acest lucru, animația dvs. ar trebui să fie în Bibliotecă. Selectați animația din bibliotecă, faceți clic dreapta și copiați-o. Veți putea apoi să o lipiți în biblioteca oricărui alt FLA pe care îl aveți deschis.


Pasul 19: Creați un clip video

Efectuarea clipurilor video este aproape identică cu cea descrisă în pasul anterior. Pentru a crea un clip video, urmați exact instrucțiunile din ultimul pas, însă alegeți "Movie Clip", în loc de "Graphic", când ajungeți la dialog după ce apăsați Ctrl + F8. Diferența dintre un clip video și un clip video este că filmul clip poate fi identificat în mod unic folosind ActionScript, limbajul de codare folosit de Flash pentru a face jocuri și medii interactive. Când filmul este compilat, o copie este creată din bibliotecă și transformată pentru animație. Copia poate fi neclară, scalată etc., în timpul execuției, fără a fi nevoie să creați animații separate la momentul designului, reducând astfel cantitatea de memorie a calculatorului necesară și menținând dimensiunea fișierului SWF mic.


Pasul 20: Creați o foaie Sprite

Pentru a crea o foaie de sprite a animației, apăsați mai întâi Fișier> Export> Export film și selectați Secvență PNG pentru a crea un set de grafică PNG, câte unul pentru fiecare cadru. După ce au fost create, puteți folosi orice software de editare a imaginilor (cum ar fi Photoshop) pentru a le importa ca lot și apoi copiați / inserați-le pe toate într-un fișier de imagine mai mare.

Alternativ, puteți face scena dvs. Flash mai mare, faceți ca fiecare cadru de animație să apară simultan, apoi mutați imaginile individuale în loc înainte de a exporta o singură imagine.


Click pentru marire.

O a treia opțiune este utilizarea instrumentului lui Keith Peters, SWFSheet.

Sperăm să vă bucurați de acest tutorial! Dacă faceți o explozie cu ea, vă rugăm să o partajați în comentarii :)

Cod