Table of Contents
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();
callImages();
};
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
- 28th March, 2010: Initial post