Seminar Flash I

7/21/2019 Seminar Flash I

1/16

2. Utilizare Macromedia Flash 5.0

- Introducere -

In acest curs nu vom invata sa programam in flash, ci vom invata sa folosim toateelementele pe care ni le ofera acesta. Bine inteles ca fara un pic de actionscipting nu vom

putea face mare lucru, de aceea elementele de baza din programarea in flash le veti invataaici.

Cuvinte folosite:

Obiect - orice element grafic ce este desenat sau scris in pagina (forme geometrice, linii,suprafete, texte, litere, poze).Layer - fiecare dintre straturile unei animatii - cele care suprapuse unul peste altulalcatuiesc toata scena.

Scena - fiecare pagina a unui film in care se intampla animatiile alcatuita din 1 sau maimulte layere.Frame - fiecare cadru al unui layer. O succesiune de frame-uri alcatuiesc o animatie.

Alte cuvinte vor fi explicate pe parcurs.

In prima lectie vom face cunostinta cu butoanele si meniurile in flash pe care le vomfolosii in lectiile urmatoare.

Primul lucru pe care-l vedem cand deschidem flash-ul este, ca la toate aplicatiile careruleaza sub windows, bara de meniuri

care, cu mici exceptii, prezinta aceleasi meniuri ca orice aplicatiie. De exemplu File cunew, open, save, print. Aici apar elemente noi cum ar fi "Open as library","Import/Export Image/Movie", "Publish" - rolul acestora urmand sa fie explicat lamomentul potrivit.


2/16

In partea din stanga a ecranului se poate observa "Tools" - bara cu unelte pentru desen. Cei care au mai lucrat in programe de grafica suntfamiliarizati cu ele.Sageata neagra - cursor - realizeaza selectia obiectelor. Aceasta selectienu este aditiva. Aditiva este combinata cu tasta Shift

Sageata alb a - este folosita pentru a lucra vectorial cu obiectele selectate.Linia - slash - este folosita pentru a trasa segmente de dreapta. In meniulWindows-Panels-Stroke puteti face setari pentru linii: culoare, grosime,aspect.Lasoul - este folosit pentru a selecta cu ajutorul mouse-ului o portiune deforma nereculata. odata selectat lasoul in meniul de jos - Options - apar trei

butoane. Primul buton este bagheta, cu care puteti selecta o portiuneintreaga care are aceeasi culoare - fara a mai fi nevoi sa o incercuiti culasoul. A doua bagheta face acelasi lucru - cu exceptia ca alegem noicalitatea selectiei. Al treilea buton ajuta la selectarea in puncte.Penita - unealta ce traseaza linii curbe pe o anumita tangenta - linia

desenata poate fii lucrata vectorial.A - Unealta pentru introdus text. In meniul windows-Panels aveti treioptiuni de setari pentru text: Character, Text options, ParagraphCercul - Cu aceasta unealta se pot desena ovale. Pentru a desena cercuritrebuie apasata tasta Shift.Patratul - Unealta cu care se deseneaza dreptunghiuri. Pentru a desena

patrate trebuie tinuta apasat tasta ShiftCreion - unealta pentru a trasa linii libere. La selectarea acestei unelte inmeniul Options apare un buton cu care se seteaza tipul de randare al liniei.Pensula - Ajuta la trasrea unor suprafete. In meniul Options puteti selectagrosimea suprafetei cat si forma acesteia. Cerculetul cu sageata micaneagra ajuta la tipul de desenare. Pentru o mai buna intelegere este indicatsa le testati pe toate.Calimara (stanga) - ajuta la colorarea contururilorGaleata (dreapta) - ajuta la colorarea suprafetelorPipeta - retine nuanta de culoareGuma - Unealta pentru sters. In meniul Options puteti alege forma gumeide sters + puteti face setari de stergere - ce sa stearga si ce nu.Mana - Unealta pentru miscat pagina fara a mai folosi bara de scrollLupa - unealta pentru marit micsrorat pagina (%)In meniul Colors Creion - seteaza culoarea pentru liniiCalimara - seteaza culoarea pentru suprafeteMagnet - Ajuta la pozitionarea cursorului pe anumite elemente ale paginii.Exemplu. Daca avem 2 puncte pe pagina si vrem sa tragem o linie intrecele 2 si e selectat magnetul - incepem trasarea liniei de la primul punct sicand suntem aproape de al doilea mouse-ul se lipeste de el fara a mai finevoiti noi sa-l pozitionam.Linia curba - rotunjeste liniile franteLinia franta - face liniile curbe, franteSageata curbata - Unealta care roteste obiectele selectate


