- Vežba 3 - UVOD U FLASH ANIMACIJA FRAME-BY-FRAME SHAPE TWEEN MOTION TWEEN

- Vežba 3 - UVOD U FLASH ANIMACIJA FRAME-BY-FRAME SHAPE TWEEN MOTION TWEEN

UVOD U FLASH Dizajneri Web strana najčešće koriste slike da bi privukli pažnju posetilaca Web lokacija. Priznaćete da slika može mnogo da ulepša Web stranicu koja bi bila dosadna ukoliko bi bila cela popunjena tekstom. Grafika se danas na Webu toliko koristi da je gotovo nemoguće pronaći Web lokaciju na kojoj nema nekog grafičkog elementa ali umetanje slika na Web strane nije baš bez posledica. Istina je da jedna slika može da vredi kao hiljadu reči, ali slike na Web strani mogu veoma da uspore njeno preuzimanje - što je jedan od najpouzdanijih načina da posetioce oterate sa svoje lokacije. Razlog za to je stvarno jednostavan - datoteke sa slikama često su mnogo veće od datoteka koje sadrže tekst. Pošto se veće datoteke sporije preuzimaju u čitačima Weba, dodavanjem grafike možete da dobijete potpuno suprotan rezultat od onog koji ste hteli da postignete. Umesto da privlači posetioce, mnogo grafičkih elemenata može da ih odbije. Problem s upotrebom slika je najčešće veličina datoteke koja treba da se preuzme, ali pošto Flash za izradu slika primenjuje potpuno drugačiji pristup, slike proizvedene u ovom programu mogu da budu sačuvane u sasvim malim datotekama. Flash omogućava da vektorske slike crtate direktno na pozornici. Datoteke vektorskih slika mnogo su manje od datoteka bitmapiranih slika, kao što su one koje dobijate digitalnim fotoaparatom. Čak i ako zanemarite sve ostale mogućnosti Flasha, ovaj program je odličan jer omogućava da izradite male, vektorske slike za Web. Tako bi veliki deo Flashovih mogućnosti ostao neiskorišćen, ali biste dosta i postigli. Na nekim Web lokacijama su statične slike potrebne i dovoljne za prikaz informacija. Međutim dokazano je da animacija utiče kako na pamćenje tako i na bolje razumevanje objašnjenja određenih pojmova tako da Web lokaciju u određenim slučajevima treba oživiti dodavanjem animacije. Flash je sjajan upravo u izradi animacija za Web lokacije. Dok se ruge tehnike prenosa multimedijalnog sadržaja zasnivaju na ekvivalentu bitmapirane grafike, u Flashu se animiraju vektorske slike.datoteke sa slikama napravljenim u Flashu veoma su male, naročito kada uzmete u obzir koliko sadržaja možete u njih da ubacite. Većina filmova napravljenih u Flashu se ne može reprodukovati samostalno (postoji izuzetak, ali se on ne odnosi na Flash filmove namenjene Web lokacijama). Da biste mogli da gledate film napravljen u Flashu, treba vam program Flash Player. Gotovo svi čitači Weba već imaju ugrađenu neku verziju Flash Playera, pa će većina posetilaca Web lokacija moći da posmatra Flash filmove bez dodatnih problema. Pošto je Flash Player već instaliran u većini čitača Weba, posetioci Web lokacije neće morati da čekaju da se ovaj program preuzme da bi mogli da gledaju filmove na njoj. ANIMACIJA FRAME-BY-FRAME Frame by frame predstavlja osnovnu formu za kreiranje animacije. Može da se koristi za kreiranje kompleksnih animacija kod kojih do promene dolazi u svakom kadru (frejmu). U animaciji frame by frame svaki kadar mora da bude ključni. Ovde Flash čuva vrednosti svakog frejma pa je zbog toga veličina fajla kod ovog načina animacije mnogo veća nego kada se koriste ugrađene funkcije Flasha za animaciju. 2

