6.7. Movie beállításai

iDevice ikon

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:

33. ábra
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! A szimbólum típusa legyen Movie Clip, neve thumbnails és instance neve is thumbnails.

Névnek persze most mást adjunk!
34. ábra
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)

thumbnails

35. ábra
Í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:

tn
36. ábra


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


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.