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:

[kml_flashembed publishmethod=”static” fversion=”9.0.0″ movie=”http://www.itcsolutions.eu/wp-content/uploads/2010/01/ShapeTweenFlashCS4.swf” width=”500″ height=”150″ targetclass=”flashmovie”]

[/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, 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

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

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)

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

atunci tranformarea obtinuta este

[kml_flashembed publishmethod=”static” fversion=”9.0.0″ movie=”http://www.itcsolutions.eu/wp-content/uploads/2010/01/HintsShapeTweenFlashCS4.swf” width=”500″ height=”150″ targetclass=”flashmovie”]

[/kml_flashembed]

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: