Embed Size (px)
Citation preview
Slobomir P UniverzitetFakultet za Informacione tehnologije
Diplomski radTema:
Multimedijalna prezentacija uMacromedia Flash 8 alatu
Mentor: Student:
prof.dr. Đorđe Babić Mujo Zeničanin, 44/05
Doboj, 2009.
Sadržaj
1. Historijski razvoj multimedije 31.1 Od slike do interakcije 3
2. Macromedia Flash 52.1 Kada je nastao Flash 52.2 Prednosti i nedostaci korištenja Flash aplikacija 6
3. Uvod u Macromedia Flash 8 73.1 Početni ekran 73.2 Okruženje Macromedia Flash 8 alata 8
3.2.1 Traka sa alatima 93.2.2 Osnovni Menu 93.2.3 Prozor sa Layer-ima 103.2.4 Frame prozor 103.2.5 Radna površina 113.2.6 Prozor za vanjske objekte (Object Library) 113.2.7 Prozor za generalne postavke 12
4. Animacija u Flash-u 134.1 Frame-by-Frame animacija 134.2 Motion Tween animacija 234.3 Guide animacija 28
5. Interakcija u Flash-u 325.1 Action Script 325.2 Dugmad i akcije 325.3 Nevidljivo dugme 375.4 Kontrola Frame-ova pomoću Labela 42
6. Audio zapisi u Flash-u 446.1 Umetanje zvuka u animaciju 44
7. Moć Action Script 2.0 jezika 457.1 Igrice u Flash-u 45
8. Multimedijalna prezentacija u Flash-u 518.1 Privredni pregled Općine Tešanj 51
9. Budućnost Flash tehnologija 5910. Zaključak 6011. Prilog 6112. Literatura 62
2
1. Historijski razvoj multimedije
1.1 Od slike do interakcije
Još u doba prahistorije, ljudi su ostavljali slikovne tragove na različitim mjestima. Svoje ideje i kreativna umijeća su crtali na zidovima pećina, 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, tačnije rečeno prenosive likovne umjetnosti. Sada je likovna umjetnost postajala pristupačna većem 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 početku su fotografije bile monohromatske, tj. crno bijele boje, ali su same po sebi predstavljale tehnološku revoluciju. Nakon monohromih fotografija pojavljuju se fotografije u boji.
Slika 1.2 Prva fotografija u koloru
Poslije fotografije, ljudi su težili ka vjernijem predstavljanju događaja i okoline. Tako je nastala animacija. Animacija sama po sebi ne predstavlja ništa drugo nego skup fotografija
3
koje se smjenjuju u određenom vremenskom intervalu, odnosno slike koje se smjenjuju u nekom određenom vremenskom intervalu.
Na slici dole, prestavljen je disk sa određenim 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 praćeni zvukom. To je bio početak multimedije. Kasnije se pojavljiju i filmovi u boji.
Iako su ljudi izumili sve gore navedeno, opet nisu bili zadovoljni. Počeli su težiti ka povećanju interakcije. To znači, da pored animacije, zvuka, teksta, uvedu i nivo komunikacije sa navedenim. Iz te težnje, nastao je alat koji je danas jako popularan, a to je Macromedia Flash.
4
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 Godina NovitetiMacromedia Flash 2 Jun 1997. Objektna biblioteka (Object Library)Macromedia Flash 3 Maj 1998. Movieclip elementi, Javascript plug-in
Macromedia Flash 4 Jun 1999.Interne varijable, polje za unos, ActionScript, I MP3 streaming
Macromedia Flash 5August 2000.
ActionScript 1.0, XML podrška, ugrađene komponente, HTML text formatiranje
Macromedia Flash MX Mart 2002.Video kodek(Sorenson Spark), unicode, UI Komponente, kompresija, ActionScript vektorsko crtanje API
Macromedia Flash MX 2004
Septembar 2003.
Actionscript 2.0, JSAPI, timeline efekti
Macromedia Flash 8Septembar 2005.
Filteri, olakšana kontrola animacije, VP6 video codec, import videa
Razvoj Macromedia Flash software-a
Postoje i kasnije verzije Flash-a u izdanju Adobe, ali ja ću se zadržati na verziji Macromedia Flash 8, jer u istoj razvijam i praktični dio rada.
2.2 Prednosti i nedostaci korištenja Flash aplikacija
5
Mnogi stručnjaci za izradu interaktivnih web stranica izbjegavaju Flash tehnologiju kao neodgovarajuću zbog nekih njenih nedostataka kao što su: problemi oko odabira veličine Flash stranice da bi se ona prikazivala isto na svim rezolucijama, predugo učitavanje, loše pozicioniranje na web pretraživačima te nemogućnost pretraživanja stranica. Ipak ti se nedostaci pokušavaju riješiti kroz nove razvoje alata.
Međutim, u obzir treba uzeti i sve pozitivne strane korištenja programa kao što su: korištenje vektorske grafike što omogućuje skaliranje sadržaja bez gubljenja kvalitete, čuvanje jednom učitanih Flash stranica na PC-u ako se sadržaj nije mijenjao (izbjegava se kasnije ponovno učitavanje te se tako utječe na količinu utrošenog web prometa), povećana interaktivnost i standardizirane web stranice koje se u svim web pretraživačima prikazuju jednako, za razliku od običnog HTML sadržaja.
3. Uvod u Macromedia Flash 8
6
Flash 8 nije samo jedan alat. U sebi on sadrži gomilu manjih alata za razvoj interaktivne animacije. Možemo zamišljati Flash kao multitasking aplikaciju. To je ilustrativni program, video/zvučni/image editor, animacioni alat, skripting alat i dr.
Flash se ne koristi samo za izradu animacija i igrica. To je ujedno i jedan od moćnijih aplikacija za razvoj web stranica. Sam Flash 8, sadrži ogroman broj mogućnosti za razvoj interaktivnih multimedijalnih sadržaja.
U ovom radu, ja ću se maksimalno potruditi da dočaram moć Flash-a predstavljajući rad sa MovieClip elementima, dugmadima i ActionScript 2.0 jezikom, kao olakšanom objektno orjentisanom jeziku.
3.1 Početni ekran
Prilikom poziva samog programa, u startu se pojavljuje ekran na kojemu se nude određene akcije. Tako možemo da otvorimo već postojeći rad, da kreiramo novi, ili pak da radimo pomoću već kreiranih radova koji dolaze u samoj instalaciji Flash-a.
Slika 3.1 Početna ekranska forma
Mi ćemo izabrati kreiranje novog Flash dokumenta.
3.2 Okruženje Macromedia Flash 8 alata
7
Na slici dole, označeni su najvažniji dijelovi Flash 8 okruženja.
Slika 3.2 Izgled Macromedia Flash 8 okruženja
1. Traka sa alatima2. Osnovni Menu3. Prozor sa Layer-ima4. Frame prozor5. Radna površina6. Prozor za umetanje vanjskih objekata (Object Library)7. Prozor za generalne postavke
3.2.1 Traka sa alatima
8
Slika 3.3 Alatna traka
3.2.2 Osnovni Menu
Osnovni Menu je sastavljen od standardnih elemenata. Na slici dole vidimo sljedeće elemente: File, Edit, View, Insert, Modify, Text, Commands, Control, Window, Help.
Slika 3.4 Osnovni Menu
3.2.3 Prozor sa layer-ima
9
U ovom dijelu postavljamo jedan ili više Layer-a. Stručnjaci iz oblasti animacije u Flash-u kažu da je za jedan pokret potrebno napraviti više Layer-a, iz razloga što je lakše popravljati odvojene dijelove i iz razloga što imamo bolju kontrolu nad događajima. To znači, dugmad ćemo postaviti na poseban Layer, pozadinu na poseban, MovieClips na posebne, i tako za ostale elemente. Ustvari, Layer-i služe 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 smještamo određene elemente, promjene isl. Kasnije ćemo spomenuti da se na Frame može postaviti akcija, odnosno definisaćemo šta će se desiti kada se nađemo na tom Frame-u. Frame obuhvata i TimeLine, što znači da se u tom dijelu kontroliše trajanje i brzina promjena Frame-ova. Uzmimo jedan primjer. Ako postavimo da nam je potrebno da naša animacija traje 5 sekundi i ukoliko postavimo brzinu promjena 15 Frame-a u sekundi, to znači da će nam za to trebati ukupno 5x15 Frame-a, tj. 75 Frame-ova.
Slika 3.6 Frame prozor
3.2.5 Radna površina
10
Na radnoj površini crtamo određene elemente, stavljamo slike, dugmad itd. Ustvari, kao što u Microsoft Word-u imamo površinu na kojoj pišemo, tako i u Flash-u imamo površinu na kojoj izvodimo odnosno kreiramo naše ideje.
Slika 3.7 Radna površina
3.2.6 Prozor za umetanje vanjskih objekata (Object Library)
Slika 3.8 Prozor za umetanje vanjskihobjekata
3.2.7 Prozor za generalne postavke
U ovome dijelu, kao što i sam naziv kaže, vršimo generalne postavke radne površine i TimeLine-a. Tako npr., možemo postaviti radni okvir na neku određenu rezoluciju,
11
možemo automatski podesiti boju pozadine, i veoma bitno, možemo podesiti brzinu smjene između 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 korištenjem sve 3 navedene tehnike. Prvo ćemo raditi najdužu, i to Frame-by-Frame animaciju. Frame-by-Frame animacija nije ništa drugo nego promjene nekog objekta iz Frame-a u Frame. Naš primjer će biti detaljno opisan tekstom i slikama.
Odmah na početku ćemo reći da će naša animacija trajati 3 sekunde, prozor će biti veličine 640x480 pixel-a, i stavićemo da 15 Frame-a odgovara jednoj sekundi.
Slika 4.1 Generalne postavke
Na početku ćemo napraviti 4 Layer-a. Imenovaćemo ih na sljedeći način: Pozadina, Moreiza, Moreispred i Brod. Pozadinu ćemo napraviti kao boju neba, znači neku svjetloplavu varijantu, napraviti ćemo neki efekat prelaska plave u bijelu. Moreiza layer biće 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. Crtaćemo pozadinu, more ispred, more iza, a sliku broda ćemo umetnuti u Object Library i biće tipa GIF. Potrebno je napomenuti da kada crtamo pojedine elemente, obavezno moramo označiti Layer sa nazivom koji odgovara nacrtanom. Takođe, kako crtanje bude napredovalo, završeni dio posla bilo bi potrebno zaključati, da ne bi mogli više da ga promijenimo. Layer zaključavamo tako što kliknemo na tačku ispod simbola katanca. To će biti uočljivo 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 vrši klikom na Menu stavku File/Import/Import to Library i nađemo gdje je slika našega broda. Nakon toga, sliku ćemo prenijeti na radnu površinu.
Slika 4.7 Brod
Prelazimo na animaciju Frame-by-Frame. Prije svega zaključati ćemo sve Layer-e, osim Layer-a Brod. Sa njim ćemo raditi u nastavku. Potrebno je umetnuti novi Frame. Novi Frame umećemo tako što označimo 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 izvršiti pomijeranje broda, jer smo već naveli da je to predmet naše 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 naša animacija trajati 3 sekunde a sekunda odgovara broju od 15 Frame-ova. Na slikama gore, nije uočljiv 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
Slika 4.54 Frame45
Možda pomalo smiješno izgleda predstavljanje jedne po jedne slike, ali može umnogome vjernije predstaviti animacionu metodu Frame-by-Frame. Kada je sve urađeno, potrebno je snimiti animaciju. Ja sam snimio kao Brod.fla.
Nakon snimanja potrebno je izvršiti testiranje animacije. To se radi na sljedeći način.Iz menija izaberemo Control/Test Movie. Flash automatski pravi datoteku Brod.swf i istu je moguće 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 našeg 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
Zašto raditi komplikovanije i teže metode kada imamo dosta jednostavnije. Motion Tween animacija je klasičan 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 uključena u neku drugu animaciju, a takođe ta animacija može unutar same sebe imati druge animacije. Izvršenje Movie Clip elemenata je nezavisno, tj. možemo ga koristiti bilo gdje i bilo kada. Ova vrsta simbola u Flash-u može u sebi sadržavati druge simbole kao npr. dugmad, slike i sl. Prednost korištenja Movie Clip-ova je ta što možemo jednu veliku animaciju razbiti na više manjih. Kao i glavna scena, Movie Clip ima svoje Layer-e, Frame-ove, TimeLine i radnu površinu. Movie Clip daje moć Flash aplikaciji i jedan je od osnovnih simbola kojima postižemo veću fleksibilnost u radu.
Idemo sada pretvoriti našu 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 dijaloški okvir u kome možemo izabrati da li će naš objekat biti Movie Clip, dugme ili obična 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 završen i sada unutar njega možemo da radimo. Da bismo bili uvjereni da smo uspjeli napraviti naš Movie Clip, dovoljno je da samo obratimo pažnju na Object Library panel, i on će biti tu smješten.
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 možemo 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 označimo 45. Frame.
25
Slika 4.60 Označen je 45. Frame
Nakon toga kliknućemo na F6. Na slici dole možemo vidjeti da su se svi Frame-ovi od broja 1 do broja 45 popunili.
Slika 4.61 Događaj nakon klik-a na F6
Sada ćemo označiti Frame broj 44, tj. onaj u kojem je ucrtan mali pravougaonik.
Slika 4.62 Frame 44
U donjem dijelu ekranske forme sada nam je ponuđen 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 prihvaćen. Ako se pojave crtice, znači da Tween nije uspio.
Slika 4.63 Pozivanje Motion Tween i pojavljivanje strelice na Frame okviru
26
Sada ćemo označiti Zadnji Frame i uzećemo sliku broda i pomjeriti ćemo je udesno.
Slika 4.64 Prije Slika 4.65 Poslije
Sada se vraćamo na glavnu scenu klikom na Scene 1.
Slika 4.66 Povratak na glavnu scenu
Kada se vratimo u glavnu scenu, prvo ćemo snimiti naš rad. Na glavnoj sceni možemo primijetiti da sada imamo samo jedan Frame. To je velika ušteda na glavnoj sceni, i naravno dosta manje posla smo obavili. Sada ćemo testirati našu animaciju. Vidjeti ćemo da se brod kreće. Sada već počinjemo da uviđamo jedan problem. Naš brod se kreće pravolinijski. Gubimo efekat da brod plovi. Zaista, mi smo skratili posao, ali isto tako izgubili smo neke efekte. Ovaj problem ćemo riješiti 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 ništa drugo, nego krivulja. Šta predstavlja ta krivulja? Kada nacrtamo krivulju, mi možemo navesti da se naš Movie Clip Kreće po istoj. Uz pomoć Guide animacije možemo napraviti kompleksne animacione pokrete.
Koristiti ćemo se istim primjerom. Napravićemo 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 padajućeg Menu-ja ćemo kliknuti na Guide. Naš Layer mijenja vizuelni izgled. Pored naziva Layer-a treba se pojaviti sličica čekića.
28
Slika 4.69 Kreirani Guide
Sada ćemo kliknuti lijevim klikom miša na Layer Brod i nanijećemo 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 zaključati i prijaviti ćemo ga kao nevidljivi iz razloga tog da nam ne smeta prilikom crtanja krivulje.
Slika 4.71 Zaključan i nevidljivi Layer Brod
Sada ćemo označiti 1. Frame Layer-a Krivulja i na radnoj površini ćemo nacrtati jednu krivulju pomoću četke iz alatne trake. Ja ću nacrtati neku talasastu krivulju radi postizanja efekta plovidbe.
29
Slika 4.72 Nacrtana krivulja
Nakon toga ćemo otključati i postaviti da je vidljiv Frame Brod. Sada ćemo označiti 45. Frame Layer-a Krivulja i Brod i kliknuti na dugme F6. Frame-ovi između 1. i 45. Layer-a će biti popunjeni. Sada ćemo selektovati Layer Brod i Prvi Frame navedenog Layera. Nakon toga ćemo postaviti brod na početak krivulje. Prije toga je potrebno takođe napraviti Motion Tween na Layer-u Brod.
Slika 4.73 Brod na početku Krivulje
Sada ćemo označiti zadnji Frame Layer-a brod i prenijećemo sliku broda na kraj krivulje.
30
Slika 4.74 Brod na kraju krivulje
Vraćamo 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 korištene zajedno. Inače 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 korištenja Movie Clip-a.
Svaka od gore navedenih metoda ima svoje prednosti i mane. Ali, sve tri su potrebne. Postavimo sebi pitanje. Zašto koristiti Motion Tween i Guide na sam 5 Frame-ova? To možemo, ali ipak je u tom slučaju bolje odraditi Frame-by-Frame, iz razloga što nećemo izgubiti jako mnogo vremena. Ali, ako se radi o više Frame-ova, onda je stvarno suludo koristiti Frame-by-Frame.
31
5. Interakcija u Flash-u
5.1 Action Script
ActionScript je objektno-orijentisani programski jezik koji se koristi za dodjeljivanje interaktivnosti (kao što su padajući 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 zamišljen 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 takođe 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 najviše koristi na Web-u. i to najviše u formi svoja 3 najbolja predstavnika i to JavaScript, ActionScript i Jscript.
Flash 8 koristi Action Script 2.0, ali ima podršku 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 težnje da korisnik može razvijati kompleksnije stvari kao što su npr. igrice. Danas je internet pretrpan Flash igricama, a njih ne bi bilo moguće napraviti bez Action Script 2.0 jezika.
5.2 Dugmad i akcije
Nakon filma, čovjek je težio ka tome da ne gleda samo film, već da i sam učestvuje 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 odlučujemo o završetku. Interakcija u Flash-u je realizovana dugmadima i ActionScript kodovima.
Dugmad u Flash-u ne predstavljaju ništa drugo nego simbol pomoću kojega utječemo 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 određeni Frame. Npr. kada na red dođe izvršavanje 20. Frame-a, da odatle skoči na 50. isl. Akcije mogu biti postavljene i na Movie Clip. Znači, akcije mogu biti samo na dugmadima, na Frame-ovima i na Movie Clip-ovima. Akcije na dugmadima označavaju š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 zadržati kontinuitet u radu. Zadatak nam je da ne počne odmah da se odvija animacija, nego tek kada kliknemo na dugme Start. Znači napraviti ćemo dugme Start. Takođe, napraviti ćemo dugme Pauza, odnosno dugme kojim ćemo prekinuti animaciju. Da bi zaustavili automatsko startanje animacije, postaviti ćemo neku akciju na Frame. Pa počnimo.
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 dijaloški okvir gdje imamo ponuđeno da napravimo Movie Clip, dugme i grafik. Mi ćemo izabrati dugme i nazvati ćemo ga Start. Kliknimo na dugme OK i naše dugme će se pojaviti u Object Library Panel-u.
Slika 5.2 Kreiranje dugmeta
Sada ćemo dvoklikom pozvati dugme i moći ćemo ga crtati. Dugme ima sljedeća 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 pređemo 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 nećemo zasada dirati. Neka ostane prazno. Vratiti ćemo se na glavnu scenu i kreirati ćemo dugme Pauza na isti način. 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 važna 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 naše akcije. Ako ih ne diramo, oblaci će biti bijele boje, ako pređemo preko njih poplaviće i ako ih kliknemo požutjeti će.
Slika 5.8 Up Slika 5.9 Over Slika 5.10 Down
Potrebno je našem 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 ići na action. Klikom na Actions otvara se panel akcija u kojem ćemo kucati Action Script kod. Mi ćemo unijeti brod.stop();. To znači 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 znači da kada odpustimo dugme Start, animacija unutar Movie Clip-a Brod će početi. Brod u kodu predstavlja naziv instance.Na dugme Pauza unosimo sljedeću akciju:on(release){ brod.stop();} Ovime smo završili dodavanje akcija. Snimimo naš rad, testirajmo ga, i vidjeti ćemo da tek kada kliknemo na dugme Start, naša animacija će početi. Klikom na dugme Pauza, animacija će se zaustaviti. Ovdje je naš posao sa dugmadima završen. 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 površini vidi, ali prilikom testiranja i konverzije u Flash Movie, dugme je nevidljivo.
Idemo sada uraditi jedan primjer. Koristiti ćemo našu 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 skočiti ć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 pomoću Text Tool. Ukucati ćemo text Autor. Kada uradimo to, Selektovati ćemo 45. Frame Text Layer-a i kliknućemo 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. Znači, Insert/New Symbol, izabrati ćemo dugme i dati ćemo mu ime NeVidisMe. Na stanju Hit, ćemo nacrtati jedan pravougaonik koji može biti bilo koje boje.
Slika 5.14 Dugme NeVidisMe
Slika 5.15 Stanje Hit
38
Nakon toga, vraćamo se na glavnu scenu. Kreiraćemo još jedan Layer kojem ćemo dati ime Dugme. Na prvom Frame-u ovoga Layer-a nanijećemo naše 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 izvođenja 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 površine. 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. Zašto. 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. Frame-u dodati ćemo akciju:gotoAndPlay(1);
Sada smo omogućili da kada pokrenemo animaciju, čim se izvrši ulazak u 45. Frame, vratiti će se na 1. Frame. gotoAndPlay znači idi i nastavi animaciju, a broj unutar zagrada označava na koji Frame se vraćamo.
Slika 5.18 Akcija za povratak na 1. Frame svih Layer-a
Sada ćemo dodati akciju na naše nevidljivo dugme. Desnim klikom na nevidljivo dugme, izaberemo Actions i unosimo sljedeću akciju:on(release){ gotoAndStop(46);}
Objašnjenje: kada odpustimo tipku na dugme, skoči na 46. Frame i zaustavi se. Znači kada kliknemo na naše dugme, vidjećemo podatke o autoru. Ovdje sada postoji jedan problem. Kada uđemo 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 naše nevidljivo dugme, ali ovoga puta ćemo napraviti sljedeću akciju:on(release){ gotoAndPlay(1);}
Ovime smo omogućili povratak u našu animaciju. Nakon toga, snimićemo 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 skačemo na 46. Frame animacije
Slika 5.20 Klikom na nevidljivo dugme iznad texta Povratak skačemo na 1. Frame animacije
41
5.4 Kontrola Frame-ova pomoću Labela
Kontrola Frame-ova pomoću unosa broja Frame-a je dobra, ali da li je i fleksibilna. Na mali broj Frame-ova ova metoda je odlična. Šta se dešava kada imamo npr. 10.000 Frame-ova? Čovjeku je u principu teže 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 riješiti taj problem? Odgovor je jednostavan. Koristiti ćemo Labele na Frame-ove. Labela na Frame je ništa drugo nego imenovanje određenog Frame-a. Imena dajemo pomoću asocijacija ili eventualno punih riječi. Tako će kontrola naše animacije i prohod kroz Frame-ove biti dosta lakši 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 uspješno napravili Labelu na Frame, na Frame-u koji ima labelu pojaviti će se znak sličan crvenoj zastavici.
Slika 5.22 Oznaka Labele
42
Sada ćemo na isti način 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, unijećemo sljedeći kod:on(release){
gotoAndStop("aut");}Možemo vidjeti da smo umjesto broja Frame-a koristili naziv Labele. Labele se moraju u kodu predstavljati između navodnika. Nevidljivo dugme na 46. Frame-u treba sadržavati sljedeći kod:on(release){
gotoAndPlay("prvi");}
Ovdje je naš posao završen. Ne osjeti se nikakva prednost jer je u pitanju mali broj Frame-ova. Uvjeriti ćete se u moć Labela kada budete radili sa više njih. Sada ćemo snimiti naš rad i testirati ćemo ga. Izvršavanje 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 podršku na Flash 8 aplikaciji, moramo instalirati potrebne dodatke. Problem je moguće riješiti i jednostavnom instalacijom Quick Time Player-a. Flash 8 podržava 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 takođe kliknemo F6. Zašto 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 površinu naš audio zapis, u našem primjeru ocean_waves. Na TimeLine panelu Layer-a Zvuk pojaviti će se vizuelna predstava zvuka kao na slici niže.
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 zaokružili 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 ući u složenije i kompleksnije elemente Flash 8 alata i Action Script 2.0 jezika. Naučiti ćemo kako da napravimo jednu jednostavnu Flash igricu. U igrici neće biti korištenja složenih animacija. Predviđeno je da se više baziramo na sam Action Script, njegov jezik i njegove mogućnosti.
Kao što sam već napisao, radićemo igricu. Napravićemo viteza. Cilj je da pogodi što više zmajeva koji se pojavljuju na vrhu ekrana. Za svaki pogodak dodavaće se 1 bod. Pošto 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 takođe animirani Movie Clip Noge. Movie Clip-ovi Ruke i Noge sadrže Layer sa akcijama, gdje na 1. Framey stoji akcija stop();. To znači 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 obična 2 pravougaonika različite boje. Pucac je Layer u koji je ubačen naš Vitez. Rezultat je sastavljen od jedne Labele koja je texta Broj pogodaka i jednog dinamičkog polja.
45
Slika 7.2 Layer-i u igrici
Kako se pravi dinamičko polje? Samo nanesemo iz alatne trake Text tool element i damu mu osobinu Dynamic Text u donjem lijevom uglu.
Slika 7.3 Dinamično 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 ništa. Sada prelazimo na glavni dio. Trebamo se pozicionirati na 1. Frame Layera Akcije u sklopu glavne scene. Desnim klikom na 1. Frame izaberemo Actions. Počinjemo kucati kod. Prvo ćemo definisati varijable. Varijable su promjenljive koje će se koristiti u izvršavanju nekih matematičkih metoda unutar samog kod-a. Varijabla se sastoji od ključne riječi var naziva varijable i tipa podatka. Tip podatka može biti broj, slovo isl. Varijable koje ćemo unijeti u akcijama su sljedeće:
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 znači da će pomjeraj ulijevo ili udesno biti 5 pixela. spriteX i spriteY su ugrađene varijable u Flash-u i definišu broj pixela samih objekata. arrowActive je varijabla koja je Logičkog tipa i postavljena je na false. dragons je varijabla koja će kreirati zmajeve i najviše će ih moći biti 3 u jednom trenutku. i je
47
varijabla koja definiše brojač i on je inicijalno postavljen na 0. score je varijabla koja će čuvati broj pogodaka. Kada počne igrica, vrijednost bodova je 0.
Sada ćemo dodijeliti jednu osobinu vitezu. Koristiti ćemo instancno ime Movie Clip-a.
knight.swapDepths(10);
swapDephts radi sljedeće: postavlja Movie Clip Vitez na najviši nivo.Sada idemo pisati akcije za definisanje pokreta i rada na tastaturi. Ako kliknemo lijevu
kursorsku tipku, vitez će ići ulijevo, ako kliknemo desnu, ići će udesno a ako kliknemo SPACE, ispaliti će strelicu. U nastavku ću pisati komentare kao što se pišu 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 iskače iz okvira desiti će se...
spriteX += steps;knight.legs.play();
//...Izbrojaće se koraci udesno i počeće animacija kretanja nogu} else if (Key.isDown(Key.LEFT) && spriteX>40) {//Ako je kliknuta tipka Lijevo i ako vitez ne iskače iz okvira desiti će se...
spriteX -= steps;knight.legs.play();
//...Izbrojaće se koraci ulijevo i počeće 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, umetnuće se film na glavnu scenu i to strijela,//strijela po x i y će odgovarati vitezu po x i y
}}
Kada smo uradili pokrete, napisaćemo funkciju startne pozicije viteza kada uđemo u igricu:
function updateKnight() {//funkcija koja pozicionira vitezaknight._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 iskočila iz ekranske forme...
arrowActive = false;removeMovieClip(arrows);
// Izbriši 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 zmajevefor (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. Zašto 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 obriši zmaja i pogođenog//vrati na slučajnu poziciju desno izvan ekranske forme}if (this._x>0) {//Ako je aktivni zmaj veći po x od 0...
this._x -= this.velo;//Neka se kreće ulijevo}
49
else {//U drugom slučaju
updateDragons(this);//Dodaj zmaja na random poziciju
}};}}initDragons();//Inicijalizuj zmajafunction 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 pošalji na slučajnu poziciju udesno}
Sada samo još trebamo da napravimo poziv funkcija kada igrica počne:
this.onEnterFrame = function() {//Kada uđeš 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 Općine Tešanj
U ovom dijelu uradiću multimedijalnu prezentaciju privrednog pregleda Općine Tešanj. Realizacija sama po sebi nije komplikovana koliko prikupljanje podataka. Dešavale su se situacije da ljudi jednostavno iz njima poznatih razloga ne daju podatke o svojoj firmi. Moj cilj je da ovaj projekat u cjelosti završim i da ga ponudim administrativnom odjelu Općine Tešanj. Zašto bi neko odbijao besplatnu reklamu?
Rad sam osmislio tako što će se na početku pojaviti animacija grba Općine Tešanj. Kada animacija stane, omogućava se klik na grb i skače se na ekran na kojem stoji slika kompletne Općine sa nazivima mjesnih zajednica. Kada Naiđemo mišem preko određene mjesne zajednice, ona se izdvaja u crvenoj boji i omogućava 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 označeni privredni subjekti. Kada pređemo preko objekta, iskače logo firme kojoj objekat odgovara i možemo kliknuti na firmu i iskaču nam osnovni podaci o firmi i nekoliko slika.
U početku sam radio pogrešno. 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 znači da se jedan veliki posao razbije na više manjih. U tom trenutku sam za svaku firmu napravio poseban *.swf file. Iz glavne scene sam pozivao tražene vanjske file-ove.
Slike sam obrađivao u Adobe Photoshop CS3. Tamo sam smanjivao rezoluciju slika i pravio sam od logotipa GIF-ove sa transparentnom. Mape sam obrađivao i precrtavao uz pomoć Corel Draw 12 alata. U Corel-u sam precrtavao karte, a osnova su mi bile topografske karte.
Sada ću početi objašnjavati određene 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 mogućnost desnog klika u istom. Takođe mi je smetalo zašto se prezentacija ne otvara automatski preko cijelog ekrana.
Slika 8.1 Ekran sa Flash Player Menu-jem i omogućenim desnim klikom
51
Sigurno ćete sebi postaviti pitanje:“Pa zašto to smeta“? Smeta iz tog razloga što onaj ko pregleda prezentaciju može manipulisati sa istom. Taj sam problem prevazišao pomoću Action Script-a. Sljedeće akcije na prvom Frame-u Layer-a Akcije rješavaju taj problem:
fscommand("fullscreen", "true"); //FullscreenModefscommand("showmenu", "false"); //RightClick onemogucen
Slika 8.2 Glavni okvir u Fullscreen režimu i bez Menu-ja
Kada sam prevazišao taj problem, dobio sam ideju da zamijenim standardni kursor miša. Za to sam koristio jedan Movie Clip. U njemu sam nacrtao svoju sličicu. Umetnuo sam ga na glavnu scenu, dao mu instancno ime str i ukucao sam sljedeći kod na 1. Frame Layer-a Akcije:
onEnterFrame = function (){//Ulaskom u 1. Frame...
str._x=_root._xmouse; str._y=_root._ymouse; Mouse.hide();
//...Moja sličica neka preuzme x i y osu miša i neka se sakrije glavni kursor}
52
Slika 8.3 Novi pokazivač miša
Na glavnom prozoru sam napravio i dugme Izlaz, koje kada kliknemo izlazimo iz Flash Playera. U njemu je sljedeći 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 grafički pokušam što više pratiti logo same Općine Tešanj, tako da na svim objektima preovladava zelena i žuta boja i njihove varijante.
Kada se izvrši animacija, postavio sam na tom Frame-u akciju stop();. Klikom na grb općine prelazimo na glavni interaktivni okvir, tj. na sljedeći Frame koji ima labelu Start. Kod na nevidljivo dugme iznad grba općine je:
on(release){gotoAndStop("Start");
}
Slika 8.4 Očekuje se klik na grb
53
Slika 8.5 Glavni okvir
Kada uđemo u glavni okvir vidimo kompletnu mapu Općine Tešanj. Sada smo u mogućnosti da kliknemo na određenu mjesnu zajednicu. Kada naiđemo kursorom iznad neke mjesne zajednice ona iskače i očekuje se klik. Iznad svake mjesne zajednice napravljeno je posebno nevidljivo dugme.
Slika 8.6 Izdvojena mjesna zajednica
54
Kada kliknemo na određenu 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 označenog objekta postoji nevidljivo dugme. Kada naiđemo kursorom preko objekta, pojavljuje se logo firme i očekuje se klik.
Slika 8.8 Označen objekat
55
Klikom na nevidljivo dugme poziva se vanjski *.swf file. U našem slučaju 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 takođe dati neko instancno ime Praznog Movie Clip-a. U našem slučaju instancno ime je p1. Na nevidljivo dugme iznad objekta dodajemo sljedeći 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 sljedeću stranu gdje se nalaze slike. Klikom na dugme povratak vraćamo se na dio odakle je vanjski file pozvan.
Unutar mjesnih zajednica gdje postoji više privrednih subjekata, napravio sam dugme Lociraj. Neko zna npr. da je neka određena firma u Jelahu, ali ne zna gdje je. Klikom na dugme lociraj otvara se novi dijaloški okvir na kojem su ponuđene sve firme. Klikom na određenu firmu, dijaloški 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. Padajući meni je napravljen na sljedeći način. U posebni Movie Clip imena movSlika napravio sam određene animacije. Animacije unutar njega su povezane za Movie Clip Padaj. Movie Clip sadrži nevidljivu dugmad za svaku firmu. Sada nanesemo Movie Clip movSlika na radnu površinu.
Slika 8.10 movSlika
56
Zatim, unutar samog Movie Clip-a na sličicu lociraj dodajemo sljedeći kod:on(release){
gotoAndPlay(10);}
Kada kliknemo na Lociraj, otvara se padajući Menu.
Slika 8.11 Padajući Menu
Sljedeći dio koda omogućava da kada kliknemo ponovo na dugme Lociraj, padajući Menu se vrati nazad:
on (release) {play();tellTarget ("/controller") {
gotoAndStop(1);}
}
Sada ćemo pokazati dio koda šta će se desiti kada kliknemo na određenu 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 p2setProperty("_root.p2", _x, 817);setProperty("_root.p2", _y, 405);
//Podešava se sličica X po x i y osi_root.loc.gotoAndPlay(21);
//Uvlačenje podmenua}
57
Slika 8.12 Klikom na firmu Slika 8.13 Označava se lokacija
Za sve ostale mjesne zajednice priča 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. Budućnost Flash tehnologija
Adobe System je trenutni vlasnik Flash tehnologija. Na njihovj stranici izašla su predviđanja za budućnost ovog alata. Iako se nikada ne može sa sigurnošću govoriti na koji način i u kojem će se smjeru određeni proizvod razvijati, firma Adobe Systems je najavila nekoliko sigurnih pothvata za budućnost.
Prvi od njih odnosi se na daljnje unapređenje alata za izradu Flash dokumenata: Adobe Flash CS5 Professional, čije se pojavljivanje na tržištu predviđa za 2010. godinu. Iako nisu objavljeni detalji niti pojašnjenja, poznato je da će alat donijeti nove funkcionalnosti vezane uz razvoj 3D objekata.
Sljedeća novina vezana je uz uvođenje DRM zaštite u nove nastavke Flash Player-a. DRM (eng. Digital Rights Management) je skup metoda i tehnologija kojima se želi onemogućiti neovlašteno umnožavanje i reprodukcija zaštićenih multimedijalnih djela, kao što su audio zapisi, filmovi ili igrice. Na taj način Adobe želi ponuditi mogućnost firmama i pojedincima da njihov rad bude dostupan na web-u, ali da ne postoji mogućnost njegove neovlaštene izmjene. Adobe je objavio dostupnost Flash platforme za televizore, Blu-ray playere i ostale uređaje potrošačke elektronike. Adobe Flash platforma za digitalnu TV bi na budućim televizorima (s mogućnošću pristupa Internetu) trebala omogućiti kvalitetan prikaz i prijenos HD (eng. high-definition) sadržaja, ali i mogućnost pregledavanja bogatih Internet stranica i aplikacija koje se temelje na ovoj tehnologiji. Isto tako, predviđa se dostupnost Flash Player-a za pametne mobilne telefone (eng. smartphones) do kraja 2009. godine.
Uslijed ubrzanog životnog tempa ljudi sve češće moraju pristupati Internetu te imati mogućnost čitanja elektronske pošte u svakom trenutku i gdje god se nalazili. Iz tog razloga najavljen je Flash Player 10 namijenjen za upotrebu na smartphone uređajima Google Android, Nokia S60 te Windows Mobile platformama. Mogućnost upotrebe novog Flash Player-a na iPhone uređajima još uvijek nije moguća, ali se radi i na njenom ostvarenju.
Kao posljednja novina navodi se podatak o suradnji Adobe inženjera s Google i Yahoo! Search programerima u svrhu boljeg pretraživanja dinamičkih web stranica i RIA aplikacija. Ovime se želi poboljšati rangiranje Flash sadržaja u pretraživačima na način da se izdvajaju informacije iz SWF dokumenata i time prilagode Google i Yahoo! Search algoritmima pretraživanja.
59
10. Zaključak
Iz gore navedenih primjera lako možemo spoznati svestranost Macromedia Flash 8 alata. Vratimo se na početnu konstataciju. Rekli smo da je to alat koji u sebi nosi više manjih alata. To dokazuje činjenica da se u Flash-u mogu raditi obične 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 tiče 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 može porediti sa Flash-om. Flash nam daje veće mogućnosti i daje našoj mašti da ispliva na površinu.
Prema tvrdnjama Adobe Systemsa, 98% korisnika Interneta u Sjedinjenim Američkim Državama 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 vodeće okruženje za prikaz interaktivnih web sadržaja. 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 pokušaju spriječiti zlonamjerne korisnike od omoguće zloupotrebe.
Na kraju mogu samo reći da je danas kompletan web nezamisliv bez Flash-a, bilo da je riječ o animacijama ili igricama. Lično smatram, da poznavanje rada u Flash-u čini od običnog informatičara i dizajnera potpuniju ličnost u informatičkom svijetu.
60
11. Prilog
Kao prilog uz ovaj dokument dostavljam CD, čiji je sadržaj predstavljen u tabeli.
Rb. Naziv file-a Lokacija1. MacromediaFlash8.pdf root/Dokument/2. MacromediaFlash8.doc root/Dokument/3. Primjer Frame-by-Frame animacije root/Primjeri/FrameByFrame/4. Primjer Motion Tween animacije root/Primjeri/MotionTween/5. Primjer Guide animacije root/Primjeri/Guide/6. Primjer dugmadi i akcija root/Primjeri/DugmadIAkcije/7. Primjer nevidljivih dugmadi root/Primjeri/NevidljivoDugme/8. Primjer Labela na Frame root/Primjeri/Labele/9. Primjer zvuka na animaciji root/Primjeri/Zvuk/10. Primjer igrice u Flash-u root/Primjeri/Igra/11. Primjer multimedijalne prezentacije root/Primjeri/PrivredniPregledOTesanj/
Sadržaj 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_photography3. Historija animacije - http://en.wikipedia.org/wiki/History_of_animation4. Historija filma - http://en.wikipedia.org/wiki/History_of_film5. SWF - http://en.wikipedia.org/wiki/SWF6. Robert Reinhardt, Snow Dowd - Macromedia Flash 8 Biblija, 2006.god.7. Joey Lott, Robert Reinhardt – Flash 8 Action Script biblija8. Glen Rhodes – Razvoj igara u Flash-u9. Razvoj Flash tehnologija - http://theflashblog.com/?p=32810. Movie Clips - http://www.teacherclick.com/flash8/t_11_1.htm
62
