Slobomir P Univerzitet Fakultet za Informacione tehnologije

Diplomski rad
Tema: Multimedijalna prezentacija u Macromedia Flash 8 alatu

Mentor: prof.dr. ore Babi Doboj, 2009.

Student: Mujo Zenianin, 44/05

Sadraj 1. Historijski razvoj multimedije 1.1 Od slike do interakcije 2. Macromedia Flash 2.1 Kada je nastao Flash 2.2 Prednosti i nedostaci koritenja Flash aplikacija 3. Uvod u Macromedia Flash 8 3.1 Poetni ekran 3.2 Okruenje Macromedia Flash 8 alata 3.2.1 Traka sa alatima 3.2.2 Osnovni Menu 3.2.3 Prozor sa Layer-ima 3.2.4 Frame prozor 3.2.5 Radna povrina 3.2.6 Prozor za vanjske objekte (Object Library) 3.2.7 Prozor za generalne postavke 4. Animacija u Flash-u 4.1 Frame-by-Frame animacija 4.2 Motion Tween animacija 4.3 Guide animacija 5. Interakcija u Flash-u 5.1 Action Script 5.2 Dugmad i akcije 5.3 Nevidljivo dugme 5.4 Kontrola Frame-ova pomou Labela 6. Audio zapisi u Flash-u 6.1 Umetanje zvuka u animaciju 7. Mo Action Script 2.0 jezika 7.1 Igrice u Flash-u 8. Multimedijalna prezentacija u Flash-u 8.1 Privredni pregled Opine Teanj 9. Budunost Flash tehnologija 10. Zakljuak 11. Prilog 12. Literatura 3 3 5 5 6 7 7 8 9 9 10 10 11 11 12 13 13 23 28 32 32 32 37 42 44 44 45 45 51 51 59 60 61 62

1. Historijski razvoj multimedije

1.1 Od slike do interakcije Jo u doba prahistorije, ljudi su ostavljali slikovne tragove na razliitim mjestima. Svoje ideje i kreativna umijea su crtali na zidovima peina, urezivali u drvo i sl. Ostavljali su pokoljenjima neke zapise o svome ivotu, svojoj duhovnosti, lovu i dr. Pojavom papira, ljudi su svoje ideje prenosili na isti, i tako su stvorili jedan vid likovne umjetnosti, tanije reeno prenosive likovne umjetnosti. Sada je likovna umjetnost postajala pristupana veem broju ljudi. Nakon naslikanih djela, nastaje fotografija. Prva fotografija nastala je 1820. godine, ali fotografiju kao pojam uvodi tek Sir John Herschel u 1839. Na slici dole je prva poznata forografija, nastala u 1825. godini.

Slika 1.1 Prva poznata fotografija 1825.god. U poetku su fotografije bile monohromatske, tj. crno bijele boje, ali su same po sebi predstavljale tehnoloku revoluciju. Nakon monohromih fotografija pojavljuju se fotografije u boji.

Slika 1.2 Prva fotografija u koloru

Poslije fotografije, ljudi su teili ka vjernijem predstavljanju dogaaja i okoline. Tako je nastala animacija. Animacija sama po sebi ne predstavlja nita drugo nego skup fotografija koje se smjenjuju u odreenom vremenskom intervalu, odnosno slike koje se smjenjuju u nekom odreenom vremenskom intervalu. Na slici dole, prestavljen je disk sa odreenim brojem slika. Postojala je tuba kroz koju se gledalo. Disk bi se zavrtio, i tako bi se vidjela smjena slika, tj. dobili bi efekat animacije.

Slika 1.3 Phenakistoscope 1893.god. Pojavom video kamere, ljudi su uspjeli predstaviti neke detalje iz svakodnevnog ivota. To su uglavnom bili kratki monohromatski dokumentarni filmovi. Iz dokumentarnih filmova razvijaju se igrani filmovi, koji su imali samo pokretne slike, ali ne i zvuk. To su bili tzv. nijemi filmovi. Krajem 1929.god. nastali su prvi filmovi praeni zvukom. To je bio poetak multimedije. Kasnije se pojavljiju i filmovi u boji. Iako su ljudi izumili sve gore navedeno, opet nisu bili zadovoljni. Poeli su teiti ka poveanju interakcije. To znai, da pored animacije, zvuka, teksta, uvedu i nivo komunikacije sa navedenim. Iz te tenje, nastao je alat koji je danas jako popularan, a to je Macromedia Flash.

2. Macromedia Flash
2.1 Kada je nastao Flash? Desetog aprila 1996. godine, nastaje software FutureSplash. Ovo je bila inicijelna verzija Flash-a, koja je imala samo osnovne alate za editovanje i timeline. U novembru 1996. godine, Macromedia mijenja naziv svog software-a iz FutureSplash u Macromedia Flash. Osobine su mu bile iste kao i predhodniku. U tabeli ispod u navesti ostale verzije Macromedia Flash software-a.

Slika 2.1 FutureSplash Animator Naziv Macromedia Flash 2 Macromedia Flash 3 Macromedia Flash 4 Macromedia Flash 5 Macromedia Flash MX Macromedia Flash MX 2004 Macromedia Flash 8 Godina Jun 1997. Maj 1998. Jun 1999. August 2000. Mart 2002. Noviteti Objektna biblioteka (Object Library) Movieclip elementi, Javascript plug-in Interne varijable, polje za unos, ActionScript, I MP3 streaming ActionScript 1.0, XML podrka, ugraene komponente, HTML text formatiranje Video kodek(Sorenson Spark), unicode, UI Komponente, kompresija, ActionScript vektorsko crtanje API

Septembar Actionscript 2.0, JSAPI, timeline efekti 2003. Septembar Filteri, olakana kontrola animacije, VP6 video 2005. codec, import videa Razvoj Macromedia Flash software-a

Postoje i kasnije verzije Flash-a u izdanju Adobe, ali ja u se zadrati na verziji Macromedia Flash 8, jer u istoj razvijam i praktini dio rada.

2.2 Prednosti i nedostaci koritenja Flash aplikacija Mnogi strunjaci za izradu interaktivnih web stranica izbjegavaju Flash tehnologiju kao neodgovarajuu zbog nekih njenih nedostataka kao to su: problemi oko odabira veliine Flash stranice da bi se ona prikazivala isto na svim rezolucijama, predugo uitavanje, loe pozicioniranje na web pretraivaima te nemogunost pretraivanja stranica. Ipak ti se nedostaci pokuavaju rijeiti kroz nove razvoje alata. Meutim, u obzir treba uzeti i sve pozitivne strane koritenja programa kao to su: koritenje vektorske grafike to omoguuje skaliranje sadraja bez gubljenja kvalitete, uvanje jednom uitanih Flash stranica na PC-u ako se sadraj nije mijenjao (izbjegava se kasnije ponovno uitavanje te se tako utjee na koliinu utroenog web prometa), poveana interaktivnost i standardizirane web stranice koje se u svim web pretraivaima prikazuju jednako, za razliku od obinog HTML sadraja.

3. Uvod u Macromedia Flash 8

Flash 8 nije samo jedan alat. U sebi on sadri gomilu manjih alata za razvoj interaktivne animacije. Moemo zamiljati Flash kao multitasking aplikaciju. To je ilustrativni program, video/zvuni/image editor, animacioni alat, skripting alat i dr. Flash se ne koristi samo za izradu animacija i igrica. To je ujedno i jedan od monijih aplikacija za razvoj web stranica. Sam Flash 8, sadri ogroman broj mogunosti za razvoj interaktivnih multimedijalnih sadraja. U ovom radu, ja u se maksimalno potruditi da doaram mo Flash-a predstavljajui rad sa MovieClip elementima, dugmadima i ActionScript 2.0 jezikom, kao olakanom objektno orjentisanom jeziku. 3.1 Poetni ekran Prilikom poziva samog programa, u startu se pojavljuje ekran na kojemu se nude odreene akcije. Tako moemo da otvorimo ve postojei rad, da kreiramo novi, ili pak da radimo pomou ve kreiranih radova koji dolaze u samoj instalaciji Flash-a.

