Advertisement
  1. Code
  2. Interface Design
Code

Build a Categorized Image Gallery With XML and AS3

by
Difficulty:IntermediateLength:LongLanguages:

XML is a data format that's well-suited to dynamic image galleries. It's also really easy to process in Flash with AS3. With the help of XML and ActionScript, we're going to create an image gallery that's dynamic and categorized into different themes.
We're also going to learn how to use a very practical tweening class, called Tweener, to move the different theme icons and the thumbnails. In this tutorial I'm going to concentrate on the effective processing of the data retrieved from XML; all the fancy image animation is up to you ;)


Step 1: Setting Up the Stage

First I'll share how I set up my stage. These are not fixed options, so if you want to change things, that's perfectly fine. Just make sure you change the code in this tutorial to fit with your settings (particularly regarding the size of the stage).

My stage is 900 x 600 px; I set the background color to black and the frame rate to 25fps. Although the SWF movie is only one frame long, setting the fps is important because it will affect the tweening we're going to perform.


As you can see we're going to use a document class, but before getting to that, we need to set up the layers, and place the objects that we're going to use.


Step 2: The Main Image's MovieClip

All of our non-moving content will be on a layer called 'BigPic+Title+Arrows' (create this now). The first one is an empty MovieClip called Img (instance name: img); this is the Mc in which we're going to load each big picture. Create this, and place it at (x: 450, y:220).


Step 3: Creating the Navigation Arrows

The simplest way to create these is to use a big '<' character. Create a new static text field, choose whatever font and size you want, type '<', and then use the 'Break apart' command: select the character and press CTRL+B or Modify > Break Apart.

Then, convert this shape into a MovieClip, name it 'Arrow', and change the registration point to the center of the left-hand side (where the arrow points).



Step 4: Placing the Navigation Arrows

We will need two of these on the stage, so drag one more from the Library. Flip one of them horizontally (Modify > Transform > Flip Horizontal). Position the left one at (x:0, y:220), and give it an instance name of 'prevArrow'. The right one should go at (x:900, y:220), and have an instance name of 'nextArrow'.


Step 5: The Title Text Field

Create a 900px wide dynamic text field (so that you can use titles as long as you wish). Place it at (x:0, y:440), and give it an instance name of 'txtField'. I used Arial font at 16pt, aligned to the center; don't forget to embed it!



Step 6: Drawing the Covering Plate

These are just little design elements for the theme icons and the thumbnails to make them fade out at the borders of the stage. Create a 30px wide, 130px high rectangle (without a stroke - just the fill), and with the rectangle still selected, go to the Color panel and change the Fill style from solid to linear. Set both colors to black, but set one of them to 0% alpha.



Step 7: Converting and Placing the Covering Plate

Now, convert the rectangle to a MovieClip (reg. point: top left corner, name:Cover). Do the same as you did with the arrows: drag two instances onto the stage, and flip one of them. In each case, the 0% alpha-side should be closest to the center of the stage.

Place them at the sides of the stage: (left one: (x:0, y:470); right one: (x:900, y:470)).

All right - we're done with this layer.


Step 8: The "themes+thumbs" Layer

Under our existing layer, create a new one called 'themes+thumbs'. On this layer, create an empty MovieClip for the theme icons (name: 'Themes', reg. point: top left corner, instance name: 'themes', x: 0, y: 470) and another for the thumbnails (name: 'smallPics', reg. point: top left corner, instance name: 'smallPicsMc', x: 0, y: 510).

We'll need to create some more symbols which don't start out on the stage, but we will create these in ActionScript later.


Step 9: The Thumbnail Symbol

Create an empty MovieClip (name: 'SmallPicButton', reg. point: top left corner). This MC will contain one thumbnail; we're going to have a lot of instances of this symbol, so we'll create each of these at runtime.

In order to do that, we have to export this symbol for ActionScript: in the Library panel, right-click on this symbol, then select Properties. Tick the 'Export for ActionScript' box, then set the Class to SmallPicButton. Base Class stays as it is.


After you click OK, double-click on this symbol in the library to enter edit mode, then go to the Actions panel - we're going to write some code now. We're going to make sure that this MovieClip behaves like a proper button.


Step 10: Action for the SmallPicButton

Copy and paste this code into the Actions panel:


Step 11: The ThemeButton

