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




 
 
SEGÉDLETEK Navigáció, Scroll

3x3-as képnézegető, dinamikus scroll mozgással
  feltöltve: 2003.12.11 | szerző: papp | olvasva: 16792 alkalommal

 
 

Bizonyára rengeteg web oldalon találkoztál már az alábbiakban leírt megoldással, nagyon közkedvelt. A képeket egy moziklipben helyezzük el és gombokkal fogjuk mozgatni úgy, hogy a kívánt kép legyen látható a nézőfelületen.

1. lépés: Nyissunk egy új, 320x350 pixel méretű Flash mozit, a lejátszási sebességet állítsuk 25 fps-re és hozzunk létre 3 réteget: 'gombok', 'keret' és 'képek' névvel.

2. lépés: A keret 'rétegre' rajzoljunk egy 320x350 pixel méretű, szürke színű téglalapot, majd vágjunk ki belőle egy 300x300 pixeles négyzetet. Itt fognak megjelenni a 300x300 pixel méretű képeink.

3. lépés: A mini-képgaléria 9 képet fog tartalmazni. Készítsünk egy gombot, mégpedig akkorát, hogy kilenc példány elférjen egyvonalban a nézőfelület alatt. A gombokat nevezzük el: b1_btn, b2_btn, stb.
A képgaléria keretével meg is volnánk, nem marad más hátra mint kikeresni és méretre vágni a képeket. A példánkban egyszerű grafikákat fogunk használni képek helyett.

4. lépés: Rajzoljunk egy 300x300 pixel méretű grafikus szimbólumot tetszőleges grafikával. A szimbólum regisztrációs pontja legyen a bal-felső sarokban. További 8 ilyen grafikus szimbólumot kell elkészítenünk, jelölhetjük őket számokkal és különböző színekkel. A 9 grafikus szimbólumot később könnyen helyettesítheted a kívánt képekkel:



5. lépés: Készítsünk egy új moziklipet, példány neve legyen 'kepek'. Helyezzük el a 9 db 'képet' 3x3-as alakzatban a moziklipben. Ügyeljünk, hogy a moziklip regisztrációs pontja a bal-felső sarokban legyen. Ügyeljünk arra, hogy a moziklipet a legalsó, 'képek' nevű rétegen foglaljon helyet, az x=10, y=10 koordinán. Ha ezzel megvagyunk, jöhet a feladat programozási része.

A feladat mindössze annyi, hogy a gombokra kattintva a 9 képet tartalmazó, gigantikus moziklipünk a megfelelő helyre csússszon és így végignézhessük a galériát. Hajrá!

6. lépés: Jelöljük ki a 'képek' moziklipet és gépeljük be az előző részből már ismerős szkriptet Actions ablakba:

onClipEvent (load) {
     celx = 10;
     cely = 10;
     lassulas = 8;
}
onClipEvent (enterFrame) {
     _x += (celx - _x)/lassulas;
     _y += (cely - _y)/lassulas;
}


Tehát a moziklip betöltésekor meghatározzuk a kezdő x és y koordinátát, valamint a lassulás mértékét. Ha elindítjuk a mozit, láthatjuk, hogy nem történik semmi. A moziklip megkapta ugyan a kezdő koordinátákat, de mivel már eleve ezen a koordinátán helyeztük el, nincs mozgás. Ahhoz, hogy mozgásba hozzuk, a celx és cely értékeket kell megváltoztatnunk. A megfelelő gomb lenyomásakor fogjuk átadni az értékeket, azaz a megfelelő kép koordinátáit.

7. lépés: Jelöljük az első képkockát bármelyik rétegen és gépeljük be az alábbi kódot:

b2_btn.onPress = function(){
     kepek.celx = -290;
     kepek.cely = 10;
};

A gomb onPress eseményét figyeljük és amint bekövetkezik, átadjuk a 'kepek' moziklipnek az új celx és cely értékeket. Indítsuk el a mozit és kattintsuk a 2-es számú gombra. A moziklip a megadott koordinátákra csúszik, vagyis megjelenik a 2-es kép. A többi gomb onPress eseményét is határozzuk meg:

Ő a mi szép kis végeredményünk, próbáld ki!

b1_btn.onPress = function(){
     kepek.celx = 10;
     kepek.cely = 10;
};
b2_btn.onPress = function(){
     kepek.celx = -290;
     kepek.cely = 10;
};
b3_btn.onPress = function(){
     kepek.celx = -590;
     kepek.cely = 10;
};
b4_btn.onPress = function(){
     kepek.celx = 10;
     kepek.cely = -290;
};
...


Fontos megjegyezni, hogy az itt bemutatott példának komoly hátránya is van, mégpedig a nehéz bövíthetőség. Ha előre tudjuk, hogy összesen 9 kép lesz a galériában és ez nem is nagyon fog változni akkor rendben van. Ha idővel ki kell bővíteni 3 képpel az is megoldható de újból hozzá kell nyúlnunk a kezelőfelülethez, új gombokat kell létrehoznunk és ráadásul kibővíteni a kódot. Persze itt most a mozgáson volt a hangsúly, de egy igazán dinamikus galériánál meg kell oldanunk a képek dinamikus betöltését, a gombok automatikus generálását, továbbá kategóriákba csoportosíthatnánk a képeket, stb. De szerencsére erről is készült már segédlet: Flash + XML alapú képgaléria készítése

 
 
 
 

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