Multimediji

Laboratorijske vježbe 2014/2015

Univerztet u Banjoj Luci Tehnološki fakultet Predmet: Multimediji Školska godina: 2014/2015

Laboratorijska vježba broj 1:

Uvod u Adobe Flash Professional CS5

Student: _______________________ Broj indeksa: _______________________

Multimediji

Laboratorijske vježbe 2014/2015

UVOD Adobe Flash Professional CS5 je alat koji se koristi za kreiranje prezentacija, aplikacija ili drugih sadržaja koji odgovaraju na interakcije korisnika. Projekti krairani ovim alatom sadrže jednostavne animacije, video sardžaje, složene korisničke interfejse, aplikacije i kombinacije svega zajedno. Generalno, projekat napravljen u Flash-u može biti medijski bogata aplikacija koja u sebi sadrži slike, zvuk, video, specijalne efekte. Format fajla koji se kreira pomoću Flash-a je .swf format. On je veoma pogodan za isporuku preko Interneta, jer zbog svoje male veličine zahtjevaju veoma malo vrijeme procesiranja. Ovo je posljedica činjenice da Flash pri kreiranju projekata u velikoj mjeri koristi vektorsku grafiku koja zahtjeva manje memorije i prostora na disku od rasterske (bitmap) grafike. Vektorska grafika prikazuje slike pomoću geometrijskih oblika kao što su tačka, linije, krive ili poligoni, a temelji se na matematičkim jednačinama. Korištenje bitmap grafike u projektima rezultuje datotekama većih veličina, jer u ovom slučaju svaki pojedinačni piksel na slici predstavlja zaseban podatak. Odabirom grafičkih elemenata i pretvaranjem istih u simbole omogućava njihovo ponovno korištenje, te dodatno poboljšanje performansi kada se .swf fajlovi koriste online.

Kreiranje .fla fajla i dodavanje grafičkih elemenata Kako bi se generisala aplikacija u Flash Professional CS5, potrebno je kreirati vektorske i grafčike elemente korištenjem alata za crtanje i uvozom dodatnih medijskih elemenata kao što su audio, video ili slika. Zatim se korištenjem Timeline (hronološke ose) i Stage (pozornica) dijelova vrši pozicioniranje elemenata na radnoj površini, te način i vrijeme njihovog pojavljivanja. Daljim korištenjem Adobe ActionScript moguće je kreirati funkcije kako bi se specificirao način ponašanja elemenata unutar aplikacije. Za vrijeme kreiranja i uređivanja .fla fajla unutar Flash autorizovanog okruženja, korisnički interfejs je podjeljen u pet glavnih djelova kao što je prikazano na Slici 1. 

Dio Stage se ponaša kao platno (pozornica) kojom se definiše vidljiva površina tokom reprodukcije. Pravougaonog je oblika u koji se postavlja grafički sadržaj prilikom kreiranja dokumenta. Da bi se promjenio prikaz scene dok se u njoj radi, te

Multimediji







Laboratorijske vježbe 2014/2015

olakšalo postavljanje elemenata koje će scena sadržavati koristi se zumiranje, mreža (grid), vodiči i sl. Pozornica je promjenljivih dimenzija, tj. korisnik je može podesiti na željenu veličinu, boju i sl. Timeline kontroliše vrijeme u cilju preciziranja kada se koji od elemenata u filmu pojavljuje na sceni. Predstava počinje sa prvim frejmom i kreće se sa lijeva na desno. Prevlačenjem slojeva u hronološkom prozoru može se reorganizovati redoslijed slojeva grafike na sceni. Glavne komponenete hronologije su: slojevi (layers), okviri (frames) i pokazivači (playhead). Properties prikazuje kontekstualne informacije o atributima svakog izabranog objekata, promjenom opcija unutar ovog dijela podešavaju se parametri nekog objekta. Library (biblioteka) sadrži medijske elemente i simbole koje su uskadištene za projekat. Koristeći ovaj panel, može se upravljati i organizovati elementima projekta. Kada se objavi .swf fajl, samo stavke koje su se koristile u projektu iz biblioteke biće uključene u projekat, tako da će se nekorišteni elementi iz biblioteka „izbrisati“, tj. veličina fajla se neće povećati ako se one posebno ne izbrišu.

