Create a AS3 Slideshow with XML--tutorial.jcwcn.com

This tutorial shows you how to create a simple slideshow using as3/flash and xml like this one. In order to complete this tutorial you can download the source files here.

In our xml file, we want to store the path to the slides and a description for each of it. So let’s take a look at the example file

<?xml version="1.0" encoding="UTF-8"?>

  <slideshow>

<image src="images/fly.jpg" desc="Fly"/>

<image src="images/mouse.jpg" desc="Computer mouse"/>

<image src="images/country.jpg" desc="Country"/>

<image src="images/rope.jpg" desc="Rope"/>

<image src="images/flower.jpg" desc="Flower"/>

</slideshow>

On the first line we describe the version and the encoding of the file. Flash uses UTF-8 for encoding, so we should edit the file in UTF-8 only to avoid character encoding problems.

The first node defines the root node of the xml file and contains further nodes. These are the images with the attributes src and desc. Okey, that’s how the structure of the xml looks like, let’s move on to the flash file.
The stage has a movieclip which contains the textfields which will show us the description of the slides, the loading process and the slide count later. Under it you will find a mask layer which masks an empty movieclip, where our slides will be loaded into. And on our first layer we have the whole script, at wich we’ll take a look now.

As always, we need to import the necessary librarys first. In our case, we only have caurinas tweener engine which will later be used to fade in the slides.

import caurina.transitions.Tweener;

Then we define two constants. One for the delay between the slides in milliseconds and the other one for the fade time between the slides in seconds. You can change them freely according to your needs

const TIMER_DELAY:int = 5000;
const FADE_TIME:int =	1;

Now we need to set some variables for the slideshow. We’re beginning with a variable, that holds a reference to the current container which holds the slide and is in the front

var currentContainer:Sprite;

To know which slide is currently active, we set a integer. We start at -1 because the function switchSlide will go to the first slide, which is 0.

var intCurrentSlide:int = -1;

The total count of the slides will be stored in a integer variable

var intSlideCount:int;

Then we need to define a timer, which calls the switchSlide function after the delay time we set in the constant

var slideTimer:Timer;

To have a nice fade effect, we need two containers for the slides. Each one will contain one slide

var sprContainer1:Sprite;
var sprContainer2:Sprite;

Next we set a variable for loading our slides

var slideLoader:Loader;

The next variable defines the path to the xml file

var strXMLPath:String = "slideshow-data.xml";

xmlLoader will be used to load the xml file

var xmlLoader:URLLoader;

And finally we need a variable to store the xml stuff

var xmlSlideshow:XML;

Now we need to initialize the whole slideshow. First, we create a new urlloader for the slideshow xml file, add an event listener when it’s completely and load it

xmlLoader = new URLLoader();
xmlLoader.addEventListener(Event.COMPLETE, onXMLLoadComplete);
xmlLoader.load(new URLRequest(strXMLPath));

Then we create the time with the delay from the constant and add an event listener for the timer event

slideTimer = new Timer(TIMER_DELAY);
slideTimer.addEventListener(TimerEvent.TIMER, switchSlide);

Next we create 2 container sprite which will hold the slides and add them to the masked movieclip

sprContainer1 = new Sprite();
sprContainer2 = new Sprite();
mcSlideHolder.addChild(sprContainer1);
mcSlideHolder.addChild(sprContainer2);

And last of all, we keep a reference of the container which is currently in the front

currentContainer = sprContainer2;

Once our xml file is fully loaded, the function onXMLLoadComplete will be called. This function assigns the received data to xmlSlideshow, gets the total slide count and stores it in the variable intSlideCount. Then it’ll call the function switchSlide which will immediately load the next slide without waiting on the timer event.

xmlSlideshow = new XML(e.target.data);
intSlideCount = xmlSlideshow..image.length();
switchSlide(null);

Ok, let’s move on to the switchSlide function. This function will be called every time the timer has reached the delay and fires the timer event. First of all, we check, if the timer is running and stop it, because we need to wait until the next slide will be loaded and faded in. Then we check if there are any slides left. If not, we go back to the beginning. Now we need to figure out, wich container is currently in the front and assign currentContainer to the one, that’s in the back containing the old slide. Next we hide the old slide and bring it to the front.

if(slideTimer.running)
	slideTimer.stop();

if(intCurrentSlide + 1 < intSlideCount)
	intCurrentSlide++;
else
	intCurrentSlide = 0;

if(currentContainer == sprContainer2)
	currentContainer = sprContainer1;
else
	currentContainer = sprContainer2;

currentContainer.alpha = 0;
mcSlideHolder.swapChildren(sprContainer2, sprContainer1);

Then we create a new loader for the slide. We add an event listener when it’s loaded and an event listener for the progress of the loading. Next we load the picture with a urlrequest that contains the source path to the current image. And last of all, we show the description of the slide on the lbl_description and update the current number of the slide on lbl_count.

slideLoader = new Loader();
slideLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, fadeSlideIn);
slideLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, showProgress);
slideLoader.load(new URLRequest(xmlSlideshow..image[intCurrentSlide].@src));

