Interaktivnost je oduvijek bila temelj web dizajna i multimedijskih prezentacija. U zlatno doba web animacije, Adobe Flash (nekadašnji Macromedia Flash) bio je neprikosnoveni alat za stvaranje dinamičnog sadržaja. Iako je tehnologija evoluirala prema otvorenim standardima poput HTML5 i CSS3, a sam Flash je rebrendiran u Adobe Animate, osnovni koncepti interaktivnosti i programiranja gumba ostali su iznimno poučni za sve koji se bave digitalnim dizajnom i osnovama programiranja.
U ovom detaljnom vodiču proći ćemo kroz cijeli postupak stvaranja jednostavnog, ali potpuno funkcionalnog klikabilnog gumba. Naučit ćete kako vizualno oblikovati gumb, definirati njegova interaktivna stanja te primijeniti odgovarajući kôd koji će korisnika nakon klika preusmjeriti na željenu web stranicu.
Razumijevanje strukture gumba u Flashu
Prije nego što prijeđemo na samo pisanje koda, važno je razumjeti kako Flash tretira gumbe. Za razliku od običnih grafičkih elemenata ili filmskih isječaka (Movie Clips), gumb (Button) je posebna vrsta simbola koja ima jedinstvenu vremensku crtu (Timeline) sastavljenu od točno četiri ključna kadra (Frames):
- Up (Gore): Kako gumb izgleda kada pokazivač miša nije iznad njega. Ovo je zadano stanje gumba.
- Over (Iznad): Vizualni izgled gumba u trenutku kada korisnik prijeđe mišem preko njega. Obično se ovdje mijenja boja ili dodaje blagi sjaj kako bi se korisniku dalo do znanja da je element klikabilan.
- Down (Dolje): Izgled gumba u trenutku samog klika (dok je lijeva tipka miša pritisnuta).
- Hit (Područje klika): Nevidljivo područje koje definira aktivnu zonu gumba. Sve što nacrtate u ovom kadru određuje prostor koji reagira na pokrete miša i klikove.
Korak 1: Kreiranje i dizajniranje vizualnog gumba
Prvi korak u izradi je crtanje samog objekta koji će služiti kao gumb. Slijedite ove jednostavne korake:
- Otvorite Adobe Flash (ili Adobe Animate) i kreirajte novi dokument.
- Pomoću alata za crtanje oblicima, poput Rectangle Tool (pravokutnik) ili Oval Tool (elipsa), nacrtajte željeni oblik na pozornici (Stage).
- Dodajte tekst unutar oblika (npr. “Posjeti web stranicu”) pomoću alata Text Tool kako bi korisnicima bilo jasno čemu gumb služi.
- Označite i nacrtani oblik i tekst zajedno.
- Pritisnite tipku F8 na tipkovnici (ili desni klik i odaberite Convert to Symbol).
- U prozoru koji se pojavi unesite naziv simbola (npr. “moj_gumb”) i pod vrstom (Type) obavezno odaberite Button. Kliknite OK.
Korak 2: Definiranje stanja gumba (Up, Over, Down, Hit)
Sada kada imate kreiran simbol gumba, potrebno je definirati kako će se on ponašati kada korisnik stupi u interakciju s njim:
Dvaput kliknite na novokreirani gumb na pozornici kako biste ušli u njegovu izoliranu vremensku crtu. Vidjet ćete četiri ranije spomenuta kadra: Up, Over, Down i Hit.
Desnim klikom na kadar Over odaberite Insert Keyframe (ili pritisnite F6). Na ovom kadru promijenite boju pozadine gumba kako bi se vizualno razlikovao od početnog stanja. Ponovite postupak za kadar Down, gdje možete dodatno promijeniti boju ili blago pomaknuti tekst prema dolje kako biste simulirali fizički pritisak gumba.
Na kraju, u kadru Hit umetnite još jedan ključni kadar. Ovdje je dovoljno ostaviti jednostavan ispunjeni pravokutnik koji prekriva cijelo područje gumba. Taj pravokutnik neće biti vidljiv krajnjem korisniku, već služi isključivo kao detektor dodira miša.
Korak 3: Dodavanje ActionScript koda za klik
Nakon što smo uspješno dizajnirali gumb, vrijeme je da mu udahnemo život pomoću programskog jezika ActionScript. Vratite se na glavnu scenu klikom na strelicu iznad vremenske crte ili klikom na naziv scene (npr. “Scene 1”).
Jednom kliknite na svoj gumb na pozornici kako biste ga označili. Otvorite ploču s akcijama pritiskom na tipku F9 (ili idite na Window -> Actions). U prozor koji se otvori upišite sljedeći kôd:
on (release) { getURL("https://www.ucionica.net");
}Pojašnjenje koda:
Ovaj jednostavan isječak koda koristi klasični ActionScript 2.0 i funkcionira na sljedeći način:
- on (release): Ova naredba govori programu da pričeka trenutak kada korisnik klikne na gumb i potom otpusti lijevu tipku miša unutar aktivnog područja gumba. To je standardni i najsigurniji način aktivacije klika.
- getURL(“…”): Ova funkcija prima adresu web stranice koju želite otvoriti. Unutar navodnika upišite punu URL adresu, uključujući protokol (http:// ili https://).
Česte pogreške i kako ih riješiti
Tijekom rada u Flashu, početnici se često susreću s problemima zbog kojih gumb ne reagira na klik. Evo nekoliko najčešćih scenarija i rješenja:
| Problem | Mogući uzrok | Rješenje |
|---|---|---|
| Kôd javlja pogrešku pri prevođenju | Kôd je napisan u ActionScript 3.0 projektu, a koristi se sintaksa za ActionScript 2.0. | Provjerite postavke dokumenta. Ako koristite AS3, morat ćete koristiti Event Listenere umjesto “on (release)” sintakse. |
| Gumb uopće ne reagira na klik | Kôd je dodijeljen vremenskoj crti (Frame), a ne samom objektu gumba. | Označite gumb na pozornici, pritisnite F9 i provjerite piše li na vrhu prozora Actions “Actions – Button”. |
| Poveznica se ne otvara u pregledniku | Nedostaje protokol (npr. upisano je samo “www.ucionica.net” umjesto “https://…”). | Uvijek koristite puni URL s protokolom kako bi sustav prepoznao da se radi o vanjskoj web adresi. |
Tranzicija prema modernim standardima: Adobe Animate i HTML5
Ako danas radite na interaktivnim projektima, važno je napomenuti da je tehnologija Flash Player službeno umirovljena. Ipak, znanje o izradi gumba možete primijeniti u modernom nasljedniku – Adobe Animate. Kada kreirate novi projekt, umjesto ActionScripta odaberite HTML5 Canvas.
Princip kreiranja gumba i njegovih stanja (Up, Over, Down, Hit) ostaje potpuno identičan. Jedina razlika je u programskom jeziku – umjesto ActionScripta koristit će se JavaScript. Adobe Animate nudi izvrstan alat pod nazivom Code Snippets (Isječci koda) koji vam omogućuje da jednim klikom dodate kôd za otvaranje web stranice bez potrebe za ručnim pisanjem JavaScript koda.
Često postavljana pitanja (FAQ)
Mogu li napraviti da se poveznica otvori u novom prozoru?
Da, funkcija getURL podržava i drugi parametar koji definira ciljni prozor. Ako želite da se stranica otvori u novoj kartici ili prozoru preglednika, kôd trebate modificirati ovako:
on (release) { getURL("https://www.ucionica.net", "_blank");
}Zašto ne vidim opciju “Actions” kada desno kliknem na gumb?
Provjerite jeste li doista selektirali gumb na pozornici. Ako ste unutar uređivanja samog simbola (gdje vidite stanja Up, Over, Down, Hit), nećete moći dodijeliti akciju gumbu na taj način. Morate se vratiti na glavnu scenu (Scene 1), jednom kliknuti na gumb i tek tada pritisnuti F9.
Koja je razlika između ActionScript 2.0 i ActionScript 3.0?
ActionScript 2.0 je starija verzija koja je dopuštala pisanje koda izravno na same objekte (gumbiće, filmske isječke). ActionScript 3.0 je moderniji i stroži objektno-orijentirani jezik u kojem se sav kôd mora pisati na vremenskoj crti (Timeline) ili u vanjskim klasama, koristeći slušače događaja (Event Listeners).
Zaključak
Izrada klikabilnog gumba u Adobe Flashu temeljni je postupak koji slikovito prikazuje kako se vizualni elementi povezuju s programskom logikom. Bez obzira na to koristite li starije verzije Flasha iz nostalgičnih i edukativnih razloga ili radite u modernom Adobe Animate okruženju za HTML5 Canvas, razumijevanje stanja gumba i rukovanje događajima klika ključne su vještine svakog interaktivnog dizajnera. Slijedeći korake iz ovog vodiča, s lakoćom možete kreirati bilo koji interaktivni element za svoje projekte.