Slika 1:Flash Professional CS5 korisnički interfejs podjeljen u pet glavnih djelova.

ActionScript code omogućava dodavanje interaktivnosti u dokument koji se kreira. Npr., mogu će je dodati kod koji će simulirati dugme čijim klikom će se pojaviti nova slika na sceni. Takođe, na ovaj način se može dodati i logika aplikacijama koje se kreiraju, kako bi se elementi na sceni polašali u skladu sa reakicjama korisnika ili drugih uslova. Flash uključuje mnoge funkcije koje ga čine moćnim i jednostavnim alatom za korištenje kao što su ugrađeni efekti pokreta koji se mogu koristiti da se hronološki

Multimediji

Laboratorijske vježbe 2014/2015

animira element na sceni, unaprijed napisani dijelovi koda, specijalni efekti koji se mogu dodati medijskim objektima. Kada se završi kreiranje .fla fajla, on se objavljuje odabirom File > Publish (prečica: Shift+F12) čime se generiše kompresovana verzija datoteke sa ekstenzijom .swf. Za reprodukciju generisanog .swf fajla koristi se Adobe Flash Player u okviru web pregledača ili kao samostalna aplikacija. Iako se .fla fajl ne distribuira, uvijek je poželjno sačuvati njegovu kopiju. Ako je potrebno napraviti bilo kakve promjene, otvaranjem i prepravljanjem .fla fajla u Flash-u može se kreirati novi, korigovani fajl koji će se objaviti u obliku .swf formata.

Kreiranje jednostavnog .fla fajla Da bi se kreirao osnovni .fla dokument u okviru Flash-a potrebno je proći kroz nekoliko koraka:    







Kreiranje novog dokumenta (File > New) U okviru New Document dialog box-a potrebno je izabrati željeni tip datoteke (ActionScript 2.0 ili 3.0). Potvrditi odabir kreiranja novog dokumenta i tipa datoteke klikom na OK. Koristeći radni porstor i padajući meni koji se nalazi na gornjem, desnom dijelu ekrana može se odabrati pogodan raspored radnog prostora (preporuka: Essentials). Tako đe, svaki korisnik može kreirati vlastiti izgled svog radnog prostora, te ga memorisati kako bi mu isti bio na raspolaganju svaki put pri korištenju Adobe Flash Professional CS5, bez potrebe za njegovim ponovnim konfigurisanjem. Korištenjem mnogobrojnih alatki unutar opadajućeg menija može se vršiti mnoštvo podešavanja u okviru projekta koji se kreira, kao što je promjena uvećanja scene, promjena pozadine, itd. Ovaj korak podrazumijeva kreiranje kompletnog porojekta koji je pogodan za prikazivanje krajnjem korisniku. Na kraju je potrebno isti i snimiti korištenjem narebe File > Save.

Multimediji

Laboratorijske vježbe 2014/2015

RAD NA RAČUNARU Kreiranje dokumenta: 1. Kreirati novi .fla dokument (ActionScript 3.0 tip datoteke). 2. Ukoliko nije odabrano, izabrati Essentials prikaz radnog okruženja. 3. U okviru Properties menija odabrati veličinu pozornice 550x400 piksela, te promjeniti boju pozadine. Takođe, podesiti broj frejmova po sekundi na 24fps. 4. Kako u velikim projektima najčešće ima mnogo nivoa, preporuka je da se svakom od nivoa dadne adekvatno ime kako kasnije ne bi došlo do zabune. Stoga, promjeniti ime niova sa Layer 1 na animation. 5. Snimiti dokument u ranije kreiranom folderu Vježba1 sa imenom SimpleFlash.fla. Dodavanje ilustracija u dokument: Crtanje oblika je uobičajan zadatak u Flash-u. Ono se može raditi u dva režima, tj. Merge drawing mode (režim za crtanje) i Object drawing mode (crtež režim). U okvuru ove vježbe potrebno je odabrati Object drawing mode na samom dnu panela alatki (Slika 2.).

Slika 2: Odabir režima crtanja.

