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

           
 

3. Images mc és az áttűnése

Csinálhatnánk olyan áttűnést is a képek váltásakor, hogy ha kattintunk a kis előnézeti képen, akkor elindul egy anim, ami besötíti a képet (tulajdonképpen nem a kép sötétül, csak egy addig 0%-os fekete téglalap, lesz fokozatosan látható motion vagy shape tween-nel), ha már nem látunk semmit akkor betölti a kívánt képet, ha betöltötte akkor pedig kivilágosítja (szintén nem a képet világosítjuk, csupán az említett fekete téglalap lesz megint "láthatatlan") így az újonnan betöltött kép láthatóvá válik. Nos mi nem ilyet szertnénk, hanem olyat ahol van egy rakás áttűnési effekt (balról jobbra, fentről le, stb.) és véletlenszerűen kiválasztva egyet megtörténik az átúszás. Az előbbi "gagyi" módszerre jó példa a Flash MX egyik példafile-ja (load_images.fla), az utóbbi látványosabbra pedig ez a tutorial, ha a végére értünk.
Igen ám, de hogy a nyavalyába tudunk két különböző képet átusztatni, ha ugyanoda töltjük be őket? Sehogy. Ezt a problémát - már ha lehet problémának nevezni - úgy hidaljuk át, hogy két helyre töltjük be ugyanazt a képet.
A kiválasztott kép - pl.: img_01.jpg - betöltődik egy mc-be (img_a), ha betöltődött (de csak akkor), akkor betöltjük egy másik mc-be is (img_b), ami egy réteggel feljebb helyezkedik el. Ezt a réteget "mask"-oljuk különböző módon. Egy kicsit zavaros, lássuk inkább lépésről lépésre (5. kép):

Images mc
5. kép - Jól átható a két képet tartalmazó réteg ill. a felső képrétegen lévő mask réteg is.

labels, actions - a szokásos, részltezésük később (a cimkék elnevezéséhez használjuk a képen láthatóakat (newImg, loading, checkIfLoaded))
border - keret a képeknek, nem szükséges, csupán díszítő elem
status, preloader - a képek előtöltéséhez (hogy legalább tudja a kedves felhasználó, hogy mi is történik)
mask_b - az img_b réteghez, tartozó mask réteg. Ez egy csomó áttűnési effektet tartalmaz, mi ezekből választunk véletlenszerűen minden képnél.
img_b - ide töltjük be másodszorra (áttűnés után) a képet
img_a - ide meg áttűnés előtt
bgr - háttér, hogy amíg nincs kép addig is lássunk valamit :)

A két képet tartalmazó mc (img_a, img_b) egy síma üres mc, az instance nevük (img_a és img_b) a lényeg, nomeg az elhelyezkedésük (5. kép). A mask_b réteg már érdekesebb. Ez tartalmaz egy olyan olyan mc-t (mask_b), ami mindegyik frame-jén más-más mc-t tartalmaz (mask1, mask2...). Ezek a különböző mc-k mindenféle maskolási animokat tartalmaznak, amik elkészítésének részletes leírásától most eltekintenék (többségük egyszerű shape ill. motion tween-ek, a másik felük itt az swf.hu-n megtalálható segédletek segítségével készült (getTimer - thx to Newone), a "simple-wipe"(első mc) pedig viszonylag egyszerű). Tehát ha kattintunk egy miniatűrön, akkor az "images" mc elugrik a "newImg" frame-re, ahol ez az action található:

//betöltjük a képet
img_a.loadMovie ("images/"+_parent.dirName+"/fullsize/img_"+_parent.which+".jpg");
//a mask_b mc-t (ami az áttűnési effekteket tartalmazza) az 1. frame-re állítjuk, hogy a mask_b teljesen látható legyen addig amíg az img_a-ra be nem töltjük a képet
mask_b.gotoAndStop(1);
//a két kép átlátszóságát azért kell levenni 99-re, mert különben maszkoláskor kis mértékben torzul a kép (ez sajnos a Flash hibája)
img_a._alpha = 99;
img_b._alpha = 99;
//a console-t (ami végül is a preloading-ot jelző anim) elugrasztjuk az első frame-re
console.gotoAndStop(1);
gotoAndStop("loading");


