Sunteți pe pagina 1din 59

Curs 1 Grafica digital Grafica vectorial Afiarea i crearea imaginilor vectoriale Microsoft DirectX Adobe Flash CS5

Grafica digital este un domeniu al informaticii care acoper toate aspectele legate de formarea imaginilor utiliznd un computer. Termenul englez corespunztor este computer graphics. Grafica digital este o activitate n care computerul este utilizat pentru sintetizarea i elaborarea imaginilor, dar i pentru prelucrarea informaiei vizuale obinute din realitatea ce ne nconjoar. Grafica digital se divizeaz n mai multe categorii:

Grafica bidimensional (se constituie din grafic raster i grafic vector) Grafica Fractal Grafica tridimensional (este des utilizat n animaie, spoturi publicitare, jocuri la computer etc.) CGI grafica (CGI n englez imagini, personaje generate de computer) Grafica animat Grafica video Grafica web Grafica Multimedia

n grafica digital se opereaz cu diverse elemente grafice, pentru elaborarea i controlul imaginilor ca de exemplu: pixel, punct, linie, curb, poligon etc. La baza graficii digitale (i n special grafica bidimensionala) stau doua tipuri de calculaii, Raster (sau rastru) i Vector (vectorial). Grafica rastru i vector stau la baza graficii digitale, ele sunt utilizate de programele 3 dimensionale, programe pentru montare video, animaie, etc. Prezentarea la calculator a imaginii de tip Raster se face n baza segmentrii unei suprafee cu ajutorul unor ptrele mici care se
2

numesc pixeli. O imagine rastru este un tablou format din mai multi pixeli. Cu ct mai muli pixeli avem n imagine cu att calitatea detaliilor e mai nalt. Acest tip de grafic permite s cream i s reproducem oricare imagine cu multitudinea de efecte i subtiliti, indiferent de complexitate. Imaginile procesate cu ajutorul scanerului sau aparatelor foto snt formulate ca raster.

Neajunsurile e complicata redimensionarea graficii rastru, deoarece la interpolare (adugare de pixeli n raport de cei existeni n imagine) computerul inventeaz calculnd pixelii nu ntotdeauna satisfctor, cu toate c sunt diverse metode de interpolare.

Grafica vectorial este un procedeu prin care imaginile sunt construite cu ajutorul descrierilor matematice prin care se determin poziia, lungimea i direcia liniilor folosite n desen. Grafica vectoriala e bazat ca principiu pe desen cu ajutorul liniilor calculate pe o suprafaa. Liniile pot fi drepte sau curbe. n cazul imaginilor vectoriale fiierul stocheaz liniile, formele i culorile care alctuiesc imaginea, ca formule matematice. Imaginile Vector pot fi mrite i micorate fr a pierde calitatea. O imagine poate fi modificat prin manipularea obiectelor din care este alctuit, acestea fiind salvate apoi ca variaii ale formulelor matematice specifice. Notiuni: 1. Desktop publishing, abreviat DTP, este o expresie englez din domeniul tipografiei i care s-ar putea traduce prin "publicare cu ajutorul calculatorului de tip desktop". Este procesul de creare i editare (modificare) a unui document cu ajutorul unui computer avnd ca obiectiv final tiprirea lui. n acest domeniu exist programe de calculator specializate ce pot fi mprite n mai multe categorii:

programe de creaie i prelucrare foto (Adobe Photoshop, Corel Photopaint); programe de creaie i prelucrare de grafic vectorial (Adobe Illustrator, Corel Draw, Flash); programe de paginare (Adobe InDesign, QuarkXPress, Adobe Pagemaker, Corel Ventura); programe utilitare (Adobe Acrobat Professional, Adobe Acrobat Distiller etc);

Cel mai utilizat program pentru realizarea documentelor ce urmeaz a fi tiprite este Corel Draw. Are setri speciale pentru separaii, overprint Funcia de overprint este suprapunerea la tipar a dou culori diferite, culoarea de deasupra (ultim) acoperind total culoarea de dedesubt (anterioar). Dac activm opiunea Overprint la culoarea neagr, atunci cercul va putea rmne ntreg i nu va mai fi nevoie s fie mai nainte decupat n locurile unde urmeaz a fi tiprit textul negru. 2. Monitoarele sunt aparatele ce decodific semnalul electric i genereaz culorile RGB (Red, Green, Blue rou, verde, albastru) prin suprapunere de lumin. Cnd nu exist nici un fel de lumin este generat culoarea neagr, cnd intensitatea prin cele trei canale este maxim, se obine culoarea alb. Teoretic s-ar putea tipri i folosind direct spaiul de culori RGB, ns datorit imperfeciunii hrtiei, cernelii i a mainilor de tipar, se folosete spaiul CMYK (Cyan, Magenta, Yellow, blacK), urmnd ca negrul, care se tiprete la sfrit de procedur, s acopere aceste imperfeciuni. La o lucrare pretenioas este indicat ca imaginile, textele i obiectele colorate s fie combinate atent, mai ales cnd se lucreaz cu culori Pantone, pentru ca la sfrit s nu rezulte amestecaturi nedorite de culoare.
4

Exist sisteme sofisticate de control cromatic al imaginilor. Adaptarea valorilor cromatice se aplic n funcie de necesitai i scopuri. Astfel, pentru controlul de culoare la computere, exist mai multe modele cromatice (sau modele de culoare), care pot fi folosite pentru definirea cromatic a imaginii, pentru selectarea culorilor n procesul desenrii i crerii imaginii, pentru arhivare, etc. n general exist dou tipuri majore de modele cromatice:

amestecul aditiv RGB (din englez de la Red-Green-Blue, rou-verde-albastru) amestec de culori lumin se utilizeaz pentru ecran, monitor, televiziune, scanare, aparate foto, design web, animaie i altele. amestec substractiv CMYK (de la Cyan-Magenta-YellowblacK) amestec de culori pigment se utilizeaz pentru proiecte poligrafice destinate tiparului color.

Unele modele de culoare admit variaii ale diapazonului cromatic, din acest motiv sunt mprite n diverse profiluri de culoare destinate diferitelor necesiti. De exemplu, pentru modelul RGB exist mai multe profiluri. sRGB IEC61966-2.1 diapazon mediu utilizat mai des pentru pagini web, sau Adobe RGB (1998) diapazon mai mare utilizat pentru prelucrarea imaginilor destinate produselor pentru tipar. Pe lng modelele cromatice RGB i CMYK mai exist i altele precum: Lab, HSB / HSL / HSI, Culori Indexate, Culori Pantone/PMS (Pantone Matching System), Culori Spot.

Afiarea i crearea imaginilor vectoriale Display-urile computerelor sunt alctuite din puncte minuscule numite pixeli. Imaginile bitmap sunt de asemenea construite folosind aceste puncte. Cu ct sunt mai mici i mai apropiate, cu
5

att calitatea imaginii este mai ridicat, dar i mrimea fiierului necesar pentru stocarea ei. Dac imaginea este afiat la o mrime mai mare dect cea la care a fost creat iniial, devine granulat i neclar, deoarece pixelii din alctuirea imaginii nu mai corespund cu pixelii de pe ecran. Pentru a crea i modifica imagini vectoriale sunt folosite programe software de desen vectorial. O imagine poate fi modificat prin manipularea obiectelor din care este alctuit, acestea fiind salvate apoi ca variaii ale formulelor matematice specifice. Operatori matematici din software pot fi folosii pentru a ntinde, rsuci, colora diferitele obiecte dintr-o imagine. n sistemele moderne, aceti operatori sunt prezentai n mod intuitiv folosind interfaa grafic a calculatorului. Conversia din i n format raster Vectorizarea imaginilor este util pentru eliminarea detaliilor nefolositoare dintr-o fotografie. Conversia din format vectorial se face practic de fiecare dat cnd este afiat imaginea, astfel nct procesul de l salva ca bitmap ntr-un fiier este destul de simplu. Mult mai dificil este procesul invers, care implic aproximarea formelor i culorilor din imaginea bitmap i crearea obiectelor cu proprietile corespunztoare. Numrul obiectelor generate este direct proporional cu complexitatea imaginii. Cu toate acestea, mrimea fiierului cu imaginea n format vectorial nu va depi de obicei pe cea a sursei bitmap. Aplicaiile grafice avansate pot combina imagini din surse vectoriale i raster i pun la dispoziie unelte pentru amndou, n cazurile n care unele pri ale proiectului pot fi obinute de la o camer, iar altele desenate prin grafic vectorial.

