. .. : Swf.hu 1.0 archívum : Swf.hu főoldal >>> : .. .




 
 
SEGÉDLETEK Navigáció, Scroll

Példa animált gombok/menü készítésére Flash MX-ben
  feltöltve: 2004.06.18 | szerző: Lacaa | olvasva: 29176 alkalommal

 
 

Az alábbi segédletben megtanulhatjuk, hogy hogyan készíthetünk nem túl bonyolult s tökéletes on(rollOver) és on(rollOut) eseménnyel működő gombot. A hangsúly nem a programozáson lesz, hanem inkább azon, hogy mindenki elsajátíthassa ezt a technikát s képes legyen ezentúl ne csak sima alapgombot kreálni.

1. lépés: Nyissunk egy 200*200 pixel nagyságú mozit, az fps -t állítsuk mondjuk 24 -re (nem lényeg). 2 rétegre lesz szükségünk, egy 'gomb' és egy 'felirat' rétegre. A háttérszín (Background) legyen fehér.

2. lépés: A 'gomb' rétegen rajzoljunk egy 100*18 -as nagyságú téglalapot. Fontos, hogy a téglalap magassága (H:) a később a menü feliratainál használt betűmérettől s betűtípustól függ.

3. lépés: A megrajzolt téglalapra kikkeljünk a jobb egérgombbal, majd menjünk rá a Convert to Symbol feliratra.

A Name legyen mondjuk gomb, a regisztrációs pont pedig legyen középen (alapban úgy áll, így nem kell bántanunk).

4. lépés: Elkészült a gombunk ugyebár a gomb rétegen, klikkeljünk rá duplán.

5. lépés: A Hit frame -en klikkeljünk ismét a jobb egérgombbal, majd menjünk az Insert Keyframe -re. Ez az utasítás a Hit frame -en ugyanazt a Keyframe -et létrehozza, mint ami az előtte lévő legközelebbin van (ez esetben az Up frame -en ami van).

6. lépés: Kattintsunk egyszer az Up frame feliratra, majd nyomjunk egy Delete -et (töröljük a frame tartalmát). Erre azért van szükség, mert később nekünk nem lesz szükségünk arra, hogy a gombunk alatt legyen vmi, csak a gomb Hit frame -je lesz fontos (s a gombok fölött lesznek a feliratok). Kérdezhetnék most páran, hogy miért nincs semmi az Over és a Down frame -eken, a válasz csupán annyi, hogy az Over frame -en az onRollOver esemény van, de mi azt meg fogjuk hívni, ezért ne használjuk most (ha egyszerű gombot akarunk készíteni, akkor nyugodtan). A Down frame -re pedig tehetnénk valamit, de ebben az esetben szerintem nem esztétikus, lényegtelen.

7. lépés: Ugorjunk vissza a főszínpadra, majd az általunk elkészített gombot húzzuk be 5* a színpadra a Library -ből a gomb rétegre egymás alá 20 pixelenként (ne tévesszen meg minket a gomb színe, ez csak jelzőszín, hogy lássuk, hogy ott van egyáltalán valami).

8. lépés: Kattintsunk a felirat rétegre, majd az előbb behúzott gombok mindegyikére írjunk rá különböző menüfeliratokat (Főoldal, Linkek, meg a szokásos).

Ha nyomunk egy Test Movie -t, akkor láthatjuk, hogy csak a felirat rétegen levő szövegek láthatóak futás közben.

Eddig nem volt nehéz dolgunk, biztos sokan már ásítoznak, de a részletes leírás volt a cél, ezentúl nem lesz minden egyes konvertálásról, lépésről screenshot.

9. lépés: Rajzoljunk egy 100*18 (e font használatakor, s ilyen betűmérettel) szintén téglalapot, majd konvertáljuk Graphic szimbólummá. A Name legyen mondjuk 'graf'. Ezután ismét kattintsunk jobb egérgombbal a konvertált 'graf' -ra, s konvertáljuk Movie Clip -pé. A Name legyen mondjuk graf_mc. Pipáljuk ki Linkage beállításoknál az Export for Actionscript -tet. Identifier legyen mondjuk 'oda'.

10. lépés: Kattintsunk duplán a graf_mc -re, majd hozzunk létre valamilyen Motion Tween -t a graf -okkal (mondjuk 0% alphaból 100% alpháig 15 frame -en keresztül - az utolsó frame -re természetesen írjunk egy stop(); -ot). Fontos, hogy a 2 graf (az 1. és a 15. frame -en lévő) 0; 0 -hoz legyen igazítva az mc -ben.

11. lépés: A Library -ben klikkeljünk jobb egérgombbal erre a graf_mc -re, majd menjünk a Duplicate -re. Előugrik ugyanaz az ablak, mint mikor konvertáltunk Movie Clip -pé. A Name legyen mondjuk 'graf_mc_2' s az Identifier a Linkage -nél 'vissza'. Ebben a graf_mc_2 -ben nincs más dolgunk, mint megfordítani a 2 Keyframe -en találhatóakat (az első frame -en legyen 100% a graf alphaja, a 16. -on pedig 0%). Fontos itt is, hogy a graf -ok _x és _y koordinátája 0; 0 legyen.

A nehezén túl vagyunk, most jön a kódolás.

12. lépés: Hozzunk létre egy teljesen üres Movie Clipet (Insert>>New Symbol>>Movie Clip), melynek neve (Name) legyen 'ide'.

13. lépés: A gomb rétegen pakoljuk be ismét 5* az üres előbb létrehozott Movie Clipünket ('ide'). Az _x és _y koordináták eggyezzenek meg a gombok _x és _y koordinátáival (a Flash segít nekünk, ugyanis pont oda fogja helyezni, ha arra visszük).
Fontos, hogy mind az 5 behúzott mc -nek különböző instance nevet adjunk meg (legyen mondjuk az elsőé eff1, a másodiké eff2, ... az ötödiké eff5).

14. lépés: Kattintsunk a legfelső gombra (ami fölött a Főoldal felirat van, majd jöhet a kódolás. Az attachMovie() -t fogjuk alkalmazni, ami Libraryből hív be elemeket Identifier alapján. Írjuk:

on (rollOver) {
eff1.attachMovie("oda", "eff1", "this");
}
on (rollOut) {
eff1.attachMovie("vissza", "eff1", "this");
}

Ugyanezt mind az 5 gombra ráírjuk, csak azzal a különbséggel, hogy a második gombnál az eff1 -ek helyett eff2 -t írunk, s így tovább (eff3 ... eff5).

S az eredmény:

Ezzel a segédletünk végére is értünk, lehet még trükközni, méghozzá azzal, hogy különböző Tween -eket hozunk létre a graf_mc -ben s a graf_mc_2 -ben. Akár onRelease eseményre is hívhatunk be egy mozit a megfelelő üres mc -nkbe, a lehetőségek tárháza előttünk van. Így különböző menüket készíthetünk, linkeket írhatunk rájuk, s akkor már van is egy egyszerűen elkészített flash -es onRollOver és onRollOut -os menünk. Kellemes gombkészítést!

 
 
 
 

© Devnet.hu. A segédletek semmilyen formában nem másolhatók, publikálhatók a Devnet.hu és a szerzők közös írásos engedélye nélkül.
 
. .. : Swf.hu 1.0 archívum : Swf.hu főoldal >>> : .. .