Copperseed Creative


20

January

2011

Standard

Creating a simple gallery using Flash, XML and Actionscript 2.0

Posted in: Tutorials

Creating a simple gallery using Flash, XML and Actionscript 2.0

Requirements for this tutorial

Adobe Flash CS4+

Any text editing application

In this tutorial you will learn how to program a Flash/Actionscript 2.0 gallery, which is linked to an XML file that serves as a database for the images. The reason we use XML for this purpose is so that we could simply add the required data to this file and our gallery would update accordingly. We will also cover preloading for our images and add a thumbnail strip that we will tween using the Caurina Tweener Actionscript class.

To see what we will be doing click on the link below:

Final preview

Step 1

The very first thing to do is download the tutorial files. Click on the link below and unzip the archive when the download is complete. Contained in the resulting folder are the “gallery.fla” file, the Caurina Tweener Actionscript class, two empty folders (“images” and “thumbs”) and the “images.xml” file. Be sure to only work in the project folder.

Tutorial files

Step 2

Now that you have all the required files, go ahead and open up “gallery.fla” in Flash CS4+.
Step 2

Step 3

OK, so once we have the file open, we proceed by selecting the first and only frame on our actions layer and then opening our “Actions” palette by clicking on “Window” in the menu bar and then selecting “Actions”. Alternatively, you could use the shortcut Alt + F9.

Step 3

Step 4

The first line of Actionscript we are going to insert will import the Caurina Tweener Actionscript class so that we can use it in our file.

// This line imports the Caurina Tweener class so that it can be used.
 
import caurina.transitions.Tweener;

Step 5

The next step we will take is to load our XML file so that we can use the data contained therein. A successful load will activate the “generateGallery” function.

// This block of script creates a variable to hold our XML file and, if the load is successful, activates the function "generateGallery".
 
//---------------------------------------
 
var galleryXML = new XML();
 
galleryXML.ignoreWhite = true;
 
galleryXML.onLoad = function(success)
 
{
 
if (success) generateGallery(this);
 
else trace("Error loading XML file");
 
}
 
//---------------------------------------
 
// This line loads our XML file.
 
galleryXML.load("images.xml");

Step 6

A successful load of the XML file will activate the “generateGallery” function. Let’s begin on that function!

// The "generateGallery" function starts here.
 
function generateGallery(galleryXML)
 
