How to built 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:
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.
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:
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.
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
- If num1 is smaller than num2, the result is always equal to num1.
- 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.
- 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.
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:
1.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.
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:
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:
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.
source: http://blog.activeden.net/resources/tutorials/how-to-build-a-flash-gallery-with-actionscript-3-and-milkbox/
StumbleIt! 
November 27, 2009
Hello,
Thanks for this tutorial but i’m getting a weird error from Milkbox saying ‘Milkbox :: addGalleries: XML file path error or local Ajax test: please test addGalleries() on-line’ when this line is called:
ExternalInterface.call(“milkbox.addGalleries”,’gallery.xml’);
Do you know what i probably did wrong ?
Thanks in advance.
--Reply