18
FLASH 8. NADALJEVANJE IZŠT. 6/2006, STR. 19
ANIMIRANI IZREZKI
IN GUMBI
V tem članku si bomo pogledali
dva zelo pomembna elementa v
Flashu, to sta animirani izrezek in
gumb. Brez njih praktično ne more-
mo izdelati zanimive in učinkovite
animacije. Pomen animiranih izrez-
kov je, da najprej naredimo anima-
cijo samih v sebi in jih šele potem
uporabimo za animacijo na glavni
časovni osi. Največja prednost ani-
miranih izrezkov je večkratni uči-
nek animacije, katerega bi na glavni
časovni osi zelo težko naredili reali-
stično. Druga velika prednost pa je
modularna zgradba elementov v
Flashu, ki pa jo že poznamo iz član-
ka o uporabi knjižnice. Bralcu bolj
poznani element, obravnavan v tem
članku, pa je gumb. Poznamo jih
praktično vsi, saj se z njimi srečuje-
mo, če ne drugje, na spletnih stra-
neh. Gumbe v Flashu naredimo po-
dobno kot na spletnih straneh in
imajo tudi podobno vlogo.
Izdelava in uporaba
animiranih izrezkov
Izdelavo in uporabo animiranih
izrezkov si bomo pogledali na pri-
meru vozečega se avta. Avto se vozi
čez prizorišče, hkrati pa se mu tudi
vrtijo kolesa. Če bi želeli vse to ani-
mirati na glavničasovni osi, bi imeli
veliko težav prav s sinhronizacijo
vseh teh animacij. Zato najprej na-
redimo animirane izrezke koles, jih
postavimo na prizorišče, uporabimo
kot dele avtomobila in vse skupaj
animiramo kot vožnjo avtomobila.
Postopek izdelave animiranih koles
je naslednji:
7 najprej narišemo kolo kot gra-
fični objekt in ga pretvorimo v sim-
bol kolo;
7 isti primerek na prizoriščuše en-
krat pretvorimo v simbol vrteče se
kolo (imena so zgolj simbolična in
ne vplivajo na rezultat). Tako ima-
mo sedaj v simbolu vrteče se kolo
ugnezden simbol kolo, ali drugače,
simbol kolo je sestavni del simbola
vrteče se kolo;
7 v simbolu vrteče se kolo naredi-
mo animacijo Motion, da se zavrti
za obrat od prve do, recimo, 30. ce-
lice;
7 vrnemo se v sceno, postavimoše
en primerek simbola vrteče se kolo iz
knjižnice na prizorišče, ga poravna-
mo s prejšnjim (v isti vodoravni li-
niji) in narišemo obliko avta;
7 vse skupaj označimo in ponovno
pretvorimo v simbol avto. Pri vseh
teh pretvorbah elementov v simbole
nastavimo vrsto elementa Movie
Clip (to smo obravnavali včlanku o
knjižnici). Primer naslovne vrstice
tega primera prikazuje slika 1;
7 ker smo zdaj na glavni sceni,
lahko na časovnem traku naredimo
animacijo avta, ki se premika iz le-
vega proti desnemu delu prizorišča.
Predogled animacije nam pokaže,
da se avto premika z leve proti desni
in se mu hkrati še vrtijo kolesa (kot
smo te animirali same v sebi). Slika
2 prikazuje dve animaciji na dveh
časovnih trakovih: animacijo avta
na glavnem časovnem traku in ani-
macijo vrtečega se kolesa, ki je animi-
rano samo v sebi. Primer je prikazan
na spletni strani Grafičarja.
Animirani izrezki so primerni
predvsem tam, kjerželimo animaci-
jo, ki se stalno izvaja in ni odvisna
od raznih drugih prikazov, izbir in
delovanja uporabnika (razni animi-
rani logotipi, ki so stalno prikazani).
Pri animiranih izrezkih je slabost,
da njihovih animacij v predogledu
animacij znotraj Flasha ne moremo
videti. Prednost pa je, da jih lahko
poimenujemo, tako da se lahko na-
prej tudi sklicujemo nanje (v pro-
gramski kodi actionscripta). To za-
dnje je bolj zahtevno, zato tega v na-
ši seriji člankov ne bomo obravna-
vali.
Izdelava gumbov
in nastavitev njihovih lastnosti
Za izvajanje interaktivnosti (sode-
lovanje uporabnika v animaciji) v
Flashu so nujno potrebni element
gumbi. Največkrat nas popeljejo na
kako drugo vsebino, včasih pa tudi
zaganjamo animacije, jih ustavlja-
mo, potrjujemo izbire itn. Flash
omogoča preprosto izdelavo precej
zapletenih gumbov z uporabo ra-
zličnih oblik, animacij in tudi zvoka
(tega bomo obravnavali v enem pri-
hodnjih člankov). Sama izdelava
gumbov je precej preprosta, kot je
tudi preprosta nastavitev njihovih
lastnosti. Gumb izdelamo tako, da
element na prizorišču označimo in
ga pretvorimo v simbol. Gumb poi-
menujemo in pri vrsti simbola, v
Slika 1. Prikaz ugnezdenih simbolov v naslovni vrstici.
Slika 2. Animacija avta in animacija vrtečega se kolesa.
Slika 3. Izdelava gumba.
Slika 4. Pogled urejanja gumba.

