Tutorial: Building a photo gallery project

This tutorial walks you through the steps of building a Flash project using a set of supplied assets and templates, and the Project panel. The goal is to build a photo gallery image viewer with thumbnail images that can be dragged and dropped onto a viewing area or controlled with forward and back buttons.

The tutorial focuses on the project development workflow, but I'll also touch on the general structure of the code package, manipulating the supplied code, and generating new custom features over the top of the template. Along the way you'll learn the physical structure of the FLA file as you build the project, and be able to edit the artwork as desired. In the end you'll have built a fully functional drag-and-drop interactive slideshow application and will have the project structure and knowledge needed to modify the template with different graphics.

Before you start, take a look at the completed sample on the introductory page to familiarize yourself with the features in the template.

Understanding the project workflow

Building a Flash project is easy to do. You start by creating a project folder and a strategy for structuring files and folders within it. From there you gather the artwork and assets you'll need before moving to Flash CS4.

Here are the steps in the workflow:

1. Plan the project.
2. Set up your directory structure, media assets, and artwork resources.
3. Create a new ActionScript 3 FLA file and save it into the project folder.
4. Use the Quick Project option to automatically generate a Flash project.
5. Import artwork and set up the FLA file.
6. Define ActionScript templates as needed.
7. Define the XML data source.
8. Define the document class to tie it all together.
9. Add linked ActionScript files to the project.
10. Publish the files for testing and distribution.

The following sections describe each of these steps and walk you through the workflow.

Step 1: Plan the project

The first thing you need to do is plan the project. It's often tempting to jump right in and start working, but your project will be much easier to develop if you have an idea of what you're developing. I usually sketch thumbnail designs on a blank sheet of paper. My goal is to get some sense of how the user interface will fit together and, even more importantly, what elements make up the user interface. From there I can begin to envision how the FLA file should be set up and what ActionScript classes I need to develop.

In this tutorial I've already done the planning for you, so let's go over the big picture before moving forward. The structure of the photo gallery application is straightforward (see Figure 3). The Photo Gallery is designed as a dynamic application that loads a list of images from an external source. An XML file supplies the name of the images, which allows you to change the list without updating the SWF file. The Photo Gallery application itself consists of a FLA file and several ActionScript classes. Your goal in this tutorial is to develop the FLA file and published files using a supplied ActionScript package and source artwork file.

Figure 3. Diagram of the Photo Gallery project structure

Step 2: Set up the directory structure, media assets, and artwork resources

Start the project by creating a project folder, gathering your media assets and artwork, and creating a FLA file. To speed things along, begin by downloading the flash_project.zip file, which contains all of the files necessary to start the project.

To create the project folder, follow these steps:

1. Download the flash_projects.zip file from the first page of this article.
2. Unzip the file to your desktop or any other location on your computer that's easy for you to access.
3. Examine the contents of the supplied project folder. The following items are included in the template: Adobe Illustrator artwork file, images folder, src folder containing ActionScript files, and templates folder containing code snippets and samples.

At this point you may want to add your own photos to the images folder that exists inside the project folder. The images folder already contains 12 default files that you can use while you are following the tutorial, but you can also add any number of your own.

To add your own images to the project:

1. Gather your images and format them to fit the project. For best results with the supplied template, optimize your images using the following properties:

   • Image width: 800 pixels
   • Image height: 532 pixels
   • File format: JPEG, GIF, or PNG
   • File size: 50–100K
2. Place the images in the images folder (which is in the project folder). Save your high-resolution source images somewhere in the project or elsewhere on your computer. I often create a source folder in the images folder to hold the master files, which I omit when I upload the published files to my website.

Gather your user interface artwork and add it to the artwork folder. I've included an Adobe Illustrator file you can work with and modify as desired. You can also open this file in Adobe Fireworks CS4.

Step 3: Create a new ActionScript 3 FLA file and save it into the project folder

In this step, you'll set up the FLA file as the centerpiece of the project. The FLA file is the source file that compiles the ActionScript code into a SWF. Use the FLA file to visually design the user interface and bind visual assets to ActionScript functionality.

To create the FLA file:

1. Open Flash CS4 and create a new ActionScript 3 FLA file. Save the file in the root of the project folder and name the file PhotoGallery.fla.

2. Choose Modify > Document and update the document properties using the following settings:

   • width: 800
   • height: 573
   • background color: 0x333333
3. Save the file.

Step 4: Use the Quick Project option to automatically generate a Flash project

Now you'll begin working with the Project panel. Although you can create projects from scratch using the Create Project option, the easiest way to generate a project is to use the Quick Project option. The Quick Project command automatically generates a Flash project based on the currently open FLA file in the Flash workspace. The project folder becomes the folder containing the FLA and the project assumes the name of the FLA. The Quick Project option is a great feature because it really allows you to move quickly.