This Symbol will be used for the icons you can click on to select a different themed category - what a surprise :). This is similar to the SmallPicButton, so in order to create it repeat Steps 8-10 - only, change the name and the Class to ThemeButton instead of SmallPicButton. You don't have to change anything in the code.


Step 12: What We Have So Far

So, we created two layers: the top one is the BigPic+Title+Arrows, the bottom one is themes+thumbs.

On the BigPic+Title+Arrows layer we have the img, the prevArrow, the nextArrow, the txtField and the two covering plates at the sides on the bottom.

On the themes+thumbs layer we have two empty MovieClips: Themes, which will contain all the theme icons, and smallPicsMc, which will contain all the thumbnails.

In the library, we have SmallPicButton and ThemeButton symbols with properly set linkage options.

I hope you're with me so far. It's crucial to have the symbols named properly, because otherwise the upcoming code won't work.


Step 13: Setting Up the Folder Structure

All right - so we're done with the Flash part. We have two things to do before we start coding: put all the pictures in a usable folder structure and create our XML file.

In the same folder as your FLA file, create a folder called 'pics'. In that folder create two others: one of them called 'small' (to contain the thumbnails) and another called 'big' (to contain the big images). In both folders you'll have the same folder structure: one folder for each theme.



Step 14: The Image Files

Each of your thumbnails should have the same name as its corresponding big picture. It's important that in the 'small' folder all the pictures should be 80px high to fit our UI. The size of the big images is not important, because we're going to resize them before adding them to the stage, but bear in mind that the maximum image size we will be able to show is 840px by 420px.



Step 15: Creating the XML File

Create a new text file in any file manager program and name it 'pics.xml'.

You can edit this file with any text editors like Notepad, but it's much easier to edit it with Flash.


Step 16: Editing the XML File

I will only tell you the things we need for XML to work properly, if you are interested in learning more about XML you can find plenty of tutorials here at Activetuts+ (like this one by Dru Kepple) or other pages on the web - and don't forget: Google is your friend ;)

In this XML file we're going to describe the folder structure (and the pictures within it), so that Flash can read and interpret it.

So, pics is the root element, and everything goes between the pics tags. If you want to add a new theme, you just copy and paste an existing theme element and change its attributes. If you want to add a new picture to one of the themes you just copy and paste a pic tag inside the right them, and change its attributes. The name attribute of the theme tag must be the same as the folder name, because that's where we're going to tell Flash to look for the file. Both name and filename are case-sensitive.


Step 17: Creating the Document Class

Click File > New and select ActionScript File. Copy and paste the following code.

Basically this code doesn't do anything, but it says that this class is in the global package, and it's a public class called Gallery.


Step 18: The Constructor

The first function we start to write is the constructor. It's the basic function of the whole program, and will be the first code run when the SWF is started.

Copy and paste this code between the curly braces that go with the "public class Gallery extends MovieClip" line:


Step 19: The URLLoader

The first thing we need to do is to load the XML file we created. We will do this with the help of the URLLoader class, which is in the flash.net package.

In order to use it, we need to import that package. Actually, let's just import every package we will need. Copy and the following code and paste it above the "public class Gallery extends MovieClip" line:

Remember, imports will be always at the beginning of the code (after the 'package{ ' part), the declaration of the non-local variables will be before the constructor, and all the functions will be after the constructor.

In order for Flash to import that "caurina.transitions" package, you'll need to have this package in the same folder as your FLA and your document class. So, open up my Source zip file, and copy the \caurina\ folder into your project's folder.

After we've imported the packages we're going to need, we can declare - and create a new instance of - our URLLoader variable:

(Put that code in the constructor function.)

Now we can tell Flash to load our XML file, and add an event listener to urlLoader:

So when urlLoader finishes loading pics.xml, Flash will run the urlLoadComplete function, which is our next thing to write...


Step 20: The urlLoadComplete Function

When the XML file is loaded we're going to have to put all the info it contains into an XML object. Then, in order to use that, we're going to need an XMLList object too:

After the constructor paste this:

Now, all the child nodes of the pics element - that is, all the theme tags - are in the list variable. If you want to see what's in there, paste 'trace(list);' after the second line of the urlLoadComplete function.


Step 21: Creating the Theme Buttons

In order to do this we'll need a for loop. So first we need to declare a loop-variable for the loop to work properly and an array for the themeButton objects:

