Dugme

Prethodne lekcije su predstavile osnovna znanja, alate i tehnike neophodne za izradu animacija. U ovoj lekciji će stečena znanja biti iskorišćena za povezivanje animacija sa novim elemntima animacija.

Lekcija predstavlja Button simbole (dugmad), kao i rad sa zvukom i videom u Flash-u.

U prethodnim lekcijama je spomenuta posebna vrsta simbola koji se nazivaju Buttons (dugmad).

Dugmad su posebni simboli koji se koriste u animacijama kako bi se postigla interaktivnost. Prelazak preko dugmeta ili klik na dugme treba da pokrene određenu akciju u animaciji. Da je neki objekat u animaciji dugme prepoznaje se po promeni pokazivača miša u oblik šake prilikom prelaska miša preko dugmeta.

Na narednom promeru je dat primer animacije u kojoj je iskorišćeno dugme za pokretanje animacije.

Otvorite nov prazan projekat (sa odabranom opcijom Action Script 3.0). Dimenzije radnog prostora postavite na 300x200px.

Na radnom prostoru ćemo nacrtati pravougaonik zakrivljenih ivica. Ovakav oblik pravougaonika se često koristi za pravljenje dugmadi u Flash-u. Alat koji ćemo iskoristiti za crtanje pravougaonika željenog oblika naziva se Rectangle Primitve Tool.

Selektujete pravougaonik alatom Selection tool. Desnim klikom na pravougaonik otvorite podmeni i izaberite opciju Convert to Symbol.

Na ovom mestu ćemo nacrtani pravougaonik pretvoriti u Button simbol (dugme). U prozoru Convert to Symbol izaberite simbol tipa Button, definišite pomoću opcije Registration referntnu tačku objekta (preprouka je da to bude centralna tačka objekta) i dajte naziv simbolu.

U jednoj od prethodnih lekcija smo naveli da se simboli i instance simbola imenuju u Flashu dodavanjem određenih sufiksa, i to “_mc” za simbole tipaMovie clip i “_btn” za simbole tipa Button (dugme).

Dodatna pravila pri davanja imena simbola i instanci su:

- ime ne sme da sadrži prazna bolja;

- ime započinje slovom, donjom crtom (_) ili string znakom ($);

- ostali zanci u imenu mogu biti slova, brojevi, donja crta i string znak;

- ime instance mora biti jedinstveno.

Simboli tipa Button (dugme) se dodatno uređuju u izolacionom modu samog dugmeta. Kliknite dva puta na pravougaonik (tj. dugme) kako biste usli u izolacioni mod dugmeta.

U okviru izolacionog moda dugmeta u Timeline paleti pojavljuje se 4 unapred definisana stanja u kojima se dugme može naći. Ta stanja su definisana kao Up, Over, Down, Hit.

Up stanje definiše dugme u osnovnom stanju, odnosno kada se isto nalazi nalazi na radnom prostoru a miš ne prelazi preko dugmeta.

Over stanje definiše dugme (i animaciju) u stanju kada miš pređe preko dugmeta.

Down stanje definiše dugme u trenutka samog pritiska (klika) na dugme.

Hit definiše aktivnu oblast dejstva dugmeta u okviru radnog prostora.

U Timeline paleti ispod stanja Up nalazi se keyframe koji ukazuje da je trenutno prikazano stanje na radnom prostoru ono koje se dodeljuje osnovnom stanju dugmeta (stanju Up).

Kako želimo da na dugme dodamo natpis potrebno je u u stanju Up ispisati željeni tekstualni sadržaj i postaviti isti na dugme.

Izaberite alat Text Tool, podesite željeni font, boju slova podesite na crnu, a veličinu slova 45pt.

Napisani tekst je potrebno postaviti u centar pravougaonika. Postavljanje teksta u centar pravougaonika moguće je uraditi odgovarajućim matematičkim proračunom u kojim bi se izračunale koordinate referentnt tačke teksta. Brži i efikasniji način da se pozicionira obejkat je korišćenjeAlign palete.

Vraćamo se na naš tekući zadatak. Ispisali smo reč „CLICK“ i želilmo je postaviti u centar pravougaonika.

