Creați animații Flash în întregime în Illustrator

Lumea animației poate părea foarte intimidantă - între AfterEffects, Flash și orice altceva, sunt atât de multe de învățat. Și cine are timp? Nu vă temeți niciodată - puteți crea animații Flash simple, fără a părăsi niciodată limitele familiare ale Illustratorului și fără a cunoaște Flash. Iată două modalități ușoare de a face lucrurile să se miște.

Imagine finală a imaginii

Mai jos sunt două animații finale SWF pe care vom lucra la crearea. Doriți acces la fișierele vectoriale Source și copiile descărcate ale fiecărui tutorial, inclusiv acesta? Alăturați-vă Vector Plus pentru doar 9 $ pe lună.

Detalii tutoriale

  • Program: Adobe Illustrator CS4
  • Dificultate: Intermediar
  • Durata estimată de finalizare: 45 de minute

Tutorial video

Am creat acest tutorial video pentru a compliment acest tutorial text + imagine.

Metoda I: Blend și Morph

Pentru acest tip de animație, în care o formă se transformă în alta (și alta și alta, dacă doriți), vom folosi Blend Tool pentru a face între forme, apoi eliberați fiecare formă pe stratul propriu, apoi exportați acestea ca o secvență pentru fișierul Flash.

Pasul 1

Din moment ce această animație va fi utilizată pe Web, începeți cu un nou document RGB. Aici am patru icoane simple, reprezentând cele patru anotimpuri. Selectați toate formele, apoi centrați-le în poziție orizontală și verticală, utilizând panoul Align (sau Panoul de control). Asigurați-vă că fiecare formă se află pe același strat.

Pasul 2

Faceți dublu clic pe instrumentul Blend Tool din paleta de instrumente pentru a afișa opțiunile sale. Alegeți pașii specificați din meniul derulant Spacing și introduceți 8. Aceasta ne va permite o tranziție lină între forme, dar nu vom face prea multe straturi.

Pasul 3

Cu toate formele selectate, mergeți la Object> Blend> Make.

Pasul 4

Cu formele amestecate încă selectate, mergeți la Object> Expand. Aceasta va separa amestecul în forme individuale. Pentru ca acest lucru să funcționeze, formele individuale trebuie să fie disociate una de alta, așa că du-te la Object> Ungroup.

Pasul 5

Formele nereprezentate ar trebui să fie totuși pe un singur strat. În panoul Straturi, asigurați-vă că stratul este evidențiat, faceți clic pe meniul derulant și alegeți Release to Layers (Sequence). Veți observa că fiecare formă este acum pe stratul său propriu, iar fiecare strat are o culoare diferită. Dacă nu vedeți acest lucru, reveniți și asigurați-vă că ați dezghețat amestecul extins.

Pasul 6

Mergeți la File> Export și selectați Flash (SWF) ca format de fișier (NOTĂ: În funcție de versiunea Illustrator și / sau de versiunea Flash pe care ați instalat-o pe calculatorul dvs., formatul fișierului poate fi numit Macromedia Flash). Alegeți straturile AI în ramele SWF ca metodă de export.

Acum faceți clic pe butonul Avansat pentru a afișa mai multe opțiuni. Alegeți fără pierderi ca format imagine. Faceți clic pe Looping (Blocare), astfel încât animația dvs. să se redevină. Setările implicite sunt bune pentru restul casetei de dialog Opțiuni SWF, dar este posibil să doriți să experimentați cu ele în proiecte viitoare.

Pasul 7

Pentru a vedea animația în acțiune, faceți una din următoarele două acțiuni: Faceți clic pe butonul Previzualizare Web din caseta de dialog Opțiuni SWF, care va lansa browserul Web implicit și va reda animația. Sau, salvați fișierul SWF, apoi trageți-l pe o fereastră goală a browserului pentru ao reda.

Opțiuni