Korak 1: Otvaranje novog dokumenta i podešavanje 1. Otvorite novi dokumenat u Flashu pomoću komande File > New > General Tab > Flash Document > OK 2. Izvršite podešavanje dokumenat opcijom Modify > Document. 3. Otvara se dijalog prozor kao na slici 1. 4. Upišite dimenzije koje su potrebne za prikaz filma odnosno podesite širinu i visinu (200 x 130 px) 5. Izaberite boju pozadine izborom neke od boja iz prozora za biranje boja. 6. Podesite brzinu prikaza filma (12fps) 7. Kliknite OK 8. Sačuvajte dokumenat File > Save Slika 1 Korak 2: Podešavanje ključnih frejmova (kadrova) 1. Kada ste otvorili novi dokument u Flashu automatski se kreirao prvi sloj (Layer1). 2. Selektujte prvi frejm na vremenskoj osi (frejm od koga kreće animacija) 3. Koristeći alatku za crtanje kruga Oval Tool nacrtajte jedan krug. 4. Pomoću alatke za selekciju Selection Tool selektujte popunu i obojite je u crvenu boju a zatim selektujte ivičnu liniju i obojite je u belu boju. 5. Selektujete sledeći frejm na vremenskoj osi i postavite da bude ključni frejm. U tom frejmu izvršite promenu nad objektom tako što ćete mu promeniti boju popune i povećati veličinu. Pretvaranje običnog frejma u ključni vrši se tako što se selektuje frejm a zatim iz File menija izabere komanda Insert > Timeline > Keyframe (slika 2). 3

Slika 2 6. Drugi način je da nad selektovanim frejmom desnim klikom miša otvorite padajući pop-up meni iz koga izaberete opciju Insert Keyframe.(slika 3) Slika 3 7. Postupak za svaki sledeći frejm je isti što znači da prvo treba od običnog frejma napraviti ključni frejm a onda izvršiti promenu nad objektom (promena boje, veličine objekta, položaja objekta...) 8. Za testiranje animacije izaberite komandu Control>Play. 4

SHAPE TWEEN Shape tween omogućava promenu jednog oblika u drugi. Kod ove vrste animacije moraju biti postavljena najmanje dva ključna frejma. Prilikom kreiranja animacije, na prvom ključnom frejmu se postavlja jedan oblik a na drugom ključnom frejmu drugi oblik. Treba napomenuti da kod ove vrste animacije oblici (objekti) koji se koriste ne treba da budu simboli. Korak 1: Kreiranje oblika 1. Otvorite novi dokumenat sa komandom File>New>Flash document ili sa početne stranice prilikom učitavanja Flasha izaberite opciju New document. 2. Izaberite komandu Modify>Document i promenite dimenzije platna (pozornice filma). (slika 4) Slika 4 3. Iz palete alatki izaberite alatku za tekst Text Tool i napišite reč "Shape" bilo gde na pozornici ( stage, platnu). 4. Promenu teksta možete izvršiti pomoću menija propertis koji se nalazi na dnu ili ako nije otvoren možete ga otvoriti pomoću komande File > Window>Properties (Ctrl+F3). 5. Podesite da vrsta teksta bude Arial font i veličina 25. (slika 5) Korak 2: Razbijanje teksta slika 5 1. Iz palete alatki izaberote crnu strelicu (Selection Tool) i kliknite na tekst. Oko teksta pojaviće se plavi okvir 2. Iz File menija izaberite komandu Modify>Break Apart (Ctrl+B). Ovom komandom vršite razbijanje reči u slova. Međutim za primenu Shape Tween-a potrebno je da 5

objekat bude oblik koji se može transformisati pa je potrebno primeniti komandu Break Apart još jedno (na svako slovo). (slika 6) Orginal Break Apart reči u slova Break Apart slova Slika 6 Napomena: U krajnjem rezultatu primene komande Break Apart videćete male bele tačkice po obliku. Korak 3: Frejmovi i primena Shape Tween 1. Izaberite prvi frejm na vremenskoj osi. 2. Iz Properties menija na dnu dokumenta iz padajuće liste Tween, izaberite Shape (slika 7) slika 7 1. Izaberite sledeći ključni frejm i neka to bude 25.ti frejm. 2. Postavite da ovaj frejm bude ključni frejm. Vaša vremenska osa bi trebalo sada da izgleda kao na slici 8 slika 8 3. Dok je na vremenskoj osi selektovan frejm 25 pomoću alatke za selekciju (Selection Tool) selektujte razbijenu reč Shape sa ovog frejma i sa pomoću tastera Delete sa tastature obrišite je. (Mora da bude selektovan 25.-ti frejm). 4. Pomoću alatke Type Tool upišite reč "Tween" bilo gde na pozornici. Podesite vrstu, veličinu i boju fonta. (Mora da bude selektovan 25.-ti frejm). 5. Primenite komandu Break Apart na reč "Tween" dva puta baš kao što smo to uradili i sa reči "Shape" u prvom frejmu. 6. Testirajte film komandom Control>Test Movie (Ctrl+Enter). 6

