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


 
 
SEGÉDLETEK Navigáció, Scroll

Statikus szöveg és moziklip scroll megoldások - 2.rész
  feltöltve: 2003.12.30 | szerző: Ducky | olvasva: 18368 alkalommal

       
 

A forrás, az yscroll_mc-ben található az action layeren. A kódot folyamatosan írjuk, én megszakítom a magyarázatok kedvéért.

//scrollozott mc instance neve
mozi = "kep_mc";
//mc kezdő _y értéke
alapy = _parent[mozi]._y;
//scrollozandó távolság
sca = _parent[mozi]._height-_parent.mask_mc._height;
//scrollgomb magasságának csökkentése
//arányosan a mozi nagyságával
scv = sca/4;
scav = cssc_btn._height;
//kiszámoljuk, hogy mennyi
//lenne a scroll gomb magassága
felt = scav-scv;

A kód elején begyűjtjük a szükséges adatokat. A scrollozott mc instance neve, a kiinduló pozíciója, majd a mozi és a maszk magasságának (height) különbségéből kiszámítjuk a scrollozás útját. A csúszó gomb méretének megállapításához van szükség az scv és az scav változókra. Az scv-ben látható, hogy a scroll utat osztjuk el 4-gyel, ezt fogjuk majd kivonni a csúszó gomb eredeti magasságából.

//ha kevesebb lenne mint 20px
//akkor 20px lesz a mérete
if (felt>20) {
cssc_btn._height = felt;
} else {
cssc_btn._height = 20;
}
//új magasság lekérdezése
newh = cssc_btn._height;
//drag paraméterek meghatározása
xpos = cssc_btn._x;
ypos = cssc_btn._y;
ctav = scav-newh;
//scroll távolság 1 százaléka
sctavs = sca/100;

Természetesen a csúszó gomb méretének csökkentése nem mehet a végtelenségig. Ha a kapott érték kisebb mint 20px, akkor az új méret 20 lesz, ha nagyobb, akkor a fentebb kiszámított értéket kapja. Ezután lekérdezzük a csúszógomb új magasságát, erre a csúszási út kiszámolásához lesz szükségünk. Létrehozzuk azokat a változókat, amik alapján a csúszó gomb drag-elése történik majd. Ez a gombon lévő actionnal nyer teljes értelmet. Legvégül a fentebb említett módon kiszámoljuk a scrollozott mc által 1% alatt megtett utat.

// csúszó scroll gomb függvénye
function ccscr() {
_parent[mozi].onEnterFrame = function() {
scs = Math.abs(Math.round((ypos-cssc_btn._y)/ctav*100));
this._y = alapy-(sctavs*scs);
};
}
//csúszó scroll függvény törlése
function ccsdel() {
delete _parent[mozi].onEnterFrame;
}

A ccscr() függvény követi figyelemmel a csúszó gomb helyzetét, visszaadja az eredményt százalékban és a scrollozott mc y pozícióját ehhez igazítja. A 'Math.abs'-re azért van szükség, mert a kapott százalékos érték negatív, és mi pozitív számokkal szeretnénk dolgozni. A 'Math.round' pedig egész számmá kerekíti a tizedes törteket. A ccsdel() függvény állítja le a scroll folyamatot. Az első függvényt a csúszó gomb lenyomásával aktiváljuk, a másodikat a gomb felengedésével, ezek a scriptek majd a gombon lesznek láthatóak.

//felső scroll gomb
function scu() {
this.onEnterFrame = function() {
cssc_btn._y -= 3;
if (cssc_btn._y<=ypos) {
cssc_btn._y = ypos;
}
};
}
// alsó scroll gomb
function scd() {
maxscr = ypos+ctav;
this.onEnterFrame = function() {
cssc_btn._y += 3;
if (cssc_btn._y>=maxscr) {
cssc_btn._y = maxscr;
}
};
}
//alsó-felső scroll törlése
function del() {
delete this.onEnterFrame;
}

Végezetül az alsó és felső scroll gombok által használt függvények következnek. Ezek mozgatják a csúszó gombot a határértékek közöt, közben a ccscr() függvényt is működtetik, így a scroll az alsó és felső gombok használatával is működik. A del() függvény ezeket a folyamatokat állítja le. Most nézzük meg a három gombra írt kódokat.

Felső scroll gomb:

on (press) {
scu();
ccscr();
}
on (release, releaseOutside) {
ccsdel();
del();
}

Alsó scroll gomb :

on (press) {
scd();
ccscr();
}
on (release, releaseOutside) {
ccsdel();
del();
}

Csúszó scroll gomb :

on (press) { del();
x = this.xpos;
y = this.ypos;
c = this.ctav;
startDrag("cssc_btn", false, x, y, x, y+c);
ccscr();
}
on (release, releaseOutside) {
stopDrag();
ccsdel();
}

Mint az a fenti kódokban is látható, a gombok már csak az elkészített függvényeket használják. A csúszó gomb drag-elési értékei is az action frame-en létrehozott változókból erednek. Aki nem értette meg egészen, az nézzen bele a letölthető forrásokba.

 
       
 
 

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