Slika 3.1 Poetna ekranska forma Mi emo izabrati kreiranje novog Flash dokumenta.

3.2 Okruenje Macromedia Flash 8 alata Na slici dole, oznaeni su najvaniji dijelovi Flash 8 okruenja.

Slika 3.2 Izgled Macromedia Flash 8 okruenja 1. 2. 3. 4. 5. 6. 7. Traka sa alatima Osnovni Menu Prozor sa Layer-ima Frame prozor Radna povrina Prozor za umetanje vanjskih objekata (Object Library) Prozor za generalne postavke

3.2.1 Traka sa alatima

Slika 3.3 Alatna traka 3.2.2 Osnovni Menu Osnovni Menu je sastavljen od standardnih elemenata. Na slici dole vidimo sljedee elemente: File, Edit, View, Insert, Modify, Text, Commands, Control, Window, Help.

Slika 3.4 Osnovni Menu

3.2.3 Prozor sa layer-ima U ovom dijelu postavljamo jedan ili vie Layer-a. Strunjaci iz oblasti animacije u Flash-u kau da je za jedan pokret potrebno napraviti vie Layer-a, iz razloga to je lake popravljati odvojene dijelove i iz razloga to imamo bolju kontrolu nad dogaajima. To znai, dugmad emo postaviti na poseban Layer, pozadinu na poseban, MovieClips na posebne, i tako za ostale elemente. Ustvari, Layer-i slue za bolju organizaciju samog rada.

Slika 3.5 Prozor sa Layer-ima 3.2.4 Frame prozor Frame ili okvir je ustvari prostor u koji smjetamo odreene elemente, promjene isl. Kasnije emo spomenuti da se na Frame moe postaviti akcija, odnosno definisaemo ta e se desiti kada se naemo na tom Frame-u. Frame obuhvata i TimeLine, to znai da se u tom dijelu kontrolie trajanje i brzina promjena Frame-ova. Uzmimo jedan primjer. Ako postavimo da nam je potrebno da naa animacija traje 5 sekundi i ukoliko postavimo brzinu promjena 15 Frame-a u sekundi, to znai da e nam za to trebati ukupno 5x15 Frame-a, tj. 75 Frame-ova.

Slika 3.6 Frame prozor

10

3.2.5 Radna povrina Na radnoj povrini crtamo odreene elemente, stavljamo slike, dugmad itd. Ustvari, kao to u Microsoft Word-u imamo povrinu na kojoj piemo, tako i u Flash-u imamo povrinu na kojoj izvodimo odnosno kreiramo nae ideje.

Slika 3.7 Radna povrina 3.2.6 Prozor za umetanje vanjskih objekata (Object Library)

Slika 3.8 Prozor za umetanje vanjskih objekata 3.2.7 Prozor za generalne postavke

11

U ovome dijelu, kao to i sam naziv kae, vrimo generalne postavke radne povrine i TimeLine-a. Tako npr., moemo postaviti radni okvir na neku odreenu rezoluciju, moemo automatski podesiti boju pozadine, i veoma bitno, moemo podesiti brzinu smjene izmeu samih Frame-ova.

Slika 3.9 Prozor za generalne postavke

4. Animacija u Flash-u
12

U principu, postoje 3 vrste animacija u Flash-u i to: Frame-by-Frame animacija, Motion Tween animacija i Guide animacija. Sada emo detaljnije kroz primjere obraditi jednu po jednu vrstu animacije. 4.1 Frame-by-Frame animacija elimo napraviti animaciju broda na moru koritenjem sve 3 navedene tehnike. Prvo emo raditi najduu, i to Frame-by-Frame animaciju. Frame-by-Frame animacija nije nita drugo nego promjene nekog objekta iz Frame-a u Frame. Na primjer e biti detaljno opisan tekstom i slikama. Odmah na poetku emo rei da e naa animacija trajati 3 sekunde, prozor e biti veliine 640x480 pixel-a, i staviemo da 15 Frame-a odgovara jednoj sekundi.

Slika 4.1 Generalne postavke Na poetku emo napraviti 4 Layer-a. Imenovaemo ih na sljedei nain: Pozadina, Moreiza, Moreispred i Brod. Pozadinu emo napraviti kao boju neba, znai neku svjetloplavu varijantu, napraviti emo neki efekat prelaska plave u bijelu. Moreiza layer bie tamnoplave boje, a imenovan je zato to e taj dio mora biti iza broda. Prirodno je da je brod potopljen jednim svojim dijelom u vodi, a da bi dobili takav efekat, koristiti emo layer Moreispred, i u principu, taj dio mora je u fokusu. Sam brod e biti na element koji e biti animiran. Layere dodajemo klikom na dugme Insert layer.

Slika 4.2 Dodavanje novog Layer-a

13

Slika 4.3 Dodani i imenovani Layer-i Sada prelazimo na crtanje samih elemenata. Crtaemo pozadinu, more ispred, more iza, a sliku broda emo umetnuti u Object Library i bie tipa GIF. Potrebno je napomenuti da kada crtamo pojedine elemente, obavezno moramo oznaiti Layer sa nazivom koji odgovara nacrtanom. Takoe, kako crtanje bude napredovalo, zavreni dio posla bilo bi potrebno zakljuati, da ne bi mogli vie da ga promijenimo. Layer zakljuavamo tako to kliknemo na taku ispod simbola katanca. To e biti uoljivo na slikama.

Slika 4.4 Pozadina

14

Slika 4.5 More iza

Slika 4.6 More ispred

15

Sada emo umetnuti brod u Object Library. Umetanje se vri klikom na Menu stavku File/Import/Import to Library i naemo gdje je slika naega broda. Nakon toga, sliku emo prenijeti na radnu povrinu.

Slika 4.7 Brod Prelazimo na animaciju Frame-by-Frame. Prije svega zakljuati emo sve Layer-e, osim Layer-a Brod. Sa njim emo raditi u nastavku. Potrebno je umetnuti novi Frame. Novi Frame umeemo tako to oznaimo prazne Frame-ove iza popunjenih i kliknemo tipku F6.

Slika 4.8 Selekcija praznih frame-ova

Slika 4.9 Klikom na F6 umetnuti su novi Frame-ovi

Kada smo umetnuli nove Frame-ove, sada emo izvriti pomijeranje broda, jer smo ve naveli da je to predmet nae manipulacije, odnosno sada pravimo pokret samoga broda.

16

Slika 4.10 Frame1

Slika 4.11 Frame2

Tako emo sada uraditi sa svim ostalim Frame-ovima. Ukupno e biti 45 Frame-ova, jer smo rekli da e naa animacija trajati 3 sekunde a sekunda odgovara broju od 15 Frame-ova. Na slikama gore, nije uoljiv pomjeraj niti element animacije, zato u predstaviti itavih 45 pomjeraja u slikama Frame po Frame.

Slika 4.12 Frame3

Slika 4.13 Frame4

Slika 4.14 Frame5

Slika 4.15 Frame6

17

Slika 4.16 Frame7

Slika 4.17 Frame8

Slika 4.18 Frame9

Slika 4.19 Frame10

Slika 4.20 Frame11

Slika 4.21 Frame12

Slika 4.22 Frame13

Slika 4.23 Frame14

18

Slika 4.24 Frame15

Slika 4.25 Frame16

Slika 4.26 Frame17

Slika 4.27 Frame18

Slika 4.28 Frame19

Slika 4.29 Frame20

Slika 4.30 Frame21

Slika 4.31 Frame22

19

Slika 4.32 Frame23

Slika 4.33 Frame24

Slika 4.34 Frame25

Slika 4.35 Frame26

Slika 4.36 Frame27

Slika 4.37 Frame28

Slika 4.38 Frame29

Slika 4.39 Frame30

20

Slika 4.40 Frame31

Slika 4.41 Frame32

Slika 4.42 Frame33

Slika 4.43 Frame34

Slika 4.44 Frame35

Slika 4.45 Frame36

Slika 4.46 Frame37

Slika 4.47 Frame38

21

Slika 4.48 Frame39

Slika 4.49 Frame40

