Animatia in Flash este un capitol vast, fiind unul din principalele lucruri pentru care este folosit programul Adobe Flash. Sunt necesare mai multe lectii pentru a fi prezentate elementele de baza in crearea si utilizarea animatiei in Flash.
In aceasta lectie e prezentata partea introductiva si esentiala ce trebuie stiuta despre animatie. Pe parcurs, in lectiile din acest curs vor fi si tutoriale mai avansate, cu lucruri si exemple mai complexe, dar care au la baza cele aratate in aceasta lectie.

Animatia in Flash (si in general) se realizeaza prin derularea de mai multe cadre (Frames) cu imagini succesive, obtinundu-se "iluzia" de miscare.
Animatia poate fi creata cadru cu cadru (frame by frame), aceasta modalitate fiind mai rar folosita deoarece este ineficienta ca timp si lucru, obtinandu-se prin editare directa a fiecarui cadru, dar care e totusi baza animatiei si e necesar sa fie cunoscuta.

O alta metoda ce poate fi folosita este prin crearea primului si ultimului cadru dintr-o animatie, iar Flash face legatura intre ele, creand automat celelalte cadre; pentru aceasta Flash are 3 moduri: Classic Tween, Shape Tween si Motion Tween.

1. Cadre in Timeline

Instrumentul principal si de baza utilizat in Flash pentru animatie este Panoul Timeline, prezentat pe scurt in lectia Scena, Panouri si instrumente de lucru.
Acest panou contine initial o linie (un sir) cu mai multe celule, fiecare celula reprezentand un Cadru (Frame), iar fiecare cadru arata continutul unui moment specific din animatia creata in Scena.
In Timeline pot fi create mai multe astfel de linii, numite Straturi (Layers), fiecare avand propriul sir de cadre.
Cadrele sunt numerotate de la 1 (cu numerotarea afisata din 5 in 5) si pot fi de mai multe tipuri, vedeti in imaginea urmatoare, in care este reprezentat panoul Timeline si ale lui "Frames".
Timeline Frames

Crearea unui Frame, indiferent de tip (Frame simplu, Keyframe sau Blank Frame) se face prin una din urmatoarele metode: - Cand este creat un Keyframe, in acesta se copie continutul din Kryframe-ul anterior, iar un "Blank Keyframe" creaza un cadru cu Scena goala.
- Daca un Keyframe (sau Blank Keyframe) este creat la cateva cadre distanta de alt Keyframe, intre ele se vor crea Cadre Statice.
- Cadrele pot fi trase cu mouseul si: Selectate, Mutate, Sterse, Copiate in alt loc din acel strat (Layer) sau in alte straturi. Aceste operatiuni pot fi efectuate cu optiunile: "Remove Frames", "Clear Freames", "Cut Frames", "Copy Frames" si "Paste Frames"; dupa ce se da click-dreapta pe cadru /cadre ( sau in meniul Edit -> Timeline).
- "Remove Frames" sterge complet cadrul (cadrele) din Timeline si continutul lor in Scena, pe cand, "Clear Frames" sterge doar continutul lor din scena si lasa cadrul (cadrele) gol in Timeline.

Pentru a selecta mai multe cadre continue, se da click pe cadrul de inceput, iar cu tasta "Shift" apasata se da click pe cel final, din cele care trebuie selectate.
Pentru a selecta mai multe cadre necontinue, se tine apasata tasta "Ctrl" si se da click pe cadrele respective.
Ca sa fie selectate toate cadrele dintr-un strat (Layer), se da click pe numele acelui Layer.
- Exista diferenta intre "Copy Frames"-"Paste Frames" si Copy-Paste normal. Prin "Copy Frames"-"Paste Frames" se copie si se adauga cadre in Timeline cu tot continutul lor din Scena, pe cand, cu "Copy-Paste" normal este copiat doar continutul din Scena al cadrelor.

2. Creare animatie cadru cu cadru