To create a Flash project:

1. With the PhotoGallery.fla file still open, open the Project panel (Window > Other Panels > Project).

2. Select the Quick Project option from the Project Menu. Notice that the directory structure of the project folder populates the panel view (see Figure 4). Take a moment to explore the supplied assets.

   

   Figure 4. Initial view of the Flash project

One of the things you'll notice while exploring the project view is that the files in the artwork and images folders are not displayed in the panel. This is because they contain files that are not a default Flash file type. However, you can show these files in the Project panel by adjusting the project properties settings. I like to enable all my project file types to appear in the Project panel view in order to visualize the project better and open the files using other programs.

To modify the project properties:

1. Choose Panel Preferences from the Options menu.

2. Enter the extension ai in the Change default filters field. Click the plus (+) icon to add the extension or check the .ai extension if it already exists in the file types list (see Figure 5).

   

   Figure 5. Adding file types to the project using the Panel Preferences dialog box

3. Repeat the process described in Step 2 to enter the jpg extension (and any other image extension file types you plan on using).

4. Click OK to accept the changes. Now you can open the artwork and images folders to view the files (see Figure 6).

   

   Figure 6. Project view showing the Illustrator file and JPEG images

Step 5: Import artwork and setup the FLA file

Although you can design and modify vector artwork in the Flash workspace, I prefer to design my user interface elements in Adobe Illustrator. While working in Illustrator, I focus on defining the graphic layout. After it is finalized, I can import the artwork file into Flash—including the layer structure that I set up in Illustrator. The Import dialog box has become very powerful tool for importing vector artwork.

To import the Illustrator file and set up the FLA:

1. Choose File > Import > Import to Stage. Browse to the Artwork.ai file in the project's artwork folder. Click OK to import the file.
2. Take a moment to explore the Import to Stage dialog options. Press OK to import the file with the default settings.

3. Review the main Timeline and Library (see Figure 7). By importing the Illustrator file, a great deal of the FLA file has been automatically built in Flash. This workflow is a great way to leverage a well-designed source file.

   

   Figure 7. The Flash workspace as it appears after importing the Illustrator artwork file

The next step involves converting the artwork into symbols that correspond to the ActionScript components in the supplied src package. In a standard workflow you would create a movie clip in the Library to hold visual assets and then use the symbol's properties to link an ActionScript class to it. An ActionScript class is simply a text file containing code written in a package and class syntax. In this tutorial you will work with ActionScript by applying a prebuilt ActionScript class to a symbol's Class property. You can also generate an ActionScript class from scratch using the Project panel's ActionScript template feature.

The control buttons are a logical place to start. The ActionScript package contains a custom Button class that assigns simple button functionality to a movie clip including an optional toggle state. You can use the Button class repeatedly across multiple button movie clips if assigned to the symbol's Base class property.

To create the controls buttons, follow these steps:

1. Save the movie clips in a folder structure that mirrors the ActionScript package folder structure. Create a new folder in the Library named src. Inside the src folder, create a second folder named controls.
2. Select the play arrow icon on the left side of the Stage that lives in the buttons layer. Convert it into a movie clip symbol (F8) named PlayPauseBtn.

3. While still in the Convert to symbol dialog box, click the Advanced button and then click the check box next to the Export for ActionScript option. Enter the following path in the Base class field (see Figure 8):

   • Base class: src.controls.Button

   

   Figure 8. Settings for the button movie clip in the Convert to Symbol dialog box

4. Click OK.
5. Double-click the symbol instance to edit its timeline. The Button class signals the movie clip to navigate to a frame label name "ov" when you roll the mouse over the instance, and then back to a frame label named "up" when the mouse rolls off the instance. Your goal in setting up the button symbol is to create frames containing these frame labels related to the different graphic states. For toggle buttons, such as the play/pause button, you'll add "up", "ov", "dn", and "dnov" frame labels and corresponding graphics.

6. Extend the symbol's timeline to Frame 20. Create an actions layer. Add a stop action to Frame 1 and then add three more keyframes, each spread apart by about 5 frames (see Figure 9).

   

   Figure 9. Adding keyframes and frame labels to the PlayPauseBtn timeline

7. Name the original layer icons and add keyframes aligned with the frame labels you created in the actions layer. Each keyframe should hold a graphic related to the state described by the associated frame label. In my sample file, I'm using a pause icon on the dn state where the graphic is highlighted to a yellow color when the mouse rolls over it.
8. Add a hitarea layer and drag it to the bottom of the layers in the Timeline. This layer contains an invisible graphic that defines an active area that is larger than the icon graphic.
9. Repeat Steps 2–8 for the previous button (minus icon), the next button (plus icon), and the full-screen button (window icon).

10. Name the instances on the Stage as follows:

    • playPause_btn
    • prev_btn
    • next_btn
    • fullScreen_btn

