Motion Tween - Animatie

Curs Flash

Motion Tween permite realizarea unor efecte de miscare si transformare fluenta, precum: dimensiuni, pozitie, rotatie, culoare; care se aplica doar Instantelor de Symbol (Movie Clip, Graphic si Button).
Produce fisierul cu cele mai mici dimensiuni dintre toate metodele de animatie Flash.
Reguli pentru Motion Tween:
- Nu permite scripturi in Frame.
- Nu transforma textul in Symbol.
- Aplica un singur efect de culoare pt. fiecare "Tween".
- Foloseste numai o singura Instanta pe parcursul tuturor cadrelor animatiei respective.
- Permite un singur obiect (Instanta) in Keyframe-ul la care se aplica Motion Tween.
- Permite animatie 3D.
- Transforma tipurile de obiecte nepermise lui (forme, imagini, grupuri) in Simboluri Movie Clip.
- Lungimea unei animatii, cadrele din ea, sunt tratate ca un singur obiect care poate fi redimensionat, dar in acele cadre, in Scena, nu mai pot fi create alte elemente.

1. Creare animatie cu motion Tween

Primul pas in crearea unei animatii cu Motion Tween este convertirea elementului asupra caruia se face animatia in Symbol.
Apoi, cu acesta selectat, se da click pe meniul Insert -> Motion Tween. Flash va crea automat in panoul Timeline un numar de cadre egal cu cel setat la FPS pentru animatia Motion Tween. Aceste cadre sunt considerate ca un obiect ce poate fi extins si micsorat prin tragere cu mouse-ul, marind sau scazand astfel numarul de cadre din animatie.
Dupa acest pas, Flash muta Scena de lucru la ultimul Frame. Aici se definesc proprietatile elementului (pozitie, dimensiuni, culoare), dupa cum doriti sa arate la finalul animatiei. Dupa ce e mutat, in Scena apare o linie cu puncte reprezentand traictoria de miscare. Aceasta poate fi mutata si modificata liber, folosind mouse-ul si diferite tehnici (aratate mai jos), obtinandu-se o traictorie de miscare dupa forma acelei linii.
- Fiecare punct de pe traictorie reprezinta un Frame din animatie.
Iata un exemplu din care puteti invata cum se creaza o animatie motion simpla.

- In prezentarea urmatoare puteti vedea cum se face acest exemplu.

- Animatie Motion Tween

- Fisierul FLA cu acest exemplu poate fi descarcat de la: FLA - Animatie Motion Tween.
- Pana aici, Motion Tween pare la fel cu "Classic Tween", dar "Motion Tween" are cateva optiuni prin care se pot realiza mai multe efecte animatiei, in special legat de traictorie. Cele mai folosite din accestea sunt prezentate mai jos.

2. Editare animatie Motion Tween

1. Editare traictorie miscare
  - Traictoria (calea) de miscare a obiectului (forma ei) se modifica prin tragere cu mouse-ul a unui punct de pe ea (fiind deselectata), sau prin schimarea valorilor X si Y ale obiectului animat, din panoul Properties; ori tragerea lui cu mouse-ul in Scena.
  - Prin tragerea liniei cu mouse-ul aceasta se curbeaza. Dar daca se doreste obtinerea unei traictorii cu unghi, se aplica urmatorii pasi:

• Se da click pe cadrul din Timeline unde trebuie format unghiul traictoriei
• Se selecteaza obiectul in Scena si se muta cu mouseul, ori se modifica valoarea lui 'Y' (sau 'X', daca linia nu e orizontala) din Properties

- Se va obtine o traictorie in forma de unghi (dupa cum e si in imaginea urmatoare), iar cadrul respectiv din Timeline va fi transformat in Keyframe.


2. Mutare cale de miscare
  - Pentru a muta cu totul calea de miscare, se alege instrumentul Selection Tool, se da o data click intr-un loc pe traictorie, cand aceasta va apare selectata (putin mai ingrosata) se tine apasat click pe ea si se trage cu mouse-ul.

3. Creare Keyframe:
  - Prin adaugarea unui Keyframe se creaza in interiorul animatiei un cadru (un punct de control) de la care obiectul sau traictoria pot fi modificae in Scena.
  - Sectorul animatiei (cadrele ei din Timeline) fiind considerat ca un singur obiect, nu se pot adauga cadre sau Keyframe prin metoda "Insert". Pentru Motion Tween exista alte metode de a face un keyframe in interiorul animatie. Metoda cea mai usoara de a crea un keyframe in sectorul animatiei este urmatoarea:

• Se da click pe pozitia acelui Frame in Timeline (dreptunghiul rosu sa apara deasupra lui)
• Cu obiectul selectat in Scena, se fac modificarile dorite, sau o mica schimbare a pozitiei lui, dupa care se poate reveni la loc (keyframe-ul fiind creat).

  - Dupa prima modificare a uneia din proprietatile obiectului (oricat de mica), in acel loc din Timeline apare un mic romb, indicand ca acolo este un keyframe.

