Photo gallery (AS 3.0).

In this tutorial we will build a photo gallery. We will load the paths to the photos from an xml file and will use the Tweener class to add some nice transitions. You can download this class from Google Code download Tweener class. This is how the final product will look:

1. Create a new file by going to File > New select Flash file (ActionScript 3.0) and click Ok. Save the file as photo_gallery.fla.

2. Select the Rectangle tool set the stroke to none and the fill to #999999 and on the stage draw a rectangle 110 by 110.Select the rectangle hit F8 to convert it to a MovieClip. Set its name to thumb and set the registration point to center and click Ok.

3. Press Ctrl+L to open the Library. Right click on the thumb MovieClip and select Linkage. Select Export to ActionScript checkbox, set the class name to Thumbnail and click Ok. Select the thumb MovieClip from the stage and delete it.

4. Press Ctrl+F7 to open the Components library. Select the UILoader component and drag it to the stage. We will use this component to load the thumbnails. Select the UILoader component from the stage and delete it, we don’t need it on the stage we need it in the Library (make sure that it’s in the library).

5. Go to File > New select ActionScript file and click Ok. We will build the Thumbnail class witch is associated with the thumb MovieClip.

6. Copy and paste the next code

package{
import flash.display.Sprite;
import fl.containers.UILoader;
import caurina.transitions.*;
import flash.events.MouseEvent;

public class Thumbnail extends Sprite {
private var nume:String;
private var url:String;
private var id:int;
private var loader:UILoader;
public function Thumbnail(source:String,itemNr:int,numeThumb:String):void {
url = source;
id = itemNr;
this.nume = numeThumb;
drawLoader();
addEventListener(MouseEvent.MOUSE_OVER,onOver);
addEventListener(MouseEvent.MOUSE_OUT,onOut);
scaleThumb();
}
private function drawLoader():void {
loader = new UILoader();
loader.source = url;
loader.mouseEnabled = false;
loader.x = -50;
loader.y = -50;
addChild(loader);
}
private function onOver(event:MouseEvent):void {
Tweener.addTween(this, {scaleX:1,scaleY:1, time:1, transition:"easeoutelastic"});
Tweener.addTween(this, {alpha:1, time:1, transition:"easeoutelastic"});
}
private function onOut(event:MouseEvent):void {
Tweener.addTween(this, {scaleX:.9,scaleY:.9, time:1, transition:"easeoutelastic"});
Tweener.addTween(this, {alpha:.5, time:1, transition:"easeoutelastic"});
}
private function scaleThumb():void {
this.scaleX = .9;
this.scaleY = .9;
this.alpha = .5;
}
}
}
Save the file as Thumbnail.as.

7. Let’s go back to the photo_gallery.fla. Name the first layer actions and insert a new one (Insert>Timeline>Layer) and name it background. In the Property Inspector click on the Size button and set the width: 570, height: 350, frame rate: 30 and click Ok.

8. Select the Rectangle tool set the color to black and the stroke to none. On the background layer draw a rectangle, same dimensions like the stage (570, 350) and position it at x: 0, y: 0.

9. Select frame 1 from the actions layer and press F9 to open the ActionScript panel. Copy and paste the next code.

import fl.containers.UILoader;
import caurina.transitions.*;
//---------loading the external xml file-------
var urlRequest:URLRequest = new URLRequest("pics.xml");
var urlLoader:URLLoader = new URLLoader();
var myXML:XML = new XML();
var xmlList:XMLList;
myXML.ignoreWhitespace = true;
urlLoader.addEventListener(Event.COMPLETE,fileLoaded);
urlLoader.load(urlRequest);
//--------holds the paths to the thumbnails-------
var arrayURL:Array = new Array();
//--------holds the paths to the big photos-------
var arrayName:Array = new Array();
//--------holds the thumbnails objects-------
var holderArray:Array = new Array();
//--------represents the number of collumns-------
var nrColumns:uint = 5;
//-------represents the container of our gallery
var sprite:Sprite = new Sprite();
addChild(sprite);
var thumb:Thumbnail;
//-------- the thumbnails container-------
var thumbsHolder:Sprite = new Sprite();
sprite.addChild(thumbsHolder);
//-------- the photoLoader container-------
var loaderHolder:Sprite = new Sprite();
loaderHolder.graphics.beginFill(0xffffff,1);
loaderHolder.graphics.drawRect(0,0,550,330);
loaderHolder.graphics.endFill();
loaderHolder.x = 1000;
loaderHolder.y = 10;
sprite.addChild(loaderHolder);
//-------- loads the big photo-------
var photoLoader:UILoader = new UILoader();
photoLoader.width = 540;
photoLoader.height = 320;
photoLoader.y = 5;
photoLoader.x = 5;
photoLoader.buttonMode = true;
photoLoader.addEventListener(MouseEvent.CLICK,onClickBack);
loaderHolder.addChild(photoLoader);
/* we loop through the xml file populate the arrayURL, arrayName and position the thumbnalis*/
function fileLoaded(event:Event):void {
myXML = XML(event.target.data);
xmlList = myXML.children();
for (var i:int=0; i<xmlList.length(); i++) {
var picURL:String = xmlList[i].url;
var picName:String = xmlList[i].big_url;
arrayURL.push(picURL);
arrayName.push(picName);
holderArray[i] = new Thumbnail(arrayURL[i],i,arrayName[i]);
holderArray[i].addEventListener(MouseEvent.CLICK,onClick);
holderArray[i].name = arrayName[i];
holderArray[i].buttonMode = true;
if (i<nrColumns) {
holderArray[i].y = 65;
holderArray[i].x = i*110+65;
} else {
holderArray[i].y = holderArray[i-nrColumns].y+110;
holderArray[i].x = holderArray[i-nrColumns].x;
}
thumbsHolder.addChild(holderArray[i]);
}
}
//----handles the Click event added to the thumbnails--
function onClick(event:MouseEvent):void {
photoLoader.source = event.currentTarget.name;
Tweener.addTween(thumbsHolder, {x:-650, time:1, transition:"easeInElastic"});
Tweener.addTween(loaderHolder, {x:10, time:1, transition:"easeInElastic"});
Tweener.addTween(thumbsHolder, {alpha:0, time:1, transition:"linear"});
Tweener.addTween(loaderHolder, {alpha:1, time:1, transition:"linear"});
}
//----handles the Click event added to the photoLoader----
function onClickBack(event:MouseEvent):void {
Tweener.addTween(thumbsHolder, {x:0, time:1, transition:"easeInElastic"});
Tweener.addTween(loaderHolder, {x:1000, time:1, transition:"easeInElastic"});
Tweener.addTween(thumbsHolder, {alpha:1, time:2, transition:"linear"});
Tweener.addTween(loaderHolder, {alpha:0, time:2, transition:"linear"}); }


