In this tutorial we will show you how to create a simple XML image gallery in ActionScript 3. The advantage of XML-based photo gallery is obvious – instead of editing the FLA file manually every time you want to add an extra image, you can just edit an XML file. The gallery we’re going to create is really primitive, but it’s enough to give you the basic understanding of the principles of retrieving XML data in Flash. As always, this is going to be easy and fun!

To follow this tutorial you need Flash CS3 or greater, because we are using ActionScript 3.0.

Outline: we will resize our images in Photoshop, secondly we are going to use any text editor or Dreamweaver to write an XML file, and then we will go into Flash and do some ActionScripting in order to load our gallery.

The size of our gallery will be 800X450 which means that the max size of image can be 420 by height and 770 by width (if we want to make a 15px marging between the image and the edge of the gallery). You can set the size of the image anywhere between these. For this tutorial I recommend you to save images as 1.jpg, 2.jpg and so on.

Important thing to remember is that you should save your XML file and .fla file in the same folder with the images. So create a folder on your computer and name it, let us say, “XML flash gallery” and put the images you are going to use into this folder. It’s important to keep all files within the same folder because the XML file will reference the images while Flash file will reference the XML file.

Now that our images are ready, let’s write an XML file. As I said you can use any source code editor like DreamWeaver or Notepad ++ (that will be probably a better solution for beginner users) or a basic text editor like Notepad. I will use Notepad for this lesson. So, open a blank  document and save it as an .xml file named ImageGal.xml. Be sure to save it in our “XML flash gallery” folder because it’s really important. When you are done, type the next line in your new document:

Code block

<?xml version="1.0" encoding=@utf-8"?>

This is just a doc type definition. If you use Dreamweaver, you don’t have to enter this line, you can just set the type of the doc you are going to create as XML and this line will be filled in automatically.

The beauty of XML is that you can make up your own tags. If you are familiar with HTML coding, you will see that XML uses similar signs, like angle brackets, opening and closing tags, etc. But while HTML uses a fixed number of tags, XML enables you to write your own tags. To learn more about XML data, read these tutorials:

• Introduction to XML in Flash
• Writing/Saving XML files
• Using XML in Flash CS3/AS3

Let’s create our first tag, which will look like this:

Code block

1. <imageFolder>
2.  
3. </imageFolder>

It’s not hard to guess what this tag means, is it? We are going to organize our image gallery data. We’ve just marked a “container” for our images and now let’s create the first “child” in it:

Code block

<image>
    <imgURL>1.jpg</imgURL>
    <imgW>525</imgW>
    <imgH>420</imgH>
</image>

As you see, our image container has 3 pieces of information in it, which are image URL, image width and image height respectively. Notice that we didn’t write the address of the image file within the imgURL tag: because we saved our XML file right in the same folder as all of our images, we can just immediately reference the file name. As for the other two tags, you can grab the image width and height from the file properties window.

Now you can duplicate this <image> tag as many times as many images you have, filling necessary information and our XML file is actually written. Here is what I’ve got as a result:

Code block

<?xml version="1.0" encoding=@utf-8"?>

<imageFolder>

    <image>
        <imgURL>1.jpg</imgURL>
        <imgW>525</imgW>
        <imgH>420</imgH>
    </image>
    <image>
        <imgURL>2.jpg</imgURL>
        <imgW>525</imgW>
        <imgH>420</imgH>
    </image>
    <image>
        <imgURL>3.jpg</imgURL>
        <imgW>525</imgW>
        <imgH>420</imgH>
    </image>
    <image>
        <imgURL>4.jpg</imgURL>
        <imgW>525</imgW>
        <imgH>420</imgH>
    </image>
    <image>
        <imgURL>5.jpg</imgURL>
        <imgW>525</imgW>
        <imgH>420</imgH>
    </image>
    <image>
        <imgURL>6.jpg</imgURL>
        <imgW>525</imgW>
        <imgH>420</imgH>
    </image>
    <image>
        <imgURL>7.jpg</imgURL>
        <imgW>525</imgW>
        <imgH>420</imgH>
    </image>

</imageFolder>

Now we can jump into Flash and start building our image gallery there. However, in fact we won’t create anything special in Flash, we will make just one symbol and the rest is all coding. So, open your Adobe Flash CS3 or CS4 and create a new Actionscript 3.0 Flash file.

As I mentioned in the beginning, the size of our gallery is going to be 800×450, so let’s set necessary dimensions and make the stage color black via the document properties tab (see the screenshot below).

Now find a Rectangle tool on the toolbar and draw a rectangle of any size. Then select your new object and go to the properties panel. Set the dimensions of the rectangle to 800X450, just like our stage.

Now comes an important moment: press F8 to convert the object into symbol. Let’s name it Base. Please make sure it’s a Movie Clip and that the registration point is in the top left corner. Give this layer name Base and same goes for its Instance Name.

Now we are completely ready to process to the coding. Create a new layer and name it AS. Then select the first keyframe of this layer and hit F9 to open the ActionScript window.

