Classic Tween - Animatie

In Flash nu e necesar sa fie realizat manual fiecare Frame al unei animatii. Se poate face primul cadru si ultimul al animatiei, iar Flash va crea toate cadrele dintre ele. Acest lucru este numit "Tween". O miscare "Tween" conecteaza 2 Keyframes, fiecare cu diferite efecte si caracteristici, apoi treptat acestea sunt unite prin cadre create automat care fac gradual trecerea de la primul la ultimul Keyframe.

Classic Tween e o metoda de creare a animatiei in Flash folosita in versiunile mai vechi ale programului (inainte de Adobe Flash CS4), de la acesta a pornit noua metoda "Motion Tween", fiind oarecum asemanatoare, dar "Motion Tween" e mai usor si se pot face mai multe cu el. Prin urmare, Classic Tween va fi prezentat mai pe scurt.
- Classic Tween poate fi aplicat doar la instantele Symbols. Daca este aplicat unui desen sau text, il va transforma in "Graphic Symbol" si va fi adauga in Library cu denumirea "Tween 1", "Tween 2", etc..
- Permite scripturi in Frame.
- Se aplica unui singur element si permite animatia intre doua culori si forme diferite.
- Nu realizeaza animatie 3D.

1. Proprietati Cadre si proprietati Instante

Inainte de a trece la prezentarea modului de realizare a unei animatii Classic Tween, e necesar de fi cunoscut faptul ca exista o diferenta intre proprietatile unui cadru si proprietatile elementelor din Scena. Acestea apar in panoul Properties cand sunt selectate.
De exemplu, pentru a schimba culoarea unui desen, acesta e selectat in Scena si proprietatile care pot fi aplicate lui (cum e si pt. culoarea) apar in panoul Properties. Dar in cazul animatiei de tip Tween (care creaza automat cadrele necesare dintre 2 Keyframe) exista si optiuni ce pot fi aplicate animatiei sau cadrelor din ea, aceste optiuni, cum ar fi adaugarea unui sunet sau rotirea cadrului, apar ca proprietati in panoul Properties.
In imaginea urmatoare puteti vedea Panoul Properties pentru instanta unui Symbol si cel pentru proprietatile unui Frame dintr-o animatie Classic Tween.

- Panouri proprietati Instanta Symbol si Frame

- Optiunile si efectele din proprietatile Frame-ului vor fi aplicate animatiei (cadrelor), pe cand cele ale unui obiect din Scena, vor fi transmise doar lui.

2. Creare animatie cu Classic Tween

Crearea unei animatii simple cu Classic Tween se face usor. In principiu se efectueaza urmatorii pasi:

Se creaza primul Keyframe cu elementul ce trebuie animat.
Se face ultimul Keyframe al animatiei, cu acelasi element si proprietatile (dimensiune, pozitie, culoare).
Ultimul pas, se selecteaza elementul din primul cadru si apoi click pe meniul Insert -> Classic Tween.

- Numai dupa crearea animatiei se pot efectua modificari obiectului animat (forma, culoare) si cadrelor din Timeline pentru a se obtine diferite efecte.
Ca sa invatati, incercati urmatorul exemplu, in care se realizeaza efectul animat de ridicare si disparitie a unui balon.

1. Deschideti un document Flash nou, alegeti instrumentul pentru desenat figuri ovale (Oval Tool).
2. Desenati in partea de jos-stanga a Scenei un oval, apoi alegeti si instrumentul pt. desenat cu creionul (Pencil Tool) si desenati ovalului o codita (acesta reprezinta balonul).
3. Selectati cadrul 40 din Timeline si transformati-l in Keyframe (click pe el si apasati tasta 'F6', sau click-dreapta pe cadru si optiunea Insert Keyframe). In acest Frame este copiata Scena de la primul Frame, cu desenele din ea.
- FPS fiind setat 24, daca animatia e de la cadrul 1 la 40, va dura aproape 2 secunde.
4. La cadrul 40 mutati balonul si codita lui, asa cum sunt, in partea dreapta-sus a scenei (prin selectarea uneltei Select Tool si tragerea desenelor cu mouse-ul, fiind impreuna selectate).
5. Acum se va crea efectul de miscare dintre cele 2 cadre. Dati click pe primul cadru si apoi pe meniul Insert -> Classic Tween.
Observati ca in Timeline, a aparut o sageata de la primul cadru la 40. Aceasta indica faptul ca intre ele este o animatie "Classic Tween".
- Daca verificati in panoul Library veti gasi adaugate 2 Graphic Symbols, create de Flash pentru elementele animatiei din primul si ultimul Keyframe, transformand desenele cu balonul din scena in instante ale acestor 2 Symbols.
6. Acum animatia este facuta. Ca sa o testati rapid, apasati tasta Enter.
7. Pentru a adauga si efectul de disparitie al balonului, pe langa cel de miscare, selectati balonul de la ultimul cadru (40) si din Panoul Properties, la Color Effects, la Style alegeti optiunea Alpha (pentru transparenta) si dati-i o valoare cat mai mica (de ex. 1 sau 2). Balonul a devenit complet transparent.
Testati efectul obtinut apasand tasta "Enter".
8. Sa testam si adaugarea unui efect animatiei, prin modificarea proprietatilor cadrelor. Dati click pe un cadru dintre primul si ultimul, sau selectati toate cadrele pana la penultimul [39] (prin dublu-click pe primul Frame, sau click pe el si cu "Shift" apasat dati click pe cadrul 39 (nu 40)). In panoul Properties vor apare proprietatile pentru cadre. La Tweening, la proprietatea Rotate alegeti optiunea CCW (rotire in sens invers acelor de ceasornic).
Apasati inca o data "Enter" ca sa vedeti efectul obtinut.