Crnom strelicom prevucite preko celog pravougaonika i teksta kako biste jednim prevlačenjem crnom strelicom slektovali oba objekta. Otvorite paletu Align (Window>Align). Centrirajte seletkovane objekte po vertikali, a potom i po horozontali. Na ovaj način je tekst postavljen u centar pravougaonika.

Sledeći korak u definisanju rada dugmeta je definisanje stanja Over.

Over stanje predstavlja dugme u stanju prelaska miša preko dugmeta. Da bi se definisalo navedeno stanje potrebno je prvo u Timeline paleti ubaciti keyframe u frejm stanja Over. Ubacite keyframe u frejm ispod oznake Over.

Selektujete crnom strelicom samo pravougaonik i promenite boju Fill-a u narandžastu a boju Stroke-a u žutu. Potom crnom strelicom kliknite na tekst kako biste isti selektovali. U Properties paleti promenite boju slova u belu.

Želimo napraviti efekat uvećanja celog tastera kada se pređe mišem preko istog. Da bi to postigli potrebno je selektovati i dugme i tekst. Prečicom CTRL+T (ili naredbom Window>Transform) otvorite paletu Transform. Promenićemo parametre uvećanja po dužini i visini. Obratite pažnju da ikona lanca bude povezana, kako bi promene visine i dužine objekta bile povezane. Upišite vrednost uvećanja od 130% u polje za transformaciju dužine objekta i pritisnite ENTER kako bi se ista promena izvršila (i po dužini i po visini).

Naredno stanje dugmeta koje treba definisati je stanje Down. To stanje daje izgled dugmeta u trenutku kada se klikne na isto.

Ubacite keyframe u frejm ispod natpisa Down.

Selektujte crnom srelicom pravougaonik. Promenite boju Fill-a u sivu,a boju Stroke-a u ljubičastu. Kliknite na tekst kako biste u paleti Properties promenili boju teksta u ljubičastu.

Poslednje stanje dugmeta Hit se definiše po potrebi.

Hit definše deo radnog prostora u kome želimo da dugme bude aktivno (da reaguje na prelaz miša). Ako se Hit oblast ne definiše onda se oblast u kojoj je dugme aktivno preuzima iz Down stanja. Ako je potrebno proširiti ili promeniti oblast dejstva dugmeta potrebno je ubaciti keyframe u frejm ispod natpisa Hit i prevući željenim alatom oblast u kojoj želimo da dugme bude aktivno.

Na narednoj slici je alatom Rectangle Tool prevučen pravougaonik koji će predtavljati aktivnu oblast dugmeta. Boja pravougaonika nije bitna pošto se nacrtani pravougaonik u Hit stanju neće videti na radnom prostoru.

Na ovaj način su definisana sva četiri stanja dugmeta.

Zvuk u Flash animacijama

U Flash animacije je moguće ubaciti zvučne fajlove. Oni se nakčešće koriste kao pozadinska muzička podloga animacije, ili se dugmadima dodaju kratki muzički efekti koji služe da upotpune rad dugmeta sa kreativnog aspekta.

U okviru našeg zadatka ubacićemo kratak muzički sadržaj koji će se aktivirati u trenutku klika na dugme.

Da bi se ubacio zvuk u animaciju potrebno je željeni muzički fajl uvesti uLibrary (biblioteku), a potom u odgovarajućem frejmu prevući muzički fajl na radni prostor.

Flash podržava MP3, WAV i AIFF muzičke fajlove.

Iz komandnog menija uvesti flajl “BeepS04.wav” u biblioteku naredbom File>Import>Import to Library.

Ako prozor Library (biblioteka) nije vidljiv, otovorite isti naredbomWindow>Library.

U prozoru Library pojavljuje se uvezeni muzički fajl. Prikazan je naziv fajla, a ikona oblika zvučnika pored imena fajla ukazuije na to da je u pitanju muzički fajl. Jednim klikom na naziv fajla u gornjem delu prozora Library pojavljuje se vremenski prikaz muzičkog fajla, a u gornjem desnom uglu, moguće je preslušati muzičku fajl klikom na crni trougao (na narednoj slici zaokružen zelenom bojom).

