Cum sa realizezi o animatie bazata pe transformare de forma (Shape Tween) in Flash CS4

No comments -

Acest tutorial descrie cum sa realizezi o animatie Flash simpla, bazata pe modificarea formei unui obiect, utilizand Adobe Flash CS4. In acest exemplu se va realiza o animatie ce utilizeaza efecte Flash de tip Shape Tween pentru a modifica forma unui obiect de pe scena. 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, Transformare

3. 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 fereastra Properties

Rectangle Property Inspector in Adobe Flash CS4

Rectangle Property Inspector in Adobe Flash CS4

4. Se creeaza un blank keyframe (cadru cheie fara continut) la frame-ul 30 pe layer-ul Transformare (se selecteaza cadrul 30 si se apasa F7); aceasta actiune va multiplica primul cadru cheie peste urmatoarele 29 de cadre si va crea un nou cadru cheie, fara continut, la sfarsit;

5. In cadrul 30 de tip blank keyframe de pe layer-ul Transformare se deseneaza forma in care dorim sa se transforme patratul, de exemplu o stea; steaua se deseneaza utilizand PolyStar Tool din Toolbar; inainte de a desena steaua, se selecteaza PolyStar Tool si se stabilesc proprietatile: Style – star; Number of sides – 5; Star point size – 0.50; toate aceste setari sunt realizate din fereastraProperties si Tool Settings a instrumentului PolyStar Tool

Flash CS4 PolyStar Tool Settings

Flash CS4 PolyStar Tool Settings

6. Se creeaza un efect de tip Shape Tween pe layer-ul Transformare intre cadrele cheie 1 si 30, utilizand optiunea Insert -> Timeline -> Create Shape Tween (sau Click-Dreapta pe layer-ul Transformare intre cele 2 cadre cheie si se alege Create Shape Tween din meniul contextual)

Flash CS4 ShapeTween

Flash CS4 ShapeTween

7. Pe cele 2 cadre cheie se pot aplica si alte efecte (descrise in Exemple efecte Flash CS4). Daca, de exemplu, se doreste aplicarea unui efect de miscare in paralel cu cel de transformare a formei (shape tween):

  • se selecteaza primul keyframe (cadru cheie) de pe layer-ul Transformare si folosind Selection Tool se defineste pozitia de start a patratului de pe scena
  • se selecteaza al doilea keyframe (cadru cheie) de pe layer-ul Transformare si folosind Selection Tool se defineste pozitia finala a stelei de pe scena; noua pozitie a obiectului se obtine prin modificarea pozitiei initiale;

8. Pentru a controla modul in care se face transformarea (automat, mediul Flash CS4 gaseste o solutie de a transforma forma initiala) se pot utiliza repere (shape hint). Acestea se adauga doar pe cadrul cheie 1 (ce contine forma initiala) utilizand optiunea Modify -> Shape -> Add Shape Hint sau Ctrl + Shift + H (pt Windows) din meniul aplicatiei. Numarul de repere ce pot fi utilizate este 26 (a -> z).

Observatie:  Daca optiunea de adaugare a reperelor (shape hints) este inactiva, cauza poate fi generata de faptul ca forma de modificat este reprezentata de o imagine vectoriala (de exemplu, pentru un patrat cu colturi rotunjite, acesta este reprezentat de o imagine de tip rectangle primitive). Pentru a o transforma intr-o imagine de tip bitmap, se selecteaza forma si se utilizeaza optiunea Modify -> Shape -> Convert Lines to Fills

Reperele sunt folosite pentru a indica Flash-ului cum sa faca transformarea. Reperele sunt pozitionate pe forma initiala si apoi pe forma finala a obiectului. Daca se definesc reperele

Hint Points for Flash CS4 Shape Tween

Hint Points for Flash CS4 Shape Tween

atunci tranformarea obtinuta este

Get Adobe Flash player

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

Pentru a intelege mai bine exemplul initial (cel bazat pe un shape tween implicit), puteti viziona si versiunea video a acestui tutorial:

, ,


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

  1. No trackbacks yet.