Multimediji Univerztet u Banjoj Luci Tehnološki fakultet Uvod u

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.

Download Report