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

No comments - This post in english

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:

Get Adobe Flash player

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:

Get Adobe Flash player

, ,


  1. No comments yet.
(will not be published)

  1. No trackbacks yet.