6. Iz menija Tools panel odaberite Oval tool kako biste nacrtali krug (za njegovo crtanje se koristi vektorska grafika, pa se isti može uređivati tokom kreiranja projekta Slika 3.). Odabrati podešavanja da krug bude bez ivica, a da mu je unutrašnjost bude u kontrastu sa pozadinom. Za dalje manipulisanje kreiranim krugom, njegovo pomjeranje na sceni i sl. koristiti Selection Tool ili druge raspoložive alatke.

Slika 3:Alatka za crtanje kruga, te način podešavanja boja okvira i unutrašnjosti kruga.

Multimediji

Laboratorijske vježbe 2014/2015

Kreiranje simbola i dodavanje animacija Nakon što ste kreirali element (nacrtali ga na pozadini) i podesili ga na željeni izgled, moguće je od njega kreirati simbol kako bi se isti koristio na više mjesta u okviru dokumenta bez potrebe za njegovim ponovnim kreiranjem. Simbol može sadržavati i bitmap i vektorske slike i animacije, zajedno sa drugim tipovima sadržaja. Za kreiranje tweened animacije uobičajeno je korištenje simbola. Flash animacije mogu biti izrađene na tri načina, tj. korištenjem MotionTween, Shape Tween ili Frame-by-Frame animacije. 7. Nakon što ste selektovali kreirani krug, odaberite Modify > Convert to Symbol (prečica F8) da biste pristupili Convert to Symbol dialog box-u (Slika 4). Simbol nazvati my_circle u okviru prostora za imenovanje, te korištenjem Type menija selektujte opciju Movie Clip.

Slika 4: Convert to Symbol dialog box.

8. Na scenu dodati plavu zvjezdu sa 5 krakova, te je konvertovati u simbol grafičkog tipa. Takodje, dodati i pravougaonik dimenzija 100x50 piksela na poziciji X=250, Y=300 na sceni. Pravougaonik pretvoriti u simbol tipa dugme (Button). Svaki od kreiranih simbola treba da bude na zasebnom nivou, npr. animation2, animation3. 9. Odabrati nivo animation2, u okviru Timeline-a dodati ključne frejmove 1 na mjesima 5., 10., 15. i 20. frejma. Odabirom ključnih frejmova grafički simbol zvjezde staviti na željene pozcije na sceni za konkretan frejm. Neki frejm se označava kao ključni frejm tako što se desnim klikom na isti odabere opcija Insert Keyframe. 10. Da biste testirali uspješnost kreirane animacije koristite Control > Test Movie. Animacija se automatski ponavlja, pa je za njeno prekidanje potrebno zatvoriti Test Movie prozor. Animacija se može pregledati prevlačenjem pozicije ozačenog frejma unutar Timeline prozora.

1

key frame – ključni frejm u okviru Adobe Flash Professional označava mjesto na vremeskoj osi gdje se pojavljuje novi simbol. On takođe može biti frejm gdje se uključuje neki ActionScript kod koji služi za kontrolu nekog aspekta kreiranog dokumenta. Prazan ključni frejm se može dotati na mjestima u okviru vremeske ose koja žele da se rezevršu za simbole koji de se u dokument naknadno dodati ili zaista trebaju biti prazni u okviru animacije. Označen je crnom tačkom na vremenskoj osi.

Multimediji

Laboratorijske vježbe 2014/2015

