DotNetAdda: Creating an XML / Flash Slideshow with Captions

Introduction

In order to improve the quality of visitor’s experience it is often needed to make a website mix of rich contents including graphics and animation etc. As a very prominent say express that an image is worth of thousand words, so how gigantic can an animation be… let us presume.

This article guides about 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 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 is 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) name is ‘Slideshow’. Now create one more directory inside it and name as ‘images’. Put all the images you want to show on 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 format of XML file must be like this:

Collapse

<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> have 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 slide. Name your XML as ‘slideshow.xml’.

Finally, you need to create a .FLA file in your ‘Slideshow’ directory. Create 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:

Collapse

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

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 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 & 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.

Collapse

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 reside at the _root of movie, _root usually represents the current executing clip on time line. I created variables like myWidth, myHeight etc and given them values extracted from XML file. Now createContainer() function has been called which function is responsible to create an empty movie clip (container). Once empty movie clip will be created another functioncallImages() will be call which is responsible to collect images and put them into an array. Inside this another functionmoveSlide() 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:

Collapse

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 first line of above code a method to create an empty movie clip has been called. First parameter "myContainer" represents the name of container and second parameter is used to extract highest depth of layers and levels in movie. 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 next few lines I have set a border to the container. First of all I have given a style to this border using statementmyContainer.lineStyle(5,0x000000,100);. Here first parameter (5 in my case) represents the width of border, 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 start 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 come back to top left corner of the container. All this has been done in four statements written after styling statement. See there is use of myWidth and myHeight variables values of which has been extracted from XML file.

Now we have an empty container on stage which is stated at the top left corner of 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 top left corner with having white space on document. So 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 suing 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.

Collapse

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; temp_url =" _root.myImages[i].attributes.url;" temp_mc =" myContainer.createEmptyMovieClip(i,">
In 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 movie container. At onLoadProgress event of Preloader object, this text field is 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 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 eventmoveSlide() 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 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 current slide. Later in this article moveSlide()function will be discussed in detail.
Now come back the bottom few lines of callImages() function, here is a loop which runs for every image in myImagesarray and create a MoveClip for current image in our base Movie clip container. This clip has then loaded into MovieClipLoader object. This has to be done for all the images in Array. In simple words this loop is the responsible to put results by using what has been buffered for long in program.
Implementing Transition Effect
As I wrote multiple times in above context that moveSlide() function is responsible to set transition effects in our flash slideshow. Below is the code for moveSlide() function:
 Collapse
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 top two line of 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 bottom three lines of 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 document.
Finally we get an XML / Slideshow working and this is easier to reuse with ease of content updatability. Now come to your excitement while testing your flash movie.
Points to Ponder
Practical stuff is attached as Demo. You will easily understand when download. Remember for this program to work you need Flash Version 7.0 or later.
Final Wordsto Ponder
I hope you find the stuff helpful. Thanks for reading. Good Luck