3/16

P atratul cu sageata - Ajuta la redimensionare.

Pentru a accesa mai usor anumite butoane, elemente de meniu ale flash-ului bifati dinmeniul Windows-Toolbars -Main, Status, Controller. De asemenea meniul tools dinWindows trebuie sa fie bifat. Daca sunt aranjate haotic rearanjati-le prin "drag and drop".

Urmatoarea sectiune a flash-ului o reprezinta bara de timp "Timeline"

In acest loc sunt asezate layerele unul peste altul, fiecare avand un nume distinct care poate fi schimbat. Fiecare layer este format din frame-uri care sunt reprezentate printr-undreptunghi. Dupa cum se vede si in figura de deasupra, in layerul doi primul frame are o

bulina neagra.Aceasta bulina neagra apare pe fiecare frame in care se afla cel putin unobiect.. Dupa cum se vede frameul 1 din layerul 1 este gol, deoarece in acest frame nueste desenat nimic. Pozitia layerelor poate fi schimbata prin tragere cu mouse-ul.

Butoanele din "Timeline"

+ - adauga un layer nou~ - adauga un layer ghidatCosul de gunoi - sterge layerul selectatOchiul - ascunde layerul in dreptul caruia este bifat Lacatul - blocheaza accesul la layerul respectiv Patratul - arata doar conturul layerului

Toate layerele din "Timeline" formeaza o scena care are anumite propietati, setabile.

Pentru a seta dimensiunea ascenei, culoarea fundalul ei, viteza de rulare a frame-urilor(frame-uri/secunda) accesati meniul Modify-Movie.

In primul rand deschidem Flash-ul, apoi daca nu este deschisa o noua pagina, ne ducemla File-New. Facem cateva setari de baza ale noii noastre scene - locul unde se vorexecuta toate animatiile, astfel: din meniul Modify selectam Movie. Se va deschide ofereastra


4/16

In campul Frame Rate setam viteza de rulare a animatiei (frame-uri pe secunda), aceastaeste initial 12 (asa o vom lasa si noi). In campurile width si height se seteaza lungimea silatimea scenei. Unitatea de masura pentru lungime si latime este setata din campul RulerUnits. De asemenea se poate seta o culoare de fundal a scenei, culoare care se va pastra

de-a lungul tuturor animatilor efectuate in acest film. Pentru ca modificarile sa aiba efectapasam butonul OK. - Setarile pentru scena au fost facute.

Despre animatii

Animatiile, in flash, reprezinta o succesiune de frame-uri in care un obiect isi schimba pozitia,forma,culoarea,marimea,etc de la frame la frame. In Flash animatiile se pot facein doua feluri:* cu ajutorul lui shape (schimbare de forma)* cu ajutorul lui motion tween

Cateva Diferente:

In cazul shape - numarul obiectelor din starea initiala poate fii diferit de numarulobiectelor din starea finala a animatiei.

In cazul motion - in acelasi layer vom avea un singur obiect in frameul initial(symbol grafic) si acelasi obiect in frameul final. Animatia este data demodificarea pozitiei obiectului, a marimii, culorii etc. Daca la acest tip deanimatie introducem mai mult de 1 obiect in starea finala sau initiala apar erori.

Animatia de tip shape poate fi facuta cu orice fel de obiecte, dar nu poate fi facutacu simboluri.

Animatia de tip motion poate fi facuta doar cu simboluri

Primul tip de simbol - GRAFIC

Pentru a realiza un simbol grafic dispunem de 2 metode:

1. Intrarea in campul de editare, editarea simbolului si salvarea acestuia in librarie(librarie este locul din flash unde se gasesc toate simbolurile si obiectele importate -


5/16

Ctrl+L). Acest lucru se face selectand din meniu Insert-New Symbol (sau Ctrl+F8). O saapara un meniu de unde putem selecta tipul simbolului dorit