A "loading" frame action-je:

stop();
//ez egy egyszerű előtöltés a képek számára
this.onEnterFrame = function () {
imgloader = int(img_a.getBytesLoaded() / img_a.getBytesTotal() * 100);
totalPercent = int(img_a.getBytesTotal() / img_a.getBytesTotal() * 100);
loadedPercent = int(img_a.getBytesLoaded() / img_a.getBytesTotal() * 100);
imgloader2 = Math.floor(totalPercent - loadedPercent);
loadedBytes = Math.floor(img_a.getBytesLoaded() / 1024);
totalBytes = Math.floor(img_b.getBytesTotal() / 1024);
if (Number(imgloader) == 100) {
console._visible = false;
status = "";
gotoAndStop("checkIfLoaded");
} else {
stop();
console._visible = true;
console.gotoAndStop(imgloader);
status = "loading "+loadedBytes+"kb("+totalBytes+"kb)";
}
}


Végül ha a kép betöltése sikeres volt, akkor elugrunka "checkIfLoaded" frame-re:

stop();
//meghatározzuk, hogy melyik maszkolási típus hajtódjon végre, és azt lefuttatjuk
maskType = random(mask_b._totalframes-1)+2;
mask_b.gotoAndStop(maskType);
//ha lefutott a maszkolás akkor töltjük be a képet a mask_b-re, tehát az lesz látható egészen a következő maszkolási anim végéig, így nyugodtan tölthetjük be a következő képet a mask_a-ra, az effekt jól fog működni.

Láthatjuk, hogy az img_b-be csak a maszkolási effekt végén töltjük be a képeket. Nézzük át még egyszer: Bent van egy kép az img_a-ban (img_01.jpg), és ugyanaz az img_b-ben. Kattintunk, betöltődik a kiválasztott kép (img_03.jpg) az img_a mc-be, de mi még mindíg az img_b-ben lévő img_01.jpg-t látjuk. Szóval betöltődött a kép (img_03.jpg) az img_a-ba ezért lefuttatjuk a maskolást, ami tulajdonképpen eltünteti az img_b-t (img_01.jpg), így látható lesz az img_a a rajta lévő új képpel (img_03.jpg), végül a maszkolás végén meghívjuk ugyanazt a képet (img_03.jpg) és betöltjük az img_b-be, így tölthetünk új képet az img_a-ba. Persze kis maszkoló enginünk, még korántsem tökéletes, de kezdetnek jó.

4. A thumbnails és az images összehangolása

Most már jól működik minden, már csak azt kell megoldani, hogy ne csak a Corvettről készült képeket jelenítsük meg, hanem bármelyiket amelyiket kiválasztjuk a menürendszerből. Ezt már az init résznél részleteztem, most nyissuk meg inkább a szülő mozinkat (xml_slideshow.fla) és végezzük el ott is a beállításokat.

A "createNavigation" frame-re szúrjuk még be ezt:

imgDir = entryNode.attributes.dirName;

A "slides.swf" ugyanis a szülőmozi imgDir változójában lévő értékből (amit a menürendszer gombjaival változtatunk) veszi a könyvtárat, ahonnan a képeket fogjuk betölteni. Nézzük akkor a gombokat, ahová még ezt a pár sort kell betenni (on (release)-hez) :

//meghatározzuk az imgDir értéket (a slides.swf innen fogja venni a képeket)
_parent._parent.imgDir = dirName;
//a _blank-re betöltött slides.swf-t elugrasztjuk az "init" részhez, hogy a közben megváltozott imgDir érvényesüljön
_parent._parent._blank.gotoAndStop("init");
//ugyanúgy a kép töltő engine-t is előlről kezdjük futtatni
_parent._parent._blank.images.gotoAndStop(1);
//és a thumbnail-eket is lecseréljük egy síma for ciklussal töröljük az összeset és megint létrehozzuk őket az új imgDir értékének megfelelően
_parent._parent._blank.thumbnails.gotoAndStop("removeTN");


Elvileg most már működik rendesen, úgyhogy nekláthatunk a contol panel résznek.

 
           
 
 

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