75713573 seminar-ski-rad-flash-program-za-animaciju
- 1. UNIVERZITET PRIVREDNA AKADEMIJA, NOVI SAD FAKULTET ZA EKONOMIJU I IN貼ENJERSKI MENAD貼MENT PREDMET: OSNOVI INFORMATIKE SEMINARSKI RADSEMINARSKI RAD TEMA: ADOBE FLASH PROGRAM ZA ANIMACIJUTEMA: ADOBE FLASH PROGRAM ZA ANIMACIJU Student: Mentor: Ana Nedeljkovi 63/10 Dr Dragan Sole邸a Novi Sad, decembar 2011.
- 2. Seminarski rad Adobe Flash program za animaciju, Nedeljkovi Ana 63/10 SADR貼AJ UVOD............................................................................................................................3 1. ISTORIJAT FLASHA................................................................................................3 2. PROGRAMSKO OKRU貼ENJE................................................................................3 2.1 Pozornica..............................................................................................................3 2.2 Vremenska osa.....................................................................................................4 2.3 Kutija alata...........................................................................................................5 2.4 Biblioteka simbola................................................................................................6 2.5 Paneli....................................................................................................................7 3. RAD U FLASHU.......................................................................................................8 3.1 Poetak rada.........................................................................................................8 3.2 Crtanje..................................................................................................................8 3.3 Uvozni elementi...................................................................................................9 3.4 Animacija.............................................................................................................9 3.5 Maskiranje............................................................................................................9 3.6 Tekst...................................................................................................................10 3.7 Kodiranje............................................................................................................10 ZAKLJUAK..............................................................................................................11 .....................................................................................................................................11 LITERATURA.............................................................................................................12 - 2 -
- 3. Seminarski rad Adobe Flash program za animaciju, Nedeljkovi Ana 63/10 UVOD Flash Player je program za prikazivanje .swf filmova. Postoji u obliku plug-in dodatka za web-browsere, a takoe kao i samostalni program za Windows i Macintosh platforme. Program za kreiranje filmova zove se Flash i takoe je realizovan za ove dve platforme. Najnovija verzija programa nosi naziv Flash MX (MX predstavlja obave邸tenje o 10 godina rada kompanije Macromedia) i to 邸esta verzija ovog programa. 1. ISTORIJAT FLASHA 1995. godine kompanija Future Wave objavljuje jednostavan vektorski-orijentisan program za ilustrovanje pod nazivom SmartSketch. Iste godine kreiran je i plug-in Future Splash Player za pregled ilustracija iz SmartSketcha. Naredne godine izlazi naredna verzija programa pod novim nazivom Cel Animator, sa moguno邸u kreiranja animacije i ubrzo se program preimenovao u Future Splash Animator. Tada Macromedia uvia u ovom programskom paketu (Animator + Player) ogroman potencijal i to je razlog kupovine kompanije Future Wave od strane Macromedije. Prvu verziju Flasha Macromedia je objavila 1997. godine. Narednih godina izlazile su nove verzije programa uvodei kvalitativne novine u domenu animacije i interakcije s korisnikom. Godine 2000. pojavljuje se Flash 5 uvodei novi koncept u programerske mogunosti paketa skript jezik ActionScript. 15. marta 2002. Flash MX dobija zadatak da opravda renome svojih predhodnika i predstavi nove mogunosti kori邸enja u svetu web-aplikacija. Izlaganje ovog rada odnosi se na program Flash 5, dok svi izuzeci sadr転e napomenu. 2. PROGRAMSKO OKRU貼ENJE Flash film koji se pravi u Flashu snima se kao .fla dokument. Radno okru転enje je pode邸eno za kreiranje grafikih elemenata i njihovu animaciju u vremenu. Elementi okru転enja su: Pozornica Vremenska osa Kutija alata Biblioteka simbola Paneli 2.1 Pozornica Centralni deo radnog okru転enja dodeljen je pozornici (stage). Ona odslikava svet dvodimenzionalnog koordinatnog sistema sa poetkom u gornjem levom uglu, ije se dimenzije (u pikselima) odreuju kao globalne za ceo film. Na slici dole, pozornica je centralni beli pravougaonik. - 3 -
- 4. Seminarski rad Adobe Flash program za animaciju, Nedeljkovi Ana 63/10 Slika 1 Sam film mo転e da se organizuje po scenama. Tako je pri kreiranju praznog dokumenta kreirana i aktivna prva scena (Scene 1). Na slici se ovo vidi pri gornjem levom uglu, ispod menija (slika filmske klape i natpis Scene 1). 2.2 Vremenska osa Svakoj sceni pridru転uje se vremenska osa (timeline). Ona dodaje treu prostornu dimenziju kroz koncept lejera (leyers) i vremensku komponentu, preko frejmova. Lejeri se mogu posmatrati kao providne folije naslagane jedna na drugu, odreujui tako 邸ta se nalazi ispod a 邸ta iznad. Primer: ako imamo dva lejera sa nekim sadr転ajem koji se na nekom delu scene preklapa, u preklopljenom delu bie vidljiv sadr転aj gornjeg lejera jer on je iznad donjeg. Pojam frejma poznat je iz filmske terminologije, predstavlja stanje u nekom posmatranom trenutku. Vremenska komponenta je diskretizovana na frekvenciju frejmova po sekundi, 邸to se takoe globalno odreuje na nivou filma. Kljuni frejm je frejm sa nekim definisanim stanjem elemenata odreenog lejera. Izmeu dva kljuna frejma u lejeru mo転e se zadati animacija elemenata lejera, odnosno distribucija promena po frejmovima izmeu uoenih kljunih frejmova. Ovaj pojam koristi se pri izradi animiranih - 4 -
- 5. Seminarski rad Adobe Flash program za animaciju, Nedeljkovi Ana 63/10 filmova, gde glavni crtai crtaju kljune slike (frejmove), a animatori dovr邸avaju posao crtanjem meuslika. Slika 2 Za ilustraciju ove prie primer je slika iznad. Postoji pet lejera, nazvani back, obj1, obj2, code i labels. Lejer back je najdonji, iznad njega je obj1, i tako redom do lejera labels, koji je najgornji. Selektovan je lejer obj1. Lejeri labels i code nisu vidljivi (oznaka x ispod oka) i zakljuani su (katanac), kao i lejer back. Kako se lejer obj2 nalazi iznad obj1, iji elementi trenutno dizajniraju, to se kod lejera obj2 prikazuju samo obrisi oblika elemenata (kvadrati iskljuuje vidljivost popune) kako bi elementi lejera obj1 mogli biti vidljivi i pored eventualnih preklapanja. Film zauzima 13 frejmova, a u donjem redu oitava se da je aktivan sedmi frejm, da se film pode邸en za prikazivanje 12 frejmova u sekundi (fps) i da trenutna pozicija predstavlja 0.5 sekundi od poetka filma. Na samom sedmom frejmu prisutna je vertikalna crta koja oznaava selektovani frejm. U preseku selektovanog lejera i frejma je selektovan kljuni frejm (popunjen kru転i) lejera obj1. Izmeu nekih kljunih frejmova nalazi se strelica, koja predstavlja animaciju elemenata lejera izmeu uoenih frejmova (program u frejmovima strelice izraunava promenu elemenata lejera u odnosu na kljune frejmove). U lejeru code vide se kljuni frejmovi sa oznakom a, 邸to ukazuje da ti frejmovi sadr転e neke akcije ActionScripta. U lejeru labels dva kljuna frejma imaju zastavice i tekst koji predstavlja labelu (oznaku) frejma, koja olak邸ava prepoznavanje delova filma i ije ime se mo転e koristiti pri zadavanju komandi ActionScripta za kontrolu toka filma (na primer, mo転e se narediti skok na poziciju imenovanog frejma). 2.3 Kutija alata Za rad u filmu, sceni, lejeru i frejmu koriste se razne alatke iz kutije alata (slika levo), koja je podeljena na etiri dela: - 5 -
- 6. Seminarski rad Adobe Flash program za animaciju, Nedeljkovi Ana 63/10 alati za crtanje, vizuelno pozicioniranje, selektori boja i opcije selektovane alatke. Poput drugih programa za rad sa vektorskom grafikom i u Flashu su standardne alatke za crtanje: selektor, linija, pravougaonik, elipsa, slobodno crtanje, gumica... Postoje dva selektora za boje: za boju linije (konture) i za boju popune konture. Zapopunu se, pored osnovnih boja, mogu odabrati i radijalno ili linearno nijansirani prelazi boja. Boja pozadine odreuje se globalno na nivou filma. 2.4 Biblioteka simbola Crtanje grafikih elemenata mo転e se izvoditi direktno na sceni i tom prilikom kreiraju se oblici (shapes). Drugi prisup jeste kreiranje simbola. Simboli su elementi koji se mogu vi邸e puta koristiti. Poseduju sopstvenu vremensku osu. Opis simaola uva se i organizuje u okviru biblioteke simbola (Library). Na slici levo prikazana je biblioteka simbola koja se koristi u okviru prvog primera, program pasijans. Sa slike se vidi da svaki simbol ima svoje ime, kao i da se simboli mogu organizovati po folderima simbola (na slici su neki folderi zatvoreni, npr. colors, dok su neki otvoreni suits). Razliite sliice levo od imena simbola oznaavaju tip simbola. Postoji tri osnovna editabilna tipa simbola: filmski klip (Movie Clip), dugme (Button) i grafike (Graphic). Na slici je simbol dummy tipa Movie Clip, buttonB tipa Button, a back tipa Graphic. Postoje jo邸 i tipovi uvoznih simbola slike, zvuni i video zapisi. Simbol hearts je selektovan, a u gornjem prozoretu prikazan je njegov izgled. Postavljanje simbola na scenu u stvari je njegovo instanciranje. Instanci simbola mogue je menjati razne osobine (pozicija, skaliranje, rotacija, transparencija,...) bez uticaja na definiciju simbola. Menjanje osobina u definiciji simbola odra転ava se na svim njegovim instancama. Simbol tipa dugme reaguje na dogaaje mi邸a kada se pokaziva mi邸a nalazi iznad simbola i kada je pritisnuto dugme mi邸a dok je pokaziva iznad simbola. Zato vremenska osa simbola tipa dugme sadr転i etiri specijalna frejma: up stanje simbola kada se pokaziva mi邸a ne nalazi iznad simbola - 6 -
- 7. Seminarski rad Adobe Flash program za animaciju, Nedeljkovi Ana 63/10 over pokaziva je iznad simbola down pokaziva je iznad i pritisnuto je levo dugme mi邸a hit ovaj frejm odreuje povr邸inu na osnovu koje simbol odreuje svoje stanje Grafiki simbol mo転e biti animiran, ali se njegova vremenska osa vezuje za scenu (ili filmski klip, ako se u njemu instancira), tako da sve promene toka (po frejmovima) roditeljskog elementa utiu i na instancu grafikog simbola. Tako, na primer, ako se u nekom trenutku zaustavi animacija na sceni, zaustavlja se i animacija svih instanci simbola tipa grafika. Drugaije pona邸anje u odnosu na ovo realizuju simboli tipa filmski klip. Gledano na istom primeru, zaustavljanje animacije na sceni ne utie na pona邸anje instanci filmskih klipova postavljenih na scenu ve naprotiv, one nastavljaju tok svoje vremenske ose. Pored ovoga, svakoj instanci simbola filmskog klipa mo転e se dodeliti jedinstveno ime instance, kojim se potom referencira instanca u akcijama ActionScripta. 2.5 Paneli Za pregled, organizaciju i modifikaciju elemenata Flash filma koriste se paneli sa komandama i opcijama vezanim za posmatrani tip elementa. Mogu se modifikovati simboli, instance, boje, tekst, frejmovi i drugi elementi filma. Slika levo predstavlja jedan panel. Paneli se mogu organizovati u grupe, tako da se na ovoj slici u stvari nalaze tri panela, od kojih je aktivan (jeziak gore) panel Info. Panel svoj prikaz vezuje za selektovani element scene, frejm i slino, i nudi opcije koje se mogu vr邸iti nad selekcijom. Pored pomenutih elemenata okru転enja, postoje meniji, toolbari (standardni i kontroler toka filma), kao i dodatni alati za testiranje filma, dibager i izlazni prozor. - 7 -
- 8. Seminarski rad Adobe Flash program za animaciju, Nedeljkovi Ana 63/10 3. RAD U FLASHU Da bi autor ostvario svoj projekat filma u Flashu, koristi se razliitim tehnikama editovanja sadr転aja svog rada. U nastavku su predstavljeni osnovni koncepti rada koje nudi okru転enje. 3.1 Poetak rada Otvaranjem programa, ili zadavanjem komande za novi projekat, kreira se inicijalni dokument u kome je definisana i aktivna prva scena (Scene 1), koji sadr転i jedan lejer (Layer 1) sa jednim praznim frejmom. Dimenzije scene, broj slika u sekundi i boja pozadine uzimaju vrednosti koje su u programu postavljene za podrazumevane. Ovi parametri mogu se menjati u bilo kom trenutku rada, a od trenutka promene postaju globalni za ceo film. 3.2 Crtanje Grafiki elemenati mogu biti kreirani kori邸enjem alata za crtanje. Crtanje se odvija u okviru selektovanog kljunog frejma selektovanog lejera, u okviru elementa filma koji se edituje. Element filma mo転e biti scena ili simbol. Odabirom alatke (linija, elipsa, pravouganik, slobodno crtanje...) odreuje se 邸ta e se crtati, selekcijom boja odreuju se boje linije i popune elementa koji se crta, a u panelima mogue je odrediti tip i debljinu linije, nain popune (ista boja, radijalni ili linearni gradijent, bitmapa) i procenat transparencije boja. Sve osobine mogue je i naknadno menjati selekcijom 転eljenih kontura ili popuna i promenom vrednosti osobine u odreenom panelu ili selektoru boje. Primer: na slici levo je elipsa sa podebljanom isprekidanom linijom i radijalnom popunom. Za pomo pri crtanju koriste se re邸etka (grid), voice (guidelines), koje se vuku sa lenjira (ruler), i ve postojei objekti na sceni (ili u definiciji simbola). Postoji mogunost vezivanja (snap) kljunih taaka elementa koji se crta za neki od pomenutih elemenata, a takoe se odreuje i stepen vezivanja (koliko pokaziva mi邸a mo転e biti udaljen od elementa da bi do邸lo do vezivanja). Parametri re邸etke, horizontalni i vertikalni razmak izmeu linija re邸etke, menjaju se po potrebi. Pozicioniranje elementa mogue izvodi se poravnavanjem u odnosu na druge elemente ili u odnosu na pozornicu, kao i distribucija elemenata, levo, desno ili centrirano. Pozicija elementa mo転e se i numeriki odrediti, kao i dimenzije, a mogue je izvoditi i relativnu transformaciju dimenzija (procentualno), rotacije i zako邸enja (skew). - 8 -
- 9. Seminarski rad Adobe Flash program za animaciju, Nedeljkovi Ana 63/10 3.3 Uvozni elementi Vektorski elementi pozornice mogu se dobiti i uvozom vektorske grafike uraene u nekom drugom programu. Ovo je naroito korisno pri potrebi za zahtevnijim grafikama, koje je ipak lak邸e realizovati u specijalizovanim programima (Adobe Illustrator, Macromedia Freehand, Corel Draw i slino). Uve転en vektorski element mo転e se dalje obraivati na isti nain kao i grafika crtana u Flashu. Pored uvoza vektorskih slika, mogu se uvoziti bitmapirane slike koje se, kao bitmapirani simboli, sme邸taju pri uvozu u biblioteku, dok se instanca postavlja na pozornicu. Instanci se mogu menjati pozicija, veliina, rotacija i zako邸enje. Kao i kod bitmapiranih slika, zvuni i video zapisi takoe uvozom postaju elementi biblioteke simbola. 3.4 Animacija Pri dizajniranju filma mogu se koristi dve vrste animacije: animacija oblika (shape tween) i instanci simbola ili grupisanih objekata (motion tween). Zajedno za obe vrste animacije je da se defini邸e izmeu dva kljuna frejma (poetnog i krajnjeg frejma animacije) istog lejera i definisanje dinamike animacije (easing pozitivne vrednosti daju br転u promenu u na poetku animacije, negativne obratno). Animacija oblika predstavlja jednostavno pretapanje oblika izmeu uoenih kljunih frejmova. Ne mo転e se primenjivati na instance simbola i grupisane objekte, ve samo na oblike. Primer bi bio transformacija pravougaonika u elipsu: u prvom kljunom frejmu crta se pravougaonik, u drugom elipsa, i na kraju se kod prvog kljunog frejma zadaje animacija (tweening) postavljanjem na shape. O frejmovima izmeu stara se Flash i izraunava meuoblike. Motion tween, slino, zahteva samo jednu (istu) instancu simbola ili grupu simbola prisutnu na oba kljuna frejma lejera. Sve promene vrednosti osobina elementa kljunih frejmovima se pri zadavanju animacije (tweening na motion) distribuiraju po meufrejmovima. Pri zadavanju mo転e se odrediti i dodatna rotacija elementa (smer i broj okretaja) tokom animacije. Naprednija varijanta ove animacije posti転e se tako 邸to se lejeru pridru転i vodei lejer (motion guide). Na vodeom lejeru iscrtava se samo putanja elementa. Element se u kljunim frejmovima vezuje za poetnu i krajnju taku putanje. Pri ovakvom zadavanju animacije odreuje se da li se element tokom animacije orijenti邸e i po putanji, ili ne. Sadr転aj vodeeg lejera se ne prikazuje pri testiranju filma. 3.5 Maskiranje Sadr転aj nekog lejera mo転e maskirati oblikom u lejeru iznad, ako se gornji lejer proglasi za maskirni. - 9 -
- 10. Seminarski rad Adobe Flash program za animaciju, Nedeljkovi Ana 63/10 Primer: na slici levo nalaze se dva potpuno ista pravougana oblika, na razliitim lejerima, od kojih je jedan maskiran lejerom koji sadr転i elipsu. 3.6 Tekst Na pozornicu se mogu dodavati i tekstualni elementi. Dodaju se kao tekstualna polja koja se defini邸u kao: statika, dinamika ili ulazna Statiko polje odreuje svoj sadr転aj kucanjem potrebnog teksta tokom editovanja u samo polje. Dinamiko polje vezuje svoj sadr転aj za neku promenljivu koja se defini邸e u kodu ActionScripta, ovo polje prikazuje vrednost promenljive. Polje je definisano kada se odredi ime promenljive kojoj se polje pridru転uje. Slino je i sa ulaznim poljem, sadr転aj se vezuje za promenljivu. Razlika 邸to se korisniku dozvoljava da menja sadr転aj polja, time i vrednost promenljive. Tekstualna polja mogu zauzimati jednu liniju ili se prostirati na vi邸e linija. Slino kao i u programu Word, mogua su razna pode邸avanja sadr転aja polja po osobinama paragrafa (centriranje, margine, uvlaenje, razmak izmeu redova) i karaktera (tip fonta, veliina, boja, stil, definisanje hiperlinka). 3.7 Kodiranje Vi邸e puta pomenuti jezik ActionScript koristi se u Flashu za programiranu kontrolu toka filma. Elementi jezika nazivaju se akcije. Kod ActionScripta mo転e se pridru転iti kjunom frejmu i instancama simbola tipa dugme i filmski klip. - 10 -
- 11. Seminarski rad Adobe Flash program za animaciju, Nedeljkovi Ana 63/10 ZAKLJUAK injenica da predstavljeni primeri imaju veliinu korisnikog fajla (.swf filma) od tridesetak KB, a da u potpunosti defini邸u pona邸anje aplikacije i realizuju kompletan korisniki interfejs, nedvosmisleno govori u prilog tvrdnji da Flash filmovi jesu pravo re邸enje u svetu Interneta. Vektorska grafika i animacija Flasha i jezik ActionScript svojom raznovrsno邸u omoguavaju re邸avanje 邸irokog spektra web problematike. Od kreiranja navigacionih re邸enja u okviru HTML stranica, animiranih reklamnih sliica, do izrade kompletnih web-prezentacija u Flashu i direktnu razmenu podataka sa web serverom i njihovu dalju obradu. Svojom rasprostranjeno邸u Flash ve danas jeste standard, a sutra je ve poelo, jer tu je Flash MX, koji definitivno zaokru転ava priu koju je zapoeo Flash 5 uvodei ActionScript. - 11 -
- 12. Seminarski rad Adobe Flash program za animaciju, Nedeljkovi Ana 63/10 LITERATURA 1. Mikari, B. KOMPJUTERSKE TEHNOLOGIJE PRAKTIKUM, Izdavaki centar za industrijski menad転ment ICIM, Kru邸evac, 2010 2. Kata邸i, D. Flash i ActionScript, diplomski rad, mentor dr Zoran Budimac, Novi Sad 2002. 3. http://en.wikipedia.org/wiki/Adobe_Flash - 12 -