Vectorizarea Aceasta se refer la programe i tehnologii/servicii folosite pentru a converti imagini de tip bitmap n imagini de tip vectorial. Exemple de utilizare:

n Proiectarea asistata pe calculator (CAD) schiele sunt scanate, vectorizate i transformate n fiiere CAD prntr-un process denumit sugestiv hrtie-CAD. n GIS imaginile provenite de la satelii sunt vectorizate cu scopul de a obine hri. n arta digitala i fotografie, imaginile sunt de obicei vectorizate folosind plugin-uri pentru programe ca Adobe Photoshop sau Adobe Illustrator, dar vectorizarea se poate face i manual. Imaginile pot fi vectorizate pentru o mai bun utilizare i redimensionare, de obicei far diferene mari fa de original. Vectorizarea unei fotografii i va schimba aspectul din fotografic n pictat sau desenat; fotografiile pot fi transformate i n siluete. Un avantaj al vectorizrii este c rezultatul poate fi integrat cu succes ntr-un design precum un logo.

O interfata API este un cod sursa oferit de catre sistemul de operare sau o librarie pentru a permite apeluri la serviciile care pot fi generate din API-uri respective de catre un program. Interfete API sunt deseori incorporate n Software Development Kit (SDK) . Microsoft DirectX

Microsoft DirectX este o colectie de Interfete API folosita pentru manipularea taskurilor legate de multimedia, n special programarea jocurilor i video, pe platforme Microsoft. DirectX este de asemenea folosit i de alti producatori software, n mare parte n sectorul de inginerie, din cauza abilitatii de redare rapida a obiectelor 3D de inalta calitate. DirectX a fost iniial redistribuit de catre dezvoltatori de jocuri impreuna cu kiturile de instalare, dar n ultim timp DirectX a fost inclus n kit de instalare a sistemului de operare (sau n Service Packs). Unii dezvoltatori de jocuri inca mai includ DirectX n kitul de instalare i ofera posibilitate de a-l instala (sau de a face update) dupa instalarea jocului. Interfetele API din DirectX Majoritatea Interfetelor API din DirectX sunt n forma de obiecte COM. Componentele care le conine DirectX sunt: DirectX Graphics, alcatuit din doua Interfete API (DirectX 8.0 sau mai mult): DirectDraw: pentru generarea de obiecte grafice 2D (acum dezaprobat, desi este inca folosit de multi programatori) Direct3D (D3D): pentru generarea obiectelor grafice n 3D DirectInput pentru tastaura, mouse, joustick sau alte controlere pentru jocuri (nu mai este folosit decat pentru Xinput, n controlere la Xbox 360)

DirectPlay pentru comunicare jocurilor n retea (Impreuna cu DirectInput a fost folosit ultima data n DirectX 8. Acuma este dezaprobat) DirectSound pentru redarea sunetului n forma wave sunetului i inregistrarea

DirectMusic pentru redarea sunetelor autorizate de catre DirectMusic Producer DirectX Media conine DirectAnimation pentru animaii web 2D, DirectShow pentru redare multimedia, DirectX Transform pentru interactionare web i Direct3D Retained Mode pentru obiecte grafice 3D de nivel inalt. DirectShow mai conine DirectX Plugins pentru procesarea semnalului audio i DirectX Video Acceseration pentru a accelera redarea video. DirectX Media Objects suport pentru pentru obiecte cu streamuri cum sunt encodere, decodere i efecte. DirectSetup pentru instalarea componentelor DirectX (care de fapt nu prea este API) Dezvoltata iniial de compania Macromedia, aplicatia Adobe Flash a fost preluata de catre Adobe odata cu achizitionarea companiei sus amintite. Adobe Flash sau mai pe scurt Flash este o aplicatie utilizata pentru dezvoltarea obiectelor-applet de tip Flash, disponibile n cadrul unor pagini WEB. Prin intermediul obiectelor flash, veti putea creste dinamismul unei pagini precum i facilita interactiunea cu utilizatorul. Adobe Flash este o aplicaie foarte complex, o platform multimedia care combin posibilitatea desenului vectorial cu animaii i cu linii de cod, sunt suportate streaming-uri audio/video, iar interaciunea cu utilizatorul se poate face i prin microfon/webcam, pe lng mouse/tastatur.

Flash Player-ul, necesar pentru a rula aplicaiile Flash, este disponibil pentru mai multe sisteme de operare, Windows, Linux, Solaris, Mac OS X, ..........., Android ettc. Dei cel mai des ntlnite utilizri sunt pentru marketing i diverse forme de reclam, posibilitile practice sunt nelimitate.Adobe Flash ascunde multe faciliti, printre care optimizarea codului, grafic avansat (OpenGL, D3d), protocol peer2peer, interconectare cu diverse alte RIA i limbaje web. Adobe Flash combina i uneste n acelasi program elemente de grafica vectoriala i programare web ( realizata n ActionScript), ceea ce-l face util atat pentru designeri cat i dezvoltatorii web. O gama larga din efectele create cu Flash pot fi fcute i cu JavaScript, dar n cazul JavaScript apare adesea probleme cauzate de incompatibilitatea dintre navigatoarele web. Adobe Flash CS5 Cerintele minime de sistem pt. Adobe Flash CS5 sunt:

Procesor: Intel Pentium 4, Centrino, Xeon, ori Core Duo sau echivalent. 1 GB de RAM (2 GB recomandat). 2.5 GB spatiu liber pe Hard disk. Rezolutie: 1024 x 768. Sistem de operare: Microsoft Windows XP cu Service Pack 3 sau mai nou; Windows Vista cu Service Pack 1, Windows 7. DirectX 9.0c sau mai nou. Conexiune la internet

Exemple de alte programe: 1. Adobe Flash CS5 (943 MB) o Programul complet Adobe Flash CS5 Professional, cu inregistrare.
10

2. Adobe Flash Professional CS5 (31 MB) o Carte n format PDF, n limba engleza, pentru invatat Adobe flash. Lectii au toate exemplele i explicatiile insotite de imagini. 3. Flash CS5 The Missing Manual (20 MB) o Manual n format PDF pentru invatat Flash. Acesta conine i fisiere FLA ale exemplelor din lectiile prezentate n manul. 4. Total Training Adobe Flash CS5 Professional Essentials (536 MB) o Curs audio-video cu fisiere WMA grupate n 8 capitole cu lectii despre: setarea Scenei de lucru, butoane, animaie, 3D, ActionScript i interactivitate. 5. Flash Professional CS5 New Features (92 MB) o Tutoriale video (format MOV), grupate n 7 lectii n care sunt prezentate cateva din lucrurile noi care au fost adugate i se pot face n Adobe Flash CS5 fata de versiunile anterioare. 6. Flash Professional CS5 Essential Training (170 MB) o Cateva zeci de tutoriale audio-video (format MOV), grupate n 7 capitole despre: desenare, lucrul cu Timeline i Cadre, lucrul cu imagini text, simboluri i panoul Library. 7. Fisiere FLA (600 KB) Etape de lucru n Adobe Flash CS5: Create New > ActionScript 3.0, sau File > New > ActionScript 3.0). Workspace-ul este interfaa Flash-ului cu utilizatorul, selecia i aranjamentul de butoane i meniuri pe care acesta le are la dispoziie. Toate opiunile aplicaiei sunt selectabile accesnd meniurile, dar cele din workspace sunt accesibile direct.

