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

   
 

Statikus szövegek, movie clip-ek scrollozásával foglalkozunk a segédletben. A legegyszerűbb alapoktól indulunk, és hét példafeladaton keresztül egy összetett és dinamikus scrollozási technikát fogunk megismerni és felépíteni. A legvégén már betöltött képeket és mozikat is scrollozunk, dinamikusan alakuló csúszó scroll megoldásokkal, x és y tengelyen egyaránt. Vágjunk is bele.

Nézzük meg először, hogy mi is a movie clip (továbbiakban 'mc') scroll-ozásának lényege és célja. Ha egy mc-t nem akarunk teljes nagyságában egyszerre megjeleníteni, akkor a megjelenített részt pl.: maszkolással, vagy más mc-k takarásával oldjuk meg. Ebben az esetben a nem látható részeket scroll-ozással jelenítjük meg. Az mc-k scrollozása nem más, mint szükség szerint az x és y tengelyen az mc pozíciójának növelése-csökkentése. Ezt kell kiegészítenünk bizonyos határértékekkel, vagy megoldásokkal, hogy a scroll csak addig fusson, amíg az mc mérete ezt megkívánja. Ezekre a megoldásokra nézzünk meg néhány példát.

onPress scroll:

Az első példában az egyik legegyszerűbb megoldást nézzük meg. Próbálunk a segédlet során arra törekedni, hogy a kész alkalmazás kellőképpen dinamikus legyen, azaz ha a scrollozott mc mérete megváltozik (kisebb vagy nagyobb szöveg), az alkalmazás akkor is működjön a kód átalakítása nélkül.

Az alkalmazást a fő idősíkon (_root) fogjuk elkészíteni, más szintekre való áttelepítésekor mindenki figyeljen az esetleges elérési utak megváltozására. Készítsünk egy új mozit. A paraméterek tetszőlegesek, a letölthető forrásban mindenki megnézheti a tulajdonságokat. Hat layer-re lesz szükségünk, a lenti képen látható módon.

Az action layer-re kerülnek a program működéséhez szükséges kódok. A scroll layer-re készítsünk tetszőlegesen két gombot és helyezzük el, pl.: a lenti képen látható módon. A felső gomb instance neve : scu_btn , az alsóé : scd_btn . A keret layer-re lehet megrajzolni a keretszerkezetet, ez nem kötelező, pusztán esztétika. A maszk layerre egy 165*160-as movie clip-et tettem, instance neve: mask_mc . A lenti képen az látható, kék keretben kijelölve.

Aki esetleg nem használt még maszkot, annak egy pici segítség, hogy hogyan lehet maszk layert létrehozni. Jelöljük ki a maszk layert és jobb klikk után a legördülő menüből válasszuk ki a 'Properties' menüpontot. A megjelenő palettán beállítható a lenti képen látható módon, hogy a réteg maszk legyen.

A maszk alatt lévő hit layerre tegyünk két egyszerű téglalap alakú mc-t. Ezek lesznek a scrollozás alsó és felső határai. Helyezzük el a lenti képen látható módon. A felső instance neve: hit_f_mc , az alsóé: hit_a_mc .

A text layerre kerül a scrollozott szöveg vagy mc, instance neve: text_mc. Az elhelyezés itt is fontos: a scrollozott mc-t tegyük úgy, hogy a maszk alá kerüljön. Akinek nem egészen világos az elrendezés, az a letölthető forrásban nézze meg a statscr1.fla-t.

Térjünk át az action layerre. A kód értelmezéséhez alapjaiban kell megérteni a folyamatot. A célunk az, hogy a text_mc helyzetét y tengelyen föl-le változtassuk, és mindez a folyamat csak addig menjen, amíg az mc el nem éri a maximum vagy minimum pozíciót. Ezt természetesen megadhattuk volna számokkal is, de akkor egy nagyobb vagy kisebb mc használatakor ezeket a számokat is módosítani kellene. Itt kap szerepet a hit layeren lévő két mc, amelyek az alsó és felső határokat képviselik. Jelöljük ki az action layer-en lévő frame-et, és nyissuk meg az action palettát. Írjuk be a következő kódsort folytatólagosan, én közbeszúrom a magyarázatokat is.

// felső scroll gomb kódja
function scu() {
text_mc.onEnterFrame = function() {
if (this.hitTest(hit_f_mc)) {
this._y += 5;
}// end if
};
}

A fenti függvény a felső scroll gomb működtetését fogja végezni. Ha a függvény aktív, akkor egy onEnterFrame eseménnyel folyamatosan növeli a text_mc y pozícióját, az mc lefelé mozog. A feltételben látható, hogy ez csak addig folytatódik, amíg a txt_mc érintkezik a felső határral, azaz a hit_f_mc-vel. Ha a text_mc a felső határt elhagyja, akkor a lefelé scrollozás megáll. Természetesen az még így kevés, lejjebb láthatjuk majd, hogy hogyan kapcsolódik a függvény a megfelelő gombhoz.

// alsó scroll gomb kódja
function scd() {
text_mc.onEnterFrame = function() {
if (this.hitTest(hit_a_mc)) {
this._y -= 5;
}// end if
};
}

Az scd() függvény az alsó csroll gombot fogja működtetni. A felsőhöz hasonlóan a text_mc y pozícióját változtatja meg, csak éppen az ellenkező irányba, az mc fölfelé mozog. Itt az alsó határ elhagyása fogja leállítani a folyamatot.

// onEnterFrame törlése
function del() {
delete text_mc.onEnterFrame;
}

A del() függvény törli az onEnterFrame eseményt. Erre azért van szükség, mert azt szeretnénk, ha a scroll gombok fölengedésekor a scroll folyamat leálljon.

// felső gomb függvény hívása
scu_btn.onPress = scu;
scu_btn.onRelease = del;
scu_btn.onReleaseOutside = del;
// alsó gomb függvény hívása
scd_btn.onPress = scd;
scd_btn.onRelease = del;
scd_btn.onReleaseOutside = del;
stop();

Az utolsó sorokban hozzárendeljük a kész függvényeket a gombok eseményeihez. Természetesen ezeket a függvény hívásokat írhatjuk a gombokra is, de most mi ezt a verziót használjuk. A segédlet második részében megnézzük azt is, hogy hogyan működik, ha a gombokon hozzuk létre a scripteket. Az onPress (gomb lenyomása) indítja el mind a két esetben a scrollozást, az onRelease és onReleaseOutside (gomb felengedése) állítja le a scroll folyamatokat.

 
   
 
 

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