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

           
 

5. Control Panel

Ennek elkészítése viszonylag egyszerű lesz. Készítünk egy stopperóra szerűséget (ez legyen egy 1 frame hosszúságú mc, controlPanel instance névvel, ezen belül lesznek a gombok, meg a szokásos action rétegek), amit minden maszkolás befejeztével reset-elünk és újra elindítunk. Lesz még egy következő/előző (next/prev) képre hivatkozás, ill. egy stop gomb amivel az automata lejátszást leállítjuk(meg persze a play amivel elindítjuk). Ja, meg egy olyan playmode gomb is, amivel a képek lejátszási sorrendjét variáljuk (véletlenszerű (random), egymás után (normal)). A gombok elkészítésére nem térek most ki, gondolom nem okoz majd gondot, valami ilyesmit kellene csinálni. (6. kép)

6. kép - Ha az AutoPlay nincs bekapcsolva, akkor a STOP gomb inaktív, mert ugye nincs mit leállítani, ha viszont elindítottuk a lejátszást a PLAY gombbal, akkor a STOP, és a NORMAL/RANDOM gombon kívűl minden más inaktív, és csak a STOP újboli megnyomásával, ill. másik autótípus kiválasztásával tudjuk aktívvá tenni.

Még mielőtt belefognánk a gombok action-jeibe, nézzük azokat a sorokat amik nem a gombokon vannak, hanem az egyik frame-n.

stop();
delay = 5;
//ennyi másodpercenként cserélgetjük a képet
slideMode = "normal";
//alapesetben sorban egymás után jönnek a képek

Az actions réteg alatt van egy functions nevű réteg is. Célszerű a function-öket egy másik rétegre pakolászni, mert így könnyebben megtaláljuk őket, ha valamit módosítani kell bennük.

function autoPlayInit () {
//elindítjuk a számlálót
startTime = getTimer();
}

function autoPlay () {
//ha PLAY gomb meg lett nyomva és a maszkolásnak vége akkor elindítunk egy másik számlálót is. Ebből a két számlálóból fogjuk az eltelt időt kiszámolni.
if (_parent.slideshow and !_parent.mask) {
curTime = getTimer();
elapsedTime = curTime-startTime;
//ha az eltelt idő nagyobb vgy egyenlő a delay-ben megadott idővel akkor jön a következő kép
if (elapsedTime >= (delay*1000)) {
//ha sorrend normal, akkor csak növeljük a which értékét eggyel (a which-et felhasznélva tölti be az "images" mc az aktuális képet)
if (slideMode == "normal") {
_parent.which++;
}
//ha sorrend véletlenszerű akkor, a which egy random értéket kap, aminek a maximum értéke a miniatűtök száma
if (slideMode == "random") {
_parent.which = random(_parent.thumbnails.duplicate)+1;
//a +1 azért kell, mert a random függvény alapesetben a 0 és a megadott szám (esetünkben a _parent.thumbnails.duplicate, ami ugye 5) KÖZÖTTI számokból válogat véletlenszerűen
}
//ha a szám kisebb mint 10, akkor elé kell dobnunk egy nullát (emlékezzünk a file-ok elnevezésére! img_05.jpg)
if (_parent.which < 10 ) {
_parent.which = "0"+_parent.which;
}
//ha normal módban elértünk a sorozat végére, akkor kezdjük előről az egészet
if (_parent.which > _parent.thumbnails.duplicate) {
_parent.which = "01";
}
//és akkor jöhet a tényleges betöltés, a fentebb meghatározott "which" figyelembevételével
_parent.images.gotoAndStop("newImg");
autoPlayInit();
}
}
}

Mielőtt rátérnénk a gombokra, az összes mask-anim (mask1, mask2...) utolsó frame-jére oda kell tennünk ezt a sort:

_parent._parent._parent.mask = true;

Az images mc "loading" framejére pedig ezt:

_parent._parent.mask = false;

Csak így fog helyesen működni a fenti autoPlay function!

Most nézzük az egyes gombok akction-jeit (különösebb kommentár nem hiszem, hogy szükséges):

PLAY

on (release) {
_parent.slideshow = true;
autoPlay();
}


STOP

on (release) {
_parent.slideshow = false;
}


NEXT

on (release) {
if (slideMode == "normal") {
_parent.which++;
}
if (slideMode == "random") {
_parent.which = random(_parent.thumbnails.duplicate)+1;
}
if (_parent.which < 10 ) {
_parent.which = "0"+_parent.which;
}
if (_parent.which > _parent.thumbnails.duplicate) {
_parent.which = "01";
}
_parent.images.gotoAndStop("newImg");
}


PREV

on (release) {
if (slideMode == "normal") {
_parent.which--;
}
if (slideMode == "random") {
_parent.which = random(_parent.thumbnails.duplicate)+1;
}
if (_parent.which < 1) {
_parent.which = _parent.thumbnails.duplicate;
}
if (_parent.which < 10 ) {
_parent.which = "0"+_parent.which;
}
_parent.images.gotoAndStop("newImg");
}


