Dinamikus képgaléria készítése, XML leíróval

Az el?z? két cikkben leírtam, hogy kell dinamikusan létrehozni movieClip-eket. Kés?bb xml file alapján csináltuk meg ugyanezt:

- MovieClip dinamikus létrehozása, és kezelése

- MovieClip dinamikus létrehozása XML file-al

Ezek alapján most készítsünk egy olyan képgalériát, amit nem kell mindíg újra fordítani akárhányszor képet akarunk cserélni, vagy új képet akarunk betenni a galériába.

El?ször is el kell készíteni a képeket leíró XML file-t. Mint az el?z? cikkekben is, a következ?képpen tudom elképzelni: (gallery.xml)

<images>
 <image tmbimg="img1_tmb.jpg" img="img1.jpg" ></image>
 <image tmbimg="img2_tmb.jpg" img="img2.jpg" ></image>
 <image tmbimg="img3_tmb.jpg" img="img3.jpg" ></image>
 <image tmbimg="img4_tmb.jpg" img="img4.jpg" ></image>
</images>

Természetesen, lehetne b?víteni még a kép címével, fotós stb… Arra vigyázzunk, hogy ha szöveget is elhelyezünk a leíróban, a flash csak UTF-8 formátumban kezeli le normálisan az ékezetes karaktereket!

Els? feladat, hogy elkészítsük a “thumbnail” képeket, vagyis a kis ikonokat, amikre aztán majd lehet kattintani, és megnyílik a nagy kép, eredeti méretben. Ehhez készítsünk egy movieClip-et, ami tárolni fogja az összes kis ikont.

thumbnails = createEmptyMovieClip("thumbnails", 1);
thumbnails._x = 0;
thumbnails._y = 0;

Olvassuk be az XML file tartalmát, és hozzuk létre a már ismert módon a movieClip objektumokat. Ezekbe elároljuk a nagy kép nevét is, hogy kattintáskor tudjuk mit kell megnyitni.

XML_data = new XML();
XML_data.onLoad = onLoadXML;
XML_data.load("gallery.xml");
function onLoadXML() {
  count = this.firstChild.childNodes.length;
  xpos = 10;
  for (i=0; i<count; i++) {
    imgtmb = this.firstChild.childNodes[i].attributes.tmbimg;
    this.thumbHolder =
      thumbnails.createEmptyMovieClip("thumbnail"+i, i);
    this.thumbLoader =
      this.thumbHolder.createEmptyMovieClip("thumbnail_image", 0);
    this.thumbLoader.loadMovie(imgtmb);
    this.thumbHolder._alpha = 60;
    this.thumbHolder._y = 10;

    this.thumbHolder._x = xpos;
    this.thumbHolder.onRelease = onLoadImage;
    this.thumbHolder.onRollOver = overTmb;
    this.thumbHolder.onRollOut = outTmb;
    this.thumbHolder.img =
      this.firstChild.childNodes[i].attributes.img;
    xpos += 80;
  }
}

A kis képek elkészítésekor, a dinamikusan létrehozott movieClip-ek 3 metódusát felülírjuk.

this.thumbHolder.onRelease = onLoadImage;
Az a függvény fogja betölteni a “nagy” képet.

this.thumbHolder.onRollOver = overTmb;
Mikor az egeret a clip fölé visszük, meghívódik

this.thumbHolder.onRollOut = outTmb;
Mikor az egeret levisszük a clip-r?l, meghívódik

Ezek után készítsük el a nagy képet tároló movieClip-et és a három metódust:

image = createEmptyMovieClip("image", 0);
image._x = 10;
image._y = 110;

function onLoadImage() {
  image.loadMovie(this.img);
}

function overTmb(){
  this._alpha = 100;
}

function outTmb(){
  this._alpha = 60;
}

Az overTmb és az outTmb függvények, átállítják a movieClip-ek átlátszóságát, ha fölé visszük az egeret, ami egy kis életet visz a galériába. Természetesen ez egy nagyon minimális funkcionalitással bíró képgaléria, ami még nagyon sok kiegészítést igényel, de ezt mindenkinek a saját kreativitására bízom

15 April 2008 | Uncategorized | Comments