XML Random Image Slideshow
| Category | : Flash | Views | : 136522 | ||
| Version | : 8 | Rating | : | ||
| Type | : Text | Source File | : xml-random-image-slideshow.zip | ||
| Result | : See the result | ||||
This tutorial will show you how to create random images that are loaded from external sources, XML file. This tutorial is based on "Retrieve Data from XML file". You will need to have basic understanding about XML and how to load it into Flash document before start this tutorial.
First of all, the tutorial consist of several files:
- XML file
- Pictures files
- Flash file
<xml>
<images>
<a title = "pic1.jpg" />
<b title = "pic2.jpg" />
<c title = "pic3.jpg" />
</images>
</xml>
Please note that the pictures filename in XML file has to match the pictures files that you have. Otherwise, the code will not be able to load the pictures.If you don't have this XML file yet, you can easily create one. Just open up your text editor (Notepad) and copy and paste the above text to your text editor. You can write XML with any text editor. One thing that you have to remember is to save it with UTF-8 encoding.
Pictures files are files that you want to load. The pictures' filename don't have to be 'pic1.jpg' or 'pic2.jpg'. You can use whatever the name you want. However, if you use another name, you have to change the XML file accordingly.
Flash file is Flash document that we will write. We don't have this file yet, but we will go ahead and create one.
Open up your Flash and create a new Flash document.
Create the document size as big as you want. I recommend to create the document size as big as the picture size. You can change the document size by going to menu 'Modify > Document'.
Next, create a new symbol ('Insert > New Symbol' or CTRL + F8). Name this new symbol 'pictureMC' and change the type to 'Movie Clip'.
Put this movie clip on top left corner of the document, and name the instance 'picture_mc'.
Now, click on the first frame of 'Layer 1' and open up the 'Actions' window ('Windows > Actions' or 'F9') and paste in this code:
pauseTime = 2000;
xmlImages = new XML();
xmlImages.ignoreWhite = true;
xmlImages.onLoad = loadImages;
xmlImages.load("images.xml");
function loadImages(loaded) {
if (loaded) {
xmlFirstChild = this.firstChild;
imageFileName = [];
totalImages = xmlFirstChild.childNodes[0].childNodes.length;
for (i=0; i<totalImages; i++) {
imageFileName[i] = xmlFirstChild.childNodes[0].childNodes[i].attributes.title;
}
randomImage();
}
}
function randomImage() {
if (loaded == filesize) {
var ran = Math.round(Math.random() * (totalImages - 1));
picture_mc.loadMovie(imageFileName[ran], 1);
pause();
}
}
function pause() {
pauseInterval = setInterval(pause_slideshow, pauseTime);
function pause_slideshow() {
clearInterval(pauseInterval);
randomImage();
}
}
More cool tech articles from other blogs.