11

Pentru a modifica workspace-ul existent, click pe butonul de workspace aflat n bara de sus a aplicaiei,

se selecteaz un workspace, sau se salveaz cel actual dac a fost modificat (panourile cu butoane se modific cu drag&drop, iar butoanele se adaug selectndu-le din meniul Window). Proprietile obiectelor selectate pot fi vizualizate i editate n panoul Properties. Cnd nu este selectat nici un obiect din Scena (partea vizual din flash, de obicei alb pe background gri, central, unde vor fi amplasate obiectele), sunt afiate proprietile documentului Flash deschis ca n figura alaturat.

12

Se pot fi modificata setrile Stage-ului, cum ar fi dimensiunea acestuia, culoarea de background i altele. Timeline-ul este esenial lucrului pe layer-e i animrii. Fiecare cadru numerotat reprezint o stare a Stage-ului n momentul respectiv. Numrul de cadre pe secund (fps) poate fi modificat n funcie de necesiti, momentan este o valoare bun 24.0 fps (default).

Cadrele-cheie (Keyframe) sunt reprezentate cu un cerc n partea inferioar, i se pot insera cu F6 dup selectarea cadrului dorit, celelalte cadre fiind normale (Frame), prelund informaia de la ultimul cadru-cheie n ordine cronologic, inserndu-se cu F5. Acestea vor folosi n mod special la animaii.

13

Curs 2 Prezentare generala Flash CS5 Formatul iniial de salvare (Flash CS5 Document (*.fla)), documentul Flash poate fi salvat (de la File -> Save sau File -> Save As) ca: - Flash CS4 Document (*.fla) - Util dac acel document trebuie ulterior deschis i prelucrat cu versiunea Adobe Flash CS4 - Flash CS5 Uncompressed Document (*.xfl) - Acest format va crea un director cu un fisier ".xfl" i alte tipuri de fisiere (JPG, XML, DAT) ce vor conine informatii despre acel document Flash, care pot fi folosite i n alte programe, precum Adobe InDesign i Adobe After Effects. Desenul n Flash se face exclusiv vectorial. Imaginile raster pot fi importate, posibilitile de modificare ale acestora fiind reduse. Pentru a desena, avem la dispoziie o gam de unelte, fiecare cu setrile sale (care se vor studia la seminar):

innd mouse-ul deasupra unei unelte (Hovering), este afiat un tooltip cu descrierea uneltei i shortcut-ul de pe tastatur. Pencil Tool pur i simplu deseneaz o linie

14

Pentru a anima un obiect, acesta trebuie s fie prezent, de regul, n Library . Shape-urile i vectorii apar n library dup ce sunt convertii (cu F8) n obiecte de tip MovieClip, Button sau Graphic. Animaiile n Flash sunt de trei tipuri: Classic Tween, Shape Tween Motion Tween - se pune foarte mult accent pe starile intermediare. i ActionScript. Classic Tween este tipul de animaie cadru-cu-cadru, n care utilizatorul seteaz strile iniiale i finale ale obiectului, iar apoi se aplic transformri n cadrele dintre cele dou stri. Motion Tween este un tip de animaie nou, disponibil de la versiunile CS4 n sus. Dac la Classic Tween setam strile iniiale i finale ale obiectelor, la Motion Tween se pune foarte mult accent pe starile intermediare. Pentru a lucra se selecteaz un cadru ndeprtat (cadrul 24 este la o secund de nceput), se apas F5 pentru a insera Frames, apoi click-dreapta pe unul din noile cadre inserate i click pe Create Motion Tween. Se selecteaz ultimul cadru i apas F6 pentru a insera un cadru-cheie, necesar definirii ultimei poziii a obiectului, se modific starea obiectului ntr-unul din cadrele cheie (poziia, culoarea, dimensiunea, etc), rezult un vector care arat traiectoria obiectului. Folosind tehnica drag&drop se modific traiectoria. Selectnd vectorul-traiectorie, n panoul Properties apar proprietile Motion Tween-ului (vezi figura urmtoare).

15

ActionScript 3.0 Limbajul folosit de Adobe n Flash este ActionScript. Varianta 3.0 este un limbaj orientat pe obiecte, cu sintax i semantic asemntoare JavaScript. Tasta F9 deschide fereastra de cod. n orice cadru-cheie, fr nici un obiect selectat, se poate introduce codul. Symbols (Simboluri) sunt elemente, care pot fi reutilizate i atunci cnd sunt create automat adugate n panoul Library. Fiecare element creat n Flash i plasat n scena precum: forme, obiecte, text, imagini, grupuri, animaii sau alte symbols poate fi convertit n Symbol i stocat n Library. Elementele Symbols sunt strns legate de acest panou, din Library ele pot fi reeditate i adugate n scena. Pot fi create trei tipuri de Symbols: Movie Clip, Button i Graphic; fiecare avnd proprietati specifice i "Timeline" propriu.

16

Graphic - De obicei folosit pentru desene, imagini i grafica statica; dar poate fi folosit i pentru efecte animate. Button - Se folosete pentru butoane, avnd proprietati specifice . Movie Clip - este n general indicat pentru animaii .

Pentru a crea un Symbol, se selecteaza obiectul sau elementele ce trebuies convertite, se apas click pe meniul Modify -> Convert to Symbol (sau tasta F8), iar n fereastra care apare se poate da un nume i se alege unul din tipurile de Symbol, apoi se apas OK. Un element Symbol preluat din Library i adugat n scena se numeste Instanta (Instance) a acelui Symbol. Fiecare instanta este ca o copie sau reflexie a originalului, astfel dac se modifica originalul sau una din Instane, modificrile fcute vor fi transmise i originalului ct la toate Instanele lui, deoarece. Un avantaj pe care-l ofera simbolurile este faptul c lor pot fi aplicate unele opiuni i efecte ce nu pot fi aplicate obiectelor simple. Observatie: unei imagini importate nu i-se poate aplica direct efecte de contrast, transparena sau alte filtre, doar dar dac este transformata n Symbol (Movie Clip). Fereastra pentru crearea unui simbol

17

Meniul scurtaturilor pentru o instanta (un simbol)

Modificrile fcute simbolului printe (din Library) sau unei Instane, sunt transferate i la celelalte Instane, dar modificrile ce se pot face unei Instane direct n Scena principal raman doar n aceasta. O alta modalitate de a realiza Symbols este folosind opiunea New Symbol (sau Ctrl+F8). Cu aceasta metoda, dupa ce se defineste numele i tipul simbolului, se va intra direct n pagina de editare pentru Symbol, o zona de lucru alba cu un semn "+" n centru. Orice se creeaza n aceast pagina va vedea Simbolul creat.

18

Dac n panoul Library, cnd apas click dreapta pe un Symbol (sau alte elemente stocate n el) apar o serie de opiuni ce pot fi aplicate, ca de exemplu: Rename pentru schimbarea numelui i Duplicate pentru a crea o dublur. Pentru editarea unei Instane sunt 3 se pot utiliza opiunile (vezi figura alturat):

Edit - Deschide o pagina de editare complet alba, n care se vede doar Simbolul / Instanta. Edit n Place - Deschide o pagina n care, n afara de Instanta, se vad mai sterse (ca prin ceata) i celelalte obiecte din Scena. Nu pot fi editate, dar pot fi folosite ca referinte n timpul editarii. Edit n New Window - Va deschide pagina pt. editare intr-o noua fereastra. Astfel, se poate lucra alternativ i n Scena principala i n pagina de editare, vazand cum arata n context modificrile fcute simbolului.

19

