Timeline este panoul cu Straturi (Layouts) si Cadre (Frames) in fiecare strat. Timeline-ul principal este cel al Scenei, dar sunt elemente care au Timeline si cadre proprii, precum obiectele Symbol de tip Movie Clip si Button. De exemplu, un MovieClip poate avea propria animatie (cu mai multe cadre) adaugata intr-un singur Frame in Timeline-ul principal, astfel, elementele din acel Movie Clip sunt intr-un Timeline diferit de cel principal.
- In acest tutorial este aratat cum poate fi accesat un obiect care se afla in interiorul unui Movie Clip.
Obiectele care sunt in alt Timeline fata de cel principal nu pot fi accesate direct, ci prin intermediul celui in care sunt incluse, dupa modelul ierarhic parinte-copil. Obiectul principal din scena in care sunt incluse este "parinte" iar elementele din el sunt "copii", si fiecare trebuie sa aibe atribuit un nume de instanta. Accesarea se face conform sintaxei: instanta_parinte.instanta_copil
Iata un exemplu concret. Intr-o imagine cu un brad, transformata in MovieClip, se adauga in cadrul lui o stea (si ea tot o instanta MovieClip). Prin apasarea unui buton, steaua din brad isi schimba culoarea, iar la al treilea click e stearsa. Dupa cum puteti testa in prezentarea urmatoare.
Iata cum se face aceasta animatie Flash:
1. Mai intai pregatiti o imagine care sa fie adaugata in Flash. O puteti copia pe aceasta:
- si importati-o in documentul Flash (din File -> Import -> Import to stage). 2. Transformati imaginea in Movie Clip (de la Modify - Convert to Symbol - e necesara aceasta transformare pt. a-i da un nume de instanta). Dati imaginii din Scena un nume, aici e folosit "brad" (in panoul Properties, in casuta de sus, unde e scris "<Insance Name>") 3. Creati in scena si un buton (o figura geometrica pe care o transformati in Symbol Button, de la Modify -> Convert to Symbol, iar la Type alegeti Button) si dati-i ca nume de instanta (in Properties) denumirea buton. 4. Click-dreapta pe imaginea din Scena si alegeti Edit (sau dublu-click pe ea). Astfel se intra in pagina de editarea a acestui Movie Clip, care are propriile cadre in Timeline. In aceasta pagina desenati o stea (cu "PolyStar Tool"), transformati-o in Symbol Movie Clip si atribuiti-i numele de instanta stea. Pagina de lucru sa arate ca-n imaginea de jos:
- Numele Simbolului (aici BradMC, dat la crearea simbolului) langa cel al scenei (Scene 1) arata faptul ca sunteti in pagina lui de editare. Elementele create aici apartin acestui Simbol. 5. Dupa ce ati asezat steaua, reveniti la scena principala de lucru (prin click pe "Scene 1"). Dati click-dreapta pe Cadru 1 din Timeline, alegeti Actions si in panoul pt. script ActionScript adaugati urmatorul cod:
var colors:Array = [0xfe0809, 0xfefe08]; // Variabila Array cu culori
// Variabila in care e retinut numarul click-ului
// In functie de ea se alege culoarea apoi sterge obiectul
var nr_click:int = 0;
// Inregistrare eveniment MouseEvent.CLICK la instanta "buton" (din Scena)
buton.addEventListener(MouseEvent.CLICK, onClick);
// Functia onClick(), apelata de eveniment
function onClick(evt:MouseEvent):void
{
// Setare obiect prin care se aplica schimbarea culoarii
var set_color:ColorTransform = new ColorTransform();
// Daca 'nr_click' e mai mic decat numarul de culori din 'colors', adauga culoarea
// Altfel, sterge obiectul 'stea' si evenimentul pt. detectare CLICK
if(nr_click<colors.length)
{
set_color.color = colors[nr_click]; // Setare culoare, din 'colors' in functie de 'nr_click'
// Adauga culoarea la instanta 'stea', din 'brad'
brad.stea.transform.colorTransform = set_color;
nr_click++; // Incrementeaza cu o unitate la ficare Click
}
else
{
brad.removeChild(brad.stea); // Sterge elementul'stea' din obiectul 'brad'
buton.removeEventListener(MouseEvent.CLICK, onClick); // Sterge inregistrare eveniment
}
}
- Pentru a putea folosi mai multe culori, se adauga intr-un Array, aici in variabila "colors".
- Pentru a retine numarul fiecarui click, prin care se schimba si culoarea, se creaza o variabila numerica (nr_click) cu valoarea initiala 0. In functia apelata la evenimentul CLICK se incrementeaza cu o unitate valoarea acestei variabile, astfel ea va corespunde cu numarul de click-uri.
- In momenul cand e stearsa instanta "stea" se sterge si detectarea evenimentului CLICK, deoarece nu mai e nevoie de el, in plus ar cauza eroare cand printr-un alt click e apelata functia cu instructiuni la instanta "stea" (aceasta fiind stearsa).
- Observati cum se aplica culoaea la elementul "stea", apeland-o prin obiectul parine in care aceasta se afla (brad.stea), iar la stergerea ei, metoda "brad.removeChild(brad.stea);" e aplicata la obiectul parinte, dar la argument se adauga calea ierarhica completa.
- Fisierul FLA cu exemplu din acest tutorial poate fi descarcat de la: Accesare obiect - Timeline diferit.