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

iDevice ikon

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.


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.

 

37. ábra
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
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...). 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 elugrunk a "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.