Dejan Katašić: FLASH I ACTIONSCRIPT, diplomski rad |
|
1 FlashFlash Player je program za prikazivanje .swf filmova. Postoji u obliku plug-in dodatka za web-browsere, a takođe kao i samostalni program za Windows i MacIntosh platforme. Program za kreiranje filmova zove se Flash i takođe 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.1 Istorijat Flasha1995. 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 mogućnošću kreiranja animacije – i ubrzo se program preimenovao u Future Splash Animator. Tada Macromedia uviđa 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 uvodeći kvalitativne novine u domenu animacije i interakcije s korisnikom. Godine 2000. pojavljuje se Flash 5 uvodeći novi koncept u programerske mogućnosti paketa – skript jezik ActionScript. 15. marta 2002. Flash MX dobija zadatak da opravda renome svojih predhodnika i predstavi nove mogućnosti korišćenja u svetu web-aplikacija. Izlaganje ovog rada odnosi se na program Flash 5, dok svi izuzeci sadrže napomenu. 1.2 Programsko okruženjeFlash film koji se pravi u Flashu snima se kao .fla dokument. Radno okruženje je podešeno za kreiranje grafičkih elemenata i njihovu animaciju u vremenu. Elementi okruženja su: · Pozornica · Vremenska osa · Kutija alata · Biblioteka simbola · Paneli 1.2.1 PozornicaCentralni deo radnog okruženja dodeljen je pozornici (stage). Ona odslikava “svet” dvodimenzionalnog koordinatnog sistema sa početkom u gornjem levom uglu, čije se dimenzije (u pikselima) određuju kao globalne za ceo film. Na slici dole, pozornica je centralni beli pravougaonik.
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”). 1.2.2 Vremenska osaSvakoj sceni pridružuje se vremenska osa (timeline). Ona dodaje treću prostornu dimenziju kroz koncept lejera (leyers) i vremensku komponentu, preko frejmova. Lejeri se mogu posmatrati kao providne folije naslagane jedna na drugu, određujući 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 biće 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 takođe globalno određuje na nivou filma. Ključni frejm je frejm sa nekim definisanim stanjem elemenata određenog lejera. Između dva ključna frejma u lejeru može se zadati animacija elemenata lejera, odnosno distribucija promena po frejmovima između uočenih ključnih frejmova. Ovaj pojam koristi se pri izradi animiranih filmova, gde glavni crtači crtaju ključne slike (frejmove), a animatori dovršavaju posao crtanjem međuslika.
Za ilustraciju ove priče 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 zaključani 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ć isključuje vidljivost popune) kako bi elementi lejera obj1 mogli biti vidljivi i pored eventualnih preklapanja. Film zauzima 13 frejmova, a u donjem redu očitava 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 početka filma. Na samom sedmom frejmu prisutna je vertikalna crta koja označava selektovani frejm. U preseku selektovanog lejera i frejma je selektovan ključni frejm (popunjen kružić) lejera obj1. Između nekih ključnih frejmova nalazi se strelica, koja predstavlja animaciju elemenata lejera između uočenih frejmova (program u frejmovima strelice izračunava promenu elemenata lejera u odnosu na ključne frejmove). U lejeru code vide se ključni frejmovi sa oznakom “a”, što ukazuje da ti frejmovi sadrže neke akcije ActionScripta. U lejeru labels dva ključna 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). 1.2.3 Kutija alata
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. Za popunu se, pored osnovnih boja, mogu odabrati i radijalno ili linearno nijansirani prelazi boja. Boja pozadine određuje se globalno na nivou filma. 1.2.4 Biblioteka simbola
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). Različite sličice levo od imena simbola označavaju 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, zvučni i video zapisi. Simbol hearts je selektovan, a u gornjem prozorčetu prikazan je njegov izgled. Postavljanje simbola na scenu u stvari je njegovo
instanciranje. Instanci simbola moguće je menjati razne osobine (pozicija,
skaliranje, rotacija, transparencija,...) bez uticaja na definiciju simbola. Simbol tipa dugme reaguje na događaje 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 · over – pokazivač je iznad simbola · down – pokazivač je iznad i pritisnuto je levo dugme miša · hit – ovaj frejm određuje površinu na osnovu koje simbol određuje svoje stanje Grafički 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 utiču i na instancu grafičkog simbola. Tako, na primer, ako se u nekom trenutku zaustavi animacija na sceni, zaustavlja se i animacija svih instanci simbola tipa grafika. Drugačije ponašanje u odnosu na ovo realizuju simboli tipa filmski klip. Gledano na istom primeru, zaustavljanje animacije na sceni ne utiče 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. 1.2.5 PaneliZa 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.
* * * Pored pomenutih elemenata okruženja, postoje meniji, toolbari (standardni i kontroler toka filma), kao i dodatni alati za testiranje filma, dibager i izlazni prozor. 1.3 Rad u FlashuDa bi autor ostvario svoj projekat filma u Flashu, koristi se različitim tehnikama editovanja sadržaja svog rada. U nastavku su predstavljeni osnovni koncepti rada koje nudi okruženje. 1.3.1 Početak radaOtvaranjem 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. 1.3.2 CrtanjeGrafički elemenati mogu biti kreirani korišćenjem alata za crtanje. Crtanje se odvija u okviru selektovanog ključnog 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...) određuje se šta će se crtati, selekcijom boja određuju se boje linije i popune elementa koji se crta, a u panelima moguće je odrediti tip i debljinu linije, način popune (čista boja, radijalni ili linearni gradijent, bitmapa) i procenat transparencije boja. Sve osobine moguće je i naknadno menjati selekcijom željenih kontura ili popuna i promenom vrednosti osobine u određenom panelu ili selektoru boje.
Za pomoć pri crtanju koriste se rešetka (grid), vođice (guidelines), koje se vuku sa lenjira (ruler), i već postojeći objekti na sceni (ili u definiciji simbola). Postoji mogućnost vezivanja (snap) ključnih tačaka elementa koji se crta za neki od pomenutih elemenata, a takođe se određuje 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 između linija rešetke, menjaju se po potrebi. Pozicioniranje elementa moguće 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 numerički odrediti, kao i dimenzije, a moguće je izvoditi i relativnu transformaciju dimenzija (procentualno), rotacije i zakošenja (skew). 1.3.3 Uvozni elementiVektorski elementi pozornice mogu se dobiti i uvozom vektorske grafike urađene u nekom drugom programu. Ovo je naročito korisno pri potrebi za zahtevnijim grafikama, koje je ipak lakše realizovati u specijalizovanim programima (Adobe Illustrator, Macromedia Freehand, Corel Draw i slično). Uvežen vektorski element može se dalje obrađivati na isti način 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, veličina, rotacija i zakošenje. Kao i kod bitmapiranih slika, zvučni i video zapisi takođe uvozom postaju elementi biblioteke simbola. 1.3.4 AnimacijaPri 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 između dva ključna frejma (početnog i krajnjeg frejma animacije) istog lejera i definisanje dinamike animacije (easing – pozitivne vrednosti daju bržu promenu u na početku animacije, negativne obratno). Animacija oblika predstavlja jednostavno pretapanje oblika između uočenih ključnih 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 ključnom frejmu crta se pravougaonik, u drugom elipsa, i na kraju se kod prvog ključnog frejma zadaje animacija (tweening) postavljanjem na “shape”. O frejmovima između stara se Flash i izračunava međuoblike. Motion tween, slično, zahteva samo jednu (istu) instancu simbola ili grupu simbola prisutnu na oba ključna frejma lejera. Sve promene vrednosti osobina elementa ključnih frejmovima se pri zadavanju animacije (tweening na “motion”) distribuiraju po međufrejmovima. 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 vodeći lejer (motion guide). Na vodećom lejeru iscrtava se samo putanja elementa. Element se u ključnim frejmovima vezuje za početnu i krajnju tačku putanje. Pri ovakvom zadavanju animacije određuje se da li se element tokom animacije orijentiše i po putanji, ili ne. Sadržaj vodećeg lejera se ne prikazuje pri testiranju filma. 1.3.5 MaskiranjeSadržaj nekog lejera može maskirati oblikom u lejeru iznad, ako se gornji lejer proglasi za maskirni.
1.3.6 TekstNa pozornicu se mogu dodavati i tekstualni elementi. Dodaju se kao tekstualna polja koja se definišu kao: · statička, · dinamička ili · ulazna Statičko polje određuje svoj sadržaj kucanjem potrebnog teksta tokom editovanja u samo polje. Dinamičko 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. Slično 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. Slično kao i u programu Word, moguća su razna podešavanja sadržaja polja po osobinama paragrafa (centriranje, margine, uvlačenje, razmak između redova) i karaktera (tip fonta, veličina, boja, stil, definisanje hiperlinka). 1.3.7 KodiranjeViš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 kjučnom frejmu i instancama simbola tipa dugme i filmski klip. ActionScript je predstavljen u narednom poglavlju.
|
|