{

Step 7

Now that we have opened the “generateGallery” function, we have to declare the variables we will be using in the function. We do this so that the scoping of these variables covers the entire function.

// This block creates variables for use in our function.
 
//---------------------------------------
 
var galleryPictures = galleryXML.firstChild.childNodes;
 
var imageArray:Array = new Array;
 
var stageWidth:Number = Stage.width;
 
var stageHeight:Number = Stage.height;
 
var Vcenter:Number = stageHeight / 2;
 
var Hcenter:Number = stageWidth / 2;
 
var mainHolder:MovieClip = holder.innerHolder;
 
var thumbSpacing:Number = 69;
 
var nextDepth:Number = this.getNextHighestDepth;
 
var j:Number = 0;
 
var containerWidth:Number;
 
var containerX:Number = 0;
 
var containerStop:Number;
 
var k:Number = 0;
 
//---------------------------------------

Step 8

In proceeding, we will create a loop to run through the number of images we have as defined by our XML database. The purpose of this loop is to make the data usable in Flash by populating arrays while also displaying the thumbnails and having them spaced out accordingly.

// This is a loop to perform certain tasks - Loop begins.
 
//---------------------------------------
 
for (var i = 0; i < galleryPictures.length; i++)
 
{

Step 9

With the loop open we can now populate our arrays with XML data.

// This block populates the image and currentThumb arrays.
 
//---------------------------------------
 
var currentPicture = galleryXML.firstChild.childNodes[i].firstChild.firstChild.nodeValue;
 
var currentThumb:Array = galleryXML.firstChild.childNodes[i].lastChild.firstChild.nodeValue;
 
imageArray.push(currentPicture);
 
//---------------------------------------

Step 10

The following line establishes the x position of each thumbnail and the width of the containing movie clip by incrementing the size and spacing we set earlier when declaring variables.

// This line sets the thumb container's width by counting the number of images multiplied by the allocated space between them
 
containerWidth = i * thumbSpacing;

Step 11

With the foundation laid for our thumbnails, the next block of code creates an empty movie clip for each thumbnail, sets a mask for them so that they don’t overlap, and then displays them. We also use the value set for the “containerWidth” variable to specify the x position for each thumbnail.

// This block creates Movie Clips for our thumbnails, puts space between them and loads the images.
 
//---------------------------------------
 
var currentThumbHolder:MovieClip = thumbHolder.imageContainer.createEmptyMovieClip("thumbnail"+i,i);
 
currentThumbHolder.image = currentPicture;
 
currentThumbHolder.title = i;
 
currentThumbHolder.createEmptyMovieClip("finalHolder",0);
 
var maskDuplicate:MovieClip = thumbHolder.imageContainer.attachMovie("individualMask","individualMask"+i,galleryPictures.length+i);
 
maskDuplicate._x = containerWidth;
 
maskDuplicate._y = -20;
 
currentThumbHolder._x = containerWidth;
 
currentThumbHolder._y = -20;
 
currentThumbHolder.setMask(maskDuplicate);
 
currentThumbHolder.finalHolder.loadMovie(currentThumb,"finalHolder"+i);
 
//---------------------------------------

Step 12

Our thumbnails will be displayed at runtime and are essentially to act as buttons. With that in mind, let’s add some functions for mouse interactions and finally, close the loop.

// This function sets a small change in transparency when a thumb is rolled over.
 
//---------------------------------------
 
currentThumbHolder.onRollOver = function()
 
{
 
this._alpha = 80;
 
}
 
//---------------------------------------
 
// This function sets the transparency back to normal when the thumb is rolled out.
 
//---------------------------------------
 
currentThumbHolder.onRollOut = function()
 
{
 
this._alpha = 100;
 
}
 
//---------------------------------------
 
// This function loads the appropriate image when a thumb is clicked on.
 
//---------------------------------------
 
currentThumbHolder.onPress = function()
 
{
 
imageLoader.loadClip(this.image,mainHolder);
 
j = this.title;
 
}
 
//---------------------------------------
 
}
 
//---------------------------------------
 
// Loop ends.

Step 13

The next few lines will handle the listener object to control the functions at each period of loading. The listener object is then added to the movie clip loader. These functions control the preloader bar and make loading progress visible. Here, the movie clip loader is also centred on stage so that our images don’t expand over the edges of our stage.

// This line creates a new listener to check for loading of images.
 
var loadListener:Object = new Object();
 
// This function determines the center of the stage.
 
//---------------------------------------
 
loadListener.onLoadInit = function(mc:MovieClip)
 
{
 
mc._x = Hcenter - mc._width/2;
 
mc._y = Vcenter - mc._height/2;
 
}
 
//---------------------------------------
 
// This line creates a new Movie Clip loader.
 
var imageLoader:MovieClipLoader = new MovieClipLoader();
 
// This line adds the "loadListener" object to the Movie Clip Loader.
 
imageLoader.addListener(loadListener);
 
// This function tells the loading progress bar to be visible when loading begins.
 
//---------------------------------------
 
loadListener.onLoadStart = function(mainHolder)
 
{
 
bar._visible  =  true;
 
}
 
//---------------------------------------
 
// This function tells the loading progress bar to expand while the image is loading.
 
//---------------------------------------
 
loadListener.onLoadProgress  =  function(mainHolder, lBytes,  tBytes)
 
{
 
bar._width = (lBytes/tBytes)*689;
 
}
 
//---------------------------------------
 
// This function hides the loading progress bar when the image is done loading.
 
//---------------------------------------
 
loadListener.onLoadComplete = function(targetMC)
 
{
 
bar._visible = false;
 
}
 
//---------------------------------------

Step 14

The following line loads the initial image into the loader.

// This line loads the initial image.
 
imageLoader.loadClip(imageArray[0],mainHolder);

Step 15

Now that we have the image loading and thumbnails down, we need to add functionality to our “forwardBtn” and “backwardBtn”. The following functions will handle mouse interaction with our “forwardBtn”.

// This function controls the "forwardBtn" Movie Clip when rolled over.
 
//---------------------------------------
 
forwardBtn.onRollOver = function()
 
{
 
this.onEnterFrame = function()
 
{
 
if (this._currentframe != 1)
 
{
 
this.nextFrame();
 
}
 
else
 
{
 
this.play();
 
delete this.onEnterFrame;
 
}
 
}
 
}
 
// This function plays the "forwardBtn" Movie Clip in reverse when rolled out.
 
//---------------------------------------
 
forwardBtn.onRollOut = function()
 
{
 
this.onEnterFrame = function()
 
{
 
if (this._currentframe != 1)
 
{
 
this.prevFrame();
 
}
 
else
 
{
 
delete this.onEnterFrame;
 
}
 
}
 
}
 
// This function controls what happens when the "forwardBtn" is clicked on. It loads the next image.
 
//---------------------------------------
 
forwardBtn.onPress = function()
 
{
 
j+=1;
 
imageLoader.loadClip(imageArray[j],mainHolder);
 
}
 
//---------------------------------------

Step 16

With our “forwardBtn” working, let’s add functionality to the “backwardBtn”.

// This function controls the "backwardBtn" Movie Clip when rolled over.
 
//---------------------------------------
 
backwardBtn.onRollOver = function()
 
{
 
this.onEnterFrame = function()
 
{
 
if (this._currentframe != 1)
 
{
 
this.nextFrame();
 
}
 
else
 
{
 
this.play();
 
delete this.onEnterFrame;
 
}
 
}
 
}
 
// This function plays the "backwardBtn" Movie Clip in reverse when rolled out.
 
//---------------------------------------
 
backwardBtn.onRollOut = function()
 
{
 
this.onEnterFrame = function()
 
{
 
if (this._currentframe != 1)
 
{
 
this.prevFrame();
 
}
 
else
 
{
 
delete this.onEnterFrame;
 
}
 
}
 
}
 
// This function controls what happens when the "backwardBtn" is clicked on. It loads the previous image.
 
//---------------------------------------
 
backwardBtn.onPress = function()
 
{
 
j-=1;
 
imageLoader.loadClip(imageArray[j],mainHolder);
 
}
 
//---------------------------------------

Step 17

The functionality of our “forwardBtn” and “backwardBtn” are working. We now need to add functionality to our “thumbForwardBtn” and “thumbBackwardBtn”. Before we do that though, we will calculate the width and stops of the thumbnail container so that it won’t tween beyond its limits.

// This block calculates the number of images to ascertain where the thumbnail container should stop.
 
//---------------------------------------
 
var imageCount = Math.floor((imageArray.length + 1) / 10);
 
containerStop = -1 * containerWidth;
 
var stopNumber = containerStop + (69 * (imageCount + 1));

Step 18

We will use those calculations in the functionality of our “thumbForwardBtn” and “thumbBackwardBtn”. Let’s begin with the “thumbForwardBtn”.

// This function controls the "thumbForwardBtn" Movie Clip when rolled over.
 
//---------------------------------------
 
thumbForwardBtn.onRollOver = function()
 
{
 
this.onEnterFrame = function()
 
{
 
if (this._currentframe != 1)
 
{
 
this.nextFrame();
 
}
 
else
 
{
 
this.play();
 
delete this.onEnterFrame;
 
}
 
}
 
}
 
// This function plays the "thumbForwardBtn" Movie Clip in reverse when rolled out.
 
//---------------------------------------
 
thumbForwardBtn.onRollOut = function()
 
{
 
this.onEnterFrame = function()
 
{
 
if (this._currentframe != 1)
 
{
 
this.prevFrame();
 
}
 
else
 
{
 
delete this.onEnterFrame;
 
}
 
}
 
}
 
//---------------------------------------
 
// This function controls what happens when the "thumbForwardBtn" is clicked on. It slides the thumbnails to the left.
 
//---------------------------------------
 
thumbForwardBtn.onPress = function()
 
{
 
k += 1;
 
if(k >= imageCount)
 
{
 
containerX = stopNumber;
 
Tweener.addTween(thumbHolder.imageContainer, {_x:stopNumber, time:1, transition:"easeOutExpo"});
 
}
 
else
 
{
 
containerX -= 690;
 
Tweener.addTween(thumbHolder.imageContainer, {_x:containerX, time:1, transition:"easeOutExpo"});
 
}
 
}
 
//---------------------------------------

Step 19

Let’s tackle the “thumbBackwardBtn”.

// This function controls the "thumbBackwardBtn" Movie Clip when rolled over.
 
//---------------------------------------
 
thumbBackwardBtn.onRollOver = function()
 
{
 
this.onEnterFrame = function()
 
{
 
if (this._currentframe != 1)
 
{
 
this.nextFrame();
 
}
 
else
 
{
 
this.play();
 
delete this.onEnterFrame;
 
}
 
}
 
}
 
// This function plays the "thumbBackwardBtn" Movie Clip back to the start when rolled out.
 
//---------------------------------------
 
thumbBackwardBtn.onRollOut = function()
 
{
 
this.onEnterFrame = function()
 
{
 
if (this._currentframe != 1)
 
{
 
this.prevFrame();
 
}
 
else
 
{
 
delete this.onEnterFrame;
 
}
 
}
 
}
 
// This function controls what happens when the "thumbBackwardBtn" is clicked on. It slides the thumbnails to the right.
 
//---------------------------------------
 
thumbBackwardBtn.onPress = function()
 
{
 
k -= 1;
 
if(k

Step 20

The final Actionscript step will handle the visibility of our buttons. When we are on the first or last image the “forwardBtn” or “backwardBtn” should be hidden accordingly. The same should be done for the “thumbForwardBtn” and “thumbBackwardBtn”. With that complete, we will close our function.

// This function checks if the current image and thumbnail strip is the first or the last.
 
// If it is the first, it hides the backward buttons and if it is the last, it hides the forward buttons.
 
onEnterFrame = function()
 
{
 
if(j == imageArray.length - 1)
 
{
 
forwardBtn._visible = false;
 
backwardBtn._visible = true;
 
forwardBtn.gotoAndStop(1);
 
}
 
else if(j == 0)
 
{
 
forwardBtn._visible = true;
 
backwardBtn._visible = false;
 
backwardBtn.gotoAndStop(1);
 
}
 
else
 
{
 
forwardBtn._visible = true;
 
backwardBtn._visible = true;
 
}
 
if(imageCount == 0)
 
{
 
thumbBackwardBtn._visible = false;
 
thumbForwardBtn._visible = false;
 
}
 
else if(k >= imageCount)
 
{
 
thumbForwardBtn._visible = false;
 
thumbBackwardBtn._visible = true;
 
thumbForwardBtn.gotoAndStop(1);
 
}
 
else if(k

Step 21

We are now done with Actionscript, but don’t close Flash just yet. We still have to publish our file. Before we do that though, place your display images in the “images” folder and your thumbnails in the “thumbs” folder.

Step 21

Step 22

With your images in the correct folders, go ahead and open up “images.xml” in a text editor of your choice. In the code below you will see the structure of our XML file. The “portfolio” tag holds all the images, the “images” tag holds the information for a single image pair, the “pic” tag holds the path to our display image and the “thumb” tag holds the path to our thumbnail. Go ahead and edit this accordingly.

images/1.jpg
thumbs/1.jpg
 
images/2.jpg
thumbs/2.jpg
 
images/3.jpg
thumbs/3.jpg
 
images/4.jpg
thumbs/4.jpg
 
images/5.jpg
thumbs/5.jpg
 
images/6.jpg
thumbs/6.jpg
 
images/7.jpg
thumbs/7.jpg
 
images/8.jpg
thumbs/8.jpg
 
images/9.jpg
thumbs/9.jpg
 
images/10.jpg
thumbs/10.jpg
 
images/11.jpg
thumbs/11.jpg
 
images/12.jpg
thumbs/12.jpg
 
images/13.jpg
thumbs/13.jpg
 
images/14.jpg
thumbs/14.jpg
 
images/15.jpg
thumbs/15.jpg
 
images/16.jpg
thumbs/16.jpg
 
images/17.jpg
thumbs/17.jpg
 
images/18.jpg
thumbs/18.jpg
 
images/19.jpg
thumbs/19.jpg
 
images/20.jpg
thumbs/20.jpg
 
images/21.jpg
thumbs/21.jpg
 
images/22.jpg
thumbs/22.jpg
 
images/23.jpg
thumbs/23.jpg

Step 23

With that complete, return to your Flash file and test your movie by clicking on “Control” in the menu bar and then selecting “Test Movie” or by using the shortcut (Mac – Cmnd + Enter / Win – Ctrl + Enter). In doing so your gallery will also be published in SWF format. If you have done everything correctly, you should now see your functioning gallery!

Conclusion

This tutorial displayed an easy way to create a simple but effective image gallery. To update your gallery, simply add or remove “images”, “pic” and “thumb” tags to your XML file accordingly.

The full Actionscript 2.0 script:

// This line imports the Caurina Tweener class so that it can be used.
 
import caurina.transitions.Tweener;
 
// This block of script creates a variable to hold our XML file and, if the load is successful, activates the function "generateGallery".
 
//---------------------------------------
 
var galleryXML = new XML();
 
galleryXML.ignoreWhite = true;
 
galleryXML.onLoad = function(success)
 
{
 
if (success) generateGallery(this);
 
else trace("Error loading XML file");
 
}
 
//---------------------------------------
 
// This line loads our XML file.
 
galleryXML.load("images.xml");
 
// The "generateGallery" function starts here.
 
function generateGallery(galleryXML)
 
{
 
// This block creates variables for use in our function.
 
//---------------------------------------
 
var galleryPictures = galleryXML.firstChild.childNodes;
 
var imageArray:Array = new Array;
 
var stageWidth:Number = Stage.width;
 
var stageHeight:Number = Stage.height;
 
var Vcenter:Number = stageHeight / 2;
 
var Hcenter:Number = stageWidth / 2;
 
var mainHolder:MovieClip = holder.innerHolder;
 
var thumbSpacing:Number = 69;
 
var nextDepth:Number = this.getNextHighestDepth;
 
var j:Number = 0;
 
var containerWidth:Number;
 
var containerX:Number = 0;
 
var containerStop:Number;
 
var k:Number = 0;
 
var imageCount:Number;
 
//---------------------------------------
 
// This is a loop to perform certain tasks - Loop begins.
 
//---------------------------------------
 
for (var i = 0; i < galleryPictures.length; i++) { // This block populates the image and currentThumb arrays. //--------------------------------------- var currentPicture = galleryXML.firstChild.childNodes[i].firstChild.firstChild.nodeValue; var currentThumb:Array = galleryXML.firstChild.childNodes[i].lastChild.firstChild.nodeValue; imageArray.push(currentPicture); //--------------------------------------- // This line sets the thumb container's width by counting the number of images multiplied by the allocated space between them containerWidth = i * thumbSpacing; // This block creates Movie Clips for our thumbnails, puts space between them and loads the images. //--------------------------------------- var currentThumbHolder:MovieClip = thumbHolder.imageContainer.createEmptyMovieClip("thumbnail"+i,i); currentThumbHolder.image = currentPicture; currentThumbHolder.title = i; currentThumbHolder.createEmptyMovieClip("finalHolder",0); var maskDuplicate:MovieClip = thumbHolder.imageContainer.attachMovie("individualMask","individualMask"+i,galleryPictures.length+i); maskDuplicate._x = containerWidth; maskDuplicate._y = -20; currentThumbHolder._x = containerWidth; currentThumbHolder._y = -20; currentThumbHolder.setMask(maskDuplicate); currentThumbHolder.finalHolder.loadMovie(currentThumb,"finalHolder"+i); //--------------------------------------- // This function sets a small change in transparency when a thumb is rolled over. //--------------------------------------- currentThumbHolder.onRollOver = function() { this._alpha = 80; } //--------------------------------------- // This function sets the transparency back to normal when the thumb is rolled out. //--------------------------------------- currentThumbHolder.onRollOut = function() { this._alpha = 100; } //--------------------------------------- // This function loads the appropriate image when a thumb is clicked on. //--------------------------------------- currentThumbHolder.onPress = function() { imageLoader.loadClip(this.image,mainHolder); j = this.title; } //--------------------------------------- } //--------------------------------------- // Loop ends. // This line creates a new listener to check for loading of images. var loadListener:Object = new Object(); // This function determines the center of the stage. //--------------------------------------- loadListener.onLoadInit = function(mc:MovieClip) { mc._x = Hcenter - mc._width/2; mc._y = Vcenter - mc._height/2; } //--------------------------------------- // This line creates a new Movie Clip loader. var imageLoader:MovieClipLoader = new MovieClipLoader(); // This line adds the "loadListener" object to the Movie Clip Loader. imageLoader.addListener(loadListener); // This function tells the loading progress bar to be visible when loading begins. //--------------------------------------- loadListener.onLoadStart = function(mainHolder) { bar._visible  =  true; } //--------------------------------------- // This function tells the loading progress bar to expand while the image is loading. //--------------------------------------- loadListener.onLoadProgress  =  function(mainHolder, lBytes,  tBytes) { bar._width = (lBytes/tBytes)*689; } //--------------------------------------- // This function hides the loading progress bar when the image is done loading. //--------------------------------------- loadListener.onLoadComplete = function(targetMC) { bar._visible = false; } //--------------------------------------- // This line loads the initial image. imageLoader.loadClip(imageArray[0],mainHolder); // This function controls the "forwardBtn" Movie Clip when rolled over. //--------------------------------------- forwardBtn.onRollOver = function() { this.onEnterFrame = function() { if (this._currentframe != 1) { this.nextFrame(); } else { this.play(); delete this.onEnterFrame; } } } // This function plays the "forwardBtn" Movie Clip in reverse when rolled out. //--------------------------------------- forwardBtn.onRollOut = function() { this.onEnterFrame = function() { if (this._currentframe != 1) { this.prevFrame(); } else { delete this.onEnterFrame; } } } // This function controls what happens when the "forwardBtn" is clicked on. It loads the next image. //--------------------------------------- forwardBtn.onPress = function() { j+=1; imageLoader.loadClip(imageArray[j],mainHolder); } //--------------------------------------- // This function controls the "backwardBtn" Movie Clip when rolled over. //--------------------------------------- backwardBtn.onRollOver = function() { this.onEnterFrame = function() { if (this._currentframe != 1) { this.nextFrame(); } else { this.play(); delete this.onEnterFrame; } } } // This function plays the "backwardBtn" Movie Clip in reverse when rolled out. //--------------------------------------- backwardBtn.onRollOut = function() { this.onEnterFrame = function() { if (this._currentframe != 1) { this.prevFrame(); } else { delete this.onEnterFrame; } } } // This function controls what happens when the "backwardBtn" is clicked on. It loads the previous image. //--------------------------------------- backwardBtn.onPress = function() { j-=1; imageLoader.loadClip(imageArray[j],mainHolder); } //--------------------------------------- // This block calculates the number of images to ascertain where the thumbnail container should stop. //--------------------------------------- imageCount = Math.floor((imageArray.length + 1) / 10); containerStop = -1 * containerWidth; var stopNumber = containerStop + (69 * (imageCount + 1)); // This function controls the "thumbForwardBtn" Movie Clip when rolled over. //--------------------------------------- thumbForwardBtn.onRollOver = function() { this.onEnterFrame = function() { if (this._currentframe != 1) { this.nextFrame(); } else { this.play(); delete this.onEnterFrame; } } } // This function plays the "thumbForwardBtn" Movie Clip in reverse when rolled out. //--------------------------------------- thumbForwardBtn.onRollOut = function() { this.onEnterFrame = function() { if (this._currentframe != 1) { this.prevFrame(); } else { delete this.onEnterFrame; } } } //--------------------------------------- // This function controls what happens when the "thumbForwardBtn" is clicked on. It slides the thumbnails to the left. //--------------------------------------- thumbForwardBtn.onPress = function() { k += 1; if(k >= imageCount)
 
{
 
containerX = stopNumber;
 
Tweener.addTween(thumbHolder.imageContainer, {_x:stopNumber, time:1, transition:"easeOutExpo"});
 
}
 
else
 
{
 
containerX -= 690;
 
Tweener.addTween(thumbHolder.imageContainer, {_x:containerX, time:1, transition:"easeOutExpo"});
 
}
 
}
 
//---------------------------------------
 
// This function controls the "thumbBackwardBtn" Movie Clip when rolled over.
 
//---------------------------------------
 
thumbBackwardBtn.onRollOver = function()
 
{
 
this.onEnterFrame = function()
 
{
 
if (this._currentframe != 1)
 
{
 
this.nextFrame();
 
}
 
else
 
{
 
this.play();
 
delete this.onEnterFrame;
 
}
 
}
 
}
 
// This function plays the "thumbBackwardBtn" Movie Clip back to the start when rolled out.
 
//---------------------------------------
 
thumbBackwardBtn.onRollOut = function()
 
{
 
this.onEnterFrame = function()
 
{
 
if (this._currentframe != 1)
 
{
 
this.prevFrame();
 
}
 
else
 
{
 
delete this.onEnterFrame;
 
}
 
}
 
}
 
// This function controls what happens when the "thumbBackwardBtn" is clicked on. It slides the thumbnails to the right.
 
//---------------------------------------
 
thumbBackwardBtn.onPress = function()
 
{
 
k -= 1;
 
if(k= imageCount)
 
{
 
thumbForwardBtn._visible = false;
 
thumbBackwardBtn._visible = true;
 
thumbForwardBtn.gotoAndStop(1);
 
}
 
else if(k

If you don’t want to go through the steps but still want the gallery, you may download it below. I hope you enjoyed this tutorial!

Complete Gallery Files

All images used for display in the gallery were sourced from Morgue File.

  • zan

    how can I add titles / descriptions?

  • Ashraf

    You would have to add them accordingly in the XML file and then output it using the loop.

    Unfortunately I have dumped Flash since the rise of HTML 5 so won’t be able to provide a more detailed description.

  • sam

    hi could you please upload an downloadable file with the complete version thank you….

  • chandra

    thanks man…it helps me alot..

  • someone

    thank you so much dude

  • Yuri Astronov

    Thank you very mutch, its realy great work and nice explanations.