NORMAL/RANDOM

on (release) {
if (slideMode == "normal") {
slideMode ="random";
} else
if (slideMode == "random") {
slideMode = "normal";
}
}


A gombokat aktívvá ill. inaktívvá hasonló módon tesszük mint a miniatűrok esetében. Ehhez azonban el kell neveznünk a gombokat. A gombok instance nevei legyenek ezek:
btn_Next, btn_Prev, btn_Stop, btn_Play, btn_slideMode.
Ha meg vannak a nevek menjünk a thumbnails mc "createTN" frame-jére, és az onEnterFrame function bővítsük a következőképp (a zöld csillag jelzi az új sorokat):

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;
}
*_parent.controlPanel.btn_Prev._alpha = 50;
*_parent.controlPanel.btn_Next._alpha = 50;
*_parent.controlPanel.btn_Play._alpha = 50;
*_parent.controlPanel.btn_Stop._alpha = 100;
*//gombok inaktívvá tétele
*_parent.controlPanel.btn_Prev.enabled = false;
*_parent.controlPanel.btn_Next.enabled = false;
*_parent.controlPanel.btn_Play.enabled = false;
*_parent.controlPanel.btn_Stop.enabled = true;
*_parent.controlPanel.
*//gomb feliratok
*_parent.controlPanel.tf_btnPrev.setTextFormat (_parent.controlPanel.offColor);
*_parent.controlPanel.tf_btnNext.setTextFormat (_parent.controlPanel.offColor);
*_parent.controlPanel.tf_btnPlay.setTextFormat (_parent.controlPanel.offColor);
*_parent.controlPanel.tf_btnStop.setTextFormat (_parent.controlPanel.onColor);
} else {
this._alpha = 100;
for (i=1; i<=duplicate; i++) {
this["tn"+i].btn_tn.enabled = true;
this["tn"+i].tnImg._alpha = 100;
}
*_parent.controlPanel.btn_Prev._alpha = 100;
*_parent.controlPanel.btn_Next._alpha = 100;
*_parent.controlPanel.btn_Play._alpha = 100;
*_parent.controlPanel.btn_Stop._alpha = 50;
*//gombok inaktívvá tétele
*_parent.controlPanel.btn_Prev.enabled = true;
*_parent.controlPanel.btn_Next.enabled = true;
*_parent.controlPanel.btn_Play.enabled = true;
*_parent.controlPanel.btn_Stop.enabled = false;
*//gomb feliratok
*_parent.controlPanel.tf_btnPrev.setTextFormat (_parent.controlPanel.onColor);
*_parent.controlPanel.tf_btnNext.setTextFormat (_parent.controlPanel.onColor);
*_parent.controlPanel.tf_btnPlay.setTextFormat (_parent.controlPanel.onColor);
*_parent.controlPanel.tf_btnStop.setTextFormat (_parent.controlPanel.offColor);
}


Mint látjátok én bevezettem egy új textFormat object-et, a controlPanel-en. Ez csak akkor kell, ha dynamic textField-be írtátok a gombok feliratait, mint én. Elvileg most már tökéletesen működik. Illetve mégsem. Úgy értem ha vinyón nézzük, offline, akkor ugye a töltési idő rövidsége miatt, nem tapasztaljuk, hogy bármi probléma is lépne fel a működésben. Amint feltöltjük internetre és online teszteljük az autoPlay funkciót, máris látjuk, hogy bizony még mindíg akadnak benne hibák. Mivel a sávszélesség függvényében változik a letöltési idő - ami ugye több is lehet mint a képek váltása közt eltelt idő - így a stoppert csak akkor szabad újraindítanunk - tehát a maszkolást csak akkor szabad elkezdenünk - , ha az adott kép már betöltődött. Én ezt - időhiány miatt - sajnos kicsit bonyolultan oldottam meg, nem is részltezném, mert nem tökéletes, de az .fla file-ban majd látjátok. (Ha valaki talál egyszerűbbet és korrektebbet akkor ne habozzon tudatni velem)

Extraként betehetünk, valami zenelejátszó félét is (szintén lehet vizslatni az .fla file-t, ott egy viszonylag egyszerű található), de ezt - mármint egy frankó mp3 lejátszót - már egy másik alkalommal mutatom be. Lehet még egy rakás apróságot beépíteni (képaláírások, ne csak öt képet lehessen betenni, ha több kép van akkor lehessen scrollozni stb.), de ezen már agyalhattok ti is.

Remélem sokaknak hasznos és érthető volt az kis segédlet, így visszaolvasva a vége egy kicsit felületesebbre sikerült, úgyhogy ha valakinek gondja támad akkor csak keressen bátran.

 
           
 
 

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