Advertisement
  1. Code
  2. XML
Code

Create a Shuffle Gallery in Flash Using XML and ActionScript 3.0

by
Difficulty:IntermediateLength:MediumLanguages:

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).

flash shuffle photo gallery

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

”flash

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.

flash shuffle photo gallery

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.

flash shuffle photo gallery

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.

flash shuffle photo gallery

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:

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)

flash shuffle photo gallery

Save it as "Main.as".

flash shuffle photo gallery

Step 7: Package

We'll begin with:

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

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

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

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.

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.

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.

Step 14: Images Loaded

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

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.

Step 16: Image Frame

This creates a white frame around the image.

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.

Step 18: Image Information

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

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.

Step 20: Position

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

Step 21: Shadow Filter

This will create a Shadow 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.

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.

flash shuffle photo gallery

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.

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.

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!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.