XML Slide show

Here you go with a wonderful slide show using a totally new concept. In this tutorial you will be using an XML file to link the images that needs to be displayed in your flash. Just follow the steps given below and create your own slide show:

1. Open a new Flash Document, Set the stage size to 500 px X 500 px and the Frame rate to 30 fps.

    

2. Open a new Text document click File–>Save As

    

3. Save the new text document as slideshow.xml.

    

4. Your xml file would look this way:

    

5. Now you need to create a folder containing your favorite pictures. And name the folder Images.

6. Open the slideshow xml file Right click–>Edit and give the image path in this file. The content of this file is as shown below:

    

7. Now come back to the Flash document, name the Layer slideshow.

    

8. Right click the 1^st Frame–>choose Actions:

    

9. Type the following Action Script in the Actions window:

import mx.transitions.Tween;

import mx.transitions.easing.*;

var myShowXML = new XML();

myShowXML.ignoreWhite = true;

myShowXML.load(”slideshow.xml”);

myShowXML.onLoad = function() {

_root.myWidth = myShowXML.firstChild.attributes.width;

_root.myHeight = myShowXML.firstChild.attributes.height;

_root.mySpeed = myShowXML.firstChild.attributes.speed;

_root.myImages = myShowXML.firstChild.childNodes;

_root.myImagesNo = myImages.length;

createContainer();

callImages();

};

function createContainer() {

_root.createEmptyMovieClip(”myContainer_mc”,1);

myContainer_mc.lineStyle(5,0×000000,100);

myContainer_mc.lineTo(_root.myWidth,0);

myContainer_mc.lineTo(_root.myWidth,_root.myHeight);

myContainer_mc.lineTo(0,_root.myHeight);

myContainer_mc.lineTo(0,0);

myContainer_mc._x = (Stage.width-myContainer_mc._width)/2;

myContainer_mc._y = (Stage.height-myContainer_mc._height)/2;

}

function callImages() {

_root.myMCL = new MovieClipLoader();

_root.myPreloader = new Object();

_root.myMCL.addListener(_root.myPreloader);

_root.myClips_array = ;

_root.myPreloader.onLoadStart = function(target) {

_root.createTextField(”myText_txt”,_root.getNextHighestDepth(),0,0,100,20);

_root.myText_txt._x = (Stage.width-_root.myText_txt._width)/2;

_root.myText_txt._y = (Stage.height-_root.myText_txt._height)/2;

_root.myText_txt.autoSize = “center”;

_root.myText_txt.text = “test”;

};

_root.myPreloader.onLoadProgress = function(target) {

_root.myText_txt.text = “Loading.. “+_root.myClips_array.length+”/”+_root.myImagesNo+” Completed”;

};

_root.myPreloader.onLoadComplete = function(target) {

_root.myClips_array.push(target);

target._alpha = 0;

if (_root.myClips_array.length == _root.myImagesNo) {

_root.myText_txt._y = myContainer_mc._y + myContainer_mc._height;

_root.target_mc = -1;

moveSlide();

myShowInt = setInterval(moveSlide, (_root.mySpeed*1000)+1000);

}

};

for (i=0; i<_root.myImagesNo; i++) {

temp_url = _root.myImages.attributes.url;

temp_mc = myContainer_mc.createEmptyMovieClip(i, myContainer_mc.getNextHighestDepth());

_root.myMCL.loadClip(temp_url,temp_mc);

}

}

function moveSlide() {

current_mc = _root.myClips_array[_root.target_mc];

new Tween(current_mc, “_alpha”, Strong.easeOut, 100, 0, 1, true);

_root.target_mc++;

if (_root.target_mc>=_root.myImagesNo) {

_root.target_mc = 0;

}

_root.myText_txt.text = _root.myImages.attributes.title;

next_mc = _root.myClips_array[_root.target_mc];

new Tween(next_mc, “_alpha”, Strong.easeOut, 0, 100, 1, true);

}

Note: In the Action script we have mentioned the path for the XML file you created. This will connect to the images folder and give you a wonderful Slide show.

10. Save your Work and Test Movie.

    

    

Download .fla File of XML Slide Show

Download .swf File of XML Slide Show