Making the ultimate dynamic image gallery in Flash 8 — part 6

9. Creating the folder structure for the image gallery

9.1. As the first thing, you should have a separate folder (directory) inside which all the files that make up your gallery will be stored (SWF, HTML, XML, images). For the sake of simplicity, I chose to call this folder root.

As you can see in the screenshot below, both the SWF file (the one you are learning to create in this lesson) and the HTML page inside which it will be embedded should be placed inside this main (root) folder.

9.2. Also, create a new folder inside the root folder and call it gallery.

I chose to call the page mypage.html and the SWF file imagegallery.swf. You can call them as you like. It is the gallery folder that must have that exact name, because you will be using it in ActionScript later.

Of course, you can choose other file/folder placements, but I strongly recommend that you follow the one explained here, not only because you need it to complete this lesson, but also because I think that this folder hierarchy and structure is really one of the simplest and most easiest to use. Thanks to it, you will be able to modify or update your image gallery in a snap!

9.3. The XML file that you have downloaded earlier must be placed inside the gallery folder. This file should be named gallery.xml.

Also, the gallery folder will contain all the sub-galleries: different sections of your image gallery, which will correspond to the menu buttons.

What's very important, I repeat it again, is that these subfolders must have the same names as they are defined inside the XML file. Otherwise, Flash won't be able to find the folders if there are differences between them. They must match perfectly, including uppercase and lowercase letters.

TIP Using only lowercase letters for folder names will prevent a lot of possible mistakes. I recommend that you use them only, because you can change them into uppercase letters once these names are loaded in Flash, which you will do later in this lesson.

9.4. Each gallery subfolder (like architecture, essays, etc in the above example) will contain the big images, the ones that are loaded and show up once a user clicks on a thumbnail.

These images should be named 1.jpg, 2.jpg, 3.jpg... In short, each image name is a number.

The numbers must follow the natural order, i.e. if you happen to dislike an image and want to remove it from the gallery, you should rename the other ones so that the order remains unbroken. For example, look at the screenshot above. If you want to remove the image 3.jpg, you should rename 4.jpg to 3.jpg and 5.jpg to 4.jpg. This is important because of two things:

1. Flash will load the exact number of images as there are inside the XML file.
2. The images will be looked for and once found, loaded in a sequential order — the thumbnails, and after that, the corresponding big image, for each thumbnail.

9.5. Here is what you should do to have the thumbnails load and display properly for each gallery:

1. The thumbnails for each image gallery section must be placed in a folder called thumbs. Each gallery section must have such a folder inside itself.
2. The number of thumbnail images must match the number of big images.
3. The thumbnails must have the same file names as their bigger counterparts. So, for example, the thumbnail, for say, image 14.jpg should also be called 14.jpg.

IMPORTANT In this project, the number of thumbnails for each section is limited to 20. It was my choice to make it this way, based on the gallery's overall layout and concept. You can increase this number if you want, but then you'll need to rearrange your gallery elements' position and dimensions to accomodate a higher number of thumbnails. I recommend that you stick with my concept until the end of this tutorial and then experiment later. Of you do need more thumbnails for a particular gallery section, I suggest that you split it into two or more sections. For example, if you have tons of photos from a summer vacation, split them into different sections, like summer vacation 1, summer vacation 2, etc.

The screenshot below shows the maximum number of thumbnails for a single gallery section.

A small reminder: for this project, the big images should be resized/cropped to 469x311 pixels. The thumbnails should be made to be 81x54 pixels. Again, I repeat, this suits this particular project you are learning to create right now. Once you get hold of how things function, make any other Flash image gallery system. And post a link to it in the forum, I'd love to see it! :-)

Before you start working with your photos, here is a hint: If you need a smart, intuitive and easy to use application for managing your photos, I highly recommend Picasa from Google. It is completely free. And so easy to use!

With Picasa, you can search for and organize your photos on your computer, add many effects to them and edit them, then share and publish them on the Web. And for free! There are a lot of applications out there who do the same thing, but none of them is free and so easy to use as Picasa.

And this wraps it up for the file/folder hierarchy. The last, and probably one of the most important things, is the ActionScript programming code that powers up the gallery.

Top of page

10. Inserting the ActionScript code

10.1. Go back to your document. Lock the actions layer and click on its first keyframe to select it. As you may already know, a layer does not have to be unlocked for you to be able to insert ActionScript code inside it. In fact, I always lock the layer where my code is contained, to minimize errors — not to insert any graphics in it by mistake.

TIP If possible, always place all of your ActionScript code into one layer, and also, into as few keyframes as you can. The layer which contains your ActionScript code should be made exclusively for that purpose. There is just no sense in placing any graphics or symbols inside it. Also, place the layer with ActionScript either on top of all layers or below all the other layers so that you can find it very quick when you need it. This is a time-tested and a very convenient practice!

