AS3 Photo gallery

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.

Click the image to see how the final product will look or try the interactive version at the end of this page.

 

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
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;

		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.
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 thumbnail 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. Until the next time have fun learning Flash! To download the source files for this tutorial, click here.

 

Tutorial by Sorin Haidan (May 2008)

 

About the author:
I'm a Flash/ActionScript developer residing in Vaslui, Romania. If you have questions, suggestions, doubts about the tutorial don't hesitate to comment. I'm available for freelance work. You can contact me at this email: biochimistu[at] yahoo[dot]com.

 

 

How to make a custom AS3 preloader >> << Scrolling photos loaded dynamically with ActionScript 3