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




 
 
SEGÉDLETEK Navigáció, Scroll

Dinamikus szöveg scroll megoldások - 1 rész
  feltöltve: 2003.11.14 | szerző: Ducky | olvasva: 24600 alkalommal

     
 

Néha célszerűbb és jobb megoldás a szövegeket dinamikus szövegmezőkben megjeleníteni. Itt lép a képbe, a scrollozás. Ha a szövegünk nagyobb mint a szövegmező, akkor szükségünk van valamilyen alkalmazásra amivel görgethetjük a tartalmat. Négy ilyen alkalmazást nézünk meg ebben a segédletben. Lesz nagyon egyszerű és kicsit bonyolultabb is közöttük, mindenki ízlésének megfelelően elkészítheti a saját verzióját.

1. LÉPÉS: Készítsünk egy sima .txt fájlt, mondjuk Notepad-ben, amit majd be fogunk olvasni a mozinkba. A tartalma lehet bármilyen szöveg, vagy használhatjátok a letölthető forrásban lévő kész .txt fájlt. A txt-t utf8-as kódolással mentsétek el. Ezt a win2000 és xp notepadok is ismerik alapból. Ez azért kell mert különben az ékezetes karakterek nem fognak megfelelően megjelenni! Másoljátok ugyanabba a könyvtárba, ahol a Flash mozit publikáljuk.

2. LÉPÉS: Nyissunk egy új Flash mozit (20fps) és hozzunk létre összesen 4 layert. Külön layerre fogjuk helyezni a gombokat, a keretet, a forráskódot és a szövegmezőt. Ez nem kötelező de legyünk rendszeretőek :)

3. LÉPÉS: Készítsük el a mozi elemeit! Szükségünk van ugye egy dinamikus szövegmezőre (dynamic text) amibe majd beolvassuk a szöveget. Helyezzük el a valahova a színpad közepére, instance neve legyen: textb. Már csak két tetszőleges megjelenésű gomb kell amik a le-fel scrollozást végzik, ezeket helyezzük el a szövegmező mellett. Kereteket is lehet rajzolni tetszés szerint:

Az első alkalmazásunk lényegében annyit fog tenni, hogy minden egyes gombra való kattintásra léptet egyet a szövegen. Ez talán a lehető legegyszerűbb scrollozási eljárás, de persze nem a legbarátságosabb.
Nézzük akkor azokat a ActionScript sorokat!

4. LÉPÉS: A scroll működését az action layeren írjuk meg függvények formájában és a gombokkal meghívjuk azokat. Jelöljük ki az action layeren az első frame-et és nyissuk meg az Actions palettát. Írjuk be a következő kódót:

adat = "";
//txt file beolvasása
_root.loadVariables("load.txt");
//beolvasott szöveg megjelenítése
_root.onData = function() {
  textb.htmlText = adat;
};
//felső scroll gomb
function scu() {
  textb.scroll--;
}
//alsó scroll gomb
function scd() {
  textb.scroll++;
}

A loadVariables() függvénnyel olvassuk be a .txt fájl tartalmát. Az onData() függvényben lévő kód, a beolvasott tartalmat kiírja a text-be ha az adat megérkezett. Ez azért szükséges, mert a betöltés időbe kerül és az onData() csak akkor fut le ha az adat betöltődött. Ezután már csak a két scroll függvény következik, ami a szövegmező beépített scroll értékét csökkenti vagy növeli. Természetesen ahhoz, hogy működjön, a scrollozásra készített gombokkal meg kell hívnunk ezeket a függvényeket.

5. LÉPÉS: Jelöljük ki a felső gombot és nyissuk meg az Actions palettát. Írjuk be az alábbi rövid kódot:

on (press) {
scu();
}

Az alsó gomb kódja pedig a következő lesz:

on (press) {
scd();
}

Itt pedig ki lehet próbálni az elkészült művet:

Nézzük a második megoldá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 >>> : .. .