To create the target and thumbnail components, follow these steps:

1. Select the background graphic and text on the target area layer and convert them to a movie clip symbol named TargetArea.
2. Name the instance on the Stage target_mc. The target movie clip provides a surface to hit test against during drag-and-drop interactions. No functional code is required for this element.
3. Select the rectangle on the thumbnail layer and convert it to a symbol named PhotoThumbnail.

4. While the PhotoThumbnail symbol is selected, click the Create class icon in the Project panel. In the Create Class dialog box, enter the following settings:

   • Class: src.gallery.PhotoThumbnail
   • Bind class to library symbol
   • Use selected library symbol
5. Click the Create Class button to apply the class to the selected symbol. Notice that the Project panel created the gallery folder and moved the PhotoThumbnail symbol into the folder. Because the PhotoThumbnail class exists in the ActionScript package, the Project panel simply applies the class to symbol's properties and arranges the Library.
6. The thumbnail component is generated dynamically, so you can delete the thumbnail layer from the main Stage. The component now exists in the Library. You configured it for use with ActionScript in the previous step.
7. Select the rectangle on the thumbnail grid layer and name the instance thumbBack_mc. The instance name must exactly match because the supplied script uses this instance name.
8. While the instance is still selected, convert it to a symbol named PhotoThumbnailGrid.

9. While the symbol is still selected, click the Create class icon in the Project panel. In the Create Class dialog box, enter the following settings:

   • Class: src.gallery.PhotoThumbnailGrid
   • Bind class to library symbol
   • Use selected library symbol
10. Name the instance on the Stage thumbGrid_mc.

To create the timer indicator, follow these steps:

1. Select the rectangle on the time display layer and name the instance indicator_mc.
2. Convert the instance into a movie clip symbol named TimerDisplay.

3. While the symbol is still selected, click the Create class icon in the Project panel. In the Create Class dialog box, enter the following settings:

   • Class: src.controls.TimerDisplay
   • Bind class to library symbol
   • Use selected library symbol
4. Name the Stage instance timer_mc.

At this point you've built all of the core elements of the application using the supplied assets. The next step is to define a document class and a system for building new component classes.

Step 6: Define ActionScript templates as needed

One of the great features of the Project panel is the ability to generate ActionScript files from a template. An ActionScript template is a predefined class structure that is copied into a new class file when it's created. This is a great time-saving feature because it allows you to create a new class from scratch. So with a little creativity, you can use the template feature to add a wide range of predefined class possibilities to your files as you create them.

The Project panel allows you to define two types of ActionScript template; one for classes linked to symbols in the Library and one for general classes. You can specify which templates to use by adjusting the Project properties in the Options menu. The templates folder in the project files contains two predefined templates designed to integrate with the ActionScript code package.

To view the ActionScript templates, follow these steps:

1. Open the templates folder and the project_as folder in the Project panel.
2. Double-click the boundClass_as3.as file to view it in the Flash workspace.
3. Check out the standardClass_as3.as file as well. Notice the template tags which get replaced dynamically by the Project panel when you create a class.

To assign the custom ActionScript templates to your project, follow these steps:

1. Choose the Project properties option in the Project panel's Options menu.
2. Click the folder icon next to the Class template field and browse for the standardClass_as3 file.
3. Click the folder icon next to the Class template for a symbol class field and browse for the boundClass_as3.as file.
4. Click OK to apply the changes.

At this point you have a starting point for the scripts you'll create working with the supplied code package.

Step 7: Define the XML data source

Now you're ready to build the document class. One of the first things the document class needs to do is to load an XML file defining the image paths for the photo gallery. Let's take a moment to define the XML file.

To create an XML data source, follow these steps:

1. Right-click the templates folder in the Project panel and choose the option to Open in Explorer. The project templates folder opens.
2. Open the images.xml file located in the xml folder.
3. Save a copy of the file in the root project directory next to the FLA file. Name the file images.xml or something similar.
4. Click refresh to see the XML file appear in the Project panel.
5. Double-click the new file in the Project panel to open it in Flash.
6. Update the image paths to match the filenames in your project's images folder. Delete any unused image nodes. Add new nodes if you'd like to define more images. The template does not place a limit on the number of images displayed in the photo gallery.
7. Save the file. You may want to leave this file open next to the FLA for reference and to make additional changes as needed.

Step 8: Define the document class to tie it all together

The document class is an ActionScript class assigned to the main Timeline of an ActionScript 3 FLA file. I often use the document class as a controller for my applications. Its job is to load XML data, set up the controls on the screen, and respond to events broadcast from the controls.

To create a document class, follow these steps:

1. Click the Create Class icon on the Project panel. Apply the following settings:

   • Class: src.gallery.PhotoGallery