MOTION TWEEN Jedna od osnovnih tehnika animacije je pomeranje objekta iz jednog u drugi položaj. U Flash-u se primenom Motion Tween između početnog i krajnjeg frejma postiže se efekat pomeranja obejakta. Korak 1: Otvaranje novog dokumenta i podešavanje 1. Otvorite novi dokumenat u Flashu pomoću komande File > New > General Tab > Flash Document > OK 2. Izvršite podešavanje dokumenat opcijom Modify > Document. 3. Otvara se dijalog prozor kao na slici 9. 4. Upišite dimenzije koje su potrebne za prikaz filma odnosno podesite širinu i visinu (200 x 130 px) 5. Izaberite boju pozadine izborom neke od boja iz prozora za biranje boja. 6. Podesite brzinu prikaza filma (12fps) 7. Kliknite OK 8. Sačuvajte dokumenat File > Save Korak 2: Imenovanje slojeva Slika 9. Da bi imali kontrolu nad animacijom i elementima filma potrebno je da imenujete svaki sloj. Dobro je davati opisna imena slojevima u zavisnosti šta se od elemenata ili animacija izvršava na nekom od njih. 1. Da bi ste reimenovali sloj Layer 1, dva puta kliknite na njegovo ime i ukucajte novi naziv npr. "Motion Tween". (slika 10) Slika 10. 7

Korak 3: Crtanje i bojenje objekata Postavljeni su parametri pozornice (stage) i sada treba da kreiramo iobjekat. 1. Označite (selektujte) prvi frejm na vremenskoj osi i pomoću alatke za crtanje kružnih oblika Oval Tool nacrtajte krug. 2. Svaki oblik u Flashu se sastoji od popune (Fill) i ivične linije (Stroke). 3. Ako želite da promenite boju popune treba da kliknete na nju i pomoću kantice (Fill Color) obojite popunu. Ukoliko želite da promenite boju ivične linije selektujete ivičnu liniju i izaberete Ink Bootle Tool iz palete sa alatkama kako bi promenili boju. Korak 4: Kreiranje simbola U Flash-u kad je potrebno koristiti neki objekat više puta najbolje je pretvoriti ga u simbol. Kada se u Flashu primenjuje animacija motion tween objekti koji se animiraju moraju se pretvoriti u simbole. 1. Iz palete alatki izaberite alatku za selekciju (Selection tool) i selektujte ceo krug (popunu i kružnicu). Na slici 11 prikazani su neselektovan i selektovan krug.. Neselektovan krug Selektovan krug Slika 11 2. Kada ste kompletno selektovali krug sledeće je da ga pretvorite u simbol i to čete uraditi primenom komande iz File menija Insert > Convert to Symbol (F8). (Slika 12) Slika 12. 3. Otvara se dijalog prozor Symbol Properties. U tekst polju upišite naziv simbola lopta i u Behavior delu označite Graphic. Postavite da centar simbola bude u 8

sredini (Registration). Na taj način ste podesili da simbol bude grafički. Kliknite na OK. (Slika 13). Slika 13. 4. Nakon kreiranja simbola, simbol se smešta u biblioteku (Library).Ukoliko nemate otvoren prozor za prikaz sadržaja biblioteke (Library) možete ga ovoriti pomoću komande iz File menija Window > Library. 5. Kada se otvori prozor Library u njeme ćete videti simbol lopta koji ste napravili. Prevlačenjem simbola iz biblioteke na pozornicu postavljate kopije (instance) simbola. Korak 5: Postavljanje simbola na ključne frejmove 1. Dok je selektovan prvi frejm na vremenskoj osi, postavite krug koji je sada simbol u gornji levi ugao. 2. Selektujte 36.-ti frejm na vremenskoj osi i postavite da bude ključni frejm (Insert>Insert Keyframe (F6)). (slika 14.) Slika 14. 3. Dok je 36.-ti frejm selektovan pomerite simbol (krug) u donji desni ugao pozornice. Još je ostalo da primenimo komandu koja će da poveže kretanje lopte iz 1.-og u 36.-ti frejm. Korak 6: Primena animacije Motion Tween Zadnji korak prilikom kreiranja animacije tipa Motion Tween između frejma 1 i frejma 36 predstavlja definisanje samog Motion Tween-a. 1. Selektujete neki od frejmova između 1.-og i 36.-og frejma. 2. Desnim klikom miša otvora se padajuća lista iz koje izaberete komandu Create Motion Tween. (slika 15) 9