Slika 4.50 Frame41

Slika 4.51 Frame42

Slika 4.52 Frame43

Slika 4.53 Frame44 Moda pomalo smijeno izgleda predstavljanje jedne po jedne slike, ali moe umnogome vjernije predstaviti animacionu metodu Frame-by-Frame. Kada je sve uraeno, potrebno je snimiti animaciju. Ja sam snimio kao Brod.fla.

Slika 4.54 Frame45 Nakon snimanja potrebno je izvriti testiranje animacije. To se radi na sljedei nain.Iz menija izaberemo Control/Test Movie. Flash automatski pravi datoteku Brod.swf i istu je mogue ve distribuirati. Potrebno je napomenuti da Macromedia Flash 8 prilikom instalacije,

22

automatski instalira i Flash Player8. Brod.fla i Brod.swf dostavljeni su na CD-u u direktorijumu Primjeri i poddirektorijumu FrameByFrame.

Slika 4.55 Izgled naeg rada u Flash Player-u Nedostatak ove metode je to to je jako spora i zahtijeva mnogo strpljenja i preciznosti. 4.2 Motion Tween animacija Zato raditi komplikovanije i tee metode kada imamo dosta jednostavnije. Motion Tween animacija je klasian primjer toga. Koristiti emo isti primjer. Napraviti emo iste Layer-e i koristiti emo istu sliku. Ali, sada ne smijemo animirati istu GIF sliku broda. Moramo napraviti Movie Clip od iste. ta je to Movie Clip? Movie Clip je ustvari animacija koja je ukljuena u neku drugu animaciju, a takoe ta animacija moe unutar same sebe imati druge animacije. Izvrenje Movie Clip elemenata je nezavisno, tj. moemo ga koristiti bilo gdje i bilo kada. Ova vrsta simbola u Flash-u moe u sebi sadravati druge simbole kao npr. dugmad, slike i sl. Prednost koritenja Movie Clip-ova je ta to moemo jednu veliku animaciju razbiti na vie manjih. Kao i glavna scena, Movie Clip ima svoje Layer-e, Frame-ove, TimeLine i radnu povrinu. Movie Clip daje mo Flash aplikaciji i jedan je od osnovnih simbola kojima postiemo veu fleksibilnost u radu. Idemo sada pretvoriti nau sliku broda u Movie Clip. To emo uraditi kada kliknemo desnim klikom na brod i izaberemo Convert to Symbol.

23

Slika 4.56 Konverzija u simbol Nakon toga nam se pojavljuje dijaloki okvir u kome moemo izabrati da li e na objekat biti Movie Clip, dugme ili obina grafika. Mi emo izabrati Movie Clip, i dati emo mu ime Brod1, zato to ve postoji naziv grafika Brod, a duplicirana imena ne smiju postojati. Nakon toga klikamo na dugme OK za potvrdu konverzije.

Slika 4.57 Movie Clip Brod1 Stime je na Movie Clip zavren i sada unutar njega moemo da radimo. Da bismo bili uvjereni da smo uspjeli napraviti na Movie Clip, dovoljno je da samo obratimo panju na Object Library panel, i on e biti tu smjeten.

24

Slika 4.58 Movie Clip u Object Library panel-u Kada smo napravili Movie Clip, sada emo raditi sa njim. Prvo emo duplo kliknuti na Movie Clip Brod1 u Object Library panel-u. Kada to uradimo, ulazimo u Movie Clip i sada moemo da unutar njega pravimo animaciju. Prvo emo imenovati interni Layer u Brod.

Slika 4.59 Movie Clip Brod1 Sada emo napraviti Motion Tween animaciju unutar samo Movie Clip-a. Prvo to trebamo uraditi jeste da oznaimo 45. Frame.

25

Slika 4.60 Oznaen je 45. Frame Nakon toga kliknuemo na F6. Na slici dole moemo vidjeti da su se svi Frame-ovi od broja 1 do broja 45 popunili.

Slika 4.61 Dogaaj nakon klik-a na F6 Sada emo oznaiti Frame broj 44, tj. onaj u kojem je ucrtan mali pravougaonik.

Slika 4.62 Frame 44 U donjem dijelu ekranske forme sada nam je ponuen Tween. Iz njega emo izabrati Motion. Kada to uradimo, od prvog Frame-a pa do 44. pojaviti e se strelica, to je znak da je Motion Tween prihvaen. Ako se pojave crtice, znai da Tween nije uspio.

Slika 4.63 Pozivanje Motion Tween i pojavljivanje strelice na Frame okviru

26

Sada emo oznaiti Zadnji Frame i uzeemo sliku broda i pomjeriti emo je udesno.

Slika 4.64 Prije Sada se vraamo na glavnu scenu klikom na Scene 1.

Slika 4.65 Poslije

Slika 4.66 Povratak na glavnu scenu Kada se vratimo u glavnu scenu, prvo emo snimiti na rad. Na glavnoj sceni moemo primijetiti da sada imamo samo jedan Frame. To je velika uteda na glavnoj sceni, i naravno dosta manje posla smo obavili. Sada emo testirati nau animaciju. Vidjeti emo da se brod kree. Sada ve poinjemo da uviamo jedan problem. Na brod se kree pravolinijski. Gubimo efekat da brod plovi. Zaista, mi smo skratili posao, ali isto tako izgubili smo neke efekte. Ovaj problem emo rijeiti kada budemo radili Guide animaciju. Ovaj primjer se nalazi na CD-u u direktorijumu Primjeri i poddirektorijumu MotionTween.

27

Slika 4.67 Glavna scena 4.3 Guide animacija Guide nije nita drugo, nego krivulja. ta predstavlja ta krivulja? Kada nacrtamo krivulju, mi moemo navesti da se na Movie Clip Kree po istoj. Uz pomo Guide animacije moemo napraviti kompleksne animacione pokrete. Koristiti emo se istim primjerom. Napraviemo iste Layer-e i isti Movie Clip. Unutar Movie Clip-a Brod1, napraviti emo jo jedan Layer kojem emo dati naziv Krivulja.

Slika 4.68 Dodavanje novog Layer-a Krivulja Sada emo kliknuti desnim klikom na Layer krivulja i iz padajueg Menu-ja emo kliknuti na Guide. Na Layer mijenja vizuelni izgled. Pored naziva Layer-a treba se pojaviti sliica ekia.

28

Slika 4.69 Kreirani Guide Sada emo kliknuti lijevim klikom mia na Layer Brod i nanijeemo ga na Layer Krivulja. Kada to uradimo Layer krivulja mora dobiti vizuelni izgled kao na slici dole.

Slika 4.70 Formirani Guide Nakon toga, Layer Brod emo zakljuati i prijaviti emo ga kao nevidljivi iz razloga tog da nam ne smeta prilikom crtanja krivulje.

Slika 4.71 Zakljuan i nevidljivi Layer Brod Sada emo oznaiti 1. Frame Layer-a Krivulja i na radnoj povrini emo nacrtati jednu krivulju pomou etke iz alatne trake. Ja u nacrtati neku talasastu krivulju radi postizanja efekta plovidbe.

29

Slika 4.72 Nacrtana krivulja Nakon toga emo otkljuati i postaviti da je vidljiv Frame Brod. Sada emo oznaiti 45. Frame Layer-a Krivulja i Brod i kliknuti na dugme F6. Frame-ovi izmeu 1. i 45. Layer-a e biti popunjeni. Sada emo selektovati Layer Brod i Prvi Frame navedenog Layera. Nakon toga emo postaviti brod na poetak krivulje. Prije toga je potrebno takoe napraviti Motion Tween na Layer-u Brod.

Slika 4.73 Brod na poetku Krivulje Sada emo oznaiti zadnji Frame Layer-a brod i prenijeemo sliku broda na kraj krivulje.

30

