Lucrul cu simboluri în Adobe Flash CS4

Tutorial publicat și pe E-learn.ro

In primul tutorial din seria Adobe Flash am prezentat pe scurt interfata CS4, pentru a putea aborda de aceasta data panoul Library, totodata discutand despre Movie Clip-uri - simboluri in libraria Flash.

Adobe Flash lucreaza cu simboluri (Movie Clip, Button, Graphic) deoarece aceastea micsoreaza semnificativ dimensiunea fisierelor, marind in acelasi timp flexibilitatea. Informatia dintr-o imagine transformata intr-un simbol, intr-un movie clip de exemplu, va fi incarcata doar o singura data in timp ce movie clip-ul poate fi folosit de nenumarate ori.

Panoul Library

Asa cum am spus mai sus, sunt trei mari tipuri de simboluri: Movie Clip, Button si Graphic.

Simbolul de tip Movie Clip este cel care prezinta cea mai mare flexibilitate deoarece ii putem aplica filtre, setari de culoare si chiar ii putem numi separat fiecare instanta urmand ca apoi sa o controlam cu Action Script.

Simbolul de tip Button prezinta frame-uri speciale pentru starile de roll-over specifice unui buton (Up, Over, Down, si Hit).

Starile de roll-over ale simbolului de tip Button

Starea Up este starea implicita a unui buton, starea Over determina infatisarea butonului cand mouse-ul se afla deasupra sa, Down ne indica infatisarea butonului atunci cand apasam pe el iar starea Hit ne defineste zona activa a butonului, adica zona care va raspunde efectiv de actiunea mouse-ului.

Simbolul de tip Graphic il vom folosi cu precadere in cazurile in care nu planuim sa animam imaginile. Este de departe cel mai putin flexibil simbol din Flash deoarece, desi putem anima un simbol b, controlul interactiv si sunetul nu vor merge impreuna cu acesta. De asemenea nici filtrele sau modurile de imbinare nu vor putea fi aplicate unui simbol Graphic.

Revenind la panoul Library, acesta poate fi comparat cu panoul Layers, familiar utilizatorilor de Photoshop, insa numai intr-o mica masura. Acesta permite organizarea simbolurilor create intr-un document, ordonarea lor in foldere, dupa tip sau nume.

Pentru a ilustra atat modul de lucru cu simbolurile cat si cel cu panoul Library vom face o mica animatie cu o minge.

Vom incepe prin desenarea suprafetei pe care va cadea mingea. Selectam Rectangle Tool (R) din panoul de unelte iar din selectorul Stroke Color alegem patratelul taiat ca in imaginea de mai jos.

Dezactivarea Color Stroke

In felul acesta dreptunghiul pe care il vom desena nu va avea margini, ci pur si simplu va fi o forma de culoarea aleasa de noi.

Dreptunghiul desenat

Asa cum am spus mai sus, daca nu avem de gand sa animam ceva din scena noastra, putem alege varianta simbolului Graphic. Asadar vom transforma dreptunghiul (podeaua) intr-un simbol de tip Graphic. Alegem din panoul de unelte Select Tool (V), selectam apoi apasam F8 de la tastatura sau din meniul Modify alegem Convert to Symbol.

Meniul Modify - Convert to Symbol

Din fereastra ce apare selectam Graphic la tipul simbolului si denumim sugestiv simbolul astfel creat.

Fereastra Convert to Symbol

In acest moment observam ca simbolul nostru tocmai ce a aparut in panoul Library despre care am vorbit la inceput.

Panoul Library cu un simbol

In continuare vom selecta Oval Tool din panoul de unelte (O) si apasand pe tasta Shift vom crea un cerc de culoare portocalie ca in imaginea de mai jos. Pentru ca mingea sa aiba contur va trebui sa alegem o culoare din selectorul Stroke Color pe care l-am dezactivat ceva mai sus.

Mingea desenata

Pentru a o face sa semene putin cu o minge de basket ii vom mai desena si liniile specifice folosindu-ne de Pen Tool (P) din panoul de unelte. Ar trebui sa iasa relativ ca in imagine.

Mingea finalizata

Avand in vedere ca o vom anima, putem sa o transformam linistiti intr-un Movie Clip, simbolul cu care cred ca va veti acomoda cel mai repede. Folosind aceeasi pasi ca mai sus o denumim repede minge si trecem ma departe.

De aceasta data simbolul minge apare diferit in panoul Library, lucru care este perfect normal avand in vedere tipul simbolului. Dupa iconul din dreptul numelui putem face usor distinctia intre simboluri.

In continuare vom face o operatiune pe care am invatat-o in tutorialul Interfata Adobe Flash CS4 si anume vom crea un layer nou in care vom muta simbolul proaspat salvat.

Impartirea pe layere

Am facut acest lucru pentru ca ne ofera putin mai multa manevrabilitate in momentul in care animam mingea, scapandu-ne de problemele ce ar fi aparut datorita prezentei podelei pe acelasi layer cu mingea.

Continuam prin a ne crea spatiul temporal necesar animatiei. Cu alte cuvinte, ne alegem o durata de timp pe care ne vom intinde cu animatia si cream un frame nou (pentru podea).

Alegem frame-ul si dand click dreapta selectam Insert frame, sau apasam pur si simplu F5 de la tastatura.

Optiunea Insert Frame

Pentru a anima mingea dam click dreapta pe frame-ul mingei si alegem Create Motion Tween.

Optiunea Create Motion Tween

Ne tragem mingea undeva in mijlocul scenei, in contact cu podeaua. Flash va face o treaba minunata pentru noi si anume va completa frame-urile cu restul animatiei.

Prima parte a animatiei

Ii vom curba un pic traiectoria pentru a parea mai plauzibila caderea.

Modificarea traiectoriei

Reducem putin durata primei parti a animatiei si realizam a doua parte a animatiei, cea in care mingea este respinsa in partea dreapta. Asta inseamna ca facem un frame nou in continuarea ultimului din cadrul animatiei iar pe el repetam ultimii pasi. Vom roti putin mingea.

A doua parte a animatiei

In acest moment animatia este completa. Nu este una foarte elaborata, insa contine in ea elementele de baza ale realizarii unei animatii simple, folosind un Movie Clip si Motion Tween in Adobe Flash CS4.