Cum sa realizezi o animatie bazata pe miscare dupa o traiectorie (Motion Guide) in Flash CS4

In acest exemplu se va realiza o animatie ce utilizeaza efecte Flash CS4 de tip Classic Motion Tween si Classic Motion Guide pentru a misca un obiect pe ecran dupa o traiectorie predefinita, de exemplu o minge care sare pe ecran. Ceva de genul acesta:

[kml_flashembed publishmethod=”static” fversion=”9.0.0″ movie=”http://www.itcsolutions.eu/wp-content/uploads/2010/01/BouncingFlashMovie.swf” width=”500″ height=”150″ targetclass=”flashmovie”]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, Ball

3. Pe noul layer, numit Ball, se deseneaza un oval (pentru a desena un cerc, se tine apasata tasta Shift); cercul se deseneaza utilizand Ovale Tool din Toolbar; inainte de a desena obiectul, se selecteaza Ovale Tool si se stabileste culoarea (pentru margine, Stroke Color, nu se pune culoare) acestuia, precum si unghiul colturilor; toate aceste setari sunt realizate din fereastra Properties

4. Se creeaza un keyframe (cadru cheie) la frame-ul 30 pe layer-ul Ball (se selecteaza cadrul 30 si se apasa F6); aceasta actiune va multiplica primul cadru cheie peste urmatoarele 30 de cadre si va crea un nou cadru cheie la sfarsit;

5. Se creeaza un efect de tip Classic Motion Tween pe layer-ul Ball 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)

6. Se adauga un nou layer de tip Classic Motion Guide, prin intermediul meniului contextual; acesta se activeaza prin Click-Dreapta pe layer-ul Ball in Timeline. Acest layer special, numit implicit Guide: Ball,  este atasat layer-ului numit Ball

Insert a Cassic Motion Guide in Flash CS4
Insert a Classic Motion Guide in Flash CS4
Classic Motion Guide layer in Flash CS4
Classic Motion Guide layer in Flash CS4

7. Se selecteaza primul cadru al layer-ului Guide: Ball si se va desena traiectoria pentru cerc. Traiectoria se deseneaza folosind Pencil Tool. Pentru a desena o traiectorie cat mai lina, care sa fie cat mai putin o linie dreapta franta, se foloseste proprietatea Smoothing a instrumentului. Aceasta proprietate se activeaza selectand modul de lucru Pencil Mode : Smooth din Toolbar (dupa ce a fost selectat Pencil Tool)

Pencil Tool Smooth Mode in FlashCS4
Pencil Tool Smooth Mode in FlashCS4

8. Se selecteaza primul cadru al layer-ului Guide: Ball si se va desena traiectoria pentru cerc.

Path on a Classic Motion Guide in FlashCS4
Path on a Classic Motion Guide in FlashCS4

9. Se selecteaza primul keyframe (cadru cheie) de pe layer-ul Ball si folosind Selection Tool se defineste pozitia de start a obiectului de pe scena. Prin Drag&Drop cercul este pozitionat pe inceputul traiectoriei astfel incat punctul de ancorare al acestuia este plasat pe traiectorie (punctul central este evidentiat)

Set Object on Path (Motion Guide) in Flash CS4
Set Object on Path (Motion Guide) in Flash CS4

10. Se selecteaza al doilea keyframe (cadru cheie) de pe layer-ul Ball si folosind Selection Tool se defineste pozitia finala a obiectului de pe scena. Prin Drag&Drop cercul este pozitionat pe sfarsitul traiectoriei

11 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/BallFlashMovieCS4.swf” width=”550″ height=”420″ targetclass=”flashmovie” play=”true” loop=”true”]Get Adobe Flash player

[/kml_flashembed]