10.2. Select Window > Actions to open the Actions panel.

10.3. Insert the following ActionScript code inside the panel:

var menuSpeed:Number = 6;
var menuDown:Button = menuDown_btn;
var menuUp:Button = menuUp_btn;
menuUp._alpha = 0;
menuUp.enabled = false;
var firstLook:Boolean = true;
var menuButtons:MovieClip = galleryMenu_mc.buttonsHolder_mc;
var galleryMask:MovieClip = galleryMenu_mc.galleryMask_mc;
galleryMask._height = 391;
var imagesHolder:MovieClip = imagesHolder_mc;
var descText:TextField = desc_txt;
var imagesInGallery:Array = new Array();
var galleryNames:Array = new Array();
var galleryIntros:Array = new Array();
var descriptions:Array = new Array();
var tracker:Number = new Number();
var whatIsLoading:String = new String();
var galleryBtnLeftMargin:Number = 10;
var galleryBtnUpperMargin:Number = 60;
var galleryBtnVSpace:Number = 23;
var thumbMarginX:Number = 96;
var thumbMarginY:Number = 68;
imagesHolder._x = 243;
imagesHolder._y = galleryBtnUpperMargin;
logo_mc._x = logo_mc._y=galleryBtnLeftMargin;
desc_txt._x = 243;
desc_txt._y = 400;
descText.text = "Click on a gallery name on the left to load its thumbnails. Remember, you can click on a thumbnail only when all the thumbnails in a gallery have been loaded. When you click on a thumbnail to see the big image, clicking on the big image will close it and you will return to the gallery. Use the button(s) above the galleries to scroll through them.";
import flash.filters.DropShadowFilter;
var shadowEffect:DropShadowFilter = new DropShadowFilter(3, 45, 0x000000, 100, 3, 3, 1, 3);
var thumbsFilter:Array = [shadowEffect];
var loader:MovieClipLoader = new MovieClipLoader();
var myListener:Object = new Object();
loader.addListener(myListener);
myListener.onLoadInit = function(target:MovieClip) {
if (whatIsLoading == "thumb") {
currentThumbnail.percent_txt._visible = false;
currentThumbnail.filters = thumbsFilter;
thumbClickable();
tracker++;
if (tracker<howManyImages) {
loadThumbnail();
} else {
enableThumbs();
}
} else if (whatIsLoading == "big") {
target._alpha = 0;
displayBigImage.percent_txt._visible = false;
displayBigImage.filters = thumbsFilter;
bigClickable();
fadeIn();
}
};
myListener.onLoadProgress = function(target:MovieClip, loaded:Number, total:Number) {
percent = Math.floor(loaded/total*100);
if (whatIsLoading == "thumb") {
currentThumbnail.percent_txt._visible = true;
currentThumbnail.percent_txt.text = percent+"%";
} else if (whatIsLoading == "big") {
displayBigImage.percent_txt._visible = true;
displayBigImage.percent_txt.text = percent+"%";
}
};
var imageGallery:XML = new XML();
imageGallery.ignoreWhite = true;
imageGallery.onLoad = function(success) {
if (success) {
parseGalleries();
} else {
descText.text = "Sorry the image data just didn't load.";
}
};
imageGallery.load("gallery/gallery.xml");
function parseGalleries():Void {
if (imageGallery.firstChild.nodeName == "galleries") {
var rootNode:XMLNode = imageGallery.firstChild;
for (i=0; i<rootNode.childNodes.length; i++) {
if (rootNode.childNodes[i].nodeName == "gallery") {
currentGallery = rootNode.childNodes[i];
imagesInGallery.push(currentGallery.childNodes.length);
galleryNames.push(currentGallery.attributes.title);
galleryIntros.push(currentGallery.attributes.intro);
currentGalleryTitle = rootNode.childNodes[i].attributes.title;
currentGalleryButton = galleryMenu_mc.buttonsHolder_mc.attachMovie("gallery section button", "galleryButton"+i, galleryMenu_mc.buttonsHolder_mc.getNextHighestDepth());
currentGalleryButton._x = 0;
currentGalleryButton._y = galleryBtnVSpace*i;
currentGalleryButton.sectionTitle_txt.text = "0"+(i+1)+" "+currentGalleryTitle.toUpperCase();
for (j=0; j<currentGallery.childNodes.length; j++) {
if (currentGallery.childNodes[j].nodeName == "image") {
currentDescription = currentGallery.childNodes[j].firstChild.toString();
descriptions.push(currentDescription);
}
}
}
}
}
numberOfGalleries = i;
enableButtons(numberOfGalleries);
}
function enableButtons(numberOfGalleries:Number):Void {
for (i=0; i<numberOfGalleries; i++) {
pressedButton = galleryMenu_mc.buttonsHolder_mc["galleryButton"+i];
pressedButton.onRollOver = function():Void {
this.gotoAndStop(2);
};
pressedButton.onRollOut = function():Void {
this.gotoAndStop(1);
};
pressedButton.onPress = function():Void {
removeMovieClip(thumbsDisplayer);
removeMovieClip(displayBigImage);
tracker = 0;
thumbsDisplayer = imagesHolder.createEmptyMovieClip("thumbsDisplayer_mc", imagesHolder.getNextHighestDepth());
clickedGallery = Number(this._name.substr(13));
howManyImages = imagesInGallery[clickedGallery];
whichGallery = galleryNames[clickedGallery];
descText.text = galleryIntros[clickedGallery];
currentRow = 0;
currentColumn = 0;
loadThumbnail();
};
}
enableGalleryNavigation();
}
function loadThumbnail() {
currentThumbnail = thumbsDisplayer.attachMovie("thumbnail holder", "thumbnail"+(tracker+1), thumbsDisplayer.getNextHighestDepth());
target = currentThumbnail.thumbImage_mc;
if ((tracker%5) == 0 && tracker != 0) {
currentRow += 1;
}
if (currentColumn>3) {
currentColumn = 0;
} else if (tracker == 0) {
currentColumn = 0;
} else {
currentColumn += 1;
}
currentThumbnail._x = currentColumn*thumbMarginX;
currentThumbnail._y = currentRow*thumbMarginY;
currentThumbnail.percent_txt._visible = true;
thumbNumber = currentThumbnail._name.substr(9);
thumbPath = "gallery/"+whichGallery+"/thumbs/"+thumbNumber+".jpg";
whatIsLoading = "thumb";
loader.loadClip(thumbPath, target);
}
function thumbClickable():Void {
currentThumbnail.onPress = function() {
bigNumber = this._name.substr(9);
displayBigImage = imagesHolder.attachMovie("big image holder", "bigImage_mc", imagesHolder.getNextHighestDepth());
target = displayBigImage.imageHolder_mc;
bigImagePath = "gallery/"+whichGallery+"/"+bigNumber+".jpg";
whatIsLoading = "big";
disableThumbs();
loader.loadClip(bigImagePath, target);
if (clickedGallery>0) {
var descPosition:Number = 0;
for (i=0; i<clickedGallery; i++) {
descPosition += imagesInGallery[i];
}
descPosition = descPosition+Number(bigNumber)-1;
imageDesc = descriptions[descPosition];
} else {
imageDesc = descriptions[Number(bigNumber)-1];
}
descText.text = imageDesc;
};
currentThumbnail.enabled = false;
}
function disableThumbs():Void {
for (i=0; i<howManyImages; i++) {
thumbsDisplayer["thumbnail"+(i+1)].enabled = false;
}
}
function enableThumbs():Void {
for (i=0; i<howManyImages; i++) {
thumbsDisplayer["thumbnail"+(i+1)].enabled = true;
}
}
function bigClickable():Void {
displayBigImage.onPress = function() {
removeMovieClip(this);
enableThumbs();
descText.text = galleryIntros[clickedGallery];
};
}
function fadeIn():Void {
target.onEnterFrame = function():Void {
this._alpha += 10;
if (this._alpha>=100) {
delete this.onEnterFrame;
this._alpha = 100;
}
};
}
function enableGalleryNavigation():Void {
menuDown.onPress = function() {
if (firstLook) {
menuUp._alpha = 100;
menuUp.enabled = true;
firstLook = false;
}
var menuTop:Number = menuButtons._height-Math.abs(menuButtons._y);
if (menuButtons._y<=0 && menuTop>=galleryMask._height) {
var targetPos:Number = menuButtons._y-galleryMask._height;
menuDown.enabled = false;
menuUp.enabled = false;
menuButtons.onEnterFrame = function():Void {
menuButtons._y += (targetPos-menuButtons._y)/menuSpeed;
if (menuButtons._y<=(targetPos+0.8)) {
menuButtons._y = Math.round(targetPos);
delete menuButtons.onEnterFrame;
menuDown.enabled = true;
menuUp.enabled = true;
}
};
}
};
menuUp.onPress = function() {
var menuTop:Number = menuButtons._height-Math.abs(menuButtons._y);
if (menuButtons._y<0 && menuTop>0) {
var targetPos:Number = menuButtons._y+galleryMask._height;
menuDown.enabled = false;
menuUp.enabled = false;
menuButtons.onEnterFrame = function():Void {
menuButtons._y += (-menuButtons._y+targetPos)/menuSpeed;
if (menuButtons._y>=(targetPos-0.8)) {
menuButtons._y = Math.round(targetPos);
delete menuButtons.onEnterFrame;
menuDown.enabled = true;
menuUp.enabled = true;
}
};
}
};
}

Yep, this a really big piece of ActionScript code! More than 230 lines of it! Now save your work and go to the next page to see how to test your SWF movie and to understand all this programming code.