Elementele Symbols de tip Movie Clip sunt recomandate a fi folosite pentru Symbols care vor conine animaii sau pentru imagini importate la care se dorete aplicarea unui filtru, efect de culoare n Flash sau rotire 3D. Timeline-ul din "Movie Clip" este independent de cel principal, astfel, avnd o animaie n Simbolul Movie Clip, aceasta este stocat i repetat ntr-un singur Frame (cadru) din Timeline-ul principal, indiferent de cte cadre are animaia din simbolul "Movie Clip". Instanele Movie Clip pot conine animaii /filme cu sunete i control prin ActionScript, precum i alte "Movie Clip-uri". Spre
20

deosebire de "Graphic Symbol", la Movie Clip se poate vedea doar primul Frame n Timeline-ul principal. Crearea unui Symbol "Movie Clip: 1. Se selecteaza obiectul sau elementele ce trebuie convertite (de obicei imagini sau obiecte /desene care trebuie animate) 2. Se da click pe meniul Modify -> Convert to Symbol (sau tasta F8) 3. In fereastra care apare se poate da un nume (la Name) i la Type se alege opiunea Movie Clip, apoi se apas OK. Simbolul creat va fi adugat automat i n panoul Library. O alta modalitate de a crea Symbols este cu opiunea New Symbol, ce se gsete n meniul Insert i n opiunile panoului Library (sau Ctrl+F8). Acestea deschid fereastra (afisata n imaginea urmatoare) pentru setarea numelui i tipul simbolului.

Editarea unui element Movie Clip se face la fel ca la celelalte tipuri de Symbol. Se alege Simbolul din panoul Library i se apas "Ctrl+E" (sau dublu-click pe acel Symbol) i se va deschide pagina alba pentru editarea lui. Instanele simbolului Movie Clip se creaza la fel ca la toate elementele Symbol, se trag cu mouse-ul din Library n Scena de lucru.

21

Editarea unei Instane Movie Clip se face n acelasi mod ca la celelalte tipuri, prin dublu-clik pe Instanta, sau click-dreapta pe ea i se alege una din opiunile: Edit, Edit n Place sau Edit n New Window. Modificrile ce se pot face unei Instane direct n Scena unde a fost trasa (cu "Free Transform Tool", sau filtre i efecte de culoare) nu vor afecta celelalte copii sau originalul; dar cnd Instanta conine animaie /film, Flash va aplica schimbarile fcute tuturor cadrelor din animaia continuta n Instanta Movie Clip.

Dac pentru un Movie Clip se sterge Simbolul parinte (din Library), vor fi sterse toate Instanele lui. Crearea de Butoane Symbols Elementele Button Symbols (Simboluri buton) se folosesc pentru a aduga interactivitate n coninutul /animaia Flash. Cu aceste Butoane utilizatorul poate efectua diferite actiuni, cum ar fi: oprirea sau pornirea unei animaii /film, saltul la anumite scene, ncrcarea unei pagini web, i altele. Crearea unui Buton n Flash se face simplu, ca i la celelalte tipuri de Symbols, prin una din cele 2 metode: convertirea unui obiect din scena n Buton sau prin utilizarea opiunii New Symbol. Pentru prima metoda se executa urmatorii pasi: 1. Se selecteaza obiectul ce trebuie transformat n Buton. 2. Se da click pe meniul Modify -> Convert to Symbol (sau tasta F8). 3. In fereastra care apare (cea afisata mai jos) se poate da un nume (la Name) i la Type se alege opiunea Button, apoi se apas OK.

22

Simbolul creat va fi adugat automat i n panoul Library, de aici poate fi n continuare editat. Pentru a doua varianta, se apeleaza opiunea New Symbol, din meniul Insert sau din opiunile panoului Library (sau Ctrl+F8). Se va deschide o fereastra ca cea din imaginea de sus, pentru setarea numelui i tipul simbolului. Simbolurile Buton au un Timeline specific, format din 4 cadre (Frames) denumite: Up, Over, Down i Hit; dupa cum se vede n imaginea urmatoare.

Fiecare Frame are o functie specifica care ajuta la definirea i controlarea butonului n 4 stari /conditii diferite:

Up - n acest cadru se defineste cum sa apara iniial butonul n continutul Flash. Over - aceast stare e declanat cnd utilizatorul pozitioneaza mouse-ul deasupra butonului. Aici se creaza butonul cum sa apara n aceasta conditie. Down - apare n momentul cnd este apast butonul cu mouse-ul.

23

Hit - n aceast Frame se defineste zona activa din buton, zona n care trebuie plasat mouse-ul pentru a actiona butonul. El este invizibil n afara paginii de editare.

Cadrul "Hit" poate fi folosit i pentru a crea butoane invizibile.

In Scena apare Butonul cu starea iniiala (din cadru "Up"), celelalte stari (Over i Down) fiind ascunse.

Editarea unui element Buton se face la fel ca la celelalte tipuri de Symbol. Se alege Simbolul din panoul Library i se apas "Ctrl+E" (sau dublu-click pe acel Symbol). Se va deschide pagina alba pentru editarea lui. Alegeti meniul Window -> Common Libraries -> Buttons. Se va deschide un panou cu mai multe directoare pentru diferite tipuri de butoane. Directoarele pot fi deschise prin dublu-cklick, apoi butoanele pot fi trase n Scena (vor fi adugate n Library). In fereastra alturat mai apr i opiunile: Classes i Sounds. Classes se folosesc pentru partea de programare pe obiecte, numit i OOP (Programarea Orientata pe Obiecte), utilizeaz noiunile:

Classes (clase) conin reprezentarea unui obiect, unde sunt definuite proprietaile i metodele lui. Instances (Instane) reprezint instana unui obiect, la care se pot aplica proprietati i metode. Properties (proprietati) - caracteristici care definesc un obiect. Methods (metode) - functii care se aplica obiectelor. Events (evenimente) aciuni care realizeaz execuia unei funcii sau a unei comenzi.

24

Curs 3 Creare animaie cadru cu cadru Snap to Objects and Snap Align Culori n Flash. Salvare culori n paleta de culori Gruparea elementelor . Suprapunere-Rotire Import Imagini

Optimizare imagini importate Moduri de testare a animaiei Importul imaginilor i Paleta de Culori Creare animaie Shape Tween. Shape Hints

25

Cadre n Timeline Instrumentul principal i de baza utilizat n Flash pentru animaie este Panoul Timeline. Cadrele sunt numerotate de la 1 (cu numerotarea afisata din 5 n 5) i pot fi de mai multe tipuri, vedeti n imaginea urmatoare, n care este reprezentat panoul Timeline i ale lui "Frames". Keyframe - cu un mic cerc negru n celula, sunt cadrele cele mai importante. n ele se creaza (mai exact, n Scena, dar la acel frame) continutul direct sau de la care sa inceapa animaia. De asemenea, acestea marcheaza schimbari n animaie.

Blank Keyframe - celula cu un mic cerc alb, e de fapt un keyframe gol la care Scena e goala, dar se afla ca un cadru gol n Timeline. Cadru simplu (Frame) - celula cu un dreptunghi alb n ea indica un cadru simplu, care apare la sfarsitul unui sir de cadre statice. Cadrul curent - acesta este indicat prntr-un dreptunghi rosu (denumit i Playhead) deasupra celulei acelui cadru (in bara de numerotare a lor) i reprezinta cadrul curent de lucru, al carui continut este afisat n Scena. Cadre Statice (Static Frames) - sunt cadre ce aduga unitati de timp animaiei. Acestea nu au continut n scena, dar cu ele se mareste timpul animaiei, durata dupa care apar schimbarile fcute intre doua cadre (Keyframe) sau timpul de afisare al ultimului Keyframe. Cadre ce nu sunt n animaie - sunt celule care nu au definit un anume tip de Frame. O animaie dureaza pn la prima astfel de celula ce nu e n animaie.

Crearea unui Frame, indiferent de tip (Frame simplu, Keyframe sau Blank Frame) se face prin una din urmatoarele metode:

26