Slika 4.74 Brod na kraju krivulje Vraamo se na glavnu scenu, snimimo na rad, i testiramo ga. Sada e se na brod kretati po krivulji i s time smo ostvarili efekat plovidbe. Ovaj primjer se nalazi na CD-u u direktorijumu Primjeri i poddirektorijumu Guide. U navedenom primjeru vidjeli smo da su Guide i Motion Tween koritene zajedno. Inae se to tako i radi. Krivulja sama po sebi ne predstavlja animaciju, nego samo sredstvo kojim e se ostvariti animacija. Potrebno je napomenuti da se Guide i Motion Tween animacije mogu raditi i na glavnoj sceni, ali ja to nisam radio iz razloga to sam htio pokazati prednosti koritenja Movie Clip-a. Svaka od gore navedenih metoda ima svoje prednosti i mane. Ali, sve tri su potrebne. Postavimo sebi pitanje. Zato koristiti Motion Tween i Guide na sam 5 Frame-ova? To moemo, ali ipak je u tom sluaju bolje odraditi Frame-by-Frame, iz razloga to neemo izgubiti jako mnogo vremena. Ali, ako se radi o vie Frame-ova, onda je stvarno suludo koristiti Frame-by-Frame.

5. Interakcija u Flash-u
31

5.1 Action Script ActionScript je objektno-orijentisani programski jezik koji se koristi za dodjeljivanje interaktivnosti (kao to su padajui meniji, tekstovi za unos podataka i sl.) Flash dokumentima, izradu animacija, ali i za rad s bazama podataka u nekim programima (npr. Alpha Five). Prvobitno je zamiljen da ima ulogu upravljanja jednostavnim 2D animacijama, ali su kasnije verzije dobile niz novih funkcionalnosti za razvoj igrica na webu i bogatih Internet aplikacija. Action Script je takoe i skriptni jezik baziran na ECMAScripts. ECMAScript je skriptni jezik koji je standardizovan od strane ECMA International u ECMA-262 Specifikaciji i ISO/IEC 16262. Ovaj jezik se najvie koristi na Web-u. i to najvie u formi svoja 3 najbolja predstavnika i to JavaScript, ActionScript i Jscript. Flash 8 koristi Action Script 2.0, ali ima podrku i za Action Script 1.0 iz ranijih verzija ovoga alata. Predstavljen je septembra 2003.godini u verziji Macromedija Flash MX 2004. Napravljen je iz tenje da korisnik moe razvijati kompleksnije stvari kao to su npr. igrice. Danas je internet pretrpan Flash igricama, a njih ne bi bilo mogue napraviti bez Action Script 2.0 jezika. 5.2 Dugmad i akcije Nakon filma, ovjek je teio ka tome da ne gleda samo film, ve da i sam uestvuje u razvoju radnje u nekom filmu. Tako je nastala interakcija. Uzmimo samo primjer zabavnog software-a, u kojem mi vodimo glavnog junaka kroz radnju, i odluujemo o zavretku. Interakcija u Flash-u je realizovana dugmadima i ActionScript kodovima. Dugmad u Flash-u ne predstavljaju nita drugo nego simbol pomou kojega utjeemo na animaciju i Frame-ove. Mi emo u ovome dijelu detaljno obraditi kreiranje, postavljanje i dodavanja akcija na dugmad. Akcije se ne moraju odnositi samo na dugmad. One mogu biti postavljene na odreeni Frame. Npr. kada na red doe izvravanje 20. Frame-a, da odatle skoi na 50. isl. Akcije mogu biti postavljene i na Movie Clip. Znai, akcije mogu biti samo na dugmadima, na Frame-ovima i na Movie Clip-ovima. Akcije na dugmadima oznaavaju ta e se desiti klikom na dugme, a akcije na Frame ta e se desiti ulaskom u taj Frame. Koristiti emo primjer iz Guide animacije, s ime emo zadrati kontinuitet u radu. Zadatak nam je da ne pone odmah da se odvija animacija, nego tek kada kliknemo na dugme Start. Znai napraviti emo dugme Start. Takoe, napraviti emo dugme Pauza, odnosno dugme kojim emo prekinuti animaciju. Da bi zaustavili automatsko startanje animacije, postaviti emo neku akciju na Frame. Pa ponimo. Prvo emo kreirati dugmad. Dugmad kreiramo tako to iz Menu-a Insert izaberemo New Symbol.

32

Slika 5.1 Umetanje novog simbola Klikom na New Symbol, pojavljuje se dijaloki okvir gdje imamo ponueno da napravimo Movie Clip, dugme i grafik. Mi emo izabrati dugme i nazvati emo ga Start. Kliknimo na dugme OK i nae dugme e se pojaviti u Object Library Panel-u.

Slika 5.2 Kreiranje dugmeta Sada emo dvoklikom pozvati dugme i moi emo ga crtati. Dugme ima sljedea stanja: Up, Down, Over, Hit. Up stanje je ono stanje dugmeta u kojem se nalazi kada ne nailazimo preko njega, tj. to je njegovo fiksno stanje. Down stanje je stanje dugmeta kada ga kliknemo. Over je stanje kada preemo preko njega a Hit stanje je nevidljivo dugme. Kasnije emo objasniti detaljnije pojam nevidljivog dugmeta.

Slika 5.3 Stanja dugmeta Sada emo kreirati dugme. Ja u kao oblik dugmeta uzeti oblak. Kada je aktivno biti e bijele boje. Na dugmetu e pisati Start, Font Comic Sans.

33

Slika 5.4 Up stanje dugmeta Klikom na tipku F6 prelazimo na stanje Over. Na Over stanju emo promijeniti boju oblaka u plavu.

Slika 5.5 Over stanje dugmeta

34

Ponovo klikamo F6 i pravimo Down stanje dugmeta. Sada emo promijeniti boju u utu.

Slika 5.6 Down stanje dugmeta Hit stanje neemo zasada dirati. Neka ostane prazno. Vratiti emo se na glavnu scenu i kreirati emo dugme Pauza na isti nain. Na glavnoj sceni, napraviti emo novi Layer koji emo nazvati Dugmad. Staviti emo ga iznad svih ostalih Layer-a, da bi bio vidljiv. Veoma je vana pozicija Layer-a. Onaj Layer koji je na vrhu, njegovi elementi su stavljeni u fokus iznad ostalih elemenata. Kada kreiramo Layer Dugmad, u njegov Prvi Frame emo nanijeti napravljena dugmad.

Slika 5.7 Layer Dugmad

35

Stanja dugmadi na glavnoj sceni e zavisiti od nae akcije. Ako ih ne diramo, oblaci e biti bijele boje, ako preemo preko njih poplavie i ako ih kliknemo poutjeti e.

Slika 5.8 Up

Slika 5.9 Over

Slika 5.10 Down

Potrebno je naem Movie Clip-u dati naziv. To emo uraditi tako to emo jednostavno kliknuti na njega u glavnoj sceni i u dosnjem lijevom uglu pod Instance name unijeti brod. Ime instance moramo dodati iz razloga to emo manipulisati sa Frame-ovima unutar Movie Clip-a Brod1.

Slika 5.11 Dodavanje imena instanci Sada emo napraviti novi Layer i nazvati emo ga akcije. Na prvom Frame-u akcija, kliknuti emo desnim klikom i ii na action. Klikom na Actions otvara se panel akcija u kojem emo kucati Action Script kod. Mi emo unijeti brod.stop();. To znai da kada se pokrene animacija, animacija unutar Movie Clip Brod1 e biti zaustavljena.

36

