Create a slideshow using Flash ActionScript 3.0 and XML

Hi there, since it’s summer and everybody will be in vacation, I decide to show you how to create a slideshow using Flash ActionScript 3.0 and XML, where you can put your own images. You don’t need to be an expert in Flash to do this, but you might need to see my other tutorials before to start: Create an Image Gallery or How to properly install Caurina

Settings all files


Create a new ActionScript File and save it as “MainClass.as” (com.fladev.gallery.MainClass) – this will be the main class for our flash file; the package classes extends the Sprite class (since we don’t have a timeline animation). Finally create a new AS3 Flash file (590×300px) and open it, so that we have both files opened.

MainMovie

On main movie create a movieclip with instance name “container”, with coordonates X and Y to 0; this will be the container that will store images; also create a dynamic textfield for preloading images, with instance name “preloader_txt” and align this in upper right corner. Next step is to create the .XML files.

XML

Create a folder “images” and inside of this a  subfolder  called “large” where will be all images. I put 5 images this folder with same size: width 590px  and height 300px . Then create a new XML file called “slideshow.xml” and add some nodes:

<?xml version="1.0" encoding="UTF-8"?>
<GALLERY>
	<image src="images/large/1.jpg" />
	<image src="images/large/2.jpg" />
	......................................................................................
	<image src="images/large/5.jpg" />
</GALLERY>

MainClass.as

So far we need a loader for images; an urlLoader for .XML; an array to store all path images; a timer to trigger the loading function and finally Caurina to display images.

private var xml:XML;
private var urlLoader:URLLoader;
private var loader:Loader;
private static const XML_PATH:String = "slideshow.xml"
private var images:Array;
private var p:Number = 0;
private var imgLength:Number;
private var timer:Timer;
private var timerDelay:Number = 3500;

In constructor function we declare all listeners:

urlLoader = new URLLoader();
images = new Array();
urlLoader.load(new URLRequest(XML_PATH));
urlLoader.addEventListener(Event.COMPLETE, loadXML);
timer = new Timer(timerDelay);
timer.addEventListener(TimerEvent.TIMER, initImage);

After .XML is loaded we push all images into “images” array:

private function loadXML(e:Event):void
{
	//display hole content from XML
			xml = new XML(e.target.data);
			imgLength = xml.image.length();

			for (var i:int = 0; i < imgLength; i++) {
				images[i] = xml.image[i].@src;
			}

	initImage();
}

Next step is to load the images according with number “p”:

private function initImage(e:TimerEvent = null):void
		{
			p++;
			//if p is equal with image's length we set this back to 0
			if (p == imgLength) {
				p = 0;
			}

			loader = new Loader();
			loader.load(new URLRequest(images[p]));
			loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, loadImage);
			loader.contentLoaderInfo.addEventListener(Event.COMPLETE, showImage);
		}

Preloading the image and stop the timer if it’s running:

private function loadImage(e:ProgressEvent) {
			if (!timer.running) {
				timer.stop();
			}
			var percent:Number = e.bytesLoaded / e.bytesTotal * 100;
			preloader_txt.text = Math.floor(percent) + "%";
		}

Finally displaying the image and hiding the preloader, after it’s done:

private function showImage(e:Event) {
			preloader_txt.text = "";//hide preloader
			e.target.content.alpha = 0;//on first step the content is invisible
			container.addChild(e.target.content);
			Tweener.addTween(e.target.content, { alpha:1, time:1, transition:"easeOutSine", onComplete:nextImage } );
			//after the image was fully displayed we remove the container childrens and we start the timer again to load the next image
			while (container.numChildren > 2) {
				container.removeChildAt(0);
			}
		}
private function nextImage() {
	timer.start();
}

Conclusion

There is not so much code here, to build a simple slideshow in as3, but it cover the hole basics in Flash: loading an .XML file, loading images, setting a timer etc. Recompile and see your beautiful images in a nice slideshow, made by yourself. Feel free to send me any questions or comments on my email.
Cheers!


Twitter Digg Delicious Stumbleupon Technorati Facebook

3 Responses to “Create a slideshow using Flash ActionScript 3.0 and XML”

  1. Whats up ! Love your blog thanks for sharing it with us.. Greetings from the Speedy DNS.

  2. Interesting article and one which should be more widely known about in my view. Your level of detail is good and the clarity of writing is excellent. I have bookmarked it for you so that others will be able to see what you have to say.

  3. thank you, I need to slide show by different in appearance each image.
    each image appearances by differente style.
    Can you help me?