click dreapta pe celula din Timeline i se alege din opiunile: "Insert Frame", "Insert Keyframe" sau "Insert Blank Keyframe". click pe o celula n Timeline, apoi click pe meniul Insert -> Timeline i se alege una din opiunile: "Frame", "Keyframe" sau "Blank Keyframe". click pe celula n Timeline i se apas: "F5" (Frame simplu), "F6" (Keyframe) ori "F7" (Blank Keyframe).

Creare animaie cadru cu cadru Crearea unei animaii cadru cu cadru (frame by frame) nseamn crearea manual a fiecarui cadru din animaie. Se folosete adesea n cazul animaiilor scurte. Cnd se creaza o animaie Flash (indiferent de tip), trebuie avut n vedere numarul de cadre pe secunda care e setat n documentul Flash. Acest numar este iniial definit n Adobe Flash la 24 FPS (Frames Per Second), se poate vedea i seta n partea de jos a panoului Timeline sau n panoul Properties al Scenei, la opiunea FPS i reprezint numarul de cadre care sunt derulate ntr-o secund din animaie.

Snap to Objects and Snap Align sunt 2 proprietati ajuttoare


n trasarea, lipirea i alinierea desenelor i obiectelor n scena de lucru Flash. Opiunea Snap to Objects poate fi activata din meniul View -> Snapping -> Snap to Objects, sau din Zona cu Opiuni a barei cu instrumente desen, de la butonul ce are desenat un magnet.

27

"Snap to Objects" activat, ajuta la indicarea momentului cnd o linie trasata cu "Line Tool" este perfect orizontala sau verticala, sau cnd se deseneaza un patrat ori cerc perfect rotund, precum i momentul cnd n timpul desenarii unei linii sau forme geometrice, aceasta ajunge la punctul de unire (lipire) cu alta linie sau forma. Indicarea se face prin aparitia n acel moment a unui cerculet negru langa cursorul mouse- ului. Utilitate Snap to Objects --- optiune activata chiar forteaza putin lipirea liniei sau figurii care e desenata, cnd trasarea acesteia ajunge n apropierea altei linii sau forme; astfel, ajuta la conectarea acestora (nu doar se ating, ci devin unite).

28

Observatie: dac se dorete desenarea a doua linii sau obiecte apropiate, este indicat sa se dezactiveze "Snap to Objects". Toleranta "Snap" de unire poate fi modificat din meniul Edit -> Preferences, n fereastra care apare se alege categooria Drawing, apoi, la Connect lines se poate seta una din opiunile: "Must be close", "Normal" sau "Can be distant".

Atenie: Snap to Objects nu functioneaza cu instrumentele: Creion, Pensula i Radiera. Snap Align Opiunea Snap Align ajuta la alinierea desenelor, formelor i obiectelor n scena, unele fata de altele i se activeaza View -> Snapping -> Snap Align. Cnd "Snap Align" e activat iar marginea un obiect din scena, n timp ce e mutat cu mouse-ul, ajunge aliniata vertical sau orizontal
29

cu marginea altui obiect, linie sau forma, apare o linie punctata ce indica i arata alinierea acelor elemente. Indicare Snap Align Sensibilitatea de aliniere a proprietatii "Snap Align" poate fi setata /modificata din meniul View -> Snapping -> Edit Snapping. Se poate setata distanta dintre obiecte de la care va fi aratata linia punctata ce indica alinierea.

Setari Snap Align Dac sunt bifate opiunile "Horizontal center alignment" i "Vertical center alignment", va fi indicat cu linia punctata i momentul cnd centrul obiectului mutat ajunge aliniat cu centrul altui desen din scena.

30

Culori n Flash Fiecare document Flash are o paleta cu 216 culori standard, ce acopera aproximativ intreg spectrul de culori mai des folosite, cat i opiuni pentru transparentizarea culorii i cateva combinatii predefinite. Paleta de culori din Flash se folosete pentru doua grupe principale de elemente, una reprezinta liniile i marginile formelor i folosete paleta de culori de la butonul Stroke Color; cealalta reprezinta interiorul formelor (umplerea), pensula i culoarea textului, acestea folosesc paleta de culori deschisa de la butonul Fill Color. Panou cu paleta de Culori

31