1. Când lucrați cu un amestec pentru a crea o animație, este posibil să fi observat caseta de selectare Animate Blends din dialogul Opțiuni avansate SWF. Aceasta face ceea ce spune: folosește amestecul pentru animație și separă fiecare formă extinsă în proces. Deci, într-adevăr, nu trebuie să faceți pașii 4 și 5, dar vă ajută să înțelegeți cum Illustrator creează animația.

2. Dacă preferați, fișierul Illustrator poate fi exportat în Photoshop, apoi deschis în ImageReady pentru a crea animații acolo. Urmați pașii de la 1 la 5 de mai sus, apoi exportați ca fișier Photoshop (PSD). Cheia aici este de a verifica ambele straturi de scriere și maximizabilitatea de editare în caseta de dialog Opțiuni de export. Când deschideți fișierul în Photoshop, veți vedea că fiecare strat (în acest caz, toate cele 29) este păstrat. Apoi puteți să treceți la ImageReady și să modificați cadrul de animație după cadru.

Acum, că înțelegeți conceptul de bază, puteți experimenta tot felul de amestecuri și morfuri. Pentru unele animații cu adevărat trippy, încercați să utilizați obiecte 3D sau forme cu gradient.

Metoda II: Panoul de aspect

Pasul 1

Din nou, începeți cu un fișier RGB. Folosesc această siluetă simplă zombie, cu un umplere de negru și un accident vascular cerebral de nici unul. Voi adăuga o serie de lovituri în afara formei, astfel încât atunci când sunt animate, loviturile vor radia din formă.

Selectați forma, accesați panoul Aspect și alegeți Adăugați un Stroke New din meniul derulant. În CS4, toate modificările la acest accident vascular cerebral nou pot fi făcute direct în panoul Aspect. Trecând de la stânga la dreapta, faceți clic mai întâi pe cuvântul Stroke pentru a afișa opțiunile Stroke. Faceți clic pe a treia pictogramă de lângă Aliniere accident vascular cerebral pentru alinierea acesteia la exteriorul formei. Apoi, faceți clic pe modelul de culori pentru a aplica culoarea (am început cu negru) și apoi alegeți în cele din urmă greutatea cursei în al treilea câmp.

Pasul 2

Pentru a adăuga cursoarele rămase, puteți repeta pasul unu de mai multe ori, schimbând opțiunile, culoarea și greutatea de fiecare dată. Dar pentru a salva un pic de timp, trebuie doar să faceți clic pe pictograma Duplicare selectare element din partea de jos a panoului de cursă pentru a face o copie a cursei. Acum alegeți copia (ar trebui să fie una SUB originalul) și schimbați culoarea la un albastru foarte închis (sau orice doriți) și greutatea la 2 puncte.

Repetați această procedură de mai multe ori, adăugând o lovitură mai ușoară și mai groasă de fiecare dată. Rezultatul final ar trebui să arate ceva asemănător imaginii de mai jos. Veți vedea fiecare cursa suplimentară în panoul Aspect.

Pasul 3

Accesați Obiect> Extindeți aspectul. Acest lucru va extinde și separa loviturile.

Pasul 4

Ungroupați loviturile extinse și, la fel ca în partea I, selectați stratul din panoul Straturi și alegeți Release to Layers (Sequence) din meniul derulant (pentru această metodă trebuie să faceți acest pas).

Pasul 5

Exportați fișierul în Flash, ca în pasul 6 de mai sus. Pentru această imagine, voi schimba culoarea de fundal în negru, dar celelalte setări rămân aceleași.

Pasul 6

Pentru a vedea animația în acțiune, faceți una din următoarele două acțiuni: Faceți clic pe butonul Previzualizare Web din caseta de dialog Opțiuni SWF, care va lansa browserul Web implicit și va reda animația. Sau, salvați fișierul SWF, apoi trageți-l pe o fereastră goală a browserului pentru ao reda.

Concluzie

Ca și înainte, previzualizați fișierul în browserul Web. Încercați să trageți fereastra browserului mai mare și mai mică. Deoarece acesta este un fișier bazat pe vectori, calitatea este excelentă la orice dimensiune. Animație fericită!