Creating an XML / Flash Slideshow with Captions

• Download demo - 293.63 KB

Table of Contents

• Introduction
• Creating External Assets
• Processing XML File
• Creating Movie Clip Container
• Calling Images from Source Folder
• Implementing Transition Effect
• Points to Ponder
• Final Words
• History

Introduction

In order to improve the quality of visitor’s experience, it is often needed to make a website a mix of rich contents including graphics and animation, etc. As the prominent saying expresses that an image is worth a thousand words, just imagine how gigantic an animation can be… 

This article guides you how to create a Flash Slideshow using XML. Usually, when we create a slideshow in Flash, all the images get integrated into the movie itself, doing this slashes the reusability of the movie file (swf) and updatability of the movie content. Here I created an information bridge between the source of my images and flash movie (swf) that is through XML file.

Every time when the Flash movie has been played, it looks for information from the XML file. That provides parameters like Width, Height, Speed of Slide show and the source of images and their titles (captions) as well. Once Flash movie gets all information that has been processed to be integrated in Flash itself and the effect would be the same if we don't put an XML file in between. But use of XML file eases the updatability of content and the reuse of Flash movie at other places (websites). Moreover, I have used transition class to enhance the feel of sliding effect between images.

Creating External Assets

External assets mean to prepare all the images of slideshow, XML information file and an FLA project.

First of all, create a directory (folder) named ‘Slideshow’. Now create one more directory inside it and name it as ‘images’. Put all the images you want to show on the slide in this folder (images). To get an impressive effect, keep the dimension (width and height) of all images equal.

Now go back to your ‘Slideshow’ directory, create an XML file here. The format of XML file must be like this:

<slideshow width="475" height="390" speed="2">
	<image url="images/gal1_img1.jpg" title="Product 1"/>
	<image url="images/gal1_img2.jpg" title="Product 2"/>
	<image url="images/gal1_img3.jpg" title="Product 3"/>
	<image url="images/gal1_img4.jpg" title="Product 4"/>
	<image url="images/gal1_img5.jpg" title="Product 5"/>
	<image url="images/gal1_img6.jpg" title="Product 6"/>
	<image url="images/gal1_img7.jpg" title="Product 7"/>
	<image url="images/gal1_img8.jpg" title="Product 8"/>
	<image url="images/gal1_img9.jpg" title="Product 9"/>
	<image url="images/gal1_img10.jpg" title="Product 10"/>
</slideshow>

See the <slideshow> has three attributes, width, height and speed. Give values according to your requirement. Remember that the unit of values is pixels (px) for width and height and seconds (sec) for speed. Now inside <slideshow> node, put as many image <image> nodes as you want. This (<image>) node has two attributes url and title. URL attribute has to be valued with a relative URL of each image file from the place where you will be putting .SWF or .FLA file and TITLE attribute represents the text which you want to show with the slide. Name your XML as ‘slideshow.xml’.

Finally, you need to create a .FLA file in your ‘Slideshow’ directory. Create a new Flash document, set its dimensions as 500x500 (in pixels) and set frames rate as 30 (fps). Now write this code for the actions of frame1 of layer1:

import mx.transitions.Tween;
import mx.transitions.easing.*;

The above two lines have been added to use methods of tween class, these help us to enhance the effect of sliding. You’ll see in moveSlide() function that I’m using Tween and also accessing easeOut property.

Now we have all our external assets ready to use and will be coding for processing of XML information, calling and integrating images, and then moving slides. All this code has to be written for actions of frame1 of layer1.

Processing XML File

To process XML file, we need to add this code (just below our import statements) for actions of frame1 of layer1.

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();    // Used to create an empty movie clip (movie container)
	callImages();         // Used to extract and push all the images into an array
};

Here we are using an object (myShowXML) of type XML Class. This object will represent our information file, which is an XML file. For this object, ‘ignoreWhite’ property has been set to true, this is simply to ignore white space which has been put between XML node in slideshow.xml file. Load method has been used to pass the path of XML file which has to be looked in for slide information.

While loading XML file (at onLoad event), we are going to collect all the information into variables that reside at the _root of movie, _root usually represents the current executing clip on time line. I created variables like myWidth, myHeight, etc. and gave them values extracted from XML file. Now createContainer() function has been called which is responsible to create an empty movie clip (container). Once an empty movie clip will be created, another function callImages() will be called which is responsible to collect images and put them into an array. Inside this other function, moveSlide() will be called on a regular interval of specified time (time value specified for speed attribute in XML file).

Creating Movie Clip Container

The code which represents our createContainer() function is given below:

function createContainer() 
{
	_root.createEmptyMovieClip("myContainer",_root.getNextHighestDepth());

	myContainer.lineStyle(5,0x000000,100);
	myContainer.lineTo(_root.myWidth,0);
	myContainer.lineTo(_root.myWidth,_root.myHeight);
	myContainer.lineTo(0,_root.myHeight);
	myContainer.lineTo(0,0);

	myContainer._x = (Stage.width-myContainer._width)/2;
	myContainer._y = (Stage.height-myContainer._height)/2;
}

