XML Image Slideshow

U današnjem actionscript tutorijalu napraviti ćemo slideshow koji će učitati eksterne slike, a adresa do slika bit će pohranjena u xml-u. Ja ću koristit četiri slike.

1. Napravite folder u kojem ćemo snimit xml, flash dokument i u kojem će se nalazit naše slike

2. Kreirajte xml dokument u bilo kojem text editoru(notepad, notepad ++ ,itd.)

Otvorite svoj text editor i kopirajte ovaj kod i snimite fajl pod imenom "xmlSLideshow.xml":

1
2
3
4
5
6

<slideshow>
<slika adresa="image001.jpg">
<slika adresa="image002.jpg">
<slika adresa="image003.jpg">
<slika adresa="image004.jpg">
</slika></slika></slika></slika></slideshow>

slideshow je rootNode u xml-u
slika je childNode u xml-u
adresa je atribut unutar slika childNode-a

3. Nađite 4 slike i stavite ih u isti folder s xml-om, promijenite imena slika u adresa atributu da budu isti kao i imena vaših slika.
4. Otvorite Adobe Flash CS3 i kreirajte novi Flash dokument(actionscript3.0) i snimite ga u folder s xml-om i slikama.
5. Zaključajte prvi layer i preimenujte ga u actions
6. Kliknite na prvi frame actions layera i otvorite actions panel(F9)
7. Krenite kodirat

Prvo moramo deklarirati dvije variable currentImage i urlArray. CurrentImage je broj koji ćemo povećavat kad se pokrene tajmer i on će određivat koja slika se učitava, a početna vrijednost mu je 0. UrlArray je array koji će bit popunjen s adresama do slika unutar for loopa kad se xml učita.

1
2

var currentImage:Number = 0;
var urlArray:Array = new Array();

Sad moramo definirati XML, URLRequest(adresa do xml fajla) i URLLoader variablu koja ima jedan agument(URLRequest,tj. adresu do xml fjla). Kod server-side skripti i xml-a koristi se URLLoader, a ne Loader kao kod eksternih fajlova. Nakon što smo definirali te tri variable xmlLoaderu moramo dodati eventListener koji osluškuje kad je naš xml učitan. Ako imate veliki xml fajl proces učitavanja je isti kao kod externih fajlova.

3
4
5
6

var myXML:XML = new XML();
var xmlRequest:URLRequest = new URLRequest("xmlSlideshow.xml");
var xmlLoader:URLLoader = new URLLoader(xmlRequest);
xmlLoader.addEventListener(Event.COMPLETE, xmlLoaded);

Unutar xmlLoaded funkcije prvo moramo popuniti xml variablu koju smo definirali izvan funkcije s podacima koje smo dobili nakon što je xml učitan. Nakon toga pokrećemo for loop. U for loopu provjeravamo koliko ima childNode-ova s imenom "slika" i ovisno o tome povećavamo broj "i", a svaki put kad povećamo broj "i" popunimo urlArray s podatkom iz "adresa" atributa u "slika" childNode-u. Nakon što smo popunili urlArray i završili s for loop-om pokrećemo funkciju initSlideshow() koja pokreće naš slideshow.

function xmlLoaded(e:Event):void
{
myXML = XML(e.target.data);
for(var i:uint = 0; i<myXML.slika.length();i++)
{
urlArray.push(myXML.slika[i].@adresa);
}
initSlideshow();
}
Prije nego napišemo initSlideshow() funkciju moramo definirati Loader i URLRequest pomoću kojih ćemo učitati slike, pozicionirati Loader na sredinu animacije i dodati Loader na display listu. Za razliku od tutorijala u kojem sam vam pokazao kako učitati sliku ovdje ćemo ostavit URLRequest prazan jer ćemo adresu definirati unutar initSlideshow() funkcije.

18
19
20
21
22

var imageLoader:Loader = new Loader();
var imageRequest:URLRequest = new URLRequest();
imageLoader.x = stage.stageWidth/2 - 200;
imageLoader.y = stage.stageHeight/2 - 150;
addChild(imageLoader);

Unutar initSlidshow() funkcije prvo moramo URLRequest-u dodati adresu do prve slike. Adresa se nalazi u urlArrayu na prvoj poziciji. U array-ima prva pozicija je nulta(0) pozicija i zato smo currentImage broj postavili na nula kad smo ga definirali na početku skripte. Nakon toga učitamo sliku pomoći Loader-ove load() funkcije koja ima jedan argument(URLRequest). Slike ćemo mjenjat pomoću tajmera i svaki put kad se tajmer pokrene(svakih 5 sekundi) pozvat ćemo changeImage() funkciju.

23
24
25
26
27
28
29
30

function initSlideshow():void
{
 imageRequest = new URLRequest(urlArray[currentImage]);
 imageLoader.load(imageRequest);
 var mT:Timer = new Timer(5000);
 mT.start();
 mT.addEventListener(TimerEvent.TIMER, changeImage);
}

Svaki put kad pozovemo changeImage() funkciju(svakih 5 sekundi) povećavamo currentImage broj. Pomoću if statmenta provjerit ćemo dal je currentImage broj veći od ukupnog broja childNode-a. Pošto imamo 4 childNoda ali prvi je nula(0) onda ih ima 0,1,2 i 3 tako da ako currentImage isti kao broj 4 mi moramo resetirat currentImage broj na 0. Tako smo dobili slideshow koji ide u krug. Da bi se slika promijenila moramo promijenit URLRequest argument(adresu) i pokrenuti load() funkciju s novom adresom.

31
32
33
34
35
36
37
38
39
40

function changeImage(e:TimerEvent):void
{
 currentImage++;
 if(currentImage == 4)
 {
 	currentImage = 0;
 }
 imageRequest = new URLRequest(urlArray[currentImage]);
 imageLoader.load(imageRequest);
}

Primjer:

Source Fajlovi - .fla, .xml i slike

Imam nekih problema s pokazivanjem koda u dijelu gdje se nalazi for loop, pa vas molim da downloadate source fajlove da vidite kako bi trebao izgledat kod u tom djelu.
Pozdrav do sljedećeg tutorijala.

Social Bookmarks