I provide a little comment (the lines that begins with //) for the variables and functions that tells you what they do or represents. If you have problem with the code fill free to ask.

10. The structure of the xml file looks like this:
<?xml version="1.0" encoding="utf-8"?>
<images>
<image>
<url>pics/img_1.png</url>
<big_url>big_pics/img_1.png</big_url>
</image>
<image>
<url>pics/img_2.png</url>
<big_url>big_pics/img_2.png</big_url>
</image>
<images>

Where <image></image> represents a new picture in the gallery. The url tag represents the path to the little picture and the big_url tag the path to the big picture. To add your own pictures you will need to modify these paths. Here I provide the tags for only two images, but the final xml file has 15 images. Open your text editor copy and paste the code from above add the rest of <image></image> tags (until 15) and save the file as pics.xml.

11. Let’s setup the structure of the folders. Make a folder and name it photo_gallery. Inside this folder make two new folders, name one pics and the other big_pics. Inside the photo_gallery folder place the photo_gallery.fla, Thumbnail.as, the pics.xml file and the caurina folder. You will obtain this folder (caurina) after downloading the Tweener class. You will need this folder if you want to modify the fla file. If you placed all the files in the right place, placed the little pictures in the pics folder and the big pictures in the big_pics you can test photo_gallery.fla file by pressing Ctrl+Enter. You should have no problem.

This is all. I hope that you enjoyed the tutorial. If you have questions, suggestions, doubts about the tutorial don’t hesitate to comment.

Until next time have fun learning Flash.

To view the gallery:view photo gallery. and to download the source file:download photo gallery.

UPDATE (04-12-2008)

Add description to images. Some of you asked how to add description to images, I have tried to respond on comments by giving some general tips (no code) but it seams that I haven’t done a good job so here it is. Add description to images step by step.

The new code is in bold; the other code is added to show where you need to insert the new code.

1. Modify the xml file - add a description tag to every image node, it should look like this:

<image>
<url>pics/img_9.png</url>
<big_url>big_pics/img_9.png</big_url>
<description>Your description</description>
</image>


2. Modyfy Thumbnail.as class -find this line: private var index:int; and replace private with public like this: public var index:int; We make the index variable public to be able to access it from outside the class. This is not the best solution, we should try to keep our variables private and access them using get/set methods, but this will do it.

3. Add code to the photo_gallery.fla

var holderArray:Array = new Array();
//---------holds the images descriptions--------->
var descArray:Array = new Array();
loaderHolder.addChild(photoLoader);
//------format image description text--------
var txtFormat:TextFormat = new TextFormat();
txtFormat.color = 0XFFFFFF;
txtFormat.size = 14;
txtFormat.indent = 5;
txtFormat.font = "Verdana,Arial,sans_serif";
//--------a text field that holds the images description----------
var imgText:TextField = new TextField();
imgText.defaultTextFormat = txtFormat;
imgText.background = true;
imgText.wordWrap = true;
imgText.backgroundColor = 0X000000;
imgText.width = 530;
imgText.height = 40;
imgText.y = 285;
imgText.x = 10;
loaderHolder.addChild(imgText);
function fileLoaded(event:Event):void {
myXML = XML(event.target.data);
xmlList = myXML.children();
for (var i:int=0; i<xmlList.length(); i++) {
var picURL:String = xmlList[i].url;
var picName:String = xmlList[i].big_url;
//---populate the descArray with the description
//----pulled from the xml file---
var picDescription:String = xmlList[i].description;
descArray.push(picDescription);
. . .
}
}
function onClick(event:MouseEvent):void {
photoLoader.source = event.currentTarget.name;
//----add the description text to the imgText-------
imgText.text = descArray[event.currentTarget.index];
. . .
}


You can download the updated source files: photo gallery updated.