How To Build a Flash Gallery with ActionScript 3 and Milkbox

In this tutorial I will explain how you can build a Flash gallery with Actionscript 3 and Milkbox. Milkbox is a modal window, similar to Lightbox. The advantages of milkbox are that you store the paths of your images in a XML file and call these paths via JavaScript. Milkbox supports images and SWFs and you can customize the modal window with CSS easily.

The Plan

View the Gallery we will be building

First I will load the thumbnails in my Flash movie and position them in a grid. The columns of the grid can be changed dynamically via a global variable. Then I will add the milkbox functions to my code. So when you click on a thumbnail, the corresponding bigger image will open in the milkbox window.

Preparations

Paste all images you would like to use in a seperate folder “images”. Create thumbnails of these images.
My thumbnails have a dimension of 133×100px.

Step 1: Create a Flash file

Create a new Actionscript 3.0 Flash file. In my example I create a 600×400pixel Flash movie. Name the first layer to “as”. This layer will hold your actionscript. Save the Flash file.

Step 2:Create your XML structure

We store all paths of the images in a XML file. So when you add a new image, you just have to add the path of the image to the XML file. Here is my xml structure:

<?xml version="1.0" encoding="UTF-8"?>
<milkbox>
	<thumbs>
		<thumb src="images/thumb1.jpg" />
		<thumb src="images/thumb2.jpg" />
		<thumb src="images/thumb3.jpg" />
		<thumb src="images/thumb4.jpg" />
		<thumb src="images/thumb5.jpg" />
		<thumb src="images/thumb6.jpg" />
	</thumbs>
</milkbox>

Save it as images.xml in the same directory of your Flash file.

Step 3:Global variables

Let’s start coding with declaring the global variables.

var thumbCon:MovieClip;//Container for each thumbnail
var startX:Number = 0;//x-position of each thumbCon
var startY:Number = 0;//y-position of each thumbCon
var colNum:Number = 3;//The numbers of columns

Step 4:Loading the XML data

Now I load the XML data in my Flash movie. Write the following code in the first frame of your “as” layer:

var XMLLoader:URLLoader = new URLLoader(new URLRequest("images.xml"));
XMLLoader.addEventListener(Event.COMPLETE, loadXML);

function loadXML(evt:Event):void
{
	var xml:XML = new XML(evt.target.data);//Stores the xml data
	var list:XMLList = xml.thumbs.thumb;//Stores the xml data of all thumbnails
}

I put all paths of the thumbnails in a XML list.

Step5:Adding each thumbnails in a separate movieclip

We loop through the XML list to add each thumbnail in a separate movieclip. We have 6 thumbnails, so the last index is 5. Remember that the index of a XML list starts always with 0.

In the loop we create a instance of thumbCon. After that we create a variable thumbLoader which is a Loader Object. This thumbLoader loads the thumbnail from the src attribute in the XML list. Then we add the thumbLoader, which is holding the thumbnail, to the thumbCon. We name each thumbLoader by his corresponding index in the XML list. In the end each thumbLoader get his own MouseEvent. So when you click on a thumbnail, the showImage function will be called.

for(var i:int = 0; i < list.length(); i++)
{
	thumbCon = new MovieClip()  ;//Init a new container for the thumbnail

    var thumbLoader:Loader = new Loader();//Loader for the thumbnail
    thumbLoader.load(new URLRequest(list[i].@src));//Start loading the image
    thumbCon.addChild(thumbLoader);//Add the loader, which hold the thumbnail, to the thumb container
    thumbLoader.name = (String(i));//The name of the thumb container is the index of the loaded thumbnail in the xml file
    thumbLoader.addEventListener(MouseEvent.CLICK, showImage);//The click function for the thumb container
    addChild(thumbCon);//Add the thumb container to the stage
}

Step 6:Position the thumbnail containers

Now it's become exciting. We position each thumbCon on the stage. We are still in the loop. So the following code has to be written there. I'm using the modulo-operator. "The what??!" I hear you say?!

Allow me to explain. The modulo operator calculates the remainder of expression1 divided by expression2.
In my example the gallery has 3 columns. So I will explain it with the colNum variable, which we declare at the beginning.

num1 % num2

1. If num1 is smaller than num2, the result is always equal to num1.
2. Now num1 is 6 and num2 is 3.I divide 6 / 3 = 2, the result is an integer. So the modulo result is equal 0. Conclusion: If the result is an integer, the modulo result is 0.
3. Now num1 is 5 and num2 is 3. I divide 5 / 3 = 1.67, the result is no integer. To get the modulo result, I round 1.67 down and I get an integer of 1. num1(5) - (1 * colNum(3)) = 2 = modulo result.

Another example:
num1 = 364
364 / 3 = 121.33 => 364 - (121 * 3) = 1
num1 = 38564
38564 / 3 = 12854.67 => 12854 - 3 = 2

