In this tutorial I’ll explain how to access and use the Display List whilst creating an XML based image gallery with ActionScript 3.0.

Step 1: Overview

Using XML we’ll dynamically load and obtain information about the images, give them a random center position, add a frame, add drag functionality, and lastly, we’ll use a tween to handle the zoom animation.

Step 2: Let’s Get Started

Open Flash and create a new Flash File (ActionScript 3).

Set the stage size to 600×350 and add a gray radial gradient (#EEEEEE, #DDDDDD).

Step 3: Adding a Preloader

We’re going to add a preloading animation to tell the user when the content is loading. In this case I used the Apple inspired preloader that we created before. Since we’re going to use only the animation, there’s no need to import the class or use an Export Identifier.

Place the preloader on the stage and center it.

Step 4: Embedding a Font

We’re going to embed a font, a super easy task when adding a TextField to the Stage in the Flash IDE, but a little different using ActionScript.

Open the Library Panel and right-click in the items area without selecting one, a contextual menu will appear.

Click on "New Font" to open a dialog window, give a name to your font and select the one you want to use as shown in the following image.

This will create a class of the font you selected, we’ll instantiate this in Step 9.

Step 5: XML

Let’s create the XML file.

Open your prefered XML or Text editor and write:

<?xml version="1.0" encoding="UTF-8"?>

<images>
	<image src="images/image.jpg" title="This is image 1"/>
	<image src="images/image2.jpg" title="This is image 2"/>
	<image src="images/image3.jpg" title="This is image 3"/>
	<image src="images/image4.jpg" title="This is image 4"/>
	<image src="images/image5.jpg" title="This is image 5"/>
</images>

When you’re done, save it as "images.xml" in your xml folder.

Step 6: ActionScript

The code that we’ll use will be written in a single class that will be used as the Document Class in the FLA file.

Create a new ActionScript File (File > New)

Save it as "Main.as".

Step 7: Package

We’ll begin with:

package classes
{

The package keyword allows you to organize your code into groups that can be imported by other scripts, it’s recommended to name them starting with a lowercase letter and use intercaps for subsequent words for example: galleryClasses.

If you don’t want to group your files in a package or you have only one class, you can use it right from your source folder, but the idea is to be organized.

Step 8: Required Classes

import flash.display.Sprite;
import flash.display.MovieClip;
import flash.net.URLLoader;
import flash.net.URLRequest;
import flash.display.Loader;
import flash.events.Event;
import flash.filters.BitmapFilter;
import flash.filters.DropShadowFilter;
import flash.text.TextFormat;
import flash.text.TextField;
import flash.text.AntiAliasType;
import flash.events.MouseEvent;
import fl.transitions.Tween;
import fl.transitions.easing.Strong;
import fl.transitions.TweenEvent;

These are the classes that we’ll need to make this gallery. If you need help with a specific class please use the Flash Help (F1).

Step 9: Extending the Class

public class Main extends MovieClip
{

The extends keyword defines a class that is a subclass of another class. The subclass inherits all the methods, properties and functions, that way we can use them in our class.

We’re going to use MovieClip specific methods and properties so we extend using the MovieClip Class.

Step 10: Variables

var xml:XML; // The XML Object that will parse the XML File
var images:Array = new Array(); //This array will store the images loaded
var imagesLoaded:int = 0; //A counter, counts the images loaded
var imagesTitle:Array = new Array(); //The title properties of the XML File
var tween:Tween; //Handles the animation
var zoomed:Boolean = false; //Checks if a picture is zoomed, false by default
var canClick:Boolean = true; //Checks if the user can click a picture to zoom it, true by default
var lastX:int; //Stores the x property of the last picture that was clicked
var lastY:int; //Stores the y property of the last picture that was clicked
var textformat:TextFormat = new TextFormat(); //A TextFormat Object
var screen:Sprite = new Sprite(); //A black screen to focus on the active picture

var formatFont:Avenir = new Avenir(); //This is the embedded font

Step 11: Constructor

The constructor is a function that runs when an object is created from a class. This code is the first to execute when you make an instance of an object or when using the Document Class.

In this function we’ll set the properties of the TextFormat object that we’ll use to display a title or a description of each image. Create the black screen that appears when the user clicks on a picture and call the function which loads the desired XML file.

public function Main():void
{
	textformat.color = 0xFFFFFF;
	textformat.font = formatFont.fontName;
	textformat.size = 17; //Use the same size you used when embedding the font from the Library

	screen.graphics.beginFill(0x111111, .75);
	screen.graphics.drawRect(0, 0, stage.stageWidth, stage.stageHeight);
	screen.graphics.endFill();

	loadXML("xml/images.xml");
}

Step 12: XML Loader Function

This function loads the XML file provided by the "file" parameter. We also add a listener to handle when the load is complete.

private function loadXML(file:String):void
{
	var urlLoader:URLLoader = new URLLoader();
	var urlReq:URLRequest = new URLRequest(file);

	urlLoader.load(urlReq);
	urlLoader.addEventListener(Event.COMPLETE, handleXML);
}

Step 13: Parse XML

Here we convert the loaded XML file to a valid XML object using the parameter "data" of the URLLoader. Then we use a "for" statement to create a Loader for every image in the XML. Additional information is found in the commentary.

private function handleXML(e:Event):void
{
	xml = new XML(e.target.data);

	for (var i:int = 0; i < xml.children().length(); i++)
	{
		var loader:Loader = new Loader();

		loader.load(new URLRequest(String(xml.children()[i].@src)));

		images.push(loader); //Adds the Loaders to the images Array to gain access to them outside this function
		imagesTitle.push(xml.children()[i].@title); //Adds the title attribute content to the array to use it outside this function

		loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loaded); //A listener to the function that will be executed when an image is loaded
	}
}

Step 14: Images Loaded

When a Loader has loaded an image from the XML, the following code is executed:

private function loaded(e:Event):void
{
	imagesLoaded++; //Adds one to the imagesLoaded variable

	if (xml.children().length() == imagesLoaded) //When all images are loaded...
	{
		removeChild(preloader); //Removes the Preloader MovieClip
		prepareImages(); //This function is explained in the next step
	}
} 

Step 15: Prepare Images

This function will add the frame, the TextField to display the title or description, the black background used for that and a Shadow Filter. Let’s take it in parts.

private function prepareImages():void
{
	for (var i:int = 0; i < images.length; i++) //These actions will be applied to all the images loaded so we use a "for" and the "images" array to do that
	{
		var container:Sprite = new Sprite(); //A container that will store the image, frame, TextField, TextField background and shadow
		var frame:Sprite = new Sprite(); //The Frame Sprite
		var infoArea:Sprite = new Sprite(); //The TextField background
		var infoField:TextField = new TextField(); //The TextField

Step 16: Image Frame

This creates a white frame around the image.

frame.graphics.beginFill(0xFFFFFF);
frame.graphics.drawRect(-20, -20, images[i].width + 40, images[i].height + 80);
frame.graphics.endFill();

The rectangle will be positioned under the image to be used as a frame.

Step 17: Information Background

This creates a black rectangle in the bottom part of the image, where the TextField will be.

infoArea.graphics.beginFill(0x111111, 0.75);
infoArea.graphics.drawRect(0, 0, images[i].width, 60);
infoArea.graphics.endFill();
infoArea.y = images[i].height - 60;

Step 18: Image Information

The following code sets the TextField properties and adds its contents.

infoField.defaultTextFormat = textformat;
infoField.embedFonts = true; //You have to add this to use the embedded font
infoField.antiAliasType = AntiAliasType.ADVANCED; //This property will display the text more clearly
infoField.width = images[i].width - 5;
infoField.height = 20;

infoField.text = imagesTitle[i]; //The content, obtained from the XML and stored in the Array

Step 19: Resizing the Images

Here we set the desired scale of the images. Since everything will be inside the Container Sprite, we only need to resize it.

container.scaleX = 0.3;
container.scaleY = 0.3;

Step 20: Position

The images will have a random position based on the center of the Stage area. We use Math for that.

container.x = stage.stageWidth / 4 + Math.floor(Math.random() * (stage.stageWidth / 4));
container.y = stage.stageHeight / 5 + Math.floor(Math.random() * (stage.stageHeight / 5));

Step 21: Shadow Filter

This will create a Shadow Filter.

var shadowFilter:BitmapFilter = new DropShadowFilter(3, 90, 0x252525, 1, 2, 2, 1, 15); //Distance, angle, color, alpha, blur, strength, quality
var filterArray:Array = [shadowFilter];

container.filters = filterArray; //Apply the filter

Step 22: Adding to Stage

Time to add the Children, the order in which we add them is the order they will take in the Display List, so be sure to add them in this way.

infoArea.addChild(infoField); //Adds the TextField to the TextField Background

container.addChild(frame); //Adds the Frame to the Container
container.addChild(images[i]); //Adds the Image on top of the Frame in the Container

infoArea.visible = false; //We set the image information to invisible by default

container.addChild(infoArea); //Adds the information area in top of everything

Step 23: Listeners

Although we could add the Listeners to every Sprite before, I’m going to add them now that they are inside the Container to show you how the Display List works.

container.getChildAt(1).addEventListener(MouseEvent.MOUSE_UP, zoomHandler); //This is the Image loaded by the XML, this is the Loader object
container.getChildAt(0).addEventListener(MouseEvent.MOUSE_DOWN, dragImage); //This is the Frame
container.getChildAt(0).addEventListener(MouseEvent.MOUSE_UP, stopDragImage); //Frame

addChild(container); //Lastly, we add the Container to the Stage

Step 24: Drag Functions

In the previous step we added two listeners to the Frame of the images. These functions will take care of the drag.

We use "parent" beacuse we want to drag all the objects, since the "target" is the Frame Sprite, the parent object is the Container.

private function dragImage(e:MouseEvent):void
{
	e.target.parent.startDrag();
}

private function stopDragImage(e:MouseEvent):void
{
	e.target.parent.stopDrag();
}

Step 25: Zoom

This function is in charge of zooming in and out. Its Listener is in the actual image, so clicking in the Frame will not call this function.

Editor’s Note: For some reason, the else if () statement within this zoomHandler function was making our syntax highlighter crash. As it doesn’t want to display on the page, I’ve made the function available for download. Sorry for any inconvenience, Ian.

Step 26: Motion Finish

Some actions need to be executed when the Tweens are finished, these are those actions.

private function zoomInFinished(e:TweenEvent):void
{
	zoomed = true; //Modify the variables according to the event
	canClick = true;
	tween.obj.getChildAt(2).visible = true; //Sets the Information area to visible
}

private function zoomOutFinished(e:TweenEvent):void
{
	zoomed = false;
	removeChild(screen); //Removes the black screen

	tween.obj.getChildAt(0).addEventListener(MouseEvent.MOUSE_DOWN, dragImage); //Adds the drag listener back to the Frame Sprite
}

Step 27: Document Class

Go back to the FLA and add Main as the Document Class in the Properties Panel. If you save your class in a package you have to add the name of the package too, something like: yourpackage.Main

Test your file and see your gallery working!

Conclusion

As always, try different things in your code to make the gallery just as you want.

I hope you enjoyed this tut, thanks for reading!