Creating a Flash Portfolio movie – part 1

A few weeks ago, a reader asked how to create a portfolio movie in Flash. Because this is a common request, and the reader had a specific layout in mind, the team at DMXZone thought it might make a good subject for a tutorial. We’ll build a portfolio web site that has the layout shown below.

 

$2.89
- OR -

Overview

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.

Note: If you have difficulties downloading the source files or PDF, you might have a problem with your cookies. Delete the cookies from your machine and try again. In Internet Explorer, you can do this by choosing Tools > Internet Options… and clicking the Delete Cookies… button on the General tab.

Sas Jacobs

Sas JacobsHello. I'm the Principal of Anything Is Possible, an Australian web development business specialising in web applications development and training. I'm interested in using Flash with dynamic content and I've presented at a number of International conferences on topics relating to applications development, XML and scripting components. I have recently released my second print book Beginning XML with DOM and Ajax to match the first one - Foundation XML for Flash. I have a business web site
and a personal web site.

See All Postings From Sas Jacobs >>

Reviews

So far, so good...

January 23, 2007 by Christian Sparrow
Nice job not rushing ahead like the flashy, wordy style of Joey Lott at Lynda.com. Teaching is about pace, not prowess.Good tutorials draw clear, detailed lines between each step. The owner reviews their own code and verbiage for accuracy and clarity. Sas is good here for the most part. Also, using common language is key. Many instructors have a serious problem with communicating effectively. If you wouldn't say it, don't write it. Sas does well overall in keeping it personable instead of showy or wordy. Looking forward to Part 2!

You must me logged in to write a review.