Creating a Flash Portfolio movie – part 1

Each of the buttons on the left represents a project. When a project button is clicked, a list of numbered images will load into the bottom area of the movie. Clicking the number will load the image into the main image area. Each thumbnail could be an image or a swf file. For simplicity, I’m going to restrict this example to images.

We’ll make this site dynamic by loading the portfolio data from an XML file. The XML file will describe each project and provide a list of associated images. We could also include descriptions and other information but again, for simplicity, I’ve left these details out.

I’ll create the portfolio application using a single AS2.0 class file. While class files are most useful for larger, reusable applications, you’ll see that this approach simplifies the code within the FLA file. It also makes it easy for you to reuse the application with different buttons.

The tutorials will cover the following areas:

• Working with classes in ActionScript 2.0
• Loading data from an XML file into Flash
• Creating and populating the interface dynamically using ActionScript

Because there’s quite a bit to cover, the tutorial is written in two parts. By the end of this tutorial, you’ll have created the class file, set up the interface and loaded the XML file. In the next tutorial, you’ll use the XML file to populate the interface.

I’ve used Flash MX 2004 to create the starter file and, as it uses ActionScript 2.0 classes, you’ll need to have at least this version of Flash to complete the tutorials. You can download the resource files from the blue Properties box that contains the article PDF. There's a heading titled Code Download and you can click the Details link next to it to get the zip file.