Dvostrukim klikom na ikonu oblika zvučnika pored imena muzičkog fajla (na prethodnoj slici zaokruženo narandžastom bojom) otvara se prozor SoundProperties.

Kako su muzički fajlovi generalno velilki zbog velike količine podataka koju nose oni mogu da ugroze animaciju sa aspekta prihvatljivih dimenzija fajla animacije (izraženih ukilobajtima kB). Iz navedenog razloga poželjno je komprimovati audio fajl.

Komprimovanje audija za potrebe animacije moguće je izvršiti u okviru Flash programa. Cilj komprimovanja je dobiti što manji fajl ali prihvatljivih zvučnih karakteristika. U navedenom prozoru moguće je izabrati jedan od vidova kompresije (na slici označeno plavom bojom).

Pošto se izabere željeni algoritam komresije audio signala parametri kompresije se ispisuju u donjem delju prozora (zaokruženo ljubičastom bojom). Prilikom primene određenog algorima kompresije potrebno je muzički fajl testirati kako bi se ispitale i zvučne karakteristike komprimovanog fajla. Testiranje se vrši pritiskom tastera TEST. Ako je muzički fajl uređen na povpoljani način treba pritisnuti OK kako bi se željene promene sačuvale.

U primeru koji radimo izaberite kompresiju MP3. Na taj način je zadržan dobar kvalitet zvuka a fajl je komprimovan na svega 9.1% prvobitne veličine fajla.

Sound

Da bi željeni muzički fajl ubacili u animaciju potrebno je da napravimo lejer sa odgovarajućim keyframe-om.

Ako niste u izolacionom modu dugmeta kliknite dva puta na dugme kako biste ušli u isti.

Trenutno u Timeline paleti izolacionog moda dugmeta postoji samo jedan lejer sa keyframeovima u odgovarajućim stanjima dumeta Up, Over, Down i Hit.

Napravite nov lejer.

Kako želimo da se u trenutku klika na dugme se čuje fajl „BEEPS04.wav“ ubacićemo keyframe na lejer 2 u frejm ispod natpisa Down.

Ubacivanje muzičkih fajlova vrši se prevlačenjem fajla iz bibilioteke (Library) i ispuštanjem fajla na radnu površinu. Na radnoj površini se neće ništa videti, ali će u keyframeu se pojaviti vremenski prikaz audio fajla.

Na ovaj način je ubačen zvuk u trenutak Down. Da bi dugme ispravno radilo potrebno je uskladiti rad dugmeta sa muzičkim fajlom. Kliknite na "lejer 2", na frejm u kome se nalazi zvuk. U paleti Properties se pojavljuju dodatna podešavanja audio fajla. Kako bi zvuk bio pušten u trenutku klika na dugme ptrebno je u delu Sync izabrati opciju Event. Na taj način se sinhronizuju događaj klika na dugme sa trenutkom početka reprodukcije muzičkog fajla.

Flash u sebi ima veliki broj u napred definisanih kratkih muzičkih fajlova (zkuvova) koje se mogu koristiti u animacijama. Pristup tim fajlovima se vrši iz komandnog meinja opcijom Window>Common Libraries>Sounds.

Završili smo pravljenje dugmeta. Izadjite iz izolacionog moda dugmeta. Saćuvajte dugme ako projekat i kao animaciju.

U lekciji smo prošli kroz sve korake izrade dugmeta. U narednoj lekciji će kroz dva primera biti pokazano kako se povezuju aktivnosti dugmeta sa željenim animacijama.

Otovrite projekat ,u pitanju je dugme koje je neparvljeno u okviru lekcije. U daljem radu na projektu napravićemo animaciju ispisivanja reči „CS5“.

Napravite nov lejer. Preimenujete lejer u „tekst“.

Ubacite u 5. frejm lejera „tekst“ keyframe.

Da bismo ispisali željeni tekst koristićemo alat Pencil Tool iz palete alata.

Otovrite projekat .U pitanju je dugme koje je naparvljeno u okviru lekcije 5.U daljem radu na projektu napravićemo animaciju ispisivanja reči „CS5“.

Napravite nov lejer. Preimenujete lejer u „tekst“. Ubacite u 5. frejm lejera „tekst“ keyframe.

