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


 
 
SEGÉDLETEK Flash+XML

Flash + XML alapú képgaléria készítése
  feltöltve: 2003.10.15 | szerző: kiskp | olvasva: 23850 alkalommal

           
 

A Slideshow-nk második részét is hasonló módon fogjuk csinálni, mint a navigációs részt. Feladatunkat azonban több kisebb részre osztjuk:

1. Movie beállításai

Ugyanakkora kell mint a főmozi setében, tehát 640*400 pixel, a szín mindegy, úgyis a főmozi fogja meghatározni a háttérszínt, de tehetjük ugyanúgy szürkére (#666666). Mentsük el slides.fla néven. Rétegeink és cimkéink így alakulnak (1. kép):


1. kép - a border megint csak segítségképp van, nyugodtan törölhető.

Mint látható két fő cimke található az "init" és a "main" ezekkel az action-ökkel:

init:

dirName = /*"corvette"*/_parent.imgDir;
which = "01";
gotoAndStop("main");


A dirName nevű változó tudatja a mozinkkal, hogy melyik könyvtárból szedje a képeket. Ez a szülő mozira (xml_slideshow.swf) hivatkozik, mivel ezt még ott definiáltuk le. Mivel szerkesztés során szükség van a gyakori tesztelésre, a kikommentezett "corvette" részt tegyük aktívvá, és a "_parent.imgDir"-t pedig inaktívvá. Így minden esetben a "corvette" könyvtárból fogja a flash behívni a képeket és nem kell mindenáron a szülő moziból tesztelnünk. Majd a végén visszaállítjuk. A "which" nevű változó alapesetben "01" értékű, tehát elsőnek a "img_01.jpg"-t fogja betölteni. Ha az inicializálás megtörtént akkor ugrik a "main" cimkéjú frame-re.

main

stop();
slideshow = false;


Itt csupán két parancs van. Egy stop(); a biztonság kedvéért, és egy slideshow nevű változó "false" értékkel. Ha ez "true" akkor automata slideshow veszi kezdetét, ha "false" akkor nekünk kell manuálisan váltogatni a képek között. (Ezt később kapcsolgatjuk majd, most hagyjuk false-on.)

2. Miniatűrök (thumbnails) létrehozása

A kis képek elkészítése nagyon hasonlít a menürendszer elkészítéséhez. Csináljunk egy 80*40 pixeles téglalapot (x=540, y=120-as pozicióra), és konvertáljuk szimbólummá (F8). A nulla pozició itt is nagyon lényeges! (2. kép) A szimbólum típusa legyen Movie Clip, neve thumbnails és instance neve is thumbnails.

Névnek persze most mást adjunk!
2. kép - bár a képen nem ez látszik névnek adjunk azt, hogy thumbnails

Kattintsunk rá kettőt, hogy szerkeszteni tudjuk. A téglalpból megint csak csináljunk egy mc-t (név: tn, instance név: tn), ezt fogjuk sokszorosítani.
Adjunk két új réteget a jelenethez. (labels, actions) (3. kép)

thumbnails
3. kép - Így kell kinéznie a thumbnails mc-nek.

Most szerkesszük a tn nevű mc-t (dupla kattintás rajta). Itt megint csak két új rétegre lesz szükségünk (4. kép):

tn
4. kép

bgr - tulajdonképpen elhagyható csak díszítő elem
tnImg - itt egy üres mc található. Ebbe töltjük be ez előnézeti képeket. Instance neve: tnImg
btn
- ezen egy 80*40-es méretű gomb van. (Neve és instance neve: btn_tn . Megnyomására a hozzá tartozó kép betöltődik a fő timeline-on lévő "images" nevű mc-be. Ezzel az action-nel:

on (release) {
_parent._parent.images.gotoAndStop("newImg");
_parent._parent.which = imgNumber;
}


Illetve nem a gomb nyomására töltődik be a kép, ugyanis kattintáskor csak fő timeline-on lévő "which" értékét cseréljük le az "imgNumber" értékével (ami a for ciklusnak köszönhetően minden miniatűrnél más és más). Ezt a "which" véltozót felhasználva, a szintén a fő timeline-on lévő images mc - amit a gombnyomásra elugrasztottunk a "newImg" részhez - betölti a szükséges képet.

Lépjünk vissza egy szintet és nézzük milyen action-öket takar az első (createTN) frame:

stop();
duplicate = 5;
//ennyi másolatunk lesz
ySpacing = 50;
//másolatok közti hely
b = 1;
//ez a változó fogja meghatározni, hogy melyik képet is töltsük be
tn._visible = false;
//az erediti példányt eltüntetjük

//megcsináljuk az összes másolatot, hasonló módszerrel, mint azt a menürendszernél tettük
for (a=1; a<=duplicate; a++) {
tn.duplicateMovieClip("tn"+a, a);
this["tn"+a]._y += (a*ySpacing)-ySpacing;
//mivel a képeket számozással mentettük el (01, 02, 03...) a 10-nél kisebb számok elé oda kell rakni egy nullát, hogy megfelelő képet hívjunk be.
if (b.length < 2) {
b = "0"+b;
}
//a számozásból meghatározzuk a betölteni kívánt kép nevét
this["tn"+a].name = "tn_img_"+b;
//Minden másolat kap egy imgNumber nevű változót (ami "b" értéket vesz fel), ez határozza meg, hogy melyik kis képhez, melyik nagy kép tartozik (tn_img_03.jpg-hez, az img_03.jpg), ezért volt szükség az elején az elnevezésekre.
this["tn"+a].imgNumber = b;
//végül a kis képeket betöltjük a megfelelő könyvtárból (amit korábban definiáltunk)
this["tn"+a].tnImg.loadMovie ("images/"+_parent.dirName+"/thumbnails/tn_img_"+b+".jpg");
//és növeljök a "b" értékét, hogy a következő kép töltődjön be
b++;
}


Mint látjuk most csak 5 képet fog betölteni (duplicate = 5) a program, mert ennyit is akartuk, és csak ennyi képet készítettünk. Egy kis módosítással megoldható az is, hogy bármennyi kép is van a könyvtárban (persze a megfelelő elnevezéssel), akkor annyit fog betölteni, annyi kis képet fog létrehozni a szkript. Ekkor azonban már meg kell oldani az előnézeti képek scroll-ozását, de most nem akartam ezzel is bonyolítani a dolgot, ha valakinek még is szüksége lenne rá és nem sikerül megcsinálnia akkor csak írjon egy e-mailt, segítek. (Annyit elárulok, hogy az .xml file-ban kell megadni, hogy az egyes könyvtárakban mennyi kép található, és a for ciklusban a duplicate-nál kell hivatkozni az .xml file-ra. Ha rendesen megcsináltuk a menürendszeres részt, akkor ez nem okozhat különösebb problémát...esetleg a scroll-ozás)

Van azonban itt még egy szkript ami azt ellenőrzi, hogy az automata slideshow be van-e kapcsolva. Ha igen akkor a korábban már ismertetett enabled tulajdonsággal letiltjuk a gombokat, ha nem, akkor engedélyezzük (ezt tesztelhetjük, ha a fő timeline-on a slideshow értékét átírjuk true-ra vagy false-re (később megoldjuk majd gombbal is, de most pillanatnyilg elég ez az átírkálás)).

this.onEnterFrame = function () {
if (_parent.slideshow) {
this._alpha = 30;
for (i=1; i<=duplicate; i++) {
this["tn"+i].btn_tn.enabled = false;
this["tn"+i].tnImg._alpha = 60;
}
} else {
this._alpha = 100;
for (i=1; i<=duplicate; i++) {
this["tn"+i].btn_tn.enabled = true;
this["tn"+i].tnImg._alpha = 100;
}
}
}


Most már 5 db kis előnézeti kép jelenik meg a bal oldalon. Nagyszerű!

 
           
 
 

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