Now copy the following chunk of code and paste it into your Actions window. Save the file. If that doesn’t make sense to you yet, don’t worry – a detailed line-by-line explanation goes further.

Code block

var xmlRequest:URLRequest = new URLRequest("ImageGal.xml");
var xmlLoader:URLLoader = new URLLoader (xmlRequest);
var imgData:XML;
var imageLoader:Loader;
var rawImage:String;
var rawH:String;
var rawW:String;
 
var imgNum:Number = 0;
var checkTime:Timer = new Timer(100);
var numberOfChildren:Number;
 
xmlLoader.addEventListener(Event.COMPLETE, xmlLoadedF);
Base.addEventListener(MouseEvent.CLICK, nextImgF);
Base.buttonMode = true;
 
function xmlLoadedF(event:Event):void{
	checkTime.start();
	checkTime.addEventListener(TimerEvent.TIMER, checkF);
	imgData = new XML(event.target.data);
}
 
function checkF(event:TimerEvent):void{
	if(imgNum ==0){
		packetF();
	}else if(imgNum < numberOfChildren){
		imageLoader.unload();
		packetF();
	}else{
		imageLoader.unload();
		imgNum = 0;
		packetF();
	}
}
 
	function packetF():void{
	checkTime.removeEventListener(TimerEvent.TIMER, checkF);
	rawImage = imgData.image[imgNum].imgURL;
	numberOfChildren = imgData.*.length();
	rawW = imgData.image[imgNum].imgW;
	rawH = imgData.image[imgNum].imgH;
	imageLoader = new Loader;
	imageLoader.load(new URLRequest(rawImage));
	Base.addChild(imageLoader);
	imageLoader.x = (stage.stageWidth - Number(rawW)) /2;
	imageLoader.y = (stage.stageHeight - Number(rawH))/2;
 
}
 
function nextImgF(event:MouseEvent):void{
	checkTime.addEventListener(TimerEvent.TIMER, checkF);
	imgNum++;
}

Virtually our xml flash gallery is done! Go to Control => Test Movie or simply press Ctrl+Enter to see the resulting gallery. It should look like this:

We’ve just created a simple flash gallery that uses an XML file to render some data. Now let’s look into greater detail at the code you’ve pasted a minute earlier.

The first thing we need to create sort of a container where we will store the primary information about our XML file. Using a professional language, we need to declare a variable.

var xmlRequest:URLRequest = new URLRequest(“ImageGal.xml”); – here we created an XML loading request

var xmlLoader:URLLoader = new URLLoader (xmlRequest); – the URLLoader variable actually loads the aforesaid URL  “ImageGal.xml”. In other words, it’s loading our XML file.

Our next step is adding an event listener to the URL loader which basically says Flash to load the XML data immediately after the XML file is loaded (line 13 of our source code):

xmlLoader.addEventListener(Event.COMPLETE, xmlLoadedF); – this line means that as soon as the file ImageGal.xml is loaded, the function xmlLoadedF will be executed. We will need one more variable in order to create that function (see the 3d line of the source code):

var imgData:XML;

The function xmlLoadedF starts on the line 17 and looks like this:

function xmlLoadedF(event:Event):void{

imgData = new XML(event.target.data);

}

To see what’s going on, let’s trace the variable imgData by typing trace(imgData); right under the line imgData = new XML(event.target.data); Then just press Ctrl+Enter.

You will get the following result:

We see that our output window is showing us right the same data we’ve typed in our XML file. Everything’s working and you can now delete the trace line.

Our next step is actually to define the first image in our XML file on the stage here in a Flash file so we could view the image. To do this, we should add several new variables first (Line 4 and 5 of the source code):

var imageLoader:Loader; – here Loader is an AS3 class responsible for loading an object;

var rawImage:String; – this is a variable of String type, which is, in other words, a line of code containing some text data;

var imgNum:Number = 0; – variable of Number type is responsible for keeping numerical values, both whole and fractional numbers.

Now we need to add some code within the xmlLoadedF function to make the image displayed (line 38 of the source code):

rawImage = imgData.image[imgNum].imgURL; – as you remember, we’ve declared the rawImage variable above and it’s a string, this line defines the value of rawImage.

Another variable we’ve just declared is imageLoader and now we have to initialize this object as a Loader (line 42 of the source code):

imageLoader = new Loader;

Now that our value is initialized, let’s populate its property:

imageLoader.load(new URLRequest(rawImage)); – in this line, we call our imageLoader object’s load method. The load method takes a URLRequest object as its argument, so we create a new URLRequest object, and since its constructor accepts a string to create the rawImage request, I pass it our rawImage argument that function xmlLoadedF takes.

Here goes the next line of code:

Base.addChild(imageLoader); – with this line we add our imageLoader object, which holds a loaded image, onto the stage.

Now when you click Ctrl+Enter you should have the first image displayed:

Notice that the image is aligned at the top left corner because it makes a start from the registration point of our Base movie clip, which we set up as the top left corner, as you remember.

Now we have to declare two new variables (lines 6 and 7 of the source code):

var rawH:String;

var rawW:String;

As you might guess, these are responsible for the image height and width respectively.