Selectam graphic, ii dam un nume si apasam ok. Dupa apasarea butonului OK vom intrain campul de editare unde vom desena simbolul. Pentru a iesi din campul de editareapasam butonul scene 1 care se afla in partea dreapta sus a barei de timp

Acum simbolul nostru grafic este salvat in librarie. Pentru a-l aduce in scena, deschidemlibraria (Ctrl+L) si il tragem cu mouseul, pozitionandul unde vrem.

2. Desenarea obiectului si apoi convertirea acestuia in simbol grafic

A doua metoda este putin pe dos, adica mai intai desenam obiectul in scena, apoi ilselectam si apoi il facem simbol grafic apasand tasta F8 sau selectand din meniu Insert-Convert to Symbol. Va apare acelasi meniu de selectare a tipului simbolului unde ii vomda un nume - apoi apasam OK. De aceasta data simbolul este direct in scena ne mai fiindnevoie sa-l tragem din librarie desi acesta este salvat si acolo.


6/16

Din librarie putem sterge simboluri, duplica, schimba numele acestora sau trage in scenaoricate copii vrem.

Odata ajuns in scena simbolul grafic, pentru a putea fii modificat se va da dublu click peel, fapt care ne va duce in campul de editare, loc unde putem modifica forma, marimea ,culoarea etc.

Pentru a schimba culoarea unui simbol avem 2 posibilitati: 1. ori intram in simbol, incampul de editare, si schimbam de acolo culoarea 2. ori cu ajutorul lui TINT. Selectamsimbolul si din meniul Window-Panels-Effect selectam Tint

Acest meniu mai poate fi deschis si dand click dreapta me simbolul grafic selectam panels-Effect.

Tot din meniul efect putem sa setam transparenta simbolului grafic cu ajutorul optiuniialpha


7/16

unde 100% inseamna vizibil si 0% inseamna transparent.

Daca avem mai multe obiecte/simboluri si vrem sa le aliniem pe fiecare in parte sau petoate odata o putem face din Window > Panels > Align sau doar folosind butonul dealiniere. Se va deschide un meniu

Pentru a alinia obiectele fata de scena trebuie apasat butonul "To Stage" apoi cred ca estedestul de evident ce face fiecare buton. Daca nu v-ati dat seama, creati cateva obiecte inscena, selectati-le si jucati-va cu butoanele, asa veti invata mult mai usor decat daca vaexplic eu. Pentru nelamuriri mail me.

La fel ca orice obiect si simbolurile pot suferi mici transformari mai exact rotiri la 90 degrade in oglinda pe verticala pe orizontala. Acest lucru se face selectand obiectul dorit siapoi din Modify-Transform selectam actiunea dorita.

Daca avem mai multe simboluri grafice puse unu peste altul in acelasi layer din care sevede cate ceva din fiecare putem sa setam care se fie deasupra care dedesupt si care lamijloc


8/16

Acest lucru se face prin selectarea simbolului si apasarea combinatiei de tasteCtrl+sageata jos sau sus sau se mai face din Modify-Arange selectand optiunea dorita.

Cam atat despre simboluri.daca am uitat ceva o sa mai adaug ulterior.

Acum sa trecem la animatii

Animatiile cu shapeCu un singur obiect

In frameul 1 desenati o bila cu unealta cerc. In frameul 30 desenati un patrat cu unealta patrat. Setati fiecarui obiect cate o culoare si pozitionati-le in colturi diferite ale scenei.Pe frameul 1 da-ti click dreapta selectati Panels si Frame si aici selectati shape, ca infigura.

Portiunea dintre frameul 1 si 30 se va face verde la transformarile de forma - shape.

Butoanele, ca si in paginile html, sunt elemente (grafice sau text) cu ajutorul carorase pot executa diferite actiuni, salt in pagina, intre pagini etc. In flash, butoanelesunt un pic mai complexe datorita modului de executie si al actiunilor care se potseta pe acestea.

In Flash butoanele au patru stari: Up, Over, Down Hit


9/16

Starea UP reprezinta starea butonului pe care o vedem cand nu se actioneaza asupra lui.Starea OVER reprezinta starea buonului care se vede atunci cand cursorul mouse-uluieste peste buton. Starea DOWN reprezinta starea buonului care se vede atunci candcursorul mouse-ului este apasat, iar starea HIT reprezinta zona butonului unde mouse-ulare efect (click, over)