I hope you understand it now.

Now let's start using the modulo operator for positioning the thumbnails.

if(!(i%colNum) && i != 0)
{
	startX = 0;
	startY += 120;//I know that my thumbnails are 100px high, so I decide to make a 20pixel space between each row.
}

thumbCon.x = 150 * startX + 90;//150 is the horizontal space between each thumb container, 90 is the space to the top border of the Flash movie.
thumbCon.y = startY + 50;//50 is the space to the left border of the Flash movie.

startX++;

First I check to see if I have reached the end of the column.

If the modulo result is equal 0, it returns true, otherwise it returns false. So we increase the y-position and set the startX to 0 again, but not if i is equal 0. Confusing, I know.

After each pass the startX increases by 1 and is set back to 0, when the if condition is true.

Step 7:Milkbox introduction

Now you should visit the milkbox website to get the basics you need. The milkbox creator describes it exactly on his website:

Milkbox Website

Please read the Basic Use, Launch from JavaScript and/or Flash and XML Galleries articles. And come back here when you understand how milkbox works.

Step 8:Including Milkbox

Download the milkbox package from the milkbox website. After you unzip it, paste the relevant files in your folder, where you have saved the Flash movie.

Your folder structure should looks like this now:

Step 9:Updating the XML file for milkbox

Now we set the paths of the images which will be open in the milkbox window.
You should know how the XML structure should look like. If not, go back to the milkbox website and read the "XML Galleries" article.
The whole XML structure should look now like this:

Step 10:Applying External Interafce

Now let's apply the ActionScript to call milkbox from Flash. You do this by using the ExternalInterface Class. This class allows to call Javascript in a HTML.

Add this code at the top of your code:

ExternalInterface.call("milkbox.addGalleries",'images.xml');

The first parameter calls a Javascript function, the second parameter is argument, which is given over to the Javascript. In this case the path of the XML file. So milkbox knows where it gets the paths of the requested images.

Step 11:Setting the event handler

We set already the eventlistener for each thumbnail, but not the eventhandler "showImage". I will do this now.

function showImage(evt:MouseEvent):void
{
	var thumbNr:int = evt.target.name;
	ExternalInterface.call("milkbox.showGallery",{gallery:"myGallery", index:thumbNr});
}

When you click on an thumbnail, the index of the thumbnail will be saved in a variable "thumbNr". This number will be given over milkbox, so milkbox knows what image should be open.

Here is the final code:

var thumbCon:MovieClip;
var startX:Number = 0;
var startY:Number = 0;
var colNum:Number = 3;

ExternalInterface.call("milkbox.addGalleries",'images.xml');

var XMLLoader:URLLoader = new URLLoader(new URLRequest("images.xml"));
XMLLoader.addEventListener(Event.COMPLETE, loadXML);

function loadXML(evt:Event):void
{
	var xml:XML = new XML(evt.target.data);
	var list:XMLList = xml.thumbs.thumb;

	for (var i:int = 0; i < list.length(); i++)
	{
		thumbCon = new MovieClip();

		var thumbLoader:Loader = new Loader();
		thumbLoader.load(new URLRequest(list[i].@src));
		thumbCon.addChild(thumbLoader);
		thumbLoader.name = (String(i));
		thumbLoader.addEventListener(MouseEvent.CLICK, showImage);
		addChild(thumbCon);

		if(!(i%colNum) && i != 0)
		{
			startX = 0;

			startY += 120;
		}

		thumbCon.x = 150 * startX + 90;
		thumbCon.y = startY + 50;

		startX++;
	}
}

function showImage(evt:MouseEvent):void
{
	var thumbNr:int = evt.target.name;
	ExternalInterface.call("milkbox.showGallery",{gallery:"myGallery", index:thumbNr});
}

Step 12:Generating the HTML

The last thing we need to do now is generate the HTML. You can publish the HTML from Flash. I prefer swfObject, but this is your decision, what you use for
embedding Flash in a HTML.
Now include the Javascript and the CSS in the head of the HTML:

<script type="text/javascript" src="js/mootools-1.2.3-core-yc.js">
<script type="text/javascript" src="js/mootools-1.2.3.1-assets.js">
<script type="text/javascript" src="js/milkbox-yc.js">

<style type="text/css">
		@import url(css/milkbox/milkbox.css);
</style>

Note that you have to set the wmode to transparent or opaque, otherwise it will not work. That's it! Now you can test the gallery on a webserver. It works only online.

View the Gallery

Conclusion

You can create a cool gallery very quickly by combining Flash and milkbox. You can store all paths in only one XML file and this allows you to manage the gallery very easily. I hope you like it so far and will use this in some of your projects.

Oh, and I'm sure the creator of milkbox would be very happy with a little donation too if you decide to use it.