After the two existing lines of the urlLoadComplete function we'll have to start writing our loop:

After this, we put all the buttons in the themes MC, then we align it to the center of the stage:

You can test your movie now and see if it works. You should see your theme buttons (working like buttons) in a line...


Step 22: Moving the themeButtons

In order to have the themeButtons moving, we add a mouseMove eventListener to the stage; paste this in the constructor:

Before we write the slideTheme function, we declare another non-local variable:

In the slideTheme function we'll use the Tweener class - specifically, one function of that class, called addTween(). (You can read all about this class here.)

Test your movie; the themes MC should move now (if it's longer than the stage).


Step 23: Variables for the themeClick Function

Before we begin to write the function, we need to declare some more non-local variables:


Step 24: themeClick() Reset State

The beginning of this function takes care of resetting things when you click one of the themeButtons.


Step 25: themeClick() Clear Image and Text

If there was a picture on the stage (in the img Mc), it will be removed, and the title text field will be cleared:


Step 26: themeClick() Remember Clicked Theme

This part guarantees that the program will be able to 'remember' which theme you clicked on, by storing a reference in the themeClicked variable.


Step 27: themeClick() Filter XML

The next part of this function will filter the content of the list to just the elements from the theme you selected:


Step 28: themeClick() Removal

If the smallPicsMc contains any items (that is, you've already clicked on some theme), we remove them all.


Step 29: themeClick() Filling the Arrays

If the selected theme has at least one picture, we fill the source arrays and the titles array and load the thumbs.


Step 30: themeClick() Dealing With Empty Themes

If the selected theme doesn't have any pictures in it, we tell the user that it's coming soon.


Step 31: The slideSmallPics Function

This function does the same as the slideTheme function, but with smallPicsMc instead of the themes MC.


Step 32: The smallPicLoad function

This function loads the thumbs in the smallPics array and displays the loading process.

This is kind of tricky so I'll give a more detailed explanation. It loads the thumbnails one by one; it's like a loop but I do the looping 'manually', almost recursively. This solution was needed because I wanted the thumbnails to appear at the same time. Recall that we set the visibility of the smallPicsMc to false, previously, so that we could reveal the thumbnails together.

[/sourcecode]


Step 33: smallPicComplete() Loading Pictures

First we have two other non-local variables to declare:

This is the first part of the function in which we load the first big picture, then fill the smallPicButtons array and the smallPicsMc.


Step 34: smallPicComplete() Revealing Thumbs and Arrows

This is the second half of this function. Here we reveal the thumbnails and the navigation arrows (and set them to ready to be navigate).

After commenting the lines where we call a function we haven't written yet, you will be able to test your movie, click on the theme buttons and have the thumbnails show up and sliding.


Step 35: The nextPic Function

This function loads the next picture in the row. It's triggered by clicking the nextArrow.


Step 36: The prevPic Function

This function loads the previous picture in the row. It's the reverse of the nextPic function, and triggered by clicking the prevArrow.


Step 37: The click Function

Another non-local variable to declare:

This is the function called by clicking on a thumbnail:


Step 38: loadPic() Clearing the Old

This function loads a big picture and takes care of the navigation arrows.

First we need to declare a Loader that will load the picture...

...and now, the actual function:


Step 39: loadPic() Loading the Image

Then we create the Loader object, start the loading, and add some listeners.


Step 40: loadPic() Figure Out Image's Index

Here we select the right index of the image we loaded. This is important because cpi tells us what picture we're at, and what title to show.


Step 41: loadPic() Display or Hide Nav Arrows

Whether the navigation arrows are hidden or revealed depends on the value of cpi.


Step 42: The Load Progress Handler

This function is executed whenever a new chunk of the picture is loaded.


Step 43: bigLoadComplete() Setup

The first thing this function does is set the contents of the text fields, and then set and get some properties of the loaded image.


Step 44: bigLoadComplete() More Variables

We create some new variables so that we can resize the picture properly. They should go inside the bigLoadComplete() function.


Step 45: bigLoadComplete() Set Picture Size

This part will set the new size of the picture.


Step 46: bigLoadComplete() Reveal the Image

We set the properties of the bitmap, then reveal it on the stage.


Conclusion

All right! We're done now! I hope you could understand the ideas in this tut (and enjoyed it too).

Thank you for reading!

Finally here comes the entire code:

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.