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




 
 
SEGÉDLETEK Navigáció, Scroll

Scroll-menü folyamatosan lassuló mozgással
  feltöltve: 2003.11.26 | szerző: papp | olvasva: 18663 alkalommal

 
 

Egy olyan menüt fogunk készíteni, melynek szélessége meghaladja a képernyő szélességét. Mivel minden menüpontot szeretnénk elérhetővé tenni, az egér x koordinátája fogja meghatározni a menüsáv pozícióját, vagyis jobbra-balra tudjuk mozgatni. Például az Swf.hu régi menüjénél is egy ilyen megoldást láthattunk. Talán meglepő, hogy összesen 2 sor kemény Actionscript kódra lesz szükségünk. Nem állítom, hogy a világ legtökéletesebb menüje, de ennek ellenére sokan szerették volna megkaparintani a forrását. Egyetlen igazi hátránya, hogy nem látjuk az összes menüpontot, tehát nem árt jelezni, hogy további menüpontok is elérhetők.

A menü elkészítéséhez szükséges elméleti rész az alábbi 2 segédletben olvasható:
Mozgás ActionScripttel - 1. rész  / Mozgás ActionScripttel - 2. rész

1.lépés: Nyissunk egy új, 600x250 pixel méretű Flash mozit és készítsünk egy 100 pixel szélessségű gombot. A lehető legegyszerűbb gomb is jó lesz, most a mozgás a lényeg.

2.lépés: A menüsorunk legyen mondjuk kétszer olyan széles mint a színpad, tehát helyezzünk egymás mellé 12 gombot. Jelöljük ki az összeset és F8-al helyezzük el őket egy moziklipben úgy, hogy a registrációs pont a jobb-felső sarokban legyen. A moziklip neve és példány neve (instance name) is legyen 'menu':

Van egy 600 pixel szélességű színpadunk és egy 1200 pixel szélességű menünk. A gombok felett létrehozhatunk egy új réteget a gombfeliratoknak, a mellékelt példában pixelfontokat használtam.

3. lépés: Rajoljunk egy tetszőleges grafikát, ami az egérmutatót fogja követni és alakítsuk moziklippé 'helyzetjelzo' példány névvel. A mellékelt pélában két párhuzamos, 100 pixel szélességű vonalat rajzoltam:

A 'helyzetjelzo' moziklip követni fogja az egérmutatót, tahát mindig az aktuális gombot jelöli. A helyzetjelzőnek nem a látványban van a fő szerepe, ha nincs rá szükséged, egy üres moziklipet is használhatsz.

4. lépés: Tehát a 'helyzetjelzo' moziklip követi az egérmutatót. Használjuk az előző részből már ismerős, egyenletesen lassuló mozgást (a this. elhagyható):

onClipEvent (enterFrame) {
     this._x += (_root._xmouse - this._x)/4;
}


Teszteld a mozit és látni fogod, hogy a 'helyzetjelzo' némi késéssel követi az egérmutatót (ha növelni szeretnéd a késleltetést, mindössze az osztót kell átírnod magasabb értékre). A menüsáv egyelőre mozdulatlan, nem tudjuk elérni a színpadon kívüli menüpontokat.

5. lépés: Jelöld ki a 'menu' moziklipet, nyomj egy F9-et és gépeld be az alábbi kódot:

onClipEvent (enterFrame) {
     this._x += (-_root.helyzetjelzo._x - this._x)/8;
}


Nézzük mi is történik itt. A 'helyzetjelzo' moziklip x koordinátájának ellentétes értékéből kivonjuk a menü pillanatnyi x koordinátáját, majd elosztjuk egy értékkel (esetünkben 4-el), mert itt is lassuló mozgást alkalmazunk és végül a kapott értékkel növeljük a menü x koordinátáját. Ezt egyszerűbben úgy írhatnánk le, hogy amikor a 'helyzetjelzo' jobbra elmozdul mondjuk 50 pixelt akkor a menü ellentétes irányba fog elmozdulni 50 pixelt. Tehát a helyzetjelzőre azért van szükségünk, hogy a menüt az egér mozgásával ellentétes irányba tudjuk mozdítani és itt újból megjegyzem, hogy akár üres moziklip is megfelel a célra.

Ha pixelfontokat használsz a menüpont feliratoknál, a menü pillanatnyi x pozícióját egész számra kell kerekítened, különben a felirat elmosódik. Az alábbi kódot használd:

onClipEvent (enterFrame) {
     this._x += int((-_root.helyzetjelzo._x - this._x)/4);
}

Végül következzen a befejezett menü:

 
 
 
 

© 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 >>> : .. .