Slika 5.12 Akcija stop Sada emo dodati akcije na dugmad. Desnim klikom na dugme Start, idemo na Actions i unosimo akciju: on(release){ brod.play(); } To znai da kada odpustimo dugme Start, animacija unutar Movie Clip-a Brod e poeti. Brod u kodu predstavlja naziv instance. Na dugme Pauza unosimo sljedeu akciju: on(release){ brod.stop(); } Ovime smo zavrili dodavanje akcija. Snimimo na rad, testirajmo ga, i vidjeti emo da tek kada kliknemo na dugme Start, naa animacija e poeti. Klikom na dugme Pauza, animacija e se zaustaviti. Ovdje je na posao sa dugmadima zavren. Ovaj primjer se nalazi na CD-u u direktorijumu Primjeri i poddirektorijumu DugmadIAkcije. 5.3 Nevidljivo dugme Pored gore navedenih dugmadi, Flash 8 ima i tzv. nevidljivu dugmad. U emu je trik? Nevidljivo dugme je dugme koje ima samo stanje Hit. Njegov okvir se na radnoj povrini vidi, ali prilikom testiranja i konverzije u Flash Movie, dugme je nevidljivo. Idemo sada uraditi jedan primjer. Koristiti emo nau animaciju Frame-By-Frame. Sada emo na animaciji dodati text labelu i napisati emo Autor. Preko labele emo napraviti nevidljivo dugme, i klikom na to mjesto skoiti emo na 46. Frame, na kojem emo predhodno napraviti podatke o autoru. Sada emo prvo napraviti jedan novi Layer koji e se zvati Text. Kada napravimo Layer Text, na prvi Frame emo iz alatne trake dodati labelu pomou Text Tool. Ukucati emo text Autor. Kada uradimo to, Selektovati emo 45. Frame Text Layer-a i kliknuemo F6. Polja od 1. Frame-a do 45. Frame-a e biti popunjena automatski, i na svim Frameovima e biti vidljiv text Autor. 37

Slika 5.13 Kreiranje textualne labele Sada emo napraviti nevidljivo dugme. Znai, Insert/New Symbol, izabrati emo dugme i dati emo mu ime NeVidisMe. Na stanju Hit, emo nacrtati jedan pravougaonik koji moe biti bilo koje boje.

Slika 5.14 Dugme NeVidisMe

Slika 5.15 Stanje Hit

38

Nakon toga, vraamo se na glavnu scenu. Kreiraemo jo jedan Layer kojem emo dati ime Dugme. Na prvom Frame-u ovoga Layer-a nanijeemo nae dugme, ali obavezno iznad teksta Autor, zatim emo selektovati 45. Frame Dugme Layer-a i kliknuti emo F6, da bi dugme bilo aktivno u toku cijelog izvoenja animacije. Na slici dole, jasno je vidljivo dugme preko labele Autor.

Slika 5.16 Nevidljivo dugme Sada emo se pozicionirati na 46. Frame Layer-a pozadina, kliknuti F6 i dodati emo novi Frame. Na 46. Frame-u Layer-a Pozadina izbrisati emo sve sa radne povrine. Umjesto toga nacrtati emo kvadrat crvene boje, i u njemu emo dodati text o autoru. Na slici dole detalji.

Slika 5.17 Podaci o autoru

39

Nakon to smo to napravili, sada moramo da napravimo jednu akciju na Frame. Zato. Kada bi pustili da se animacija odvija slobodno, u svakom novom ciklusu animacije, vidjeti e se i podaci o autoru. Mi to ne elimo. Sada emo dodati novi Layer na glavnoj sceni i nazvati emo ga Akcije. Selektovati emo 45. prazni Frame Layer-a akcije i kliknuti F6. Na 45. Frameu dodati emo akciju: gotoAndPlay(1); Sada smo omoguili da kada pokrenemo animaciju, im se izvri ulazak u 45. Frame, vratiti e se na 1. Frame. gotoAndPlay znai idi i nastavi animaciju, a broj unutar zagrada oznaava na koji Frame se vraamo.

Slika 5.18 Akcija za povratak na 1. Frame svih Layer-a Sada emo dodati akciju na nae nevidljivo dugme. Desnim klikom na nevidljivo dugme, izaberemo Actions i unosimo sljedeu akciju: on(release){ gotoAndStop(46); } Objanjenje: kada odpustimo tipku na dugme, skoi na 46. Frame i zaustavi se. Znai kada kliknemo na nae dugme, vidjeemo podatke o autoru. Ovdje sada postoji jedan problem. Kada uemo u 46. Frame, kako se vratiti na animaciju? Odgovor je jednostavan. Napraviti emo jo jednu labelu na 46. Frame-u i unijeti emo text Povratak. Preko nje emo prenijeti opet nae nevidljivo dugme, ali ovoga puta emo napraviti sljedeu akciju: on(release){ gotoAndPlay(1); } Ovime smo omoguili povratak u nau animaciju. Nakon toga, snimiemo i testirati emo na rad. Na slikama ispod e biti vidljivi rezultati rada. Ovaj primjer se nalazi na CD-u u direktorijumu Primjeri i poddirektorijumu NevidljivoDugme.

40

Slika 5.19 Klikom na nevidljivo dugme iznad texta Autor skaemo na 46. Frame animacije

Slika 5.20 Klikom na nevidljivo dugme iznad texta Povratak skaemo na 1. Frame animacije

41

5.4 Kontrola Frame-ova pomou Labela Kontrola Frame-ova pomou unosa broja Frame-a je dobra, ali da li je i fleksibilna. Na mali broj Frame-ova ova metoda je odlina. ta se deava kada imamo npr. 10.000 Frame-ova? ovjeku je u principu tee pamtiti brojeve. Kada imamo neku kompleksnu animaciju, veliki broj skokova, morali bi stalno i iznova provjeravati da li smo unijeli pravi broj Frame-a. Kako rijeiti taj problem? Odgovor je jednostavan. Koristiti emo Labele na Frame-ove. Labela na Frame je nita drugo nego imenovanje odreenog Frame-a. Imena dajemo pomou asocijacija ili eventualno punih rijei. Tako e kontrola nae animacije i prohod kroz Frame-ove biti dosta laki i jednostavniji. Koristiti emo predhodni primjer, tj. nevidljiva dugmad. Prvo to moramo uraditi je dodati novi Layer Labele na glavnoj sceni. Prvi Frame Layer-a Labele emo imenovati kao prvi. To emo uraditi ako selektujemo 1. Frame i u donjem lijevom uglu u dijelu Frame label unesemo naziv Frame-a.

Slika 5.21 Dodavanje Labele na Frame Da biste bili sigurni da ste uspjeno napravili Labelu na Frame, na Frame-u koji ima labelu pojaviti e se znak slian crvenoj zastavici.

Slika 5.22 Oznaka Labele

42

Sada emo na isti nain napraviti Labelu i na 46. Frame Layer-a Labele. Prvo emo kliknuti na tom mjestu F6 i onda emo navesti naziv Labele. Labelu emo nazvati aut to je asocijacija na autora. Nakon toga emo napraviti samo male izmjene koda u akcijama. Na nevidljivo dugme iznad texta Autor, unijeemo sljedei kod: on(release){ gotoAndStop("aut"); } Moemo vidjeti da smo umjesto broja Frame-a koristili naziv Labele. Labele se moraju u kodu predstavljati izmeu navodnika. Nevidljivo dugme na 46. Frame-u treba sadravati sljedei kod: on(release){ gotoAndPlay("prvi"); } Ovdje je na posao zavren. Ne osjeti se nikakva prednost jer je u pitanju mali broj Frame-ova. Uvjeriti ete se u mo Labela kada budete radili sa vie njih. Sada emo snimiti na rad i testirati emo ga. Izvravanje je isto kao i u predhodnom primjeru. Ovaj primjer se nalazi na CD-u u direktorijumu Primjeri i poddirektorijumu Labele.

43

6. Audio zapisi u Flash-u

6.1 Umetanje zvuka u animaciju Ako elimo audio podrku na Flash 8 aplikaciji, moramo instalirati potrebne dodatke. Problem je mogue rijeiti i jednostavnom instalacijom Quick Time Player-a. Flash 8 podrava MP3 i WAV audio zapise. Ovo je najjednostavniji posao u Flash-u. Koristiti emo predhodni primjer i samo emo dodati zvuk. Ja u ubaciti zvuk talasa. Ovu datoteku sam preuzeo sa interneta. Prvo to moramo uraditi je umetnuti zvuk u Object Library panel.

Slika 6.1 Zvuk ocean_waves Sada emo dodati novi Layer koji emo nazvati Zvuk. Kada kreiramo Layer Zvuk, selektujemo na 1. Frame i kliknemo F6. Nakon toga selektujemo 45. Frame i takoe kliknemo F6. Zato smo to uradili? Ne elimo da se zvuk uje i na 46. Frame-u. Ponovo selektujemo 1. Frame Layer-a Zvuk, i nanesemo na radnu povrinu na audio zapis, u naem primjeru ocean_waves. Na TimeLine panelu Layer-a Zvuk pojaviti e se vizuelna predstava zvuka kao na slici nie.