In the first line of the above code, a method to create an empty movie clip has been called. The first parameter "myContainer" represents the name of the container and the second parameter is used to extract the highest depth of layers and levels in movie. The second parameter _root.getNextHighestDepth() ensures that Flash renders the movie clip in front of all other objects on the same level and layer in the current movie clip.

In the next few lines, I have set a border to the container. First of all, I have given a style to this border using statement myContainer.lineStyle(5,0x000000,100);. Here, the first parameter (5 in my case) represents the width of border, the second parameter (0x000000 in my case) represents hexadecimal code of border color, and the third parameter (100 in my case) represents the opacity (or alpha) value of border.

Once the style of the border has been set, the program starts plotting it from top left corner of the container and goes to the top right corner of the container, then to bottom right corner of the container, then to bottom left corner of the container and finally comes back to top left corner of the container. All this has been done in four statements written after styling statement. See there is the use of myWidth and myHeight variable values which have been extracted from the XML file.

Now we have an empty container on stage which is stated at the top left corner of the document. That is, if I have set width=300 and height=300 in XML file and the width and height of my document in FLA file are 500 and 500. My container will be at the top left corner having white space on document. So the last two statements have been used to set the position of container on stage, in all cases the container will be centered horizontally and will be set to the middle on document. This has been done by changing the coordinates of top left corner of container from 0, 0 to some other value calculated using width and height of container as well as stage.

Calling Images from Source Folder

It is time to call images from folder and put them into action.

function callImages() 
{
	_root.myMCL = new MovieClipLoader();
	_root.myPreloader = new Object();
	_root.myClips_array = [];

	_root.myMCL.addListener(_root.myPreloader);

	_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.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._y + myContainer._height;
			_root.target_mc = -1;
			moveSlide();
                       setInterval(moveSlide,(_root.mySpeed*1000)+1000);
		}
	};

	for (i=0; i<_root.myImagesNo; i++) 
	{
		temp_url = _root.myImages[i].attributes.url;
		temp_mc = myContainer.createEmptyMovieClip
			(i, myContainer.getNextHighestDepth());
		_root.myMCL.loadClip(temp_url,temp_mc);
	}
}

In the top few lines, I have declared a MovieClipLoader object, a Preloader object and an array put clips. Initially MovieClipLoader object has been filled in with Preloader object.

At onLoadStart event of Preloader object, a blank TextField has been created and centered into the movie container. At onLoadProgress event of Preloader object, this text field has been assigned progress values. That is, loading this image from these number of images. At onLoadComplete event of Preloader object, images have been pushed into an array and the value of alpha for current target has been set to zero. Now the vertical position of TextField has been changed to put it at the bottom of Movie clip container and the current target image has been set to a negative value. Finally in this event moveSlide() function has been called in for regular intervals of the time that has been extracted from XML file (speed value in seconds).

The moveSlide() function is responsible to apply transition effects on the current clip to fade out and then by incrementing the value of current target apply effects on new image to fade in. This is also responsible to feed into the caption field the corresponding value that has been extracted from XML file for the current slide. Later in this article, moveSlide() function will be discussed in detail.

Now coming back to the bottom few lines of callImages() function, here is a loop which runs for every image in myImages array and create a MoveClip for current image in our base Movie clip container. This clip is then loaded into MovieClipLoader object. This has to be done for all the images in Array. In simple words, this loop is responsible for putting results by using what has been buffered for long in program.

Implementing Transition Effect

As I wrote multiple times in the above context, moveSlide() function is responsible for setting transition effects in our Flash slideshow. Below is the code for moveSlide() function:

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[target_mc].attributes.title;
	next_mc = _root.myClips_array[_root.target_mc];
	new Tween(next_mc, "_alpha", Strong.easeOut, 0, 100, 1, true);
}

In the top two lines of the above function, the current target has been extracted from clips array, this has now been dulled with an easeOut effect. Now the value of movie clip target has been incremented, there is a condition in between to check whether the cycle has been completed if yes value of movie clip target has been assigned as zero to recycle slideshow. In the bottom three lines of the above function, the title value (caption) of current image has been extracted and fed into text field, then the clip has been assigned to be next movie clip and sharpened with easeOut effect on the document.

Finally we get an XML / slideshow working and this is easier to reuse with ease of content updatability. Now comes your excitement while testing your Flash movie.

Points to Ponder

Practical stuff is attached as demo. You will easily understand when you see the download files. Remember, for this program to work, you need Flash version 7.0 or later.

Final Words to Ponder

I hope you find the stuff helpful. Thanks for reading. Good luck!

History

• 28^th March, 2010: Initial post