Flash permite definirea i folosirea de alte culori noi, create n documentul curent, prin scrierea directa a codului culorii, n format Hexadecimal i adugare transparenta (la Alpha) sau editarea valorii RGB (Red -rosu, Green -verde, Blue -albastru). Definire alte culori. Pentru transparenta se apas click pe numarul de la Alpha i se aduga o valoare intre 0 i 100 (cu cat mai mica cu atat mai transparenta). Pentru folosirea unei culori care e cunoscuta dupa codul ei Hexadecimal, se apas click pe codul care incepe cu "#" i se scrie valoarea Hexadecimala. Pentru folosirea de culori obinute prin editarea valorilor RGB i HSL (HSL (Hue -nuanta, Saturation -saturatie, Luminosity -luminozitate) n alta paleta pentru editare culori (vedeti indicatii n imaginea urmatoare) i se executa urmatorii pasi: Se deschide Paleta de culori de la "Fill Color" sau "Stroke Color". Se da click pe Cercul de culori (butonul ca un cerc colorat, din coltul dreapta-sus) i se deschide o fereastra Color, pt. editare culori (dupa cum se vede n imaginea de sus).
32

In fereastra "Color" se apas iniial click pe un patratel de la "Custom Colors" (unde va fi retinuta culoarea) apoi se alege o culoare de baza, de la "Basic Colors" sau prin click cu mouseul pe spectrul de culori din dreapta. In casutele "Red", "Green", "Blue", "Hue", "Sat" i "Lum" se editeaza culoarea aleasa, modifiCnd valorile casutelor RGB cu numere intre 0 i 255 iar pt. HSL intre 0-240, pn se obine culoarea dorita. Dupa ce s-a creat culoarea, aratata la "ColorSolid", se apas butonul Add to Custom Colors, culoare va fi adugata n seciunea aleas de la "Custom Colors" i pot fi adugate pn la 16 culori. Se alege o culoare adugata la "Custom Colors" i se apas OK, n imaginea butonului "Fill Color" sau "Stroke Color", care a deschis iniial Paleta de Culori, va apare i va fi folosita acea culoare. Atentie: Culorile adugate la "Custom Colors" pot fi redefinite i folosite atata timp cat aplicatia Adobe Flash ramane deschisa. La inchiderea ei vor fi sterse acele culori. Salvare culori n paleta de culori De asemene, pot fi create culori noi care sa fie salvate i adugate alaturi de cele 216 astfel: Window -> Color, se va deschide un panou Color cu opiuni pentru crearea culorilor, utilizand: HSL, RGB, Alpha i cod Hexadecimal .

33

Panou Color adugare culori n palet

Din spectrul de culori sau de la unul din butoanele "Stroke Color" i "Fill Color" ale panoului Color se alege o culoare apropiata de cea care se dorete. De la valorile opiunilor H, S, B (Hue, Saturation, Brightness) respectiv R, G, B (Red, Green, Blue) i A ((Alpha)) se ajusteaza culoarea pn se obine nuanta dorita, sau se poate specifica /ajusta culoarea i cu forma Hexadecimala (in casuta cu diez '#' langa ea). Se da click pe meniul Options al panoului (situat n coltul dreapta-sus) i de acolo pe Add Swatch. Culoarea setata e adugata direct n Paleta de Culori, sub cele 216, langa opiunile pentru Gradient i poate fi folosita n document. Atentie: dac se inchide aplicatia Adobe Flash, culoarea nu ramane salvata n paleta, pentru aceasta mai trebuie facuti urmatorii doi pasi.

34

Dac e aleasa opiunea Bitmap fill din lista de opiuni (unde e "Solid color") se poate aduga /importa o poza /imagine care sa fie folosita ca i culoare. Pentru ca noua culoare sa ramana salvata n Paleta de Culori i dupa inchiderea programului Adobe Flash, se apas click pe meniul Window -> Swatches, apare un panou Swatches cu paleta de culori (vedeti imaginea urmatoare). Panou Swatches - salveaza, sterge culori

35

Se da click pe meniul Options al panoului "Swatches i de acolo pe Save as Default. Acum paleta de culori curenta (asa cum arata n panoul Swatches) este salvata i culoarea /culorile noi adugate vor fi n paleta i la urmatoarea deschidere a programului Adobe Flash. Dupa cum se vede n imaginea de mai sus, "Swatches" mai are i alte opiuni n meniu. Iata ce fac cateva din ele:

Delete Swatch - Sterge culoarea aleasa din panou. Add Colors - Aduga o gama de culori recunoscuta n alt fisier, n general de tip imagine sau ".clr". Replace Colors - Inlocuieste culorile din panou cu altele, preluate dintr-o gama de culori recunoscuta n alt fisier, n general de tip imagine sau ".clr". difolt Load Default Colors - Dac au fost fcute modificari n paleta, i nu au fost salvate, reface culorile asa cum erau la ultima salvare (Default). Save Colors - Salveaza paleta de culori curenta ntr-un fisier special (cu extensia ".clr"), care apoi poate fi oriCnd incarcat cu "Add Colors" sau "Replace Colors". Save as Default - Salveaza paleta de culori curenta ca Default, astfel ramane i dupa inchiderea aplicatiei Adobe Flash. Clear Colors - Sterge toate culorile, ramane doar alb i negru. Web 216 - Reface paleta cu cele 216 culori iniiale.

Gruparea elementelor Un element reprezinta orice tip de desen, forme, linie, obiect, text i imagine din scena. Acestea pot fi grupate devenind ca un singur obiect. Creare grupuri

36

Cu cat complexitatea i multitudinea desenelor n scena creste cu atat acestea pot interactiona mai mult intre ele, prin pozitionarea apropiata, lipire sau suprapuneri ori alte modificari ce pot afecta i alte desene. Pentru a reduce interactiunea elementelor din scena, acestea se pot grupa, formand mai multe un singur obiect, un Grup de elemente ca intr-o "cutie" n care sunt protejate de interactiunea altor desene, pot fi mutate, modificate ntr-un cadru separat /"deasupra" celorlalte elemente din scena. Etape: Se selecteaza (cu Selection Tool sau oricare instrument de selectare) obiectele, liniile, formele, textele, etc. care se doresc sa fie grupate. Se da click pe meniul Modify -> Group (mai rapid, Ctrl+G). Dac se dorete totusi efectuarea anumitor modificari unuia sau mai multor elemente din Grup, se apas dublu-click pe el (sau click dreapta i se alege "Edit Selected"). Astfel, se intra n acel Grup i elementele pot fi sterse, mutate i editate separat. Un alt avantaj al gruparii e faptul ca obiectul format prin gruparea mai multor elemente poate fi copiat n alta Scena, Layer, cu totul, asa cum e grupul creat. O modificare ce se poate efectua intregului grup n Scena, adesea folosita n cazul unei copii, este rotirea i modificarea dimensiunilor, n general ceea ce se poate face cu "Free Transform Tool", cnd Grupul e selectat cu acel instrument. Pentru a anula o grupare (degrupa), e la fel de simplu:

37

Se selecteaza grupul respectiv (click cu Selection Tool pe un element din el). Se da click pe meniul Modify -> Ungroup (mai rapid, Ctrl+Shift+G, ori Ctrl+B [. Break Apart]). Suprapunere-Rotire Suprapunere Flash permite schimbarea acestor ordini de aranjare prin opiunea Arrange, ce se afla n meniul Modify, aceasta apare i n meniul ce se deschide cnd se apas click-dreapta peste un element din Scena. Cu aceasta functie, obiectele pot fi plasate n fata sau n spatele altora.

Arrange are 4 comenzi:

Bring to Front - Aduce obiectul selectat n fata tuturor celorlalte. Bring Forward - Plaseaza obiectul selectat un nivel n fata. Send Backward - Muta obiectul selectat un nivel n spate. Send to Back - Duce obiectul selectat n spatele tuturor celorlalte.

38

Rotire - Rotirea obiectelor, liniilor i formelor n sensul direct sau invers orelor de ceas se face rapid cu instrumentul Free Transform Tool , se selecteaza cu "Free Transform" obiectul ce trebuie rotit, apoi cu mouse-ul n unul din colturile cadrului de selectare se tine apast i se roteste obiectul . Rotire cu Free Transform este mai putin precisa. Dac se dorete o rotire exacta de 90 de grade, se poate face din meniul Modify -> Transform -> Rotate 90o CW (sau Rotate 90o CCW, invers orelor de ceas). O rotire exacta cu un anumit numar de grade se poate face din Panoul Transform, care se deschide din meniul Window -> Transform (sau "Ctrl+T"). - Se selecteaza obiectul (obiectele) ce trebuie rotit, se deschide "Panoul Transform" i se aduga numarul de grade pt. rotatie imediat sub Rotation (buton ce trebuie sa fie bifat, vedeti n imaginea urmatare). Un alt tip de rotatie este cel n oglinda. Aceasta se face din meniul Modify -> Transform -> Flip Vertical (sau Flip Horizontal). Cu aceste doua opiuni, obiectul, Grupul, pot fi rotite vertical sau orizontal obtinandu-se imaginea acestora n oglinda. Import Imagini pentru a aduga imagini (din fisiere de tip: ai, bmp, gif, jpg, png, psd) n documentul Flash este utilizarea opiunii Import, din meniul File -> Import se alege Import to Stage (rapid, Ctrl+R) sau Import to Library ---solutie optima. "Import to Stage" va aduga imaginea aleasa i n scena i n Panoul Library, iar "Import to Library" va aduga imaginea doar n Panoul Library.

39

Import imagini Dac numele fiierului cu imaginea (poza) importata face parte dintr-o serie de fisiere cu nume secventiale (ex." img_02.jpg, img_03.jpg, img_04.jpg), Flash le poate importa pe toate odata (fiecare n cte un Frame n Scena). RecunosCnd numele secventiale, Flash va afisa o fereastra cu opiunile de a alege importarea tuturor acelor fisiere sau doar a celui ales.

Observatie: Importul de imagini cu extensia ".ai" (fcute cu Adobe Illustrator") i ".psd" (fcute n Photoshop) se potriveste bine cu Adobe Flash CS5 deoarece aceste programe folosesc Layers (Straturi) similare cu cele din Flash, i astfel se poate alege care Layer sa fie importat, iar programul le converteste n Straturi Flash. In fereastra Preferences (Edit -> Preferences, sau Ctrl+U) pot fi setate diferite moduri n care sa fie importate fisierele ".ai" (la opiunile din AI File Importer) sau ".psd" (la opiunile din PSD File Importer).

40

Fie prin copiere direct din alt program, fie prin "Import", imaginea adugata n documentul Flash este adugata i n Panoul Library. Modificarea imaginilor importate Cea mai simpla modificare ce se poate aplica imaginilor copiate /importate este dimensionarea i rotirea lor, cu "Free Transform". Desenele fcute direct n Flash, n modul "Object Drawing" folosesc grafica de tip Vector. Dac Adobe Flash recunoaste imaginea importata ca fiind o "imagine vector" (precum cele fcute cu Adobe Illustrator) cu linii i forme distincte, aceasta poate fi editata n continuare n Flash cu instrumentele lui. Dac imaginea e de tip "Bitmap", trebuiesc fcute anumite ajustari, deoarece Flash recunoaste imaginile Bitmap ca o "forma" de pixeli nedefiniti. Adobe Flash are cateva opiuni pentru a lucra cu "bitmaps": le poate transforma intr-o "Forma" (cu o umplere facuta cu "Merge Drawing"), imparti n grafica vectoriala sau transforma n "Symbols".

41

Transformare Bitmap n Forma /Umplere Aceasta transformare se face cu opiunea Break Apart. se apas click pe imaginea din scena i se alege meniul Modify -> Break Apart (sau Ctrl_B). Va transforma imaginea intr-o umplere editabila, la care se pot aplica instrumentele de selectie i desenare din bara cu unelte pt. desen. Transformare Bitmap n Vectori Se selecteaza imaginea i apoi se apas click pe meniul Modify -> Bitmap -> Trace Bitmap. Aceasta transformare depinde de complexitatea imaginii, a formelor i liniilor, precum i de numarul de culori din ea. n functie de acestea, Flash recunoaste formele i le transforma n grafica vectoriala sau poate transforma imaginea n mai multe parti de Forme (Shape). Observatie: elementele Shape (Forma) pot fi transformate n desene vectoriale din meniul Modify -> Combine Objects -> Union.
Optimizarea imaginilor importate

O metoda indicata pentru obinerea unor fisiere Flash cat se poate de mici cnd n ele au fost importate imagini, care cresc considerabil marimea fiierului, este optimizarea imaginilor importate, prin compresie. Pentru aceasta trebuie ca imaginea sa fie importata doar n panoul Library (de la File -> Import -> Import to Library), sau dac e adugata i n Scena, sa fie stearsa din Scena fiindca imaginea ramane adugata n Library.

42

In panoul Library se apas click dreapta pe imaginea importata i se alege Properties, se va deschide o fereastra cu diferite opiuni pt. compresie /optimizare (vedeti n imaginea urmatoare).

Optimizare imagine importata

Allow Smoothing - Dac aceasta optiune e bifata, netezeste i uniformizeaza marginile imaginii. Compression - pot fi alese opiunile Photo (JPEG) i Lossless (PNG/GIF).

- "Photo (JPEG)" - este eficienta cnd se dorete reducerea cat mai mult a marimii fiierului, pentru imagini fara transparenta i mai putin complexe artistic. - "Lossless (PNG/GIF)" - este utila pentru imagini GIF i PNG realizand o compresie fara a pierde din calitatea imaginii, iar n

43

cazul PNG pastreaza i transparenta; dar marimea va fi mai mare decat la compresia JPEG.

Quality - se folosete n cazul "Photo (JPEG)" . Enable deblocking - reduce din imagine structurile care au o calitate mai slab i apar sterse.

Pentru a vedea efectul i rata de compresie obinute dupa fiecare modificare a uneia din aceste opiuni, se apas butonul Test. Butonul Update reincarca imaginea din locatia ei originala. Dupa ce s-a obinut compresia dorita, se apas OK, astfel, n panoul Library imaginea ramane cu optimizarea facuta i poate fi folosita n Scena prin tragerea ei din Library. Moduri de testare a animaiei Direct n Scena:

Cea mai simpla metoda este prin apasrea tastei Enter (sau meniul Control -> Play), Flash va incepe derularea cadrelor n Timeline, incepand cu cel curent. Dac opiunea Control > Loop Playback este bifata, derularea se repeta continuu, pentru a opri se apas iar tasta Enter. Dac acea optiune nu e bifata, va derula cadrele o singura data, de la cel curent pn la ultimul.

ntr-o fereastra separat:

cu tastele Ctrl+Enter (sau meniul Control -> Test Movie n Flash Professional, ori Control -> Test Movie - Test). Se deschide o fereastra ce folosete Flash Player, aratand animaia asa cum va putea fi vazuta de utilizator. din meniul Control -> Test Scene, prin asta se testeaza animaia creata n scena curenta (un document Flsh poate avea mai multe Scene).

44

Animaie Shape Tween Scopul animaiei Shape Tween este sa transforme prin miscari treptate forma geometrica a unui obiect n alta forma. Pe langa schimbarea formei se pot anima i alte modificri ca: pozitia, dimensiunea i efectele de culoare. Spre deosebire de "Motion Tween", Shape Tween se aplica elementelor a caror forma poate fi editata n Scena: obiecte i forme. Pentru a aplica Shape tweening unui Symbol, trebuie intai sa se intre n pagina de editare a lui i acolo sa fie adugat Shape Tween. Shape Tween permite crearea de noi elemente n Keyframe-uri din sectorul animaiei. Pentru a aduga Shape Tween la un text, trebuie intai "rupt" textul cu "Break Apart" (din Modify -> Break Apart). Creare animaie Shape Tween Deoarece "Shape tweening" se aplica formelor editabile, nu pot fi adugate efecte de culoare "Filters" (care pot fi adugate Instanelor Symbol), doar cele de la "Color Effects".

Ease - ncetineste sau accelereaza animaia pe parcursul derularii ei, de la primul la ultimul Keyframe. Blend - Are 2 opiuni: o Distributive - creaza o transformare lina a formei i colturilor n timpul animaiei. o Angular - face transformarea colturilor de la forma iniiala pn la ultima selectata mai unghilare n procesul animaiei.

Shape Hints
45

Cu cat formele animate sunt mai simple cu atat efectul de transformare este mai clar i frumos. Cnd formele sunt complexe (cum ar fi text sau desen cu multe elemente i colturi), animaia dintre primul i ultimul Keyframe devine mai putin coerenta, ceva amestecat, Flash neputand crea o schimbare animata clara. Pentru aceasta se folosete "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 s deseneze cadrele interne, aplicnd indicaii care zone din forma primar s fie transformate n alte zone precizate n forma finala. Ideea de baza este sa se indice un loc din forma iniiala a obiectului i n 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 adugare Shape Hints sunt urmatorii: 1. Se da click pe Keyframe-ul iniial, unde trebuie create Shape Hints ("Playhead", adica dreptunghiul rosu sa apara deasupra lui). 2. Click pe meniul Modify -> Shape -> Add Shape Hint. - Va apare n centrul desenului un mic cerc rosu cu litera "a" n el ("Shape Hints" apar n ordine alfabetica, "a", "b", "c" ...). 3. Se tine apast click pe cerculet i se muta n 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 n centrul desenului aflat n Scena de la acest cadru va apare un mic cerc rosu cu litera "a". Acesta este corespondentul celui creat la forma iniiala.

46

5. Se muta cu mouse-ul acest cerculet n locatia din obiectul final, unde se dorete sa corespunda la transformare cu cea controlata de primul cerculet. Pentru a sterge un cercule Shape Hint, se apas click-dreapta pe el, apoi Remove Hint, iar pentru a sterge toate Shape Hints, se aps click dreapta pe unul din ele i se alege Remove All Hints (sau din meniul Modify -> Shape -> Remove All Hints). Se recomanda plasarea cerculetelor Shape Hints consecutive, n 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 adugate, se apas click pe meniul View -> Show Shape Hints.

47

Curs 4
Sunete i efecte audio n Flash Adugare sunet la animaia Motion Tween Utilizare Masks

48

Sunete i efecte audio n Flash n Flash, sunetele se aduga n cadrele de tip Timeline, dupa ce fisierul audio a fost adugat /importat n libraria fisieului current (CTRL+L). Sunetele se pot folosi din Libraria de Sunete integrata n Adobe Flash sau pot fi importate din sistem (File -> Import -> Import to Library). Sunt recunoscute tipurile de fisiere audio: MP3, WAV, AU, ASND realizat cu Adobe's Soundbooth. Sunetele pot fi utilizate n doua moduri care sunt: event stream. Cu Event, sunetele trebuie incarcate complet inainte de a incepe transmiterea lor. Un sunet cu Stream incepe imediat ce au fost incarcate primele cadre. Sunetele adugate n documentul Flash (importate sau luate din Libraria de sunete a programului) sunt incluse n document i n fisierele ".swf" exportate. Dupa ce sunetele sunt incluse n Library, e un lucru simplu sa fie adugate n Timeline, prin panoul Properties al cadrelor (vedeti imaginea de mai jos). se apas click pe cadrul unde trebuie inclus sunetul, apoi, n Properties, la Sound, la opiunea Name se alege sunetul respectiv.

49

- La Name apare o lista cu sunetele incluse n Library. - La Synk avem:

Event - adica, flash transmite sunetul pn acesta ajunge la sfarsit, chiar dac animaia s-a terminat sau mai este executat inca o data. Dac se repeta efectul care a generat sunetul, acesta va fi trasansmis peste cel curent, care continua pn se termina. Start - este cu "Event", dar nu transmite acelasi sunet dac animaia se repeta i primul nu a terminat; nu suprapune acelasi efect audio. Stop - opreste sunetulstop();play(); Stream - syncronizeaza animaia i sunetul pe cat posibil n momentul derularii lor, sa fie ambele n acelasi timp (Timeline). Flash va sari peste cadre din ea ca sa fie la acelasi cadru din Timeline la care a ajuns sunetul.

50

Effect conine:

Left channel - Transmite sunetul mono, pe boxa stanga. Right channel - Transmite sunetul mono, pe boxa dreapta. Fade Left to Right - sunetul este transmis la inceput n boxa stanga, iar de la mijloc n dreapta. Fade Right to Left - Sunetul este transmis la inceput n boxa dreapta, iar de la mijloc n stanga. Fade n - ncepe sunetul incet i pe parcurs isi mareste volumul. Fade out - ncepe sunetul la volum mare i pe parcurs il incetineste. Custom - deschide o fereastra n care efectul poate fi definit liber. Fereastra este precum cea din imaginea urmatoare.

51

Proprietatea Repeat conine: Repeat se defineste numarul de repetari (iniial 1), Loop determina repetarea continua pn la oprirea intentionata. Observatie: sunetele trebuiesc inserate pe straturi diferite sunetele pot fi adugate i butoanelor asemanator ca i n zona Timeline. Pentru a opri sunetul se efectueaza urmatorii pasi: o se selecteaza cadrul unde trebuie oprit sunetul. Dac este o celula goala sau un Frame Static simplu, se transforma n "Blank Keyframe" . o in panoul Properties pentru acel cadru, la Sound -> Name se alege sunetul care trebuie oprit, iar la Sync se pune opiunea Stop.

52

Adugarea unui sunet la animaia Motion Tween Cadrele "Motion Tween" nu au n Properties opiunea de adugare sunet. Pentru a aduga sunete n animaia "Motion Tween" trebuie adugat un "Layer" pe care se aduga sunetele, n paralel cu animaia. Etape: Se creaza un Layer nou Insert -> Timeline -> Layer (noul strat va fi adugat deasupra). 1. se alege Cadrul de la care sa inceapa animaia i se face "Blank Keyframe" 2. In panoul Properties al acelui cadru se aduga sunetul. Astfel, sunetul va fi transmis incepand de la acel Keyframe gol, paralel cu animaia, iar n zona Timeline va apare similar cu imaginea de mai jos.

Comprimare sunet In panoul Library se apas dublu-click pe sunet (sau click-dreapta i "Properties"), se va deschide o fereastra cu proprietaile fiierului audio adugat, precum cea din imaginea urmatoare.

53

Prin schimbarea compresiei se modifica i calitatea sunetului, nu o poate face mai buna decat este n fisierul audio original (Adobe Flash ne fiind un editor audio), dar o poate scadea cnd se reduc valorile de la "Bit Rate" i "Quality", imediat apar informatii despre sunetul respectiv n Flash, marimea i compresia. Compresia cea mai indicata pentru raport calitate/marime este MP3. Cu "Update" se reincarca sunetul din locatia iniiala iar "Test" i "Stop" sunt pentru testare audio a sunetului. Dac se aduga sunet intr-o animaie, trebuie tinut cont de durata sunetului pentru a fi incadrat corect n cadrele animaiei. Exemplu : dac un sunet dureaza 10 secunde, iar FPS-ul din Timeline = 24, sunetul va avea nevoie de 10x24 Frames, adica 240 cadre. Utilizare Masks O masca n Flash functioneaza ca o fereastra prin care se poate vedea continutul Flash, acoperind totul n afara acelei ferestre. Controleaza partea vizibila dintr-unul sau mai multe Layers.
54

Orice Forma, Symbol sau element Text pot fi utilizate ca o masca. Forma desenata ntr-un Strat Mask defineste suprafata prin care va fi vizibil continut din straturile, definite ca "Masked" (mascate), de sub acel "Mask Layer". Aceasta tehnica creaza un efect deosebit, mai ales ca o Masca poate fi animata; Masca este utila pentru a evidentia i controla forma zonei vizibile dintr-o prezentare Flash. Creare Masks Pentru a realiza acest efect, denumit Mask, trebuie creat n Timeline un Mask Layer i alt strat (sau mai multe) care sa fie legate de el (pozitionate imediat sub el). Orice strat poate fi utilizat (transformat) n "Mask Layer", prin click-dreapta pe numele lui, n Timeline, i se alege opiunea Mask. Cu aceasta metoda, Stratul de sub el va fi automat legat de el, transformat ntr-un "Masked Layer" (Strat Mascat), i ambele inchise. O alta metoda de creare Strat Masca e urmatoarea: se apas clickdreapta pe numele stratului i se alege opiunea Properties (sau din meniul Modify -> Layer Properties), iar n fereastra care se deschide (cea din imaginea urmatoare) se bifeaza opiunea Mask.

55

Stratul respectiv va deveni Mask Layer, fara sa mai fie blocat, iar cel de sub el ramane normal. Pentru a-l lega pe acesta la cel transformat n Mask, se apas click-dreapta pe cel normal, i deschizand aceeasi fereastra de la "Properties" se bifeaza opiunea Masked. Observatie: un Mask Layer afecteaza doar straturile legate de el, i pot fi incluse oricate astfel de "Straturi Mascate", prin tragerea lor cu mouse-ul sub el.

Add classic Motion Guide..

56

Obiecte Flah folosind instrumentul 3D Flash are doua instrumente speciale "3D Rotation Tool" i "3D Translation Tool". - Cu 3D Rotation Tool se face rotirea n jurul axelor X, Y, Z. - Cu 3D Translation Tool se misca obiectul Movie Clip (sau Text) dea lungul celor 3 axe. Miscarea n spatiu 3D se numeste translation (translatie). Observatie: doar elementele Text i Symbol Movie Clip pot fi folosite pentru efecte i animaii 3D. Flash furnizeaza doua spatii 3D diferite: global i local. Acestea pot fi activate /dezactivate din butonul Global Transform, ce apare cnd este ales unul din instrumentele "3D Rotation" sau "3D Translation". - Spatiu 3D Global este spatiul Scenei. - Local 3D este spatiul "Movie Clip-ului". Cnd un Movie Clip este rotit sau miscat n axa Z, acesta devine un 3D Movie Clip i apar cele 3 axe, n culori diferite: axa X este rosie, axa Y e verde i axa Z albastra. Cnd este ales "3D Rotation Tool" aceste axe apar n cadrul unui cerc portocaliu, iar cnd este selectat "3D Translation", acestea sunt niste sageti (dupa cum se observa n imaginea urmatoare).

57

Pentru a roti obiectul doar pe una din axe, se tine apast click pe linia axei respective i se misca mouse-ul n directia dorita. Rotatia se face n jurul unui cerculet mic din centru (acesta poate fi mutat cu mouse-ul) iar pentru ca rotatia (cu 3D Rotation) sa se faca n jurul celor 3 axe n acelasi timp, se folosete linia de cerc portocalie. Miscarea obiectului n plan 3D se face cu "3D Translation", prin tragerea cu mouse-ul de sagetile axelor. Dac este setat "Loca" (butonul "Global Transform" este neactivat) miscarea apare n perspectiva, realizand perceptia de apropiere i departare a obiectului.

58

Cnd se creaza un Movie Clip i e selectat, n panoul Properties apare proprietatea 3D Position and View cu opiuni pentru a misca i aseza mai precis obiectul n planul 3D i perspectiva.

Butonul Reset muta punctul de disparitie la pozitia iniiala, n centrul Scenei.

59