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.

1. Deschideti un document Flash nou, alegeti instrumentul pentru desen "Rectangle Tool" si desenati un dreptunghi in partea stanga in Scena.
2. Dati click dreapta pe un cadru mai departat din Timeline (de ex. 41) si alegeti Insert Blank Keyframe.
La acel Frame va fi creata o Scena goala, si intre el si primul Flash adauga Cadre Statice.
3. Alegeti instrumentul pentru desenat figuri ovale (Oval Tool), schimbati culoarea de umplere (de la Fill Color) si in Scena de la acest Keyframe (41) desenati cate un cerc in colturile din dreapta (sus si jos). La al doilea cerc schimbati-i culoarea, de la "Fill Color" din Properties.
4. Dati click-dreapta pe un cadru oarecare dintre primul si cel creat (41) si alegeti Create Shape Tween.
Acum animatia este creata, observati sageata adaugata in Timeline, intre primul si ultimul Keyframe.
-   Cadrul curent devine cel pe care s-a dat click-dreapta, iar in Scena apare cum arata animatia la momentul acelui Frame.
5. Apasati tasta Enter (sau meniul Control -> Test Movie -> in Flash Professional) pentru a vedea aceasta animatie.
- In prezentarea urmatoare puteti vedea cum se face acest exemplu.

- Animatie Shape Tween

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). - 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

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.
Diferenta data de 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.

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Ce tag HTML5 este indicat sa contina meniul cu link-uri de navigare in site?
<section> <nav> <article>
<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>
Ce proprietate CSS muta elementrul in dreapta sau stanga de la locul unde e?
text-align clear float
.some_class {
  width: 30%;
  float: left;
}
Clic pe metoda obiectului Math care rotunjeste numarul x descrescator la cel mai apropiat intreg.
Math.ceil(x) Math.abs(x) Math.floor(x)
var num = 12.34567;
num = Math.floor(num);
alert(num);       // 12
Indicati functia PHP care returneaza numarul de caractere dintr-un sir.
mb_strlen() count() stristr()
$str = "sir cu caractere utf-8 åèö";
$nrchr = mb_strlen($str);
echo $nrchr;        // 29
Clic pe raspunsul potrivit la intrebarea: "When it happened?".
On the 7th of July 1996 It is a quarter to 5. Nice weather.
When it happened? On the 8th of August 2001.
- Cand s-a intamplat? Pe 8 August 2001.
Indicati raspunsul potrivit la intrebarea: "¿Cuando sucedió?".
Hace buen tiempo. En el 8 de Agosto de 2001 Son las tres menos cuarto.
¿Cuando sucedió? En el 8 de Agosto de 2001.
- Cand s-a intamplat? Pe 8 August 2001.
Shape Tween - Animatie

Last accessed pages

  1. Curs CSS Online Tutoriale CSS3 (4434)
  2. Conditional IF in Limba Engleza - Fraze Conditionale (39931)
  3. Prezentul simplu si continuu - Present Tense Simple and Continuous (52156)
  4. Poezii pentru copii, in engleza (8573)
  5. Lucrul cu stiluri CSS (2771)

Popular pages this month

  1. Prezentul simplu si continuu - Present Tense Simple and Continuous (3122)
  2. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (2511)
  3. Gramatica limbii engleze - Prezentare Generala (2356)
  4. Prezent perfect si Prezent perfect continuu - Present perfect and Continuous (1960)
  5. Trecutul simplu si continuu - Past Tense Simple and Continuous (1609)