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


 
 
SEGÉDLETEK Navigáció, Scroll

Statikus szöveg és moziklip scroll megoldások - 1.rész
  feltöltve: 2003.12.29 | szerző: Ducky | olvasva: 17501 alkalommal

   
 

rollOver scroll:

Ugyanazt a megoldást és környezetet használjuk a következő példában is. Készítsük el ugyanazt a mozit, csak az action layeren lévő scriptek változnak meg némiképpen.

Nézzük meg először elméletben, miben is különbözik a két megoldás egymástól. Az előző alkalmazásnál a scroll folyamatot a gombok lenyomása indította el, míg a gombok felengedése leállította a scrollt. Jelen esetünkben egy, felhasználók számára kényelmesebb megoldást nézünk meg. Itt akkor indul el a scroll folyamat, ha az egér kurzort a gomb fölé visszük, nem kell lenyomni, és akkor áll le, ha az egér kurzor elhagyja a gomb területét. Jelöljük ki az action layeren lévő frame-et, amiben jelenleg nincs action, és írjuk be a következő kódsort:

// felső scroll gomb kódja
function scu() {
text_mc.onEnterFrame = function() {
if (this.hitTest(hit_f_mc)) {
this._y += 5;
}// end if
};
} // alsó scroll gomb kódja
function scd() {
text_mc.onEnterFrame = function() {
if (this.hitTest(hit_a_mc)) {
this._y -= 5;
}// end if
};
} // onEnterFrame törlése
function del() {
delete text_mc.onEnterFrame;
} // felső gomb függvény hívása
scu_btn.onRollOver = scu;
scu_btn.onRollOut = del;
// alsó gomb függvény hívása
scd_btn.onRollOver = scd;
scd_btn.onRollOut = del;
stop();

Mint azt láthatjuk, a kód majdnem teljesen ugyanaz, csak a gombok eseményei változtak meg. Az előzőben használt onPress esemény helyett az onRollOver-t használjuk, illetve az onRelease helyett az onRollOut került be. Ez teszi lehetővé, hogy nem gombnyomásra működik a scroll, hanem csak fölé kell vinni az egeret. Az alkalmazást a letölthető forrásban statscr2.fla néven találhatod meg.

auto scroll:

A harmadik megoldás egy egyszerű folyamatos scrollt fog eredményezni. Hasonlóan a képújság megoldáshoz, a szöveg vagy mc folyamatosan halad fölfelé. Az előző kettőhöz hasonló mozit készítsünk, de nem kellenek bele a hit mc-k és a gombok sem. Csak a maszk_mc, a keret és az action marad meg.

Az alkalmazás elkészítésére több lehetőség is van. Lehet a scrollozott mc-t a library-ból meghívni, vagy duplikálni stb.. Mi most a legegyszerűbb megoldást alkalmazzuk, két példányt hozunk létre az mc-ből egymás alatt és mind a kettőt azonos sebességgel scrollozzuk fölfelé. A letölthető forrásban ez az alkalmazás, statscr3.fla néven szerepel. Abban pontosan meg lehet nézni, hogy a két mc egymáshoz viszonyítva hogyan helyezkedik el.

Nézzük meg a működési elvet. Az mc y pozíciója folyamatosan csökken, tehát fölfelé halad. Amint elhagyta a maszk részt, visszakerül a kiindulási helyzetébe. A második mc természetesen lejjebbről indul, de amikor az is eléri a felső határt, akkor nem a régi kiindulási helyére kerül, hanem az első mc kiindulási pozícióját veszi fel. Így a mozgás folyamatos lesz. Most nézzük meg a működéshez szükséges kódot. Jelöljük ki az action layeren lévő frame-et és nyissuk meg az action palettát, majd írjuk be a következő kódrészt:

// scroll sebessége
speed = 1;
// kiinduló y érték
aly = text1_mc._y;
// kontroll értékek
mrt = text1_mc._height;
mov = mask_mc._y-mrt;
// mozgás függvénye
function mozog() {
this._y -= speed;
if (this._y<mov) {
this._y = aly;
}
}
// hozzárendelés
text1_mc.onEnterFrame = mozog;
text2_mc.onEnterFrame = mozog;
stop();

A speed változó tartalmazza a mozgási sebességet. Jelenleg egy, tehát eseményenként egy pixellel mozdul el az mc. Az aly változóban tároljuk, a text1_mc kiindulási helyzetét, ez lesz a későbbiekben a visszatérési pont, mind a két mc számára. Az mrt változóban határozzuk meg a text_mc magasságát. Mivel a két text mc ugyanaz, így a magasságuk is ugyanakkora, ezért elég csak az első értékét lekérdezni. A mov változó lesz a felső határ, ezt úgy kapjuk, hogy a maszk_mc y pozíciójából kivonjuk a text_mc magasságát. Így kapjuk meg azt a pontot, ahol a text_mc már nincs benne a maszk takarásában. Ügyeljünk arra, hogy a maszk_mc-ben lévő téglalap a pozitív koordináta részbe essen, a kis kereszt tehát pontosan a téglalap bal felső sarkához kerüljön. A mozog() függvény ezután már a meghatározott értékek alapján változtatja az mc y pozícióját és amikor eléri a felső határt, visszadobja a kiindulási pontba. Az utolsó sorokban pedig hozzárendeljük a két mc onEnterFrame eseményéhez a mozog függvényt.

Ezzel az első rész végére is értünk. Megfelelő alaptudásra tehettetek szert a második rész megértéséhez. A második segédlet alkalmazásai már sokkal összetettebbek lesznek, és jóval bonyolultabbak is, de nem kell aggódni, meg lehet emészteni. Addig is mindenkinek sok sikert a fenti alkalmazások használatához.

 
   
 
 

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