Slika 6.2 Layer Zvuk Nakon toga trebamo samo da snimimo na rad i da ga testiramo. Zvuk e se uti. Sa ovim primjerom smo zaokruili jedan proces pravljenja jedne multimedijalne i interaktivne animacije. Ovaj primjer se nalazi na CD-u u direktorijumu Primjeri i poddirektorijumu Zvuk.

44

7. Mo Action Script 2.0 jezika

7.1 Igrice u Flash-u U ovom dijelu emo ui u sloenije i kompleksnije elemente Flash 8 alata i Action Script 2.0 jezika. Nauiti emo kako da napravimo jednu jednostavnu Flash igricu. U igrici nee biti koritenja sloenih animacija. Predvieno je da se vie baziramo na sam Action Script, njegov jezik i njegove mogunosti. Kao to sam ve napisao, radiemo igricu. Napraviemo viteza. Cilj je da pogodi to vie zmajeva koji se pojavljuju na vrhu ekrana. Za svaki pogodak dodavae se 1 bod. Poto smo ve naveli kako se prave Movie Clip-ovi ja u samo navesti koje Movie Clip-ove emo koristiti. postoji 5 Movie Clip-ova i to: Noge, Ruke, Strel, Vitez i zmaj. Movie Clip vitez sastavljen je od tijela koji je dio tog Movie Clip-a, od ruku sa luk-om i strijelom i nogama. Ruke i luk sa strijelom su ustvari animirani Movie Clip Ruke. Noge su takoe animirani Movie Clip Noge. Movie Clip-ovi Ruke i Noge sadre Layer sa akcijama, gdje na 1. Framey stoji akcija stop();. To znai da e animacija unutar tih Movie Clip-ova biti pozvana po potrebi. U Object Library panelu postoji i zvuk Whoosh.wav. On e biti pozvan klikom na dugme SPACE to e izazvati ispaljivanje strelice.

Slika 7.1 Elementi u Object Library Glavna scena je sastavljena od 4 Layer-a: Pozadina, Pucac, Akcije i Rezultat. Pozadina je sastavljena od obina 2 pravougaonika razliite boje. Pucac je Layer u koji je ubaen na Vitez. Rezultat je sastavljen od jedne Labele koja je texta Broj pogodaka i jednog dinamikog polja.

45

Slika 7.2 Layer-i u igrici Kako se pravi dinamiko polje? Samo nanesemo iz alatne trake Text tool element i damu mu osobinu Dynamic Text u donjem lijevom uglu.

Slika 7.3 Dinamino polje Movie Clip-u Vitez dati emo ime instance knight.

Slika 7.4 Dodjeljivanje naziva instance

46

Na prozor, kada poredamo sve elemente, treba izgledati kao na slici dole.

Slika 7.5 Izgled prozora sa svim elementima Kada bi ovako ostavili kako jeste, ne bi dobili nita. Sada prelazimo na glavni dio. Trebamo se pozicionirati na 1. Frame Layera Akcije u sklopu glavne scene. Desnim klikom na 1. Frame izaberemo Actions. Poinjemo kucati kod. Prvo emo definisati varijable. Varijable su promjenljive koje e se koristiti u izvravanju nekih matematikih metoda unutar samog kod-a. Varijabla se sastoji od kljune rijei var naziva varijable i tipa podatka. Tip podatka moe biti broj, slovo isl. Varijable koje emo unijeti u akcijama su sljedee: rez=0; var steps:Number = 5; var spriteX:Number = 265; var spriteY:Number = 265; var speed:Number = 25; var arrowActive:Boolean = false; var dragons:Number = 3; var i:Number = 0; var score:Number = 0; Rez je varijabla koja se nalazi na samoj glavnoj sceni i ona e varirati od broja pogodaka. Steps su koraci i njima je stavljena brojna vrijednost 5, to znai da e pomjeraj ulijevo ili udesno biti 5 pixela. spriteX i spriteY su ugraene varijable u Flash-u i definiu broj pixela samih objekata. arrowActive je varijabla koja je Logikog tipa i postavljena je na false. dragons je varijabla koja e kreirati zmajeve i najvie e ih moi biti 3 u jednom trenutku. i je

47

