Cum sa realizezi o animatie bazata pe miscare in Flash CS4

Acest tutorial descrie cum sa realizezi o animatie Flash simpla utilizand Adobe Flash CS4 (pentru exemplul bazat pe Flash CS3 exista Cum sa realizezi o animatie bazata pe miscare in Flash CS3, deoarece exista o serie de diferente minore la nivel de interfata). In acest exemplu se va realiza o animatie ce utilizeaza efecte Flash de tip Classic Motion Tween pentru a misca un obiect pe ecran dupa o traiectorie liniara. Ceva de genul acesta:

[kml_flashembed publishmethod=”static” fversion=”9.0.0″ movie=”http://www.itcsolutions.eu/wp-content/uploads/2009/12/SquareAnimation.swf” width=”400″ height=”100″ targetclass=”flashmovie” play=”true” loop=”true” menu=”true”]Get Adobe Flash player

[/kml_flashembed]

Pentru a intelege acest exemplu si conceptele de baza din Adobe Flash CS4, folosite pentru a realiza animatia, poate fi citit post-ul Adobe Flash CS3 and CS4 interface, basic commands and concepts
Pentru a realiza animatia:

1. Se creeaza un nou proiect Flash (Flash File ActionScript 2.0 sau 3.0) alegand File -> New (Ctrl + N) din meniul aplicatiei

2. Se redenumeste layer-ul implicit (Dublu-Click cu mouse-ul pe numele imlicit a layer-ului Layer 1) cu un nou nume, Background

3. Pentru a separa obiectul animat de layer-ul pentru fundal se construieste un nou layer (din meniul aplicatiei Insert ->Timeline -> Layer), numit Square

4. Pe noul layer, numit Square, se deseneaza un dreptunghi (pentru a desena un patrat, se tine apasata tasta Shift) cu colturi rotunjite; dreptunghiul / patratul se deseneaza utilizand Rectangle Tool din Toolbar; inainte de a desena obiectul, se selecteaza Rectangle Tool si se stabileste culoarea (pentru margine, Stroke Color, nu se pune culoare) acestuia, precum si unghiul colturilor; toate aceste setari sunt realizate din Property Inspector

Rectangle Property Inspector in Adobe Flash CS4
Rectangle Property Inspector in Adobe Flash CS4

5. Se creeaza un keyframe (cadru cheie) la frame-ul 30 pe layer-ul Square (se selecteaza cadrul 30 si se apasa F6; pentru alte posibilitati de a crea cadre cheie – Adobe Flash CS3 and CS4 interface, basic commands and concepts); aceasta actiune va multiplica primul cadru cheie peste urmatoarele 30 de cadre si va crea un nou cadru cheie la sfarsit;

6. Se creeaza un efect de tip Classic Motion Tween pe layer-ul Square intre cadrele cheie 1 si 30 (daca nu se stie cum se aplica un astfel de efect – Adobe Flash CS3 and CS4 interface, basic commands and concepts)

Flash Motion Tween
Flash Motion Tween

7. Se selecteaza primul keyframe (cadru cheie) de pe layer-ul Square si folosind Selection Tool se defineste pozitia de start a obiectului de pe scena

8. Se selecteaza al doilea keyframe (cadru cheie) de pe layer-ul Square si folosind Selection Tool se defineste pozitia finala a obiectului de pe scena; noua pozitie a obiectului se obtine prin modificarea pozitiei initiale;

9 Se testeaza animatia utilizand Ctrl+ Enter (pentru Windows)

Pentru a intelege exemplul, puteti viziona si versiunea video a acestui tutorial:

[kml_flashembed publishmethod=”static” fversion=”9.0.0″ movie=”http://www.acs.ase.ro/multimedia/SuportFlash/SquareAnimationCS4.swf” width=”550″ height=”420″ targetclass=”flashmovie” play=”true” loop=”true”]Get Adobe Flash player

[/kml_flashembed]