Alat služi sa iscrtavanje oblika „slobodnom rukom“. Storke boja određuje boju kojom Pencil tool da iscrtava oblike. U paleti Properties se definiše debljina traga parametrom Storke. Podesite parametar Storke u paleti Properties na vrednost 1.

Dodatna podešavanja Pencil Tool alata nalaze se u u dnu palete alata (na slici podešavanja zaokružena zelenom i ljubičastom bojom).

Ljubičastom bojom su zaokružene opcije crtanja Pencil Toolalatom.

Opcija Straighten omogućava crtanje obejkata slobodnom rukom koje Flash zatim prepoznaje i pretvara u prave geometrijske forme.

Smooth opcija ubalažava oštre ivice nacrtanog objekta.

Opcija Ink ne unosi nikakve korekcije u nacrtane objekte.

Preporuka je da bude uključena opcija Smooth.

Drugo podešavanje (zaokruženo zelenom bojom) naziva se Object Drawing. Ta opcija je zastupljena kod velikog broja alata (Rectangle Tool, Oval tool i sl.). Ako je uključena ova opcija nacrtane forme postaju jedinstven objekat u kome su Fill i Stroke objekta objedinjeni. Takvi objekti se selektuju samo

U prethodnoj lekciji su predstavljeni Buttons simboli (dugmad). Takođe predstavljen je rad sa zvukom i Align paleta.

U lekciji 6 će se kroz dva primera pokazati praktična primena Buttons simbola. Biće predstavljen rad sa videom i jedan način korišćenja Action Script programa.

jednim klikom i da bi se Fill i Stroke promenili potrebno je ući u izolacioni mod objekta. Kada je navedena opcija isključena nacrtani objekti imaju odvojene Fill I Stroke osobine objekta. Preporuka je da ova opcija ostane isključena.

Ispišite Pencil Tool alatom preko celog radnog prostora reč “CS5”.

Da bi se napravio efekat ispisivanja slova koristiće se tzv. tehnika izrade animacije „frejm po frejm“.

Tehnika se sastoji u definisanju jednog po jednog frejma animacije, koji će zajdeno dati željenu animaciju.

Ubacivaće se jedan po jedan frejm i u svakom frejmu brisati jedan mali deo slova u nazad.

Pošto ste u 5. frejmu lejera “tekst” ispisali reč “CS5” ubacite u naredni (6.) frejm novi keyframe.

Frejm po frejm animacija

Dok se nalazite u 6. frejmu izbrišite deo poslednje napisanog znaka (broja “5”). Zatim u Timelinepaleti ponovo dodajte nov keyframe u naredni, 7. frejm, a zatim ponovo obrišite još jedan deobroja pet. Dodajte u naredni 8. frejm novi keyfame i ponovo obrišite deo napisanog znaka.

Ponavljajte postupak dodavanja pojedinačnog keyframe-a i brisanja malih delova ispisanog teksta. Da biste ubrzali prosce rada, možete koristiti prečicu za dodavanje keframe-a, taster F6. Dovoljno je posle obrisanog dela znaka pritisnuti taster F6 i na lejeru “tekst” će se pojaviti nov keyframe.

Eraser Tool (gumica) služi da se obrišu delovi objekata koji su tipa Shape(oblici). Glavno podešavanje alata Eraser Tool je oblik i veličina četkice. Izbor navedenih parametara se vrši u dnu palete alata pri čemu su ponuđeni gotovi oblici i dimenzije četkice (na narednoj slici zaokruženo plavom bojom).

Za razliku od drugih programa iz palete Adobe programa, Eraser Tool alat ima osobinu da se njegove dimenzije ne menjaju povećanjem prikaza radnog porstora. Bez obzira koliki je prikaz radnog prostora izabran dimenzija gumice ostaje ista (ona koja je izabrana).

Postupak ponavljati dok se ne obriše ceo tekst.

Na narednoj slici je dat predlog koji delovi teksta treba da budu izbrisani u kom keyframe-u, kao i smer brisanja teksta (“u nazad”).

Broj frejmova koji je potreban da se efektat uradi može da varira u zavisnosti od veličine brisanih segmenata.