11. Na poziciji bilo kojeg frejma koji se nalazi između svakog od susjednih ključnih frejmova dodati grafičkom simbolu zvjezde Classic Tween. Ponovo testirati animaciju i uočiti razlike. 12. Pomeriti simbol my_circle na nivou animation na lijevu stranu tako da se nalazi izvan okvira pozornice. Desnim klikom na simbol pojavljuje se meni iz koga se odabirom Create Motion Tween opcije programu govori da ce se simbolu pridružiti animacija. Time se u okviru Timeline prozora povećava broj frejmova pridruženih projektu, jer se od korisnika očekuje da definiše krajnje mjesto simbola na sceni nakon zvršetka animacije. Broj frejmova koji se pridružuje odgovara broj frejmova po sekundi koji je odabran pri specifikaciji projekta, tj. u ovom slučaju 24fps. 13. Odabirom simbola my_circle i njegovim prevlačenjem preko scene do željene krajnje lokacije generiše se tweened animacija. Nakon ovoga, na sceni se može primjetiti označena putanja kojom će se animacija, tj. animirani objekt kretati. 14. Pomoću Selection Tool selektujte putanju ili simbol kako biste korigovali putanju kretanja kruga kroz scenu. 15. Da biste testirali uspješnost kreirane animacije koristite Control > Test Movie. Animacija se automatski ponavlja, pa je za njeno prekidanje potrebno zatvoriti Test Movie prozor. Animacija se može pregledati prevlačenjem pozicije ozačenog frejma unutar Timeline prozora. Napomena: Može se primjetiti da simbol zvijezde nestaje kada na vremenskoj osi nastupi 20. frejm, a zatim se opet ponavlja od 1. do 20. frejma. To je posljedica kraćeg trajanja animacije pridružene zvjezdi. Ovo se može prevazići dodavanjem još jednog ključnog frejma na pozciji 24. frejma, te dodavanjem animacije Classic Tween na prethodno opisan način. 16. Kako bi se postiglo da se i simbol dugmeta prikazuje na sceni tokom trajanja cijele animacije, potrebno je u okviru njegovog nivoa dodati da isti traje 24 fjrema (tj. onoliko koliko traje animacija ostalih elemenata). 17. Testirati ovako podešenu animaciju. 18. Kreirati novi nivo, nazvati ga animation4, te u njemu dodati tekst formata: Ime Prezime, željene boje i veličine. Pretvoriti tekst u grafički simbol imena my_name. Za ovaj simbol kreirati Motion Tween animaciju, za Basic Motion odabrati Bounce In koja se podešava u okviru Motion Editor-a (desni klik na Eases) te željenu tintu u okviru Color Effect-a.

Multimediji

Laboratorijske vježbe 2014/2015

19. Testirati ovako podešenu animaciju. 20. Kako bi tekst ostao duže na sceni od ostalih animacija, produžiti trajanje tekst animacije sa 24fps na 60fps, te ponovo testirati animaciju. 21. Kreirati novi nivo animation5, te u njemu dodati tekst formata: Broj indeksa (npr. 1/10). Tekst podjeliti na slovo po slovo format odabirom opcije Break Apart (selektovati tekst, pa desni klik za odabir opcije). Distribuirati brojeve po različitim nivoima, te svaki pretvoriti u grafički simbol, a prethodno kreirani nivo animation5 po želji izbrisati ili ne. 22. Označiti svaki od grfičkih simbola u okviru broja indeksa, te im dodjeliti Motion Tween animaciju. U okviru Timeline-a podesiti da svaka animacija za nardeni simbol u broju indeksa počinje nakon 5 frejmova u odnosu na prethodni simbol. Svakom od simbola dodati specifičan efekat u okviru Motion Editor-a. Testirati animaciju. 23. Za nivoe koji pripadaju grafičkim simbolima kreiranim pomoću teksta dodati na kraju trajanja animacije još 15 frejmova kako bi ime, prezime i broj indeksa ostali vidljivi i nešto nakon prestanka ostalih animacija.

Kreiranje .swf fajla i prikaz aplikacije u okviru brawser-a 24. Odabrati File > Publish Settings 25. U okviru Publish Settings dialog box-a odabrati tipove formata Flash (.swf) i HTML (.html). HTML fajl se koristi da se .swf fajl prikaže pomoću browser-a . U okviru HTML jezička verifikovati da je selektovano Flash Only za Template pop-up menija. 26. Odaberite OK. 27. OdaberiteFile > Publish da eksportujete .swf i .html fajlove spremane za prikaz na web-u (fajlove snimiti u ranije kreirani folder imena Vježba1). 28. Za verifikaciju uspješnog objavljivanja fajla korištenjem raspoloživog browser-a prikazati aplikaciju. Korištenjem nekog plejera, npr. Adobe Flash Player-a pokrenuti i .swf fajl. Napomena: Ne zaboraviti snimiti sve promjene koje su nastale pri kreiranju .fla fajla u okviru ove vježbe.