Crearea unei animatii cadru cu cadru (frame by frame) inseamna crearea manuala a fiecarui cadru din animatie. Se foloseste adesea in cazul animatiilor scurte.
- Cand se creaza o animatie Flash (indiferent de tip), intai trebuie avut in vedere numarul de cadre pe secunda care e setat in documentul Flash. Acest numar este initial definit in Adobe Flash la 24 FPS (Frames Per Second), se poate vedea si seta in marginea (bara) de jos a panoului Timeline (vedeti indicarea locului in imaginea de mai sus) sau in panoul Properties al Scenei, la optiunea FPS. Acesta reprezinta numarul de cadre ce sunt derulate pentru o secunda de animatie.
- Cu cat sunt cadrele Keyframe mai rare intre ele, sau FPS mai mic, cu atat animatia dureaza mai mult, dar scade acuratetea /efectul de miscare. Cu cat sunt cadrele mai dese, animatia si efectul vizual de miscare sunt mai rapide.

Iata un exemplu simplu de creare a unei animatii "cadru cu cadru", o minge care sare. (puteti vedea intai modelul prezentat mai jos, la "Animatie - Cadru cu Cadru"). Efectuati pasii urmatori:

1. Deschideti un document Flash nou, cu scena alba, alegeti instrumentul pentru desenat linii ("Line Tool", in Bara cu instrumente pt. desen) si desenati o linie in Scena.
2. Alegeti unealta pentru desenat forme rotunde (Oval Tool). Pentru ca figura ce va fi desenata (mingea) sa nu contina linie de contur, ci doar umplerea (ca sa fie mai apropiata de imaginea unei mingii), dati click pe butonul Stroke Color, apoi, in Paleta de culori, click pe butonul pt. "No Color" (in dreapta-sus).
3. Desenati pe linie un oval alungit orizontal, acesta fiind mingea.
4. In panoul Timeline dati click pe cadrul 5 si creati un Keyframe (rapid, cu tasta 'F6', sau click-dreapta pe acel cadru si alegeti optiunea Insert Keyframe). Desenele din Scena, din cadrul 1 (care e tot un Kayframe) sunt copiate in Scena la cadrul 5.
  - S-a creat Keyframe la cadrul 5, si nu la urmatorul (lasand libere cadrele 2, 3 si 4) pentru ca animatia sa nu fie prea rapida si scurta (avand in vedere rezultatul /animatia ce trebuie obtinuta).
  - Dupa crearea Keyfame-ului la cadru 5, cadrele 2, 3 si 4 sunt transformate in "Cadre Statice".
5. Alegeti instrumentul "Free Transform Tool" (pt. a modifica mingea). Intai dati click pe Scena goala ca sa fie deselectate obiectele din Scena, apoi click pe ovalul desenat ca sa-l selectati. Mariti putin ovalul pe verticala si mutati-l putin mai sus (cam jumatate din inaltimea lui). Acum animatia are 2 cadre desenate.
6. In panoul Timeline dati click pe cadrul 10 si creati un alt Keyframe (rapid, cu tasta 'F6', sau click-dreapta pe acel cadru si pe optiunea Insert Keyframe). Desenele in Scena, din Keyframe-ul anterior (cadru 5) sunt copiate in Scena la cadrul 10, iar 6, 7, 8 si 9 devin Statice.
7. Efectuati click pe Scena goala ca sa fie deselectate obiectele din Scena, apoi click pe ovalul desenat ca sa-l selectati. Mariti inca o data ovalul pe verticala (dar putin, sa nu ajunga cerc) si mutati-l putin mai sus (cam jumatate din inaltimea lui). Acum animatia are 3 cadre desenate direct, iar in total are 10.
8. Se repeta pasii 6 si 7. Dati click pe cadrul 15 din Timeline si creati un alt Keyframe. Efectuati click pe Scena goala ca sa fie deselectate obiectele din Scena, apoi click pe ovalul desenat. Mariti inca o data ovalul pe verticala (acum sa ajunga un cerc) si mutati-l putin mai sus (jumatate din inaltimea lui).
9. Efectuati click-dreapta pe cadrul 10 din Timeline si alegeti optiunea Copy Frames, apoi click-dreapta pe cadrul 20 si alegeti Paste Frames.
  - Astfel, cadru 10, cu tot continutul lui din Scena, este copiat si adaugat in cadrul 20, acesta devenind automat un Keyframe identic cu cel copiat.
