Buttons (dugmad) 1/10U 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 objegta) 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

tipa Movie 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šćenje Align 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.

Sound 1/6 (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 u Library (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 naredbom Window>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 Sound Properties. 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 animacijemoguće je izvršiti u okviru Flash programa. Cilj komprimeovanja 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.

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 usli 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 kezframe 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.

Flashu sebi ima veliki broj u napred definisanih kratkih muzičkih fajlova (zkuvova)  koje se mogu korisstiti 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 5 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.