2. Click the Create Class button to create the class. Notice that the ActionScript file appears in the code package and the file automatically opens in the Flash workspace. The default template for the PhotoGallery.as file contains code for XML loading, keyboard events, and full-screen functionality.

3. To assign the document class to the main Timeline, select the empty Stage in order to display the Stage properties in the Property inspector. Enter the classpath to the PhotoGallery class:

   • Class: src.gallery.PhotoGallery
4. For the purposes of this tutorial you'll apply code from a supplied file to complete the class. Open the PhotoGallery_completed.as file from the templates folder in the Project panel by double-clicking it.
5. Delete all of the code from your PhotoGallery.as file. Copy the code from the completed file and paste it into your file.
6. Close the completed file and save your updates.
7. Test the movie to check your work.

Tip: If you run into problems when you test the movie, try comparing your files to the completed project files to see if you can identify the issue.

Step 9: Add linked ActionScript files to the project

At this point you have a working project ready to be published. If you choose to add features and components to the template, use the boundClass_as3 ActionScript template to create the class and then add a bit of code to the document class to integrate the component.

For example, let's say that you want to add a status indicator to show the current image number out of the total number of images. The component itself is very simple; it's really just a text field inside of a movie clip. To accomplish this, the document class code will need to be updated to set the numeric values and position in the component in the z order of the objects on the screen.

To create the PhotoStatus component, follow these steps:

1. Create a new layer named status on the main Timeline at the top of the layer stack.
2. Add a dynamic text field named status_txt to the layer. Format the text field as desired and place the field in the location where you'd like the status text to appear.
3. Select the text field and convert it to a movie clip symbol named PhotoStatus.
4. Name the instance on the Stage status_mc.

5. While the PhotoStatus symbol is selected in the Library, click the Create Class icon in the Project panel and enter the following properties:

   • Class: src.gallery.PhotoStatus
   • Bind class to library symbol
   • Use selected library symbol
6. Click the Create Class button to create the class and assign it to the PhotoStatus symbol. The new class file opens in the Flash workspace.

7. Add the private _total variable to the class and update the getter setter functions to match the following code:

   package src.gallery
   {
      import src.core.Component;
     
      /**
      *    Class creates a status field component.
      *
      *    @langversion ActionScript 3.0
      *   @playerversion Flash 9.0
      *   @tiptext
      */  
      public class PhotoStatus extends Component
      {
         //*********************************
         // Properties:
        
         private var _index:uint = 1;
         private var _total:uint = 1;
        
         //*********************************
         // Initialization:
        
         public function PhotoStatus():void
         {
            // Initialize...
         }
        
         //*********************************
         // Properties:
        
         public function get index():uint
         {
            return _index;
         }
        
         public function set index(i:uint):void
         {
            _index = i;
            status_txt.text = "Image "+index+" of "+total;
         }
        
         public function get total():uint
         {
            return _total;
         }
        
         public function set total(i:uint):void
         {
            _total = i;
            status_txt.text = "Image "+index+" of "+total;
         }
      }
   }

8. Save the file.

9. Return to the PhotoGallery.as file and add the following code to the showImage function after line number 300:

   // Update status
   status_mc.index = selectedIndex + 1;
   status_mc.total = imagesTotal;
   setChildIndex(status_mc, numChildren-1);

10. Save the file.
11. Test the movie to check your work.

Step 10: Publish the files for testing and distribution

Publishing is the act of compiling the ActionScript code and FLA file into a SWF file. The Flash workspace also produces an HTML page by default that embeds the SWF on a web page.

To publish one or more files from the Project panel, follow these steps:

1. Set up your FLA file to export an HTML template with the allowFullScreen parameter set to true. Choose File > Publish Settings and then click the HTML tab. Change the HTML publish template settings as shown below (see Figure 10).

   

   Figure 10. Selecting Flash Only – Allow Full Screen in the Publish Settings dialog box

2. Click OK.
3. Click the Test Project button to quickly test the SWF file or right-click (Windows) or Control-click (Mac) the PhotoGallery.fla file in the Project panel and choose the Publish Movie option. This causes Flash to publish the SWF and the associated HTML page. Notice that the HTML file appears in the Project panel view once the project has been published. You may want to open the HTML file in Adobe Dreamweaver in order to edit it and add additional formatting.
4. Open the PhotoGallery.html file in a browser to preview the completed work.

5. When you're satisfied that the project is ready to be launched, you'll upload the published files to your server. The published files include:

   • images (the entire folder of image files)
   • images.xml
   • PhotoGallery.html
   • PhotoGallery.swf

Now that the project is published, you can always return to the Project panel and edit the PhotoGallery project whenever desired—as long as the Projects folder remains in the same location. If you need to move it, delete the project from the Project panel and then add it again after you move it.

Page 3 of 4

Previous Page

Next Page