Ako se testira trenutna animacija dobija se animacija u kojoj se tekst ispisuje u nazad.

Da bi se obrnula animacija i dobio utisak ispisvanja teksta u napred potrebno je obrnuti redosled keyframe-ova koji čine animaciju. Da bi to postigli potrebno je selektovati frejmove koji čine animaciju (od 5. do 70. frejma lejera “tekst”). Pošto se selektuju frejmovi kliknuti desnim klikom na selektovane frejmove i iz podmenija izabrati opciju Reverse Frames.

Prozor Actions

Ovako urađena animacija vrti se u krug. Pomoću Action Script programskog jezika uvešćemo dodatnu kontrolu u animaciju.

Napravite nov lejer koji će služiti samo za potrebe kontrole animacije pomoću Action Scriptprograma. Napravljeni lejer preimenujte u “as”.

Kliknite na prvi frejm lejera “as”.

Kako želimo da na početku animacije bude vidljivo samo dugme potrebno je animaciju zaustaviti u prvom frejmu. Action Script 3 programski kod piše se za pojedionačne frejmove. Kako “teče” animacija kada se dođe do određenog frejma u kome postoji programski kod, isti se tada i izvršava.

Na radnom prostoru će biti vidljivo dugme u osnovnomn (Up) stanju. Otvorite iz komandnog menija prozor Actions(Window>Actions). U navedenom prozoru se nalazi prostor u kome se piše programski kod.

Naredba koju ćemo iskoristiti da zaustavimo animaciju je naredba stop();

Ispišite naredbu i na kraju reda pritisnite ENTER.

Primetićete u Timeline paleti da se u frejmu 1 lejera “as” pojavljuje malo slovo “a”. Ta oznaka ukazuje na postojanje Action Scriptsadržaja u datom frejmu.

Code Snippets

Kliknite crnom strelicom na dugme kako biste ga selektovali. Iz prozora Actions koji smo ranije otvorili putanjom Window>Actions kliknite na opciju Code Snippets.

Code Sinppets su unapred definisane strukture programskog koda kojima se postiže interaktivnost elemenata u Flash-u. Vrlo su povoljni za korišćenje osobama koje nemaju programersko znanje ili nisu upućeni u Action Script program.

U prozoru Snippets koji se otvorio naredbe koje se koriste su grupisane u određene celine.

U slučaju kada želimo da klik na dugme pokrene deo animacije koji počinje od određenog frejma potrebno je iz grupe snippets-a „Timeline navigation“ izabrati opciju „Click to go to Frame and Play“ ( „klik da se ode na željeni frejm i pusti animacija“).

Ako instancu simbola dugmeta niste ranije imenovali Flash će korisnika u ovom trenutku obavestiti da instanca simbola dugmeta nema ime i traži od korisnika saglasnost da Flash sam da ime instanci. Prihvatite navedenu ponudu.

U prozoru Actions se ispisuje potrebni programski kod.

Kod

Kod sadrži dva dela. Prvi koji se nalazi između znaka kose crte i zvezdice (/* ... */) ispisan sivom bojom. Sav tekst koji se u Action Scriptu upisuje između opisanih oznaka predstavlja komentare koje program ne prepoznaje a služe korisniku, programeru, da ostavi određeni komentar u vezi programa ili uputstvo za korišćenje programa.

U slučaju korišćenja snippets-a prvi deo programa opisuje naredbu i daje instrukcije koje je promene potrebno izvršiti u glavnom delu ispisanog programa kako bi se programski kod prilagodio trenutnoj animaciji.

Prema instrukcijama snippet-a koji smo iskoristili u tekućoj animaciji, potrebno je u delu programa pored naredbe gotoAndPlay (5), u zagradi umesto broja 5 upuisati frejm u kome počinje naša animacija. Kako animacija ispisivanja teksta počinje u frejmu broj 6 potrebno je ispraviti taj deo glavnog programa snippet-a i umesto broja 5 upisati broj 6. (na slici zaokruženo crvenom bojom).

Na ovaj način je povezana aktivnost klika na dugme sa puštanjem animacije.

Krajnja animacija

Animacija je gotova.

Sačuvajte animaciju kao projekat i testirajte film.