mcInfo.lbl_description.text = xmlSlideshow..image[intCurrentSlide].@desc;
mcInfo.lbl_count.text = (intCurrentSlide + 1) + " / " + intSlideCount + " Slides";

The showProgress function is quite small. It’s just one line that calculates the percentage of the bytes loaded from the current slide and displays it on the lbl_loading

mcInfo.lbl_loading.text = "Loading..." + Math.ceil(e.bytesLoaded * 100 / e.bytesTotal) + "%";

The last function is fadeSlideIn and will be called once the picture is fully loaded. First, we add the loaded slide from the slideLoader to the current container. Then we clear the preloader text. And finally, we fade the current container in with caurinas tweener engine and start the slide timer when the tween is finished. Like this, we’ll have an endless loop, which will switch the slides.

currentContainer.addChild(slideLoader.content);
mcInfo.lbl_loading.text = "";
Tweener.addTween(currentContainer, {alpha:1, time:FADE_TIME, onComplete:function(){ slideTimer.start();} });
}

That was already it. I hope you enjoyed reading the tutorial. Please feel free to ask questions or leave a feedback.

Full code with comments

// import tweener
import caurina.transitions.Tweener;

// delay between slides
const TIMER_DELAY:int = 5000;
// fade time between slides
const FADE_TIME:int =	1;

// reference to the current slider container
var currentContainer:Sprite;
// index of the current slide
var intCurrentSlide:int = -1;
// total slides
var intSlideCount:int;
// timer for switching slides
var slideTimer:Timer;
// slides holder
var sprContainer1:Sprite;
var sprContainer2:Sprite;
// slides loader
var slideLoader:Loader;
// url to slideshow xml
var strXMLPath:String = "slideshow-data.xml";
// slideshow xml loader
var xmlLoader:URLLoader;
// slideshow xml
var xmlSlideshow:XML;

function init():void {
	// create new urlloader for xml file
	xmlLoader = new URLLoader();
	// add listener for complete event
	xmlLoader.addEventListener(Event.COMPLETE, onXMLLoadComplete);
	// load xml file
	xmlLoader.load(new URLRequest(strXMLPath));

	// create new timer with delay from constant
	slideTimer = new Timer(TIMER_DELAY);
	// add event listener for timer event
	slideTimer.addEventListener(TimerEvent.TIMER, switchSlide);

	// create 2 container sprite which will hold the slides and
	// add them to the masked movieclip
	sprContainer1 = new Sprite();
	sprContainer2 = new Sprite();
	mcSlideHolder.addChild(sprContainer1);
	mcSlideHolder.addChild(sprContainer2);

	// keep a reference of the container which is currently
	// in the front
	currentContainer = sprContainer2;

}

function onXMLLoadComplete(e:Event):void {
	// create new xml with the received data
	xmlSlideshow = new XML(e.target.data);
	// get total slide count
	intSlideCount = xmlSlideshow..image.length();
	// switch the first slide without a delay
	switchSlide(null);
}

function fadeSlideIn(e:Event):void {
	// add loaded slide from slide loader to the
	// current container
	currentContainer.addChild(slideLoader.content);
	// clear preloader text
	mcInfo.lbl_loading.text = "";
	// fade the current container in and start the slide timer
	// when the tween is finished
	Tweener.addTween(currentContainer, {alpha:1, time:FADE_TIME, onComplete:function() { slideTimer.start(); }});
}

function switchSlide(e:Event):void {
	// check, if the timer is running (needed for the
	// very first switch of the slide)
	if(slideTimer.running)
		slideTimer.stop();

	// check if we have any slides left and increment
	// current slide index
	if(intCurrentSlide + 1 < intSlideCount)
		intCurrentSlide++;
	// if not, start slideshow from beginning
	else
		intCurrentSlide = 0;

	// check which container is currently in the front and
	// assign currentContainer to the one that's in the back with
	// the old slide
	if(currentContainer == sprContainer2)
		currentContainer = sprContainer1;
	else
		currentContainer = sprContainer2;

	// hide the old slide
	currentContainer.alpha = 0;
	// bring the old slide to the front
	mcSlideHolder.swapChildren(sprContainer2, sprContainer1);

	// create a new loader for the slide
	slideLoader = new Loader();
	// add event listener when slide is loaded
	slideLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, fadeSlideIn);
	// add event listener for the progress
	slideLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, showProgress);
	// load the next slide
	slideLoader.load(new URLRequest(xmlSlideshow..image[intCurrentSlide].@src));

	// show description of the next slide
	mcInfo.lbl_description.text = xmlSlideshow..image[intCurrentSlide].@desc;
	// show current slide and total slides
	mcInfo.lbl_count.text = (intCurrentSlide + 1) + " / " + intSlideCount + " Slides";
}

function showProgress(e:ProgressEvent):void {
	// show percentage of the bytes loaded from the current slide
	mcInfo.lbl_loading.text = "Loading..." + Math.ceil(e.bytesLoaded * 100 / e.bytesTotal) + "%";
}

// init slideshow
init();

discuss this topic to forum

[Print][Close][Bookmark:digg+,reddit+,del.icio.us+,dzone+]

Create a AS3 Slideshow with XML

relation tutorial

Category

New

Hot