Hozzunk létre egy új Flash dokumentumot, majd Macintosh alatt a Command + J, Windows alatt pedig a Ctrl + J gyorsbillentyû leütésével nyissuk meg a dokumentumtulajdonságok párbeszédablakot. A színpadot állítsuk be 240×120 képpont méretûre, a képkockasebesség mezõben pedig adjuk meg a 25 fps értéket.
|Az eszköztárban keressük ki a téglalap eszközt, majd fordítsuk figyelmünket az eszköztár beállítások (
Options) szakaszára. Kattintsunk egyszer a téglalap lekerekítését szabályozó gombra (
Set Corner Radius), majd a megjelenõ párbeszédablakban adjunk meg 10 pontos lekerekítést. Állítsunk be üres körvonalat, illetve egy feketétõl eltérõ kitöltõszínt, majd rajzoljunk a színpadra egy lekerekített téglalapot. Váltsunk vissza a kijelölõ eszközre, és jelöljük ki alakzatunkat.
(A lekerekített téglalapokkal kapcsolatos tippet itt olvashatjuk).|Üssük le az F8 gyorsbillentyût, és hozzunk létre alakzatunk felhasználásával egy "Alap" nevû, grafika (Graphic) típusú szimbólumot. A kijelölés megszüntetése nélkül üssük le ismét az F8 gyorsbillentyût, majd grafikánk felhasználásával készítsünk egy "Anim" nevû, filmklip (Movie clip) típusú szimbólumot is. Nyugtázást követõen kattintsunk duplán az imént létrehozott filmklipre, ezzel megnyitva azt szerkesztésre. Amennyiben mindent jól csináltunk, a dokumentumablak szerkesztõsorában meg is találjuk az "Anim" filmklip ikonját.
|A "Layer 1" réteg nevére duplán kattintva nyissuk meg azt szerkesztésre, és gépeljük be az "Alap" elnevezést. Az idõegyenesen kattintsunk a 6. képkockába, majd az
F6 gyorsbillentyû leütésével szúrjunk be ide egy kulcsképkockát az elsõ képkocka tartalmával. Ezt követõen kattintsunk a 11. képkockába, és hozzunk létre itt is egy új kulcsképkockát. Végül kattintsunk ismét a 6. képkockába.
|Kattintsunk egyszer a színpadon található grafikára, hogy adatai megjelenjenek a tulajdonság panelen. (Amennyiben véletlenül duplán kattintunk, és megnyitjuk szerkesztésre a grafikát, kattintsunk valahol az alakzaton kívül is duplán, ezzel visszatérve az elõzõ állapotba.)
A tulajdonság (
Properties) panel szín (
Color) választójában keressük ki a fényerõ (
Brightness) tételt, a megjelenõ értékmezõben pedig állítsunk be -100%-ot. Grafikánk ezáltal feketére vált.
|Kattintsunk az elsõ képkockára, majd a megváltozott tulajdonság panel átmenet (
Tween) választójában állítsuk be a mozgásátmenet (
Motion) tételt. Tegyük meg ugyanezt a hatodik képkockában is. Figyeljük meg, hogy idõegyenesünk köztes képkockáit most lila hátterû, jobbra mutató nyilak töltik ki. Zároljuk le rétegünket, majd az
Insert >
Timeline >
Layer menüpont kiválasztásával hozzunk létre egy új réteget, adjuk neki a "Szöveg" nevet, majd kattintsunk elsõ képkockájába. Válasszuk ki a szöveg eszközt, határozzunk meg statikus mezõtípust (
Static Text), egy tetszõleges betûtípust (példánkban az Arial mellett döntöttünk), 14 pontos méretet, fehér színt, a rendezést pedig állítsuk középre. Kattintsunk a színpadra, majd gépeljük be a "menüpont" szót. Helyezzük el feliratunkat a gomb közepére, majd zároljuk le "Szöveg" rétegünket is.
|Hozzunk létre egy új réteget "Címkék" néven, zároljuk le, majd kattintsunk elsõ képkockájára. Macintosh alatt az
Option +
F9, Windows alatt pedig az
F9 gyorsbillentyû segítségével nyissuk meg a cselekményszerkesztõ panelt (
Actions - Frame), és gépeljük be a következõ utasítást:
stop();
Kattintsunk egyszer a "Címkék" réteg második képkockájára, majd az F6 gyorsbillentyû segítségével alakítsuk át kulcsképkockává. Figyeljük meg, hogy cselekményszerkesztõnkbõl eltûnt a stop(); utasítás. Ennek az az oka, hogy most már a második kulcsképkocka utasításlistáját látjuk itt, amely értelemszerûen üres. Az elsõ képkockában azonban láthatunk egy kis "a" betût, amely arra utal, hogy az bizony tartalmaz már utasítást.
Keressük meg a tulajdonság panel címke (Frame) mezejét, majd gépeljük be ide a "k1" elnevezést. A mûvelet végrehajtásával egy kis piros zászló jelenik meg az idõegyenes második képkockájában, mellette a "k1" azonosítóval, amelyet a késõbbiekben arra használunk majd fel, hogy ide léptessük filmklipünk lejátszófejét.
A 6. képkockában hozzunk létre egy újabb kulcsképkockát, ezt a stop(); utasítással együtt, majd a 7. képkockában is egyet, ezt pedig a "k2" címkével. Végül hozzunk létre egy utolsó réteget, adjuk neki az "Utasítások" nevet, zároljuk le, és kattintsunk elsõ képkockájára.
|Amennyiben nincs nyitva a cselekményszerkesztõ, nyissuk most meg, majd gépeljük be a következõ utasítást:
this.onRollOver = function () {
gotoAndPlay("k1");
}
Az "onRollOver" eseménykezelõ akkor kerül meghívásra, amikor az egér mutatóját filmklipünk fölé visszük. Utasításunkkal elérjük, hogy a filmklip lejátszófeje a korábban meghatározott "k1" címkére ugorjon, majd onnan folytassa a lejátszást. Természetesen a 6. képkockában elhelyezett stop(); utasítás megállítja a fejet, így a gomb fekete állapotát látjuk:
|Egészítsük ki programkódunkat a következõképpen, majd mentsük el munkánkat, és tekintsük meg az eredményt:
this.onRollOver = function () {
gotoAndPlay("k1");
}
this.onRollOut = function () {
gotoAndPlay("k2");
}
|Az imént megszerzett ismeretek birtokában teljes menürendszert is készíthetünk animált gombok felhasználásával.
Jó munkát!
Figyelem! A tartalom legalább 2 éve nem frissült! Előfordulhat, hogy a képek nem megfelelően jelennek meg.