Now let’s give Flash a hint at where it should take info about the image width and height, and of course, we will refer to our XML file:

rawW = imgData.image[imgNum].imgW;

rawH = imgData.image[imgNum].imgH;

Next step is to add the code necessary to center this image (lines 45 and 46 of the source code):

imageLoader.x = (stage.stageWidth – Number(rawW)) /2;

imageLoader.y = (stage.stageHeight – Number(rawH)) /2;

Notice that we converted raw here into a Number, although initially we defined it as String. We need this because Flash can’t do Math with strings, we have to operate numbers. In order to enable Flash to calculate the “x” and “y”  parameters we just point out that rawW and rawH are numbers in this case.

Now you can test the movie by clicking Ctrl+Enter and you’ll see that the image is now centered:

Let’s go further and make our image switch to the next one when we click on it. First, we need to add an event listener to our Base movie clip so that when it’s clicked next XML item is loading. Here it is (see line 14 of the source code):

Base.addEventListener(MouseEvent.CLICK, nextImgF);

Because Base is a movie clip, when you hover the mouse over it you won’t get that index finger cursor displayed. But using a small trick we can enable that finger to let users know the area is clickable. All we need to do is apply a button mode to our movie clip (line 15):

Base.buttonMode = true;

You will be able to preview this effect as soon as we define the function nextImgF. We will get back to this function later right after we write some more code necessary for its implementation.

The code we’ve written so far allows us to load data from our XML file using the xmlLoadedF function. However, this is not enough for our image gallery and we need a few more things to add to our code block. And a couple of new variables go first (lines 10 and 11 of the source code):

var checkTime:Timer = new Timer(100); – this variable contains info about timer which is going to continuously check the number of the image, so the program could know when the image is clicked and when it has to go ahead. In our case the timer will cycle every one tenth of a second infinitely.

var numberOfChildren:Number; – this variable of a Number type contains the number of children in the XML document. So far Flash only knows one child, var imgNum:Number = 0. We need to fix that.

Let’s define what numberOfChildren should be equal to:

numberOfChildren = imgData.*.length(); – * Symbol here means “any child inside the imgData”.

Now let’s actually start our timer. Because we need it to start as soon as our XML file is loaded, we will add some details for the xmlLoadedF function which, as you remember, gets executed right after the XML file is loaded (line 18, 19):

checkTime.start(); – with this line we tell our timer to start and execute every tenth of a second. And in order to tell the timer what it should execute every one tenth of a second, let’s add an event listener:

checkTime.addEventListener(TimerEvent.TIMER, checkF); – as you see, every tenth of a second our timer will call the function checkF.

We will define this function in a moment. Now I want to point out you that the xmlLoadedF function is called only once, and what we want is to make Flash reload image each time the imgNum changes.  That’s why we need to remove a junk of code from xmlLoadedF and put it into function that will be continuously recalled as we wish. Let’s create such function and call it packetF (line 36 of the source code):

Code block

function packetF():void{
	checkTime.removeEventListener(TimerEvent.TIMER, checkF);
	rawImage = imgData.image[imgNum].imgURL;
	numberOfChildren = imgData.*.length();
	rawW = imgData.image[imgNum].imgW;
	rawH = imgData.image[imgNum].imgH;
	imageLoader = new Loader;
	imageLoader.load(new URLRequest(rawImage));
	Base.addChild(imageLoader);
	imageLoader.x = (stage.stageWidth - Number(rawW)) /2;
	imageLoader.y = (stage.stageHeight - Number(rawH)) /2;
 
}

Look above at the line 37: we removed the event listener so that checking function would stop running as soon as function packetF is called.

Now let’s get back to the checkF function. We are going to put some if and else statements into this function to let the code decide between several potential paths (line 23 of the source code):

if(imgNum ==0){

packetF(); – the condition here is that if the imgNum equals 0, the function packetF should be executed.

Another condition we’ll state is that if the image number is less than number of children in the XML file, imageLoader object should unload, as we don’t want all the stack of image to appear on the stage:

Code block

}else if(imgNum < numberOfChildren){
		imageLoader.unload();
		packetF();

And the last part, in which we will define that in all other cases the program should unload the image loader, set the imgNum to 0 and execute function packetF:

Code block

}else{
		imageLoader.unload();
		imgNum = 0;
		packetF();
	}
}

Finally we can define nextImgF function (line 50 of the source code):

function nextImgF(event:MouseEvent):void{

checkTime.addEventListener(TimerEvent.TIMER, checkF); – we need to recover an event listener for our timer, so it could start calling the conditional function packetF.

imgNum++; – with this line we set function to take the imgNum and add one number to it.

}

And here the grand moment comes –  our simple XML image gallery is done! I’ve included seven images to my example photo slideshow, but you can add as many images as you want. Try how easy it is to edit an XML gallery – you just enter necessary data in your XML document and all changes automatically appear in your .swf file. So enjoy and good luck in your projects!

Follow FlashMint on Twitter for more awesome Flash Tutorials!
"Like" FlashMint FaceBook Page to stay in touch!