Izrada multimedijalnih elemenata i njihova prilagodba za www - Izrada animacije Page 1

IZRADA ANIMACIJE U FLASHU

Macromedia Flash alat je koji prvenstveno koristimo za izradu web animacija. Pomoću njega moguće je
i razne druge aplikacije npr. CD aplikacije, baze za screensavere, prezentacije i sl.

Flash je prvenstveno vektorski program, što znači da se njime upravlja točkama, odnosno skupinama
povezanim u oblike (geometrijski oblici, slova,..). Postoji mogućnost implementiranja slika (rastera) k
tada ponašaju poput objekata.

Za razliku od rasterske grafike koja se sastoji od točno definiranih piksela, koji se na webu sporije uči
vektorska se grafika temelji na matematičkim funkcijama koje opisuju krivulje, npr. ako se radi o krugu
je taj element definiran funkcijom kruga i bojom koja ga ispunjava.

Razlika između vektorske i rasterske grafike najbolje je vidljiva kada se zumira sadržaj vektorske
odnosno rasterske. Kod bilo kojeg uvećanja vektorska grafika će zadržati istu oštrinu, dok će kod ras
grafike biti jasno vidljive granice između piksela.

Macromedia FLASH omogućava i kombiniranje rasterske i vektorske grafike, ali u tom slučaju v
datoteke koja sadrži animaciju raste za veličinu ubačenih rasterskih slika.

Traka s padajućim izbornicima slična je kao i u većini programa za grafiku. Izbornik File sadrži nare
rad s datotekama, Edit ima osnovne naredbe za rad s objektima i frejmovima u animaciji. View sadrži n
za upravljanje pogledima, Insert sadrži naredbe za implementiranja objekata na radnu površinu (
simboli, animacije...); Modify koristimo u radu s objektima, bilo da se radi o poravnavanju ob
promjenama položaja, dimenzija, grupiranju dva ili više objekta; izbornik Tekst sadrži osnovne nare
formatiranje teksta, Control nam omogućava da upravljamo animacijom (pregledavamo je na radnoj po
zaustavljamo, nastavljamo i sl.). Window i Help su standardni padajući izbornici koji nam služe za
dokumentima (prozorima) i nude nam informacije o samom programu, radu s programom itd..

file://localhost/C:/Documents and Settings/Dragan/Desktop/Sa Interneta/animacija Flash.html 20.10.2004 10:56:43

Izrada multimedijalnih elemenata i njihova prilagodba za www - Izrada animacije Page 2

Time Line je prozor pomoću kojeg upravljamo animacijom. Animacija se sastoji od frejmova (sličica).
dvije vrste, Key frejmovi - određuju početno i završno stanje neke sekvence u animaciji, i obični frejmov