10. Efectuati click-dreapta pe cadrul 5 in Timeline si alegeti optiunea Copy Frames, apoi click-dreapta pe cadrul 25 si Paste Frames.
  - Animatia are 5 cadre Keyframe create, si in total, cu cele Statice dintre ele are 25 (cam o secunda, daca FPS este 24).
11. Sa testam rezultatul obtinut. Dati click pe meniul Control -> Test Movie -> in Flash Professional. Se va deschide o fereastra in care sunt derulate cadrele din Timeline, si repetata continuu derularea. Efectul obtinut este o minge care sare pe o linie :).
  - Sunt si alte metode pentru a testa animatia facuta, vor fi prezentate mai jos.
- In prezentarea urmatoare puteti vedea acest exemplu.

- Animatie - Cadru cu Cadru

animatie_cadru_cadru
- De aici -> FLA - Ex. animatie puteti descarca fisierul in format FLA al exemplului.

Editarea unui Keyframe (a continutului din el) se face prin click pe celula cu acel cadru, iar in Scena apare continutul lui, care poate fi modificat.
- Marirea timpului unei animatii se poate face prin micsorarea numarului de la FPS, sau prin adaugarea de cadre simple, statice (Frames).

3. Moduri de testare a animatiei

Exista mai multe modalitati de a testa animatia creata in documentul Flash. Se poate testa intr-o fereastra separata, exact cum va fi vazuta de utilizator, sau direct in Scena de lucru. Iata in continuare diferitele moduri de testare a animatiei.

- Direct in Scena:


- In fereastra separata:

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Care tag e folosit pentru a adauga liste cu definitii in element <dl>?
<dt> <dd> <li>
<dl>
 <dt>HTML</dt>
  <dd> - Hyper Text Markup Language</dd>
  <dd> - Limbaj de cod pentru pagini web</dd>
</dl>
Care proprietate CSS poate sa ascunda un element in pagina, lasand spatiu gol in locul lui?
display position visibility
#id {
  visibility: hidden;
}
Indicati evenimentul declansat cand se apasa clic pe un obiect in pagina.
onclick onmouseover onfocus
document.getElementById("id").onclick = function(){
  alert("http://www.MarPlo.net/");
}
Indicati variabila PHP ce contine datele din $_GET, $_POST si $_COOKIE.
$_SESSION $_GET $_REQUEST
if(isset($_REQUEST["id"])) {
  echo $_REQUEST["id"];
}
Care din urmatoarele cuvinte reprezinta un Verb?
lighting believe path
I believe in my path.
- Eu cred in calea mea.
Care din urmatoarele cuvinte reprezinta un Verb?
creer camino iluminaciĆ³n
creer = a crede; camino = cale /drum; iluminaciĆ³n = iluminare
Animatie - Introducere

Last accessed pages

  1. Definire Variabile si Constante (1320)
  2. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (56120)
  3. Download carti electronice si programe pentru Limba Engleza (17559)
  4. Verbe modale - Modal verbs - CAN, COULD, MAY, MIGHT, MUST (27406)
  5. Prezentul simplu si continuu - Present Tense Simple and Continuous (52768)

Popular pages this month

  1. Prezentul simplu si continuu - Present Tense Simple and Continuous (3734)
  2. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (3475)
  3. Gramatica limbii engleze - Prezentare Generala (2830)
  4. Prezent perfect si Prezent perfect continuu - Present perfect and Continuous (2411)
  5. Trecutul simplu si continuu - Past Tense Simple and Continuous (2027)