. .. : Swf.hu 1.0 archívum : Swf.hu főoldal >>> : .. .




 
 
SEGÉDLETEK Flash+XML

XML képgaléria, tetszőleges méretű képekből
  feltöltve: 2005.01.14 | szerző: mrksky | olvasva: 17265 alkalommal

   
 
Az ActionScript kód

Legelőször meghatározzuk azt a területet amekkorán a képeinket meg fogjuk jeleníteni.

var kepXmax = 400;
var kepYmax = 300;


A picture betöltő helyzetét (nálam ez x=100, y=20) változóba tesszük, mert a képek betöltődés utáni igazításában nagy szerepet fognak kapni.

kezdoX = 100;
kezdoY = 20;

Készítsük el az XML betöltőt.

function loadXML(loaded) {
      if (loaded) {
      xmlNode = this.firstChild;
      image = [];
      leiras = [];
      total = xmlNode.childNodes.length;
      for (i=0; i<total; i++) {
           image[i] = xmlNode.childNodes[i].childNodes[0].firstChild.nodeValue;
           leiras[i] = xmlNode.childNodes[i].childNodes[1].firstChild.nodeValue;
           }
      elsokep();
      } else {
      content = "Nem töltődött be a kép adatbázis!";
      }
}
xmlData = new XML();
xmlData.ignoreWhite = true;
xmlData.onLoad = loadXML;
xmlData.load("images.xml");


Először is betöltjük az XML-t, ha ez sikeres megszámoljuk a bejegyzéseket, ebből kapjuk a total értékét. A képek elérési útjait betesszük az image tömbbe, a hozzájuk tartozó leírásokat pedig a leiras tombbe. Ha mindez megtörtént meghívjuk a elsokep függvényt, ami majd az első képet tölti be. Ha az XML betöltése sikertelen azt is jelöljük.

Készítsük el a gombok akcióit.

previous_btn.onRelease = function() {
      elozo();
};
next_btn.onRelease = function() {
      kovetkezo();
};

A gombok megnyomásával hívjuk meg az elozo-kovetkezo függvényeket.
Szükségünk van még egy onEnterFrame függvényre, ami egyrészt felel a preloader-ért, valamint a betöltött képünk méretéért, a betöltött kép láthatóságáért, és meghívja a presel függvényt, ami a képet húzza össze a kívánt méretre.

p = 0;
this.onEnterFrame = function() {
      filesize = picture.getBytesTotal();
      loaded = picture.getBytesLoaded();
      preloader._visible = true;
      if (loaded != filesize) {
            preloader.preload_bar._xscale = 100*loaded/filesize;
      } else {
            preloader._visible = false;
            szelesseg = picture._width;
            magassag = picture._height;
            presel();
//A scalező függvényünk lesz
            if (picture._alpha<100) {
                 picture._alpha += 5;
            }
      }
};

Folyamatosan figyeljük, hogy a kép letöltődött-e, ha igen, akkor eltüntetjük a preloaderünket, a szelesseg, magassag megkapja a betöltött kép méretét, majd meghívjuk a presel függvényt. Ha a kép átlászó, fokozatosan növeljük az alpha értékét amíg el nem éri a teljes értéket.

Jöhetnek a lapozó függvények:

function kovetkezo() {
      if (p<(total-1)) {
           p++;
           if (loaded == filesize) {
                picture._alpha = 0;
                picture.loadMovie(image[p], 1);
                szoveg.text = leiras[p];
                kepszam();
           }
      }
}

function elozo() {
      if (p>0) {
           p--;
           picture._alpha = 0;
           picture.loadMovie(image[p], 1);
           szoveg.text = leiras[p];
           kepszam();
      }
}


A gombnyomástól függően növeljük vagy csökkentjük p értékét, és az aktuális p-hez tartozó értékek alapján betöltjük a képet és a szoveg txt-énk is megkapja a leírás tömbben tárolt értékét. A végén meghívjuk a kepszam függvényt, amit majd a pozíció kiírásáért felel.

Az első kép behívásáért felelős függvény:

function elsokep() {
      if (loaded == filesize) {
           picture._alpha = 0;
           picture.loadMovie(image[0], 1);
           szoveg.text = leiras[0];
           kepszam();
      }
}


Most pedig a számláló függvénye, ami az aktuális pozíciónkat mutatja:

function kepszam() {
      aktualis_pos = p+1;
      position.text = aktualis_pos+" / "+total;
}


Most pedig a presel függvény, ami biztosítja, hogy a betöltött kép beleférjen a 400*300-as területünkbe.

function presel() {
      if ((szelesseg>kepXmax) || (magassag>kepYmax)) {
      xoldal = szelesseg-kepXmax;
      yoldal = magassag-kepYmax;
      if (xoldal>yoldal) {
           aranyx = kepXmax/szelesseg;
           picture._width = aranyx*szelesseg;
           picture._height = aranyx*magassag;
           kozepre();
// A középre igazító függvény
     } else if (yoldal>xoldal) {
           aranyy = kepYmax/magassag;
           picture._width = aranyy*szelesseg;
           picture._height = aranyy*magassag;
           kozepre();
           }
      } else if ((szelesseg<kepXmax) || (magassag<kepYmax)) {
      xoldal = kepXmax-szelesseg;
      yoldal = kepYmax-magassag;
      if (xoldal>yoldal) {
           aranyy = kepYmax/magassag;
           picture._width = aranyy*szelesseg;
           picture._height = aranyy*magassag;
           kozepre();
      } else if (yoldal>xoldal) {
           aranyx = kepXmax/szelesseg;
           picture._width = aranyx*szelesseg;
           picture._height = aranyx*magassag;
           kozepre();
           }
      }
}

A függvényt a legegyszerűbben egy példával magyarázhatom el. Legyen például a betöltendő képünk 600*400-as méretű. A függvény elindul az if-es eset szerint, mert nagyobb x oldal (és y is) mint a megengedett maximális. Kiszámolja az xoldalt és az yoldalt is. Ekkor: xoldal=200, yoldal=100. Megvizsgálja, hogy melyik a nagyobb, ami most az xoldal. Tehát a kép x oldala inkább kilóg a területről mint az y, úgyhogy azt kell annyira összenyomnunk mint a terület (kepXmax), y oldalát pedig ugyanezzel az aránnyal nyomjuk össze szintén, hogy a kép arányos maradjon. Látszik, hogy a képünk a rendelkezésre álló területet valamelyik oldal szerint (vagy teljesen) mindig ki fogja tölteni. Hasonló elgondolással lett megírva az összes többi eset is.
Ha viszont a kép nem 400*300-as arányú, akkor jó lenne, ha nem a bal felső sarokba igazodva jelenne meg, hanem mindig az adott területünk közepén. Erre szolgál a feltételvizsgálatok végén meghívott kozepre függvény.

A középre függvény, ami a képet igazítja:

function kozepre() {
      picture._x = kezdoX+(kepXmax-picture._width)/2;
      picture._y = kezdoY+(kepYmax-picture._height)/2;
}


Itt kap szerepet az elején deklarált kezdoX, kezdoY. Ez nálam a picture movie clip x-y pozíciója, és ehhez képest számolom ki a kép helyzetét, hogy a terület közepére kerüljön. Ha a kép teljesen kitölti a területet, akkor ez persze megegyezik a kezdoX, kezdoY értékével.

Hát ennyi. Biztos meg lehet szebben, okosabban írni, úgyhogy mindenkinek hajrá! :)
 
   
 
 

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