Shape Tween - Animatie

Curs Flash

Scopul animatiei Shape Tween este sa transforme prin miscari treptate forma geometrica a unui obiect in alta forma. Cum ar fi de exemplu un dreptunghi intr-un cerc.
Pe langa schimbarea formei se pot anima si alte schimbari, cum sunt: pozitia, dimensiunea si efecte de culoare.
Reguli pentru aplicare Shape Tween
  - Spre deosebire de "Motion Tween", Shape Tween se aplica elementelor a caror forma poate fi editata in Scena: obiecte si forme.
  - Nu se aplica grupurilor si nici elementelor din Grup.
  - Pentru a aplica Shape tweening unui Symbol, trebuie intai sa se intre in pagina de editare a lui si acolo sa fie adaugat Shape Tween.
  - Shape Tween permite crearea de noi elemente in Keyframe-uri din sectorul animatiei.
  - Pot fi animate mai multe obiecte in acelasi Tween.
  - Pentru a adauga Shape Tween la un text, trebuie intai "rupt" textul cu "Break Apart" (din Modify -> Break Apart).

1. Creare animatie Shape Tween

Animatia Shape Tween este cel mai simplu de facut dintre tipurile de animatie Flash, pasii sunt urmatorii:
1. Se creaza primul si ultimul Keyframe.
2. Pe un Frame dintre ele se da click-dreapta si se alege Create Shape Tween (sau din meniul Insert -> Shape Tween).
- Flash va crea animatia si cadrele de imbinare /transformare "Shape" intre obiectele din primul si ultimul Keyframe, iar ca indicator va adauga in Timeline o sageata intre cele 2 Keyframe.
- In comparatie cu "Motion Tween", animatia Shape Tween pare mai spectaculoasa ca efect, dar fisierele produse cu ea au dimensiuni mai mari.

Iata un exemplu de creare a unei animatii simple Shape Tween. Se efectueaza urmatorii pasi.

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

- Animatie Shape Tween

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

Dupa ce animatia este facuta, pot fi create Keyframe-uri intre primul si ultimul, prin click-dreapta pe cadru si apoi Convert to Keyframe (sau Insert Keyframe).
La fiecare Keyframe elementele din Scena devin editabile si pot fi adaugate diferite efecte si modificari obiectelor, din proprietatile lor cand sunt selectate (schimbare dimensiuni, forma si rotatie cu "Free Transform", pozitie si culoare).

Deoarece "Shape tweening" se aplica formelor editabile, nu pot fi adaugate efecte de culoare "Filters" (care pot fi adaugate Instantelor Symbol), doar cele de la "Color Effects"

Animatiei, sau unei portiuni de cadre selectate din ea, pot fi modificate proprietatile Ease si Blend (care apar in panoul Properties cand acestea sun selectate).

• 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.
• Blend - Are 2 optiuni:
  • Distributive - creaza o transformare lina a formei si colturilor in timpul animatiei.
  • Angular - face transformarea colturilor de la forma initiala pana la ultima selectata mai unghilare in procesul animatiei.

- Pentru a anula un Keyframe din Spape Tween, se da click-dreapta pe acel keyframe din Timeline si se alege Clear Frames.
- Pentru a adauga alte cadre statice in animatie, se da click-dreapta pe un Frame din ea si apoi Insert Frame.
- Cadrele se sterg complet din animatie cu optiunea Remove Frames.

2. Shape Hints

Cu cat formele animate sunt mai simple cu atat efectul de transformare este mai clar si frumos. Cand formele sunt complexe (cum ar fi text sau desen cu multe elemente si colturi), animatia dintre primul si ultimul Keyframe devine mai putin coerenta, ceva amestecat; Flash neputand crea o schimbare animata clara. Pentru aceasta se foloseste "Shape Hints", (sugestii /indicii pt. forma) prin care se poate exercita un control mai mare asupra procesului de transformare.
Shape Hints determina /ghideaza Flash cum sa deseneze cadrele interne, dandu-i indicatii care zone din forma primara sa fie transformate in alte zone precizate in forma finala. Ideea de baza este sa se indice un loc din forma initiala a obiectului si in urmatorul keyframe sa fie precizata (cu acelasi tip de indicator) locatia din obiect ce trebuie sa corespunda ca transformare pentru locul indicat la inceput.
Pasii pentru adaugare Shape Hints sunt urmatorii:

1. Se da click pe Keyframe-ul initial, unde trebuie create Shape Hints ("Playhead", adica dreptunghiul rosu sa apara deasupra lui).
2. Click pe meniul Modify -> Shape -> Add Shape Hint.
   - Va apare in centrul desenului un mic cerc rosu cu litera "a" in el ("Shape Hints" apar in ordine alfabetica, "a", "b", "c" ...).
3. Se tine apasat click pe cerculet si se muta in locul /zona din desen care va fi controlata prin el (vedeti imaginea de mai jos).
4. Click pe Keyframe-ul final, la care va fi setata locatia de transformare pt. zona indicata de cerculetul rosu.
   Si in centrul desenului aflat in Scena de la acest cadru va apare un mic cerc rosu cu litera "a". Acesta este corespondentul celui creat la forma initiala.
5. Se muta cu mouse-ul acest cerculet in locatia din obiectul final, unde se doreste sa corespunda la transformare cu cea controlata de primul cerculet.
6. Se alege iar primul Keyframe si se repeta pasii 2, 3, 4 si 5 pentru creare si adaugare Shape Hint.
   Se adauga cate sunt nevoie, in functie de cate zone trebuie controlate, tinandu-se cont ca "a" initial corespunde cu "a" final, "b" cu "b", si tot asa.
   - Se apasa Enter pentru testare animatie

- Creare Shape Hint

- Shape Hint se creaza mereu de la primul cadru al animatiei.
- In imaginea urmatoare se poate vedea diferenta de transformare dintre cadre, la aceeasi animatie cu si fara Shape Hint.

- Pentru a sterge un Cerculet Shape Hint, se da click-dreapta pe el, apoi Remove Hint.
- Pentru a sterge toate Shape Hints, se da click dreapta pe unul din ele si se alege Remove All Hints (sau din meniul Modify -> Shape -> Remove All Hints).

Se recomanda plasarea cerculetelor Shape Hints consecutive, in sensul, sau invers orelor de ceas; altfel, Flash ar putea da rezultate neasteptate.
Este indicat sa se evite Motion Tween cu forme create cu instrumente "Primitive".
- Pentru a vedea toate controalele Shape Hints adaugate, se da click pe meniul View -> Show Shape Hints.

<nav><ul>
 <li><a href="http://coursesweb.net/css/" title="CSS Course">CSS Course</a></li>
 <li><a href="http://www.marplo.net/jocuri/" title="Flash Games">Flash Games</a></li>
</ul></nav>

.some_class {
  width: 30%;
  float: left;
}

var num = 12.34567;
num = Math.floor(num);
alert(num);       // 12

$str = "sir cu caractere utf-8 åèö";
$nrchr = mb_strlen($str);
echo $nrchr;        // 29

When it happened? On the 8th of August 2001.
- Cand s-a intamplat? Pe 8 August 2001.

¿Cuando sucedió? En el 8 de Agosto de 2001.
- Cand s-a intamplat? Pe 8 August 2001.