4. Adaugare curbe la traictorie
  - Curbele pe calea de miscare se fac prin tragere cu mouse-ul (cu Selection Tool) a unuia din punctele de pe traictorie, cand aceasta e deselectata, in dreptul sagetii cursorului apare un arc de cerc (daca e selectata va fi mutata cu totul).
  - O curba se poate crea intre un keyframe si ultimul cadru sau intre 2 keyframe. De exemplu, pentru ca traictoria sa aiba o forma de "S" (doua curbe, cum apare in imaginea urmatoare) trebuie adaugat un keyframe intre primul si ultimul (in locul in care se schimba curbele).


5. Adaugare traictorie facuta separat
  - In Motion Tween se poate crea o traictorie de miscare ce a fost facuta /desenata separat (in afara animatiei) cu un instrument de desen (creion, stilou, linie). Metoda e urmatoarea:

• Se deseneaza cu creionul (stiloul sau linie), intr-un cadru din afara animatiei, o linie continua cu orice forma pt. traictoriei.
• Cu Selection Tool se selecteaza desenul facut si se copie (Ctrl+C sau meniul Edit -> Copy)
• Se da click pe un cadru din Motion Tween si se apasa "Ctrl+V" (sau Edit -> Paste in Center)

- Traictoria initiala va fi inlocuita cu desenul facut si copiat, dupa cum se vede si in imaginea urmatoare.


6. Selectare si copiere cadre
  - Pentru a selecta o portiune (o anumita zona) din lungimea animatiei, se tin apasate tasta "Ctrl" si mouseul pe primul cadru din sirul ce trebuie selectat si asa se trage cadrul pana la ultimul care sa fie selectat (acele cadre vor capata o culoare mai inchisa).
  - Ca sa fie copiata portiunea selectata, se da click-dreapta pe ea si se alege Copy Frames. Iar la cadrul unde trebuie adaugat ce s-a copiat (trebuie sa fie o celula din afara animatiei, prima de la sfarsitul ei), se da click-dreapta si Paste Frames. Astfel, va fi creata inca o animatie Motion Tween, dupa prima, si cu zona selectata din ea.

7. Copiere proprietati de la un Keyframe la alt Frame.
  - Iata cum pot fi copiate proprietatile de la un Keyframe la un alt cadru din animatie:

• Se selecteaza keyframe-ul cu proprietatile ce trebuie copiate (Ctrl+click pe cadru), se da click-dreapta pe el si se alege Copy Properties
• Se selecteaza Cadrul la care trebuie adaugate (Ctrl+click pe cadru), se da click-dreapta pe el si se alege Paste Properties

- Vor fi copiate proprietatile: Position, Rotation, Scale, Skew, Color Effects si Filtres. Pentru a copia dor anumite proprietati din acestea, in loc de "Paste Properties" alegeti Paste Properties Special (se va deschide o fereastra cu proprietatile ce pot fi selectate).

8. Inversare animatie
- Inversarea se aplica intregii animatii. Se da click-dreapta pe un Frame din ea si se alege Reverse Frames. Primul Keyframe si cel de la sfarsit vor schimba locurile intre ei.

• Ca si la "Classic Tween" (vedeti lectia anterioara), cand e selectat in Timeline un cadru al animatiei, in panoul Properties apar proprietatile cu diferite efecte ce pot fi aplicate animatiei (acestea fiind diferite de proprietatile obiectului, cand e selectat), acestea sunt:

• 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.
• Rotate - Determina rotirea obiectului animat: CW (in sensul orelor de ceas), CCW (in sens invers orelor de ceas).
  - De la valoarea numerica (time(s)) din dreptul ei se seteaza numarul de rotiri, si alaturi, la semnul "+" se defineste unghiul de rotatie.
• Option -> Sync graphic symbols - Sincronizeaza animatia continuta in cadrul unui Symbol cu Timeline-ul ce o contine.
• Path - Se definesc dimensiunile si pozitia traictoriei.

In Adobe Flash exista un panou special pentru lucrul cu "Motion Tween". Este denumit Motion Editor, se gaseste de obicei langa Timeline sau poate fi deschis din meniul Window -> Motion Editor. In acest panou se gasesc grupate proprietatile si efectele ce pot fi aplicate unei animatii Motion Tween si obiectului din ea, precum: adaugare /stergere cadru, adaugare efecte culoare, pozitionare.

Pentru a anima un Symbol, acela trebuie sa fie singurul Symbol in animatia Tween creata.
Daca se doreste doua Simboluri animate in acelasi timp in document, se creaza inca un Strat (Layer) si in acela se pune al doilea Symbol si animatia lui Tween.

<ul>
 <li>http://coursesweb.net/html/</li>
 <li>http://www.marplo.net/html/</li>
</ul>

.some_class {
  display: list-item;
}

var obj = {
 "courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr);    // {"courses":["php","javascript","ajax"]}

$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue;    // CoursesWeb.net

I`m living here.
- Traiesc /Locuiesc aici.

Estoy viviendo aquí.
- Traiesc /Locuiesc aici.