- Animatie - Classic Tween

- Fisierul FLA cu acest exemplu poate fi descarcat de la: FLA -Animatie Classic Tween.

3. Ajustare proprietati Classic Tween

In exemplul de mai sus e folosita una din proprietatile ce apartin cadrelor, si anume "Rotation". Mai sunt si altele, acestea apar in panoul Properties cand e selectat un cadru dintr-o animatie "Tween"; le puteti vedea in imaginea de la inceputul lectiei. Iata pe scurt ce fac acestea:

Ease - Incetineste sau accelereaza animatia pe parcursul derularii ei, de la primul la ultimul Keyframe.
- Daca valoarea e pozitiva, cu cat este mai mare cu atat viteza de miscare a animatiei e mai mare la inceput si scade in timp ce se apropie de ultimul Frame. Si invers, daca valoarea e negativa viteza creste accelerat spre ultimul cadru.
- Butonul "Edit Easing", din dreptul optiunii, permite personalizarea modului de accelerare a miscarii.
Rotate - Determina rotirea obiectului animat: CW (in sensul orelor de ceas), CCW (in sens invers orelor de ceas) . De la valoarea numerica din dreptul ei se seteaza numarul de rotiri.
Snap - Verifica sa fixeze punctul de inregistrare a obiectului la o miscare cu "motion guide".
Sync - Sincronizeaza animatia continuta in cadrul unui Symbol cu Timeline-ul ce o contine.
Orient to Path - Se foloseste cand e aplicat un Strat (Layer) cu "motion guide". Aceasta pastreaza obiectul paralel cu "motion guide", relativ la punctul lui central.
Scale - Se bifeaza cand sunt animate schimbari de dimensiune si forma.

Copiere animatie Tween

O Animatie Tween poate fi copiata la un alt Symbol ne-animat, cu toate proprietatile ei si ale obiectului animat. Acesta trebuie sa se afle pe acelasi strat, dar intr-un Keyframe din afara animatiei.
Copierea se realizeaza astfel:

Se selecteaza animatia ce trebuie copiata (cadrele ei din Timeline).
Se da click pe meniul Edit -> Timeline -> Copy Motion.
Selectati Simbolul la care trebuie adaugata animatia si apelati meniul Edit -> Timeline -> Paste Motion.

- Pentru a alege proprietatile din animatia copiata care sa fie transferate Simbolului, in loc de "Paste motion" se alege Paste Motion Special.

La "Classic Tween" se poate inversa doar animatia intreaga (cu toate cadrele). Acest lucru se realizeaza prin selectarea tuturor cadrelor animatiei (click pe numele acelui strat [Layer]) si se da click pe Modify -> Timeline -> Reverse Frames.
- Cadrele din animatiile "Tween", care au fost create automat de Flash, pot fi convertite in Keyframe (sau Blank Keyframe). Se selecteaza cadrele ce trebuie convertite si se alege meniul Modify -Timeline -> Convert to Keyframes (sau "Convert to Blank Keyframes").
- Pentru a sterge /anula o animatie Tween, se da click pe un Frame al ei, apoi click pe meniul Insert -> Remove Tween.

<<-Animatie - Introducere -- Motion Tween - Animatie->>

Un Test simplu in fiecare zi

HTML

CSS

JavaScript

PHP-MySQL

Engleza

Spaniola

Care tag defineste zona de click intr-o harta creata dintr-o imagine?

<img src="image.jpg" usemap="#map1">
<map name="map1">
  <area shape="rect" coords="9, 120, 56, 149" href="#">
  <area shape="rect" coords="100, 200, 156, 249" href="#">
</map>

Ce proprietate CSS indica ce sa se intample cand continutul unui element depaseste dimensiunile lui?

display overflow position

#id {
  overflow: auto;
}

Clic pe evenimentul care este declansat cand mouse-ul e deasupra unui obiect.

onclick onmouseover onmouseout

document.getElementById("id").onmouseover = function(){
  document.write("Sa ai Viata Buna");
}

Indicati variabila PHP ce contine datele adaugate in adresa URL, dupa caracterul "?".

$_SESSION $_GET $_POST

if(isset($_GET["id"])) {
  echo $_GET["id"];
}

Clic pe pronumele reflexiv care e potrivit in propozitia: "Marc is the boy ... won the prize".

who which whoever

Marc is the boy who won the prize.
- Marc e baiatul care a castigat premiul.

Clic pe pronumele reflexiv care e potrivit in propozitia: "Voy a ver al pintor de ... les hablé ayer".

que quien cuyo

Voy a ver al pintor de quien les hablé ayer.
- Ma duc sa vad pictorul despre care ti-am vorbit ieri.