Animacije se dijele u nekoliko skupina. Da bi napravili složenu animaciju npr. otvaranje oka, moramo
FrameByFrame animaciju (svaki frejm crtamo zasebno i tako stvaramo niz frejmova koji će se izmje
određenom brzinom i stvarati animaciju.Najčešći oblik animacije je tzv. Tweening animacija, nju kr
pomoću Keyfrejmova (početno i završno stanje), ovakvim animiranjem možemo utjecati na pro
dimenzija, boje, prozirnosti objekta, dok za mijenjanje samog oblika (npr. animirani krug koji se mo
kvadrat) koristimo Shape animaciju.

Radna površina se dijeli na dva dijela, prostor animacije (bijela površina) čije dimenzije definiramo u p
Property i sivu površinu na koju možemo odložiti elemente animacije. Svi objekti koji se ne nalaze
dimenzija animacije neće biti vidljivi u završnom proizvodu.

Properties je prozor koji se mijenja u skladu sa selektiranim objektom; ako je selektiran tekst, onda
prikazati mogućnosti vezane uz obradu teksta; ako je selektiran objekt prikazat će njegovo ispunu, outli

Dockers sadrži niz alata koji se inače nalaze po padajućim izbornicima, a stavljanjem na traku d
olakšavamo si i ubrzavamo rad.

ANIMIRANJE

Objekti koje animiramo dijelimo u tri skupine; gumbi (Buttons), grafički elementi (kružnice, linije, kv
razni oblici - Graphic) i animacije (Movie Clip).

Radi lakšeg upravljanja animacijom, pojedine elemente postavljamo u zasebne layere i na taj
omogućavamo da ih animiramo svakog zasebno. U slučaju da se dva objekta u istom layeru preklope do
spajanja ta dva objekta u jedan.

Prije početka animiranja potrebno je definirati osnovne parametre animacije. To radimo u prozoru Pro
gdje nam se nude mogućnosti definiranja dimenzija animacije, boja podloge animacije i brzina frejm
jednoj sekundi (koliko će se sličica promijeniti u jednoj sekundu - fps - frames per secound).

Nakon definiranja animacije počinjemo s crtanjem elemenata koristeći alate iz alatne trake. Svaki obje
nacrtamo smješta se u Layer1 koji je jedini aktivan. Pozicioniranjem objekta, mijenjanjem dimenzija
stvorili smo početnu fazu animacije. Da bi računalu dali uputu da će samo generirati animaciju potre
iznad tog prvog frejma kliknuti desnom tipkom miša i odabrati Create Motion Tween. Završnu fazu stv
tako da iznad layera kojeg animiramo desnom tipkom miša kliknemo iznad frejma npr. broj 10 i odaber
ponuđenog izbornika naredbu Insert Keyframe.

Nakon kreiranja tog završnog stanja, automatski dolazi do pomicanja crvene linije iznad timelinea
paralelno na radnoj površini prikazuje izgled tog završnog stanja (završnog frejma). Ako u ovom tr
kliknete na tipku Enter, primijetit ćete da će se crvena linja prošetati od prvog do posljednjeg fre

file://localhost/C:/Documents and Settings/Dragan/Desktop/Sa Interneta/animacija Flash.html 20.10.2004 10:56:43

Izrada multimedijalnih elemenata i njihova prilagodba za www - Izrada animacije Page 3

animaciji, ali nećete vidjeti nikakve promjene u samoj animaciji. To se događa zato što su početni i
frejm jednaki. Pomicanjem objekta na zadnjem frejmu, ta dva stanja postaju različita, a računalo g
samo frejmove animacije koji su potrebni da se iz početnog stanja dođe u završno. Ako sada kliknete
vidjet ćete animaciju.

Druga vrsta animiranja jest Shape animacija.Ona nam omogućava da definiramo početno i završno
sekvence (kao i kod Motion Tween animacije), ali za razliku od nje (promjena dimenzija objekta, rot
promjena pozicije), Shape animacija generira animaciju morfiranja, tj. na prvi frejm nacrtate krug (sele
na timelinu taj frejm te u prozoru properties iz padajućeg izbornika kliknete shape), na 10. frejm kv
kliknite Enter.

Ovakav efekt se može postići s bilo kojim objektom unutar animacije, uz preduvjet da je taj objekt ras
na točke (objašnjenje: ako unesemo tekst na layer 1, oko njega se pojavi plavi okvir, što nam govor
radi o grupi objekata i takvu grupu možemo samo animirati pomoću tween animacije; ako želim da se i
A morfira slovo B, potrebno je na prvom frejmu selektirati tekst i iz padajućeg izbornika Modify o
naredbu Break Apart koja razbija objekt na točke, zatim iznad 10. frejma kliknuti desnom tipkom i o
naredbu Insert Empty Keyframe i tamo unijeti slovi B i ponovo razbiti slovo na točke - Ctrl + B.)

Treća vrsta animiranja je FrameByFrame animacija gdje ručno crtamo svaki frejm (princip nas
animiranih crtića prije dolaska računala).

Pomoću ove tri tehnike animiranja možemo raditi osnovne animacije, a za neke dodatne efekte kao
promjene boje u objektima, prozirnost objekta i sl. koristimo mogućnosti iz properties bara nakon k
Kayframe animacije (na timelineu), prozor tada izgleda ovako:

Ako želimo dobiti efekt nestajanja objekta u animaciji, to radimo tako da na završno stanje (zadnj
sekvence) kliknemo u timelineu te iz padajućeg izbornika u Properties prozoru odaberemo Alpha nar
postavimo joj vrijednost na 0.

UPRAVLJANJE ANIMACIJOM

Animacijom upravljaju Akcije. One sadrže upute po kojima se animacija odvija. Akcije se dod
keyfrejmove na timelineu i na gumbe u samoj animaciji.

Da bi kreirali gumb potrebno je iz izbornika Insert odabrati naredbu New Symbol, pojavljuje se s
prozor:

Tu odabiremo Button i kliknemo na OK. Nakon potvrde radna površina se mijenja zajedno s timel
Gumbi imaju 4 frejma na timelineu, svaki frejm predstavlja stanje. Prvi predstavlja izgled gumba u an
drugi izgled gumba nakon što pokazivač miša dođe iznad njega, treći kada se mišem klikne na gumb i
frejm nam omogućava da odredimo osjetljivo područje gumba (o: ako za gumb imamo neku riječ, mog
odrediti da je gumb aktivan samo na pojedinom slovu ili dijelu objekta tako da se u tom 4. frejmu
područje osjetljivo na miša). Nakon što definiramo sva 4 frejma u timelineu gumba, kliknemo na S
naredbu (nalazi se ispod timelinea)

file://localhost/C:/Documents and Settings/Dragan/Desktop/Sa Interneta/animacija Flash.html 20.10.2004 10:56:43

Izrada multimedijalnih elemenata i njihova prilagodba za www - Izrada animacije Page 4

Povratkom na radnu površinu ne vidimo novonastali gumb, on se je smjestio u prozor Library koji po
naredbom Ctrl + L . Tehnikom drag&drop (povuci i spusti) iz tog prozoru odvučemo gumb na radnu po
prije čega otvorimo novi layer tako da možemo animirati samo taj gumb.

Gumb se ponaša kao bilo koji drugi objekt i može se animirati pomoću Tween animacije. Da bi ko
omogućili upravljanje animacijom potrebno je samo na taj gumb staviti uputu (akciju) koja će an
govoriti kako da se ponaša, odvija.

Na timelineu se akcije mogu staviti samo na keyfrejmovee. Nakon što selektiramo npr. zadnji keyfre
izbornika Window odaberemo Actions, pojavit će se prozor:

Na lijevoj strani prozora se nalaze gotove naredbe kojima govorimo animaciji kako da se ponaša na key
kojeg smo selektirali i pozvali prozor Actions. Osnovne akcije su stop, play, goto i gotoAndPlay. Ako
zadnji frejm stavimo akciju Stop, ona će se tu i zaustaviti, u protivnom ako te akcije nema na poslje
frejmu, ona se resetira i počinje iz početka.

Kad animacija jednom stane, jedino što korisniku može omogućiti da je ponovo pokrene su gumbi i ak
njima.Da bi gumbu dodali akciju potrebno ga je selektirati i pozvati prozor Actions klikom na tipku F9. S
strane prozora odaberemo naredbu play, ona se dodaje u desni dio prozora (gdje vidimo dio koda
animacije), ono što još možemo definirati jest pod kojim uvjetima će se ova akcija aktivirati. To
napraviti tako da kliknemo na redak kod - on (Release) - nakon čega nam se nude i ostale mogućn
aktivaciju. Nakon što odaberemo npr. opciju Press, dali smo animaciji uputu koja govori: u slučaju da k
mišem klikne na ovaj gumb animacija će se početi prikazivati iz početka (od frejma broj 1.) pa sve
dođe do akcije u timelineu koja glasi stop.

Da bi testirali animaciju kliknemo Ctrl+enter što aktivira flash player u kojem se vrti naša animacija s
akcijama i elementima koje smo ugradili u nju. Ako je rezultat zadovoljavajući, potrebno je tu an
snimiti u obliku kojeg možemo implementirati na web stranicu.

Flash koristi dvije glavne ekstenzije datoteka. Osnovna (otvoreni fajl) ima extenziju *. Fla koja sad
informacije o tijeku izrade animacije, sve layere, library, akcije koje se naknadno daju mijenjati i sl. S
strane je swf datoteka koja u sebi sadrži samo animaciju koja se vrti prema definiranim akcijama, ali ne
nikakve podatke o tim akcijama ili layerima ili sl.

Da bi kreirali takvu swf datoteku potrebno je iz izbornika File odabrati naredbu Publish.

file://localhost/C:/Documents and Settings/Dragan/Desktop/Sa Interneta/animacija Flash.html 20.10.2004 10:56:43

Izrada multimedijalnih elemenata i njihova prilagodba za www - Izrada animacije Page 5

Ovdje odabiremo u koji format želimo exportirati našu animaciju. Ako je namjeravamo ugraditi
stranicu, koristimo swf, dajemo ime datoteci i kliknemo na publish. Novonastala datoteka je smještena u
folderu kao i otvoreni fajl koji smo snimili (fla fajl). Gotovu animaciju dalje koristimo u programima z
dizajn tipa Dreamweaver, Front Page itd.

RAD S DRUGIM DATOTEKAMA

U Flash animacije je moguće ubacivati datoteke stvorene u drugim aplikacijama. Datoteke koje se u
animaciju su najčešće slike raznih formata.

Da bi ubacili neku sliku potrebno je iz padajućeg izbornika File odabrati naredbu Import i tu odabra
datoteku.

Nakon ubacivanja Flash tu sliku smjesti na radnu površinu i u biblioteku. Ako u prozoru Library dv
kliknemo iznad slike, pojavit će se prozor u kojem će pisati njene karakteristike.

Copyright © CARNet
design:

file://localhost/C:/Documents and Settings/Dragan/Desktop/Sa Interneta/animacija Flash.html 20.10.2004 10:56:43