Slika 15. 3. Kada se primeni Motion tween između frejma 1 i 36, sloj na kome smo postavili animaciju izgledaće kao na slici 16. Slika 16. 4. Testirajte film pomoću komande Control > Test Movie. Napomene u vezi Motion Tween-a: 1. Kada ste napravili simbol i postavili njegovu kopiju na pozornicu možete naknadno i da uđete u režim izmene simbola tako što dva puta kliknete na njega u prozoru Library. Na taj način se otvara poseban prostor za izmenu simbola (boje popune i ivične linije, veličine i sl...) koji je naznačen pored naziva scene u kojoj se radi (Slika 17.). Kada ste završili promenu simbola, sve instance (kopije simbola) postavljene na pozornici se menjaju. Povratak iz režima za promenu simbola na Scenu se vrši pomoću dugmeta koji označava scenu. Oznaka režima za promenu simbola slika 17. 10

Properties Inspector prozor za podešavanje izgleda simbola Kada selektujete simbol na pozornici Property Inspector prozor omogućava da izvršite neke promene nad simbolom. Možete promeniti: širinu, visinu, poziciju na pozornici (x, y koordinate). Takođe možete i da promenite boju i podesite providnost. (slika 18.) Slika 18. Za promenu boje i providnosti simbola uradite sledeće: Selektujte simbol na pozornici pomoću alatke za selekciju Selection tool Iz padajuće liste Color izabarite opciju Tint i pomoću dodatnih parametara koji se pojave postavite novu boju simbola. Ostale opcije omogućavaju sledeće: o Brightness: Za podešavanje osvetljenja simbola o Alpha: Za podešavanje providnosti o Advanced: Omogućava postavljanje opcije Tint i Alpha u isto vreme. Pomoću gore navedenih opcija podešavanja boje, providnosti, osvetljenja sve promene koje se izvrše nemaju uticaj na simbol smešten u biblioteci nego samo na njegove kopije koje su na pozornici. Podešavanje parametara Motion Tween-a Prilikom primene Motion tween-a između izabranih ključnih frejmova mogu se podesiti i neki dodatni parametri koji se odnose na Motion tween. Može se podesiti rotacija objekat prilikom pomeranja jednog položaja u drugi. Rotacija se može vršiti u pravcu kazaljke na satu ili suprotno. Nakon primene Motion tween-a između prvog i poslednjeg frejma, selektujte neki od frejmova. U Properties prozoru podesiti parametre za usporavanje ili ubrzavanje animacije (Ease) Podesite smer rotacije u Rotate padajućoj listi. U tekst polju Times upišiti koliko puta želite da se izvrši rotacija. Testirajte film kako bi ste videli rezultate. 11

ZADACI ZA SAMOSTALAN RAD: Zadatak 1 Animacija frame by frame (0,5 bodova) Napraviti animaciju frame by frame u trajanju od 12 frejmova tako što ćete menjati položaj, boju, veličinu slova. Zadatak 2- Shape Tween (0,5 bodova) Napraviti animaciju Shape Tween u trajanju od 12 frejmova tako što ćete izvršiti transformaciju reči DIGITALNE u MULTIMEDIJE 1 Zadatak 3- Motion Tween (0,5 bodova) Napraviti animaciju Motion Tween u trajanju od 12 frejmova koja će da sadrži dva sloja. Na prvom sloju postavite loptu koja treba iz gornjeg levog ugla da se pomeri u donji desni ugao. (Podesite rotaciju lopte na CW, broj obrtaja na 3 i ubrzanje na -26). Na drugom sloju postavite senku lopte i podesite parametre za providnost, boju, osvetljenje simbola. 12