varijabla koja definie broja i on je inicijalno postavljen na 0. score je varijabla koja e uvati broj pogodaka. Kada pone igrica, vrijednost bodova je 0. Sada emo dodijeliti jednu osobinu vitezu. Koristiti emo instancno ime Movie Clip-a. knight.swapDepths(10); swapDephts radi sljedee: postavlja Movie Clip Vitez na najvii nivo. Sada idemo pisati akcije za definisanje pokreta i rada na tastaturi. Ako kliknemo lijevu kursorsku tipku, vitez e ii ulijevo, ako kliknemo desnu, ii e udesno a ako kliknemo SPACE, ispaliti e strelicu. U nastavku u pisati komentare kao to se piu i u Flash-u. ta je to komentar? Komentar nema nikakvu funkciju osim to nas napominje ta smo radili, odnosno ta radi taj dio kod-a. Dvije kose crte predstavljaju komentar i crvene je boje. function checkKeys() { //funkcija koja provjerava tipke if (Key.isDown(Key.RIGHT) && spriteX<510) { //Ako je kliknuta tipka Desno i ako vitez ne iskae iz okvira desiti e se... spriteX += steps; knight.legs.play(); //...Izbrojae se koraci udesno i poee animacija kretanja nogu } else if (Key.isDown(Key.LEFT) && spriteX>40) { //Ako je kliknuta tipka Lijevo i ako vitez ne iskae iz okvira desiti e se... spriteX -= steps; knight.legs.play(); //...Izbrojae se koraci ulijevo i poee animacija kretanja nogu } if (Key.isDown(Key.SPACE) && arrowActive == false) { //Ako je kliknuta tipka SPACE i ako strelica nije vidljiva desiti e se... knight.arms.play(); attachMovie("arrow", "arrows", 8); arrows._x = spriteX; arrows._y = spriteY+50; //...Ruke Viteza e se animirati, umetnue se film na glavnu scenu i to strijela, //strijela po x i y e odgovarati vitezu po x i y } } Kada smo uradili pokrete, napisaemo funkciju startne pozicije viteza kada uemo u igricu: function updateKnight() { //funkcija koja pozicionira viteza knight._x = spriteX; knight._y = spriteY; }

48

Sada emo napisati kod za kontrolisanje strelice: function updateArrow() { //funkcija koja prati kretnje strelice if (arrowActive == true) { arrows._y -= speed; //Ako je strelica aktivna dodijeli joj brzinu } if (arrows._y<-10) { //Ako je strelica iskoila iz ekranske forme... arrowActive = false; removeMovieClip(arrows); // Izbrii je i reci da je neaktivna. //Kada ne bi bilo ovoga dijela kod-a, strlica bi nastavila letjeti, // i ne bi mogli kreirati drugu strelicu } } Kada smo uradili kontrolisanje strelice, sada emo da uradimo inicijalizaciju zmajeva na ekranu. function initDragons() { //funkcija koja inicijalizuje zmajeve for (i; i<dragons; i++) { //Sve dok je i manje od 3, uradi.... attachMovie("dragon", "dragon"+i, i); dragon = _root["dragon"+i]; updateDragons(dragon); dragon.onEnterFrame = function() { //Dodaj zmaja. Zato mora biti manje od 3? Gore smo u varijablama //dodijelili broj zmajeva 3. if (this.hitTest(arrows)) { //Ako strelica pogodi zmaja rez += 1; tekst.text=score; trace(score); arrowActive = false; removeMovieClip(arrows); updateDragons(this); //Dodaj jedan bod na textualno polje i obrii zmaja i pogoenog //vrati na sluajnu poziciju desno izvan ekranske forme } if (this._x>0) { //Ako je aktivni zmaj vei po x od 0... this._x -= this.velo; //Neka se kree ulijevo }

49

else { //U drugom sluaju updateDragons(this); //Dodaj zmaja na random poziciju } }; } } initDragons(); //Inicijalizuj zmaja function updateDragons(which) { //Funkcija dodaj zmaja which._x = random(100)+530; which._y = random(80)+20; which.velo = random(10)+2; //Bilo kojeg od 3 neaktivna poalji na sluajnu poziciju udesno } Sada samo jo trebamo da napravimo poziv funkcija kada igrica pone: this.onEnterFrame = function() { //Kada ue u igricu pozovi gore napravljene funkcije checkKeys(); updateKnight(); updateArrow(); }; Na kraju emo snimiti na rad i testirati emo ga. Ovaj primjer se nalazi na CD-u u direktorijumu Primjeri i poddirektorijumu Igra.

Slika 7.6 Izgled igrice

50

8. Multimedijalna prezentacija u Flash-u

8.1 Privredni pregled Opine Teanj U ovom dijelu uradiu multimedijalnu prezentaciju privrednog pregleda Opine Teanj. Realizacija sama po sebi nije komplikovana koliko prikupljanje podataka. Deavale su se situacije da ljudi jednostavno iz njima poznatih razloga ne daju podatke o svojoj firmi. Moj cilj je da ovaj projekat u cjelosti zavrim i da ga ponudim administrativnom odjelu Opine Teanj. Zato bi neko odbijao besplatnu reklamu? Rad sam osmislio tako to e se na poetku pojaviti animacija grba Opine Teanj. Kada animacija stane, omoguava se klik na grb i skae se na ekran na kojem stoji slika kompletne Opine sa nazivima mjesnih zajednica. Kada Naiemo miem preko odreene mjesne zajednice, ona se izdvaja u crvenoj boji i omoguava se klik na istu. Kada kliknemo na mjesnu zajednicu u kojoj elimo da vidimo privredne objekte, otvara se mapa mjesne zajednice u tlocrtu i na njoj su oznaeni privredni subjekti. Kada preemo preko objekta, iskae logo firme kojoj objekat odgovara i moemo kliknuti na firmu i iskau nam osnovni podaci o firmi i nekoliko slika. U poetku sam radio pogreno. Pravio sam Labele za svaku firmu unutar same glavne scene. Vjerovali ili ne, u jednom trenutku, prezentacija nije htjela da se snimi zbog prepunjenja virtuelne memorije. Tada sam se sjetio jednog programerskog fazona, a on glasi: Rastavi pa vladaj. To znai da se jedan veliki posao razbije na vie manjih. U tom trenutku sam za svaku firmu napravio poseban *.swf file. Iz glavne scene sam pozivao traene vanjske file-ove. Slike sam obraivao u Adobe Photoshop CS3. Tamo sam smanjivao rezoluciju slika i pravio sam od logotipa GIF-ove sa transparentnom. Mape sam obraivao i precrtavao uz pomo Corel Draw 12 alata. U Corel-u sam precrtavao karte, a osnova su mi bile topografske karte. Sada u poeti objanjavati odreene dijelove rada. Rezolucija glavnog dijela rada mi je 1024x768 pixel-a, a vanjskih dijelova tj. pojedinih firmi 640x480 pixel-a. Prilikom prvog testiranja rada, iritirao me je Menu iz Flash Player-a i mogunost desnog klika u istom. Takoe mi je smetalo zato se prezentacija ne otvara automatski preko cijelog ekrana.

Slika 8.1 Ekran sa Flash Player Menu-jem i omoguenim desnim klikom

51

Sigurno ete sebi postaviti pitanje:Pa zato to smeta? Smeta iz tog razloga to onaj ko pregleda prezentaciju moe manipulisati sa istom. Taj sam problem prevaziao pomou Action Script-a. Sljedee akcije na prvom Frame-u Layer-a Akcije rjeavaju taj problem: fscommand("fullscreen", "true"); //FullscreenMode fscommand("showmenu", "false"); //RightClick onemogucen

Slika 8.2 Glavni okvir u Fullscreen reimu i bez Menu-ja Kada sam prevaziao taj problem, dobio sam ideju da zamijenim standardni kursor mia. Za to sam koristio jedan Movie Clip. U njemu sam nacrtao svoju sliicu. Umetnuo sam ga na glavnu scenu, dao mu instancno ime str i ukucao sam sljedei kod na 1. Frame Layer-a Akcije: onEnterFrame = function (){ //Ulaskom u 1. Frame... str._x=_root._xmouse; str._y=_root._ymouse; Mouse.hide(); //...Moja sliica neka preuzme x i y osu mia i neka se sakrije glavni kursor }

52

Slika 8.3 Novi pokaziva mia Na glavnom prozoru sam napravio i dugme Izlaz, koje kada kliknemo izlazimo iz Flash Playera. U njemu je sljedei kod: on(release){ //Kada odpustim tipku fscommand("quit",true); //Zatvori Player }

Slika 8.4 Dugme izlaz Sva dugmad koja nisu nevidljiva u mom radu imaju svoja stanja Up, Over, Down. Trudio sam se da grafiki pokuam to vie pratiti logo same Opine Teanj, tako da na svim objektima preovladava zelena i uta boja i njihove varijante. Kada se izvri animacija, postavio sam na tom Frame-u akciju stop();. Klikom na grb opine prelazimo na glavni interaktivni okvir, tj. na sljedei Frame koji ima labelu Start. Kod na nevidljivo dugme iznad grba opine je: on(release){ gotoAndStop("Start"); }

Slika 8.4 Oekuje se klik na grb 53

Slika 8.5 Glavni okvir Kada uemo u glavni okvir vidimo kompletnu mapu Opine Teanj. Sada smo u mogunosti da kliknemo na odreenu mjesnu zajednicu. Kada naiemo kursorom iznad neke mjesne zajednice ona iskae i oekuje se klik. Iznad svake mjesne zajednice napravljeno je posebno nevidljivo dugme.

Slika 8.6 Izdvojena mjesna zajednica

54

Kada kliknemo na odreenu mjesnu zajednicu, otvara se njena mapa. Ja u kliknuti na MZ Jelah. Svakoj mjesnoj zajednici je dodijeljena posebna labela. Tako da MZ Jelah odgovara labela Jelah isl.

Slika 8.7 Mjesna zajednica Jelah Iznad svakog oznaenog objekta postoji nevidljivo dugme. Kada naiemo kursorom preko objekta, pojavljuje se logo firme i oekuje se klik.

Slika 8.8 Oznaen objekat

55

Klikom na nevidljivo dugme poziva se vanjski *.swf file. U naem sluaju belif.swf. Da bi to ostvarili potrebno je napraviti jedan prazni Movie Clip. Prazni Movie Clip je Clip bez umetnutih objekata. Njega jednostavno nanesemo iznad slike mape. U njemu e se ustvari puniti vanjski file. Potrebno je takoe dati neko instancno ime Praznog Movie Clip-a. U naem sluaju instancno ime je p1. Na nevidljivo dugme iznad objekta dodajemo sljedei kod: on(release){ loadMovie("ex/belif.swf","p1"); //Navodimo putanju filma i navodimo gdje ga punimo }

Slika 8.9 Otvoreni vanjski file Belif.swf Unutar samog vanjskog file-a postoje osnovni podaci o firmi i naravno neke kontrole. Klikom na dugme Dalje prelazi na sljedeu stranu gdje se nalaze slike. Klikom na dugme povratak vraamo se na dio odakle je vanjski file pozvan. Unutar mjesnih zajednica gdje postoji vie privrednih subjekata, napravio sam dugme Lociraj. Neko zna npr. da je neka odreena firma u Jelahu, ali ne zna gdje je. Klikom na dugme lociraj otvara se novi dijaloki okvir na kojem su ponuene sve firme. Klikom na odreenu firmu, dijaloki okvir se zatvara, i pojavljuje se znak X. Znak X, koji je ustvari poseban Movie Clip, pojavljuje se iznad objekta i rotira se iznad njega. Padajui meni je napravljen na sljedei nain. U posebni Movie Clip imena movSlika napravio sam odreene animacije. Animacije unutar njega su povezane za Movie Clip Padaj. Movie Clip sadri nevidljivu dugmad za svaku firmu. Sada nanesemo Movie Clip movSlika na radnu povrinu.

Slika 8.10 movSlika

56

Zatim, unutar samog Movie Clip-a na sliicu lociraj dodajemo sljedei kod: on(release){ gotoAndPlay(10); } Kada kliknemo na Lociraj, otvara se padajui Menu.

Slika 8.11 Padajui Menu Sljedei dio koda omoguava da kada kliknemo ponovo na dugme Lociraj, padajui Menu se vrati nazad: on (release) { play(); tellTarget ("/controller") { gotoAndStop(1); } } Sada emo pokazati dio koda ta e se desiti kada kliknemo na odreenu firmu. Konkretno firmu Belif: on(release){ loadMovie("ex/x.swf","_root.p2"); //Poziva se vanjski file koji je ustvari znak X i puni se u prazni Movie Clip imena p2 setProperty("_root.p2", _x, 817); setProperty("_root.p2", _y, 405); //Podeava se sliica X po x i y osi _root.loc.gotoAndPlay(21); //Uvlaenje podmenua } 57

Slika 8.12 Klikom na firmu

Slika 8.13 Oznaava se lokacija

Za sve ostale mjesne zajednice pria se ponavlja. To bi bilo ukratko kako se pravi jedna multimedijalna prezentacija u Flash-u. Ovaj primjer se nalazi na CD-u u direktorijumu Primjeri i poddirektorijumu PrivredniPregledOTesanj.

58

9. Budunost Flash tehnologija

Adobe System je trenutni vlasnik Flash tehnologija. Na njihovj stranici izala su predvianja za budunost ovog alata. Iako se nikada ne moe sa sigurnou govoriti na koji nain i u kojem e se smjeru odreeni proizvod razvijati, firma Adobe Systems je najavila nekoliko sigurnih pothvata za budunost. Prvi od njih odnosi se na daljnje unapreenje alata za izradu Flash dokumenata: Adobe Flash CS5 Professional, ije se pojavljivanje na tritu predvia za 2010. godinu. Iako nisu objavljeni detalji niti pojanjenja, poznato je da e alat donijeti nove funkcionalnosti vezane uz razvoj 3D objekata. Sljedea novina vezana je uz uvoenje DRM zatite u nove nastavke Flash Player-a. DRM (eng. Digital Rights Management) je skup metoda i tehnologija kojima se eli onemoguiti neovlateno umnoavanje i reprodukcija zatienih multimedijalnih djela, kao to su audio zapisi, filmovi ili igrice. Na taj nain Adobe eli ponuditi mogunost firmama i pojedincima da njihov rad bude dostupan na web-u, ali da ne postoji mogunost njegove neovlatene izmjene. Adobe je objavio dostupnost Flash platforme za televizore, Blu-ray playere i ostale ureaje potroake elektronike. Adobe Flash platforma za digitalnu TV bi na buduim televizorima (s mogunou pristupa Internetu) trebala omoguiti kvalitetan prikaz i prijenos HD (eng. high-definition) sadraja, ali i mogunost pregledavanja bogatih Internet stranica i aplikacija koje se temelje na ovoj tehnologiji. Isto tako, predvia se dostupnost Flash Player-a za pametne mobilne telefone (eng. smartphones) do kraja 2009. godine. Uslijed ubrzanog ivotnog tempa ljudi sve ee moraju pristupati Internetu te imati mogunost itanja elektronske pote u svakom trenutku i gdje god se nalazili. Iz tog razloga najavljen je Flash Player 10 namijenjen za upotrebu na smartphone ureajima Google Android, Nokia S60 te Windows Mobile platformama. Mogunost upotrebe novog Flash Player-a na iPhone ureajima jo uvijek nije mogua, ali se radi i na njenom ostvarenju. Kao posljednja novina navodi se podatak o suradnji Adobe inenjera s Google i Yahoo! Search programerima u svrhu boljeg pretraivanja dinamikih web stranica i RIA aplikacija. Ovime se eli poboljati rangiranje Flash sadraja u pretraivaima na nain da se izdvajaju informacije iz SWF dokumenata i time prilagode Google i Yahoo! Search algoritmima pretraivanja.

59

10. Zakljuak
Iz gore navedenih primjera lako moemo spoznati svestranost Macromedia Flash 8 alata. Vratimo se na poetnu konstataciju. Rekli smo da je to alat koji u sebi nosi vie manjih alata. To dokazuje injenica da se u Flash-u mogu raditi obine animacije, igrice, prezentacije isl. Kada su u pitanju animacije, ja sam definitivno siguran da je Macromedia Flash 8 ubjedljivo najbolji i nema konkurenciju. to se tie igrica, postoje i bolji alati. Ali, Flash pored JavaScript jezika je sigurno lider za pravljenje malih igrica za razbibrigu. Kada su u pitanju prezentacije, Microsoft Power Point se ne moe porediti sa Flash-om. Flash nam daje vee mogunosti i daje naoj mati da ispliva na povrinu. Prema tvrdnjama Adobe Systemsa, 98% korisnika Interneta u Sjedinjenim Amerikim Dravama i 99,3% svih korisnika Interneta ima instalirano Flash Player na svojem kompjuteru. Od toga, 45-56% (u zavisnosti o regiji), ima instalirano posljednju verziju. Iz ovog je podatka vidljivo da je rije o izrazito utjecajnoj tehnologiji koja se i dalje neprestano razvija i, obzirom na funkcionalnosti koje nudi, trenutno predstavlja vodee okruenje za prikaz interaktivnih web sadraja. Upravo zato je izuzetno bitno da svi oni koji ga koriste (bilo da je rije o web programerima, web administratorima ili krajnjim korisnicima) budu upoznati s potencijalnim opasnostima alata, te na vrijeme pokuaju sprijeiti zlonamjerne korisnike od omogue zloupotrebe. Na kraju mogu samo rei da je danas kompletan web nezamisliv bez Flash-a, bilo da je rije o animacijama ili igricama. Lino smatram, da poznavanje rada u Flash-u ini od obinog informatiara i dizajnera potpuniju linost u informatikom svijetu.

60

11. Prilog
Kao prilog uz ovaj dokument dostavljam CD, iji je sadraj predstavljen u tabeli. Rb. 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. Naziv file-a Lokacija MacromediaFlash8.pdf root/Dokument/ MacromediaFlash8.doc root/Dokument/ Primjer Frame-by-Frame animacije root/Primjeri/FrameByFrame/ Primjer Motion Tween animacije root/Primjeri/MotionTween/ Primjer Guide animacije root/Primjeri/Guide/ Primjer dugmadi i akcija root/Primjeri/DugmadIAkcije/ Primjer nevidljivih dugmadi root/Primjeri/NevidljivoDugme/ Primjer Labela na Frame root/Primjeri/Labele/ Primjer zvuka na animaciji root/Primjeri/Zvuk/ Primjer igrice u Flash-u root/Primjeri/Igra/ Primjer multimedijalne prezentacije root/Primjeri/PrivredniPregledOTesanj/ Sadraj CD-a

61

12. Literatura
1. Historija Flash-a - http://en.wikipedia.org/wiki/Adobe_Flash 2. Historija fotografije - http://en.wikipedia.org/wiki/History_of_photography 3. Historija animacije - http://en.wikipedia.org/wiki/History_of_animation 4. Historija filma - http://en.wikipedia.org/wiki/History_of_film 5. SWF - http://en.wikipedia.org/wiki/SWF 6. Robert Reinhardt, Snow Dowd - Macromedia Flash 8 Biblija, 2006.god. 7. Joey Lott, Robert Reinhardt Flash 8 Action Script biblija 8. Glen Rhodes Razvoj igara u Flash-u 9. Razvoj Flash tehnologija - http://theflashblog.com/?p=328 10. Movie Clips - http://www.teacherclick.com/flash8/t_11_1.htm

62