OGLAS
19
nasprotju z dosedanjim delom, na-
stavimo lastnost Button. Primer
prikazuje slika 3.
V tem primeru se gumb pojavi kot
simbol v knjižnici. Urejamo ga tako
kot vsak simbol v knjižnici ali nje-
gov primerek na prizorišču (najpo-
gosteje dvojni klik na primerek na
prizorišču). V tem primeru se nam
pokaže v oknu s časovnim trakom
malce drugačen pogled. Prikazuje
ga slika 4.
Gumbu lahko nastavljamo štiri
osnovna stanja:
7 Up (normalno stanje) je prikaz
gumba v normalnem stanju, ko ka-
zalec miške ni nad njim in gumb ni
pritisnjen;
7 Over (stanje prehoda kazalca) je
prikaz gumba, ko uporabnik nanj
zapelje kazalec miške;
7 Down (stanje pritisnjenega
gumba) je podoba gumba, ko upo-
rabnik nanj klikne z miško;
7 Hit (območje občutljivosti
gumba). Z njim pa določamo ob-
močje, kjer se bo gumb vedel kot
gumb. To pride v poštev pri »vo-
tlih« gumbih in gumbih v obliki be-
sedila.
Izdelovalcem spletnih strani so ta
stanja gumbov verjetno znana, saj je
v programih za izdelavo spletnih
strani (npr. Dreamweaver) njihova
definicija enaka. Prva tri stanja so
lažje razumljiva, zato malce bolj po-
drobno razložimo stanje Hit. Kadar
za gumb uporabimo grafično obli-
ko, ki ima znotraj razne prazne po-
vršine (»votel« gumb), ali kadar za
gumb uporabimo besedilo, bi bil ta
zelo neuporaben, saj bi bil aktiven le
tam, kjer je grafika narisana oziro-
ma besedilo napisano. Takrat v sta-
nju Hit z grafično obliko določimo,
kje je gumb aktiven. Pri besedilnem
gumbu ponavadi kar čez besedilo
narišemo kvadrat. Barva grafike v
stanju Hit ni pomembna, saj le do-
loča področje občutljivosti in je ta-
ko le indikator področja (podobno
kot pri izdelavi maske iz prejšnjega
članka). Primeri pomena uporabe
stanja Hit so prikazani na spletni
strani Grafičarja. Slika 5 prikazuje
vsa štiri stanja besedilnega gumba
na omenjeni spletni strani.
Doslej smo imeli v posameznih
stanjih gumba navadne grafike.
Najpogosteje te grafike tudi pretvo-
rimo v simbole v knjižnici, pred-
vsem zato, da jim lahko nastavljamo
vse lastnosti, ki jih lahko spreminja-
mo, in še bolj pomembno, da jih
lahko animiramo in tako dobimo
animirane gumbe.
Animirani
in nevidni gumbi
S kombinacijo doslej osvojenega
znanja Flasha in malce dela lahko
naredimo že zelo privlačne animira-
ne gumbe. Tipičen primer so naslov
in povezave na posameznečlanke na
glavni strani predstavitve Flash na
spletni strani Grafičarja. Ko se z mi-
ško zapeljemo na te gumbe, se začne
izvajati animacija. Trik je le v tem,
da v ustrezno stanje gumba vstavi-
mo simbol, ki se vede kot animiran
izrezek, in ga predhodno ustrezno
animiramo. Načelo izdelave animi-
ranega gumba je naslednje:
7 napisano besedilo pretvorimo v
gumb;
7 v stanju Up to besedilo pretvori-
mo v navaden grafični simbol;
7 v stanju Over to isto besedilo
pretvorimo v simbol animiranega
izrezka;
7 znotraj animiranega izrezka na-
redimo animacijo (to je razloženo
na začetku tega članka);
7 po potrebi določimo še stanje
občutljivosti.
Z uporabo animiranih gumbov
lahko naredimo zanimive menije, ki
so tipični navigacijski meniji na
spletnih straneh. Nekaj primerov je
prikazanih na spletni strani Grafi-
čarja.
Drugi pomemben element so ne-
vidni gumbi. Njihov pomen je, da v
animaciji niso vidni, so pa kljub te-
mu delujoči in imajo svojo funkcijo
(te bomo spoznali v prihodnjem
članku). Uporabljamo jih, kadar že-
limo na poljubnih slikah ali grafi-
kah določiti občutljiva območja, pri
čemer teh slik in grafik ne bi radi
»pokvarili« s slikami gumbov. Naj-
pogostejši primer uporabe nevidne-
ga gumba so zemljevidi, na katerih
želimo, da so občutljiva mesta, ki
nas recimo ob pritisku popeljejo na
kako drugo vsebino (spletna pove-
zava). Sama izdelava je zelo prepro-
sta:
7 ustvarimo nov simbol;
7 samo v stanju Hit narišemo gra-
fiko, vsa druga stanja pustimo pra-
zna;
7 gumb se pojavi v knjižnici in ga
lahko postavimo na prizorišče.
Na prizorišču je gumb prikazan s
prosojno svetlo modro barvo, kar
pomeni, da imamo opravka z nevi-
dnim gumbom. Primer prikazuje
slika 6. V izvoženem filmu nevidni
gumbi seveda niso prikazani.
Povzetek
V tem članku smo se srečali z ani-
miranimi izrezki in gumbi. Ti ele-
menti so nepogrešljivi pri izdelavi
zanimivih in učinkovitih animacij.
Glavni prednosti animiranih izrez-
kov sta v tem, da so animirani sami
v sebi in torej niso vezani na glavni
časovni trak (animirajo se neodvi-
sno) in njihova modularna zgradba.
Gumbi pa so nujno potrebni, da
animacijam dodamo interaktivnost,
torej da uporabnik sam vpliva na
izvajanje in prikazovanje animacije
ali spletne strani. Brez njih lahko
dejansko naredimo samo kakšne
animacijske risanke, na katerih pri-
kazovanje uporabnik nima vpliva.
Kot lahko vidite iz primerov na
spletni strani, pa so vsi ti gumbi za-
enkrat neuporabni, saj se ob klika-
nju na njih nič ne zgodi. Za to upo-
rabimo akcije, ki bodo tema priho-
dnjega članka.
Primeri povezani z tem člankom
so na spletni strani www.delo.si/gra-
ficar (začasno v rubriki ZADNJA
ŠTEVILKA, kasneje v rubriki oz. v
oknu ARHIV/Grafičar 2007/Grafi-
čar 1/2007).
Andrej ISKRA
Univerza v Ljubljani
Slika 5. Prikaz štirih stanj besedilnega gumba. Slika 6. Prikaz nevidnih gumbov.
Nadaljevanje
na strani 26.