Pentru a crea un buton, ca si la simbolul grafic avem 2 posibilitati.

Selectam din meniul Insert-New Symbol. Se va deschide un meniu in care vom da nume butonului (pentru a-l deosebi in cazul in care avem mai multe), si vom selecta staerasimbolului si anume Button - apoi apasam OK.

Dupa ce apasam OK vom intra in campul de editare al butonului unde vom vedea cele 4stari ale acestuia.

In starea up desenam o forma oarecare pe care o coloram.

In urmatoarele trei stari (OVER, DOWN, HIT) vom introduce cate un keyframe (clickdreapta pe frame si selectam Insert keyframe). Observam ca avem aceeasi forma siaceeasi culoare in toate starile butonului.

In starea Over schimbam culoare butonului

La fel vom face si in starea Down


10/16

Starea hit poate ramane cum este deoarece aceasta nu se vede ci reprezinta zona de butonin care putem da click. Pentru a intelege mai bine vom face un exemplu de buoton text..Pentru moment dati click pe Scene1 care se afla exact langa numele butonului, pe bara detimp.

Observam ca butonul nu se afla in scena. Pentru moment el este salvat in librarie. Pentrua-l aduce in scena vom deschide libraria (Ctrl+L) si-l vom trage cu mouse-ul.

Pentru a intelege starea hit vom face doua butoane identice in primele trei stari in carevom scrie ceva. In starea patru (HIT), in primul buton, introducem acelasi text in acelasiloc (keyframe), iar in al doilea buton vom introduce un dreptunghi cat toata suprafatatextului.

Observati ca in cazul butonului 1 mouseul are efect numai pe text nu si intre litere, pt caasa este setat in starea HIT, in timp ce in cazul butonului 2 mouseul are efect si intrelitere datorita dreptunghiului.

A doua metoda de a crea un buton este: desenam(importam, copiem) in scena un obiect,il selectam si din meniul Insert selectam convert to Symbol. va apare meniul

De aici se repeta pasii de la metoda anterioada. Diferenta este ca de aceasta data butonuleste in scena - nu trebuie sa-l mai copiem din librarie.

Actiuni

In aceasta lectie vom invata cateva actiuni, cred ca cel mai folosite in animatiile flash sianume: Stop, play, next, prev, gotoAndPlay, gotoAndStop, getURL.

Actiunile pot fii setate pe frameuri, simboluri.

Pentru a seta o actiune, click dreapta (pe frame sau pe simbol) si selectam Actions. Se vadeschide un meniu special.


11/16

De exemplu, actiunea stop pusa pe frameul 1 va face animatia sa se opreasca in acestframe.

Sa facem o animatie cu trei butoane, sa zicem un meniu simplu. Desenati trei butoanediferite pe care le asezati in scena unul sum altul in frameul 1.

Pe fiecare buton setati urmatoarele actiuni (click dreapta pe buton si Actions)

butonul 1

on (rollOver) {gotoAndStop (2);}

butonul 2 on (rollOver) {gotoAndStop (3);}

butonul 3 on (rollOver) {

gotoAndPlay (4);}Pe frameul 1 setati actiunea Stop();

In frameul 2 si 3 introduceti cate un keyframe (click dreapta pe frame - insert keyframe)si scrieti in fiecare cate ceva, diferit.


12/16

In frameul 2 schimbati actiunea pe butonul 1 astfel on (rollOut) {gotoAndStop (1);} iar in frameul 3 schimbati actiunea pe butonul 2 astfel:

on (rollOut) {gotoAndStop (1);}Din frameul 4 pana in frameul 30 faceti o animatie (Sa zicem in frameul 4 creati un patratsi in frameul 30 creati o sfera de culori, pozitie si forma diferite. - Introduceti un shape inframeul 4).

Exlicarea actiunilor:

on (rollOver) {gotoAndStop (2);

} - este actiunea setata pe butonul 1 in care se spune: cand se trece cu mouseul peste buton sa se duca si sa se opreasca in frameul 2. Daca dati click pe on (rollOver) { o sa sava apara in campul actions un submeniu (in partea de jos) in care puteti selecta metoda

prin care mouse-ul are efect asupra butonului.Daca selectati gotoAndStop (2); va apareun submeniu in care puteti selecta scena si frameul in care sa se duca bara de timp. sautipul actiunii (nextFrame, prevFrame, gotoAndStop...etc.).

Echivalentul actiunii gotoAndStop (2); de pe butonul 1 este nextFrame();

Daca vrem ca atunci cand dam click pe un buton sa se deschida o pagina web, setamurmatoarea actiune getURL ("http://www.adresa.ro", "_blank");. Daca dam click pe

getURL va apare un meniu in care putem face cateva setarii ale actiunii: unde sa sedeschida pagina, adresa URL a paginii, tipul de trimitere al variabilelor.

Un movie clip este o mini animatie flash care are propria sa bara de timp si propriilesale propietati. Un movie clip poate fii copiat din librarie, in scena, de n ori. Un movieclip poate contine alte movie clipuri incluse in el. Movie clipurile, la fel ca o animatieflash, pot contine mai multe layere, simboluri, transformari de forma, tweening,sunete etc.

Movie clipurile pot fi controlate folosind actiunile. Aceste actiuni pot fii atasateframeurilor sau butoanelor. Daca in scena se afla mai multe movie clipuri, acestora lise atribuie o instanta (nume) pentru a le putea distinge intre ele, astfel: clickdreapta pe movie clip - Panels-Instance. In meniul care apare


13/16

treceti numele movie clipului in campul "name".

La fel ca toate simbolurile si movie clipul poate fi facut transparent cu ajutorul lui"alpha". Din acelasi meniu (vezi mai sus) selectati Effect din dreapta lui instance.

Selectati alpha si setati procentul de transparenta unde 0% inseamna invizibil si 100% enetransparent.

Pentru a face un movie clip, selectam Insert-New Symbol

Dam movie clipului un nume (in campul name), selectam tipul simbolului si apasam OK.Vom intra in campul de editare al simbolului care va arata ca o scena obisnuita.

Aici vom face animatia noatra din cate layere/frameuri/obiecte vrem noi. Pentru a iesi dincampul de editare apasam butonul de langa numele simbolului (vezi mai jos)


14/16

Odata ajunsi in scena trebuie sa aducem symbolul din librarie - deschidem libraria(Ctrl+L) si il tragem cu mouseul. Odata ajuns in scena ii putem seta un nume (vezi maisus - Instance)

La ce sunt bune movie clipurile

Sunt folosite atunci cand, in scena principala, bara de timp este oprita intr-un anumitframe si totusi vrem sa avem animatii (care pot fii realizate numai daca bara de timp semisca) de exemplu pot fi folosite pentru siglele animate ale siteurilor. Movie clipurile potfii introduse si in butoane, intr-una dintre cele trei stari ale acestuia. sau chiar inanimatiile cu simboluri grafice.

Layerele.

Sunt folosite pentru ca nu avem de ales(vezi animatii cu simboluri), pentru a neusura munca(cand in scena sunt mai multe obiecte grupate pe categorii), inanimatiile ghidate(Guide&Guided Layers), in animatiile mascate(Mask&MaskedLayers) si pentru a face animatii complexe.

In imaginea de mai sus avem trei layere. Primul layer are un X rosu. Asta inseamna ca totce este desenat in el nu se vede - indiferent de frame. Al doilea layer are un lacatel si uncreion taiat - asta inseamna ca se poate vedea ce este in el, dar nu se pot face modificari(adaugari, stergeri). Al treilea layer este layerul care nu are nici un fel de restrictie. In else poate edita animatia. Fiecare bulina din fiecare layer care se afla sub ochi este unealtacu care un layer se poate face vizibil sau invizibil (just click), cu ajutorul bulinelor de sublacat se poate restrictiona accesul la layerul care are bifata aceasta optiune.

Ordinea in care sunt asezate layerele este si ordinea in care obiectele sunt vazute, in acestcaz, obiectele existente in layerul 1 vor fi deasupra celor din layerul 2 si trei, cele dinlayerul 2 deasupra celor din layerul 3. Pozitia unui layer poate fi schimbata prin tragerecu mouse-ul in locul dorit. Numele layerelor poate fi si el schimbat - click dreapta pelayer-properties-name.

Sunetele


15/16

Cred ca toata lumea stie ca o animatie flash insotita de sunete are mai mult efect decatuna fara. Dar trebuie stiut ca sunetele incarca foarte mult fisierul swf. Asta daca nufolositi asa numitele bucle -loop- care sunt mici ca dimensiuni. O alta solutie ar fi saimportati sunete optimizate anterior sau sa incarcati sunetele in swf-uri separate, care sevor incarca independent de animatie.

Sunetele pot fi controlate in flash - volumul, play, stop. Pot fi asociate butoanelor,frameurilor, pot fi incluse in movie clipuri.

Pentru a importa sunete Click pe File-Import si selectati melodia dorita. Aceasta va fistocata in librarie.

Pentru a introduce sunete in butoane, in oricare din primele trei stari. Creati butonul si incampul de editare da-ti click dreapta pe starea dorita (de exemplu Down) selectati Panelssi apoi Sound. daca aveti sunete in librarie le veti putea selecta, daca nu trenuie saimportati.

Un efect dragutz - valabil pt sunetele mai mari. In starea Over a butonului selectatisunetul si la Sync selectati start, iar in starea Down selectati acelasi sunet dar la Syncselectati stop. Astfel la trecerea cursorului peste buton va incepe sunetul iar la apasarea

butonului acesta se va opri. In felul acesta puteti controla Play & Stop sound.

Flash-ul fiind o aplicatie destinata webului prezinta functii care fac cu usurintainteractionarea unei animatii (fisier swf) cu paginile web (html, php,...) si deoarecewebul foloseste la randul lui fisiere si flasul poate interactiona cu acestea. Cu ajutorulphp-ului se poate face legatura dintre flash si baza de date MySQL.

Dupa parerea mea, cea mai folosita functie de legatura intre flash si o pagina de

net este:getURL(url [, window [, variables]]);

Aceasta functie deschide o pagina de net care se afla la adresa specificata de ulr. Cuajutorul lui window putem specifica locul unde sa se deschida pagina de net, areaceleasi propietati ca si tagl din html, adica:_self, _blank, _parent, _top. Cuajutorul lui variables se specifica metoda de trimitere a variabilelor, care poate safie POST sau GET. Acest argument al functiei este optional, putand exista situatia dea nu se trimite variabile.

Cand facem o animatie cu un simbol grafic - tweening motion - simbolul se miscaintre starea initiala (primul frame) si starea finala (ultimul frame) pe calea cea mai

scurta. Dar daca vrem ca traiectoria sa fie o linie curba, ce facem? Introducem un GuideLayer - locul in care vom desena traiectoria pe care dorim sa se miste simbolul si unGuided Layer layerul in care se va pune simbolul in starea initiala si in cea finala.


16/16

Cum facem?

Deschidem o scena noua si mai introducem un layer - acum trebuie sa avem 2layere. Pe primul layer dam click dreapta si selectam properties - aici selectamguide. Pe layerul doi procedam la fel, doar ca selectam guided . Acum desenam inlayerul Guide o linie curba - ale carei capete nu se unesc. Linia nu trebuie sa se

intersecteze cu ea insasi. In acest layer la frameul 100 introducem un frame.

In layerul Guided selectam simbilul grafic (se observa o cruciulita pe el - centrul) si ilpozitionam cu cruciulita(centrul) la unul din capetele liniei. In layerul guided, inframeul 100 introducem un keyframe. Aici pozitionam simbolul grafic cu centrul incelalalt capat al liniei. In layerul guided, frameul 1 introducem motion tween. Rulamanimatia.

Dupa cum observati, traiectoria pe care se deplaseaza simbolul nu se vede. Maiobservam ca simbolul nu se roteste in jurul axei pentru a da senzatia de miscarereala. Pentru a face acest lucru, pe primul frame din layerul guided, dam clickdreapta selectam Panels-Frame. In fereastra care apare bifam casuta de la Orient to

path. Rulam aplicatia si o sa observam ca obiectul merge cu "capul inainte".

Daca vrem sa facem o traiectorie mult mai complexa in care liniile acesteia trec unape langa alta la distante foarte mici, este posibil sa apara erori - simbolul grafic sasara de pe traiectorie. In aceasta situatie vom face animatia pe bucati, mai scurte.Adica vom impartii intregul traseu (traiectorie) in mai multe parti si vom avea maimulte animatii Guide-Guided una dupa alta.

Seminar Flash I

Documents

Transcript of Seminar Flash I