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