Animatia in Flash este un capitol vast, fiind unul din principalele lucruri pentru care este folosit programul Adobe Flash. Sunt necesare mai multe lectii pentru a fi prezentate elementele de baza in crearea si utilizarea animatiei in Flash.
In aceasta lectie e prezentata partea introductiva si esentiala ce trebuie stiuta despre animatie. Pe parcurs, in lectiile din acest curs vor fi si tutoriale mai avansate, cu lucruri si exemple mai complexe, dar care au la baza cele aratate in aceasta lectie.
Animatia in Flash (si in general) se realizeaza prin derularea de mai multe cadre (Frames) cu imagini succesive, obtinundu-se "iluzia" de miscare.
Animatia poate fi creata cadru cu cadru (frame by frame), aceasta modalitate fiind mai rar folosita deoarece este ineficienta ca timp si lucru, obtinandu-se prin editare directa a fiecarui cadru, dar care e totusi baza animatiei si e necesar sa fie cunoscuta.
O alta metoda ce poate fi folosita este prin crearea primului si ultimului cadru dintr-o animatie, iar Flash face legatura intre ele, creand automat celelalte cadre; pentru aceasta Flash are 3 moduri: Classic Tween, Shape Tween si Motion Tween.
1. Cadre in Timeline
Instrumentul principal si de baza utilizat in Flash pentru animatie este Panoul Timeline, prezentat pe scurt in lectia Scena, Panouri si instrumente de lucru.
Acest panou contine initial o linie (un sir) cu mai multe celule, fiecare celula reprezentand un Cadru (Frame), iar fiecare cadru arata continutul unui moment specific din animatia creata in Scena.
In Timeline pot fi create mai multe astfel de linii, numite Straturi (Layers), fiecare avand propriul sir de cadre.
Cadrele sunt numerotate de la 1 (cu numerotarea afisata din 5 in 5) si pot fi de mai multe tipuri, vedeti in imaginea urmatoare, in care este reprezentat panoul Timeline si ale lui "Frames".
- Keyframe - cu un mic cerc negru in celula, sunt cadrele cele mai importante. In ele se creaza (mai exact, in Scena, dar la acel frame) continutul direct sau de la care sa inceapa animatia. De asemenea, acestea marcheaza schimbari in animatie.
- Blank Keyframe - celula cu un mic cerc alb, e de fapt un keyframe gol la care Scena e goala, dar se afla ca un cadru gol in Timeline.
- Cadru simplu (Frame) - celula cu un dreptunghi alb in ea indica un cadru simplu, care apare la sfarsitul unui sir de cadre statice.
- Cadrul curent - Acesta este indicat printr-un dreptunghi rosu (denumit si Playhead) deasupra celulei acelui cadru (in bara de numerotare a lor) si reprezinta cadrul curent de lucru, al carui continut este afisat in Scena.
- Cadre Statice (Static Frames) - Sunt cadre ce adauga unitati de timp animatiei. Acestea nu au continut in scena, dar cu ele se mareste timpul animatiei, durata dupa care apar schimbarile facute intre doua cadre (Keyframe) sau timpul de afisare al ultimului Keyframe..
- Cadre ce nu sunt in animatie - Sunt celule care nu au definit un anume tip de Frame. O animatie dureaza pana la prima astfel de celula ce nu e in animatie.
- Se da click dreapta pe celula din Timeline si se alege din optiunile: "Insert Frame", "Insert Keyframe" sau "Insert Blank Keyframe".
- Sau, click pe o celula in Timeline, apoi click pe meniul Insert -> Timeline si se alege una din optiunile: "Frame", "Keyframe" sau "Blank Keyframe".
- Cu shortcuts, se da click pe celula in Timeline si se apasa: "F5" (Frame simplu), "F6" (Keyframe) ori "F7" (Blank Keyframe).
- Daca un Keyframe (sau Blank Keyframe) este creat la cateva cadre distanta de alt Keyframe, intre ele se vor crea Cadre Statice.
- Cadrele pot fi trase cu mouseul si: Selectate, Mutate, Sterse, Copiate in alt loc din acel strat (Layer) sau in alte straturi. Aceste operatiuni pot fi efectuate cu optiunile: "Remove Frames", "Clear Freames", "Cut Frames", "Copy Frames" si "Paste Frames"; dupa ce se da click-dreapta pe cadru /cadre ( sau in meniul Edit -> Timeline).
- "Remove Frames" sterge complet cadrul (cadrele) din Timeline si continutul lor in Scena, pe cand, "Clear Frames" sterge doar continutul lor din scena si lasa cadrul (cadrele) gol in Timeline.
Pentru a selecta mai multe cadre continue, se da click pe cadrul de inceput, iar cu tasta "Shift" apasata se da click pe cel final, din cele care trebuie selectate.
Pentru a selecta mai multe cadre necontinue, se tine apasata tasta "Ctrl" si se da click pe cadrele respective.
Ca sa fie selectate toate cadrele dintr-un strat (Layer), se da click pe numele acelui Layer.
- Exista diferenta intre "Copy Frames"-"Paste Frames" si Copy-Paste normal. Prin "Copy Frames"-"Paste Frames" se copie si se adauga cadre in Timeline cu tot continutul lor din Scena, pe cand, cu "Copy-Paste" normal este copiat doar continutul din Scena al cadrelor.
2. Creare animatie cadru cu cadru
Crearea unei animatii cadru cu cadru (frame by frame) inseamna crearea manuala a fiecarui cadru din animatie. Se foloseste adesea in cazul animatiilor scurte.
- Cand se creaza o animatie Flash (indiferent de tip), intai trebuie avut in vedere numarul de cadre pe secunda care e setat in documentul Flash. Acest numar este initial definit in Adobe Flash la 24 FPS (Frames Per Second), se poate vedea si seta in marginea (bara) de jos a panoului Timeline (vedeti indicarea locului in imaginea de mai sus) sau in panoul Properties al Scenei, la optiunea FPS. Acesta reprezinta numarul de cadre ce sunt derulate pentru o secunda de animatie.
- Cu cat sunt cadrele Keyframe mai rare intre ele, sau FPS mai mic, cu atat animatia dureaza mai mult, dar scade acuratetea /efectul de miscare. Cu cat sunt cadrele mai dese, animatia si efectul vizual de miscare sunt mai rapide.
Iata un exemplu simplu de creare a unei animatii "cadru cu cadru", o minge care sare. (puteti vedea intai modelul prezentat mai jos, la "Animatie - Cadru cu Cadru"). Efectuati pasii urmatori:
2. Alegeti unealta pentru desenat forme rotunde (Oval Tool). Pentru ca figura ce va fi desenata (mingea) sa nu contina linie de contur, ci doar umplerea (ca sa fie mai apropiata de imaginea unei mingii), dati click pe butonul Stroke Color, apoi, in Paleta de culori, click pe butonul pt. "No Color" (in dreapta-sus).
3. Desenati pe linie un oval alungit orizontal, acesta fiind mingea.
4. In panoul Timeline dati click pe cadrul 5 si creati un Keyframe (rapid, cu tasta 'F6', sau click-dreapta pe acel cadru si alegeti optiunea Insert Keyframe). Desenele din Scena, din cadrul 1 (care e tot un Kayframe) sunt copiate in Scena la cadrul 5.
- S-a creat Keyframe la cadrul 5, si nu la urmatorul (lasand libere cadrele 2, 3 si 4) pentru ca animatia sa nu fie prea rapida si scurta (avand in vedere rezultatul /animatia ce trebuie obtinuta).
- Dupa crearea Keyfame-ului la cadru 5, cadrele 2, 3 si 4 sunt transformate in "Cadre Statice".
5. Alegeti instrumentul "Free Transform Tool" (pt. a modifica mingea). Intai dati click pe Scena goala ca sa fie deselectate obiectele din Scena, apoi click pe ovalul desenat ca sa-l selectati. Mariti putin ovalul pe verticala si mutati-l putin mai sus (cam jumatate din inaltimea lui). Acum animatia are 2 cadre desenate.
6. In panoul Timeline dati click pe cadrul 10 si creati un alt Keyframe (rapid, cu tasta 'F6', sau click-dreapta pe acel cadru si pe optiunea Insert Keyframe). Desenele in Scena, din Keyframe-ul anterior (cadru 5) sunt copiate in Scena la cadrul 10, iar 6, 7, 8 si 9 devin Statice.
7. Efectuati click pe Scena goala ca sa fie deselectate obiectele din Scena, apoi click pe ovalul desenat ca sa-l selectati. Mariti inca o data ovalul pe verticala (dar putin, sa nu ajunga cerc) si mutati-l putin mai sus (cam jumatate din inaltimea lui). Acum animatia are 3 cadre desenate direct, iar in total are 10.
8. Se repeta pasii 6 si 7. Dati click pe cadrul 15 din Timeline si creati un alt Keyframe. Efectuati click pe Scena goala ca sa fie deselectate obiectele din Scena, apoi click pe ovalul desenat. Mariti inca o data ovalul pe verticala (acum sa ajunga un cerc) si mutati-l putin mai sus (jumatate din inaltimea lui).
9. Efectuati click-dreapta pe cadrul 10 din Timeline si alegeti optiunea Copy Frames, apoi click-dreapta pe cadrul 20 si alegeti Paste Frames.
- Astfel, cadru 10, cu tot continutul lui din Scena, este copiat si adaugat in cadrul 20, acesta devenind automat un Keyframe identic cu cel copiat.
10. Efectuati click-dreapta pe cadrul 5 in Timeline si alegeti optiunea Copy Frames, apoi click-dreapta pe cadrul 25 si Paste Frames.
- Animatia are 5 cadre Keyframe create, si in total, cu cele Statice dintre ele are 25 (cam o secunda, daca FPS este 24).
11. Sa testam rezultatul obtinut. Dati click pe meniul Control -> Test Movie -> in Flash Professional. Se va deschide o fereastra in care sunt derulate cadrele din Timeline, si repetata continuu derularea. Efectul obtinut este o minge care sare pe o linie :).
- Sunt si alte metode pentru a testa animatia facuta, vor fi prezentate mai jos.
- Animatie - Cadru cu Cadru
- De aici -> FLA - Ex. animatie puteti descarca fisierul in format FLA al exemplului.
Editarea unui Keyframe (a continutului din el) se face prin click pe celula cu acel cadru, iar in Scena apare continutul lui, care poate fi modificat.
- Marirea timpului unei animatii se poate face prin micsorarea numarului de la FPS, sau prin adaugarea de cadre simple, statice (Frames).
3. Moduri de testare a animatiei
Exista mai multe modalitati de a testa animatia creata in documentul Flash. Se poate testa intr-o fereastra separata, exact cum va fi vazuta de utilizator, sau direct in Scena de lucru. Iata in continuare diferitele moduri de testare a animatiei.
- Direct in Scena:
- Cea mai simpla metoda este prin apasarea tastei Enter (sau meniul Control -> Play), Flash va incepe derularea cadrelor in Timeline, incepand cu cel curent. Daca optiunea Control -> Loop Playback este bifata, derularea se repeta continuu, pentru a opri se apasa iar tasta Enter. Daca acea optiune nu e bifata, va derula cadrele o singura data, de la cel curent pana la ultimul.
- O alta modalitate este prin tinut apasat click pe Playhead (dreptunghiul rosu in Timeline, de deasupra celulei cadrului curent) si tragerea lui pe linia de numerotare a cadrelor.
- Se poate folosi si fereastra Controller
ce poate fi deschisa din Window -> Toolbars -> Controller.
- In fereastra separata:
- Apasand tastele Ctrl+Enter (sau meniul Control -> Test Movie - in Flash Professional, ori Control -> Test Movie - Test). Se deschide o fereastra ce foloseste Flash Player, aratand animatia asa cum va putea fi vazuta de utilizator.
- O alta metoda este din meniul Control -> Test Scene, prin asta se testeaza animatia creata in scena curenta (un document Flsh poate avea mai multe Scene).