By Dan Carr
 
Created
2 June 2009
 
Requirements
 
Prerequisite knowledge
 
  • Before you begin, read Examining the ActionScript 3 Flash video gallery source files to get a better understanding of how the application works.
  • General experience in SWF application development is advised, but this article is geared towards anyone interested in an overview of application development techniques in Flash CS4 Professional.
User level
 
Beginning
 
Required products
 
Sample files
 
The ActionScript 3 Flash video gallery has been a popular application since it was first developed as a marketing piece for Macromedia Flash Professional 8. As an ongoing exploration of the video gallery application, we've refined the template into a set of sample files that you can explore and use as a jumping-off point in your own work.
 
This article covers the update for Adobe Flash CS4 Professional. The sample files contain the Flash CS4 FLVPlayback component with expanded accessibility features and a simplified project structure.
 
Updates to the video gallery include:
 
  • Refined ActionScript 3 code structure
  • Simplified FLA file and document library structure
  • Updated FLVPlayback component with Accessibility
  • Feature initialization through URL variables
  • Ability to launch a video detail view during initialization
  • Ability to play streaming of progressive videos
  • Ability to play MPEG-4 and FLV file formats (Flash Player 9.0.115 and later)
  • Complete skinning control over branding and design (easier access)
  • Highlight state for selected thumbnail video
  • Debug mode and problem solving notes
Changes to the video gallery include:
 
  • This version of the video gallery removes support for embedded thumbnail videos to simplify the file structure and improve performance.
There is one major change to the video gallery: This version of the video gallery removes support for embedded thumbnail videos to simplify the file structure and improve performance.
 
A sample of the ActionScript 3 Flash video gallery is available online for review. The video gallery is composed of three primary features: the video thumbnails on the left, the video filter controls below the thumbnails, and the video detail view on the right. Clicking the filter buttons activates video choices using two user-defined filter options. Clicking a video thumbnail launches a detailed view of a video, which displays the full video clip and further details as specified in the accompanying XML source file.
 
This article provides an overview of the files and structure necessary to create an application of this type. We'll explore the source files for the video gallery as a case study.
 
Note: The look and feel of the ActionScript 3 Flash video gallery is similar to the previous version, but the development experience and range of features has been improved. Please see the previous version of this article, Deconstructing the ActionScript 2 Flash video gallery application, for more information about using the ActionScript 2 source files.
 

 
Overview of the application and top-level files

The first step in understanding the application structure is to study the example source files. In broad strokes, there are four types of application files:
 
  • A SWF file implements the gallery movie and displays the physical assets.
  • ActionScript 3 files supply logic to the SWF at compile time.
  • An XML file supplies external data and settings to the SWF.
  • Videos are stored in separate FLV files that supply video content to the SWF.
Notice that the SWF file (FlashVideoGallery.swf in the case of the gallery) is the center point for loading external logic, settings, and content. It's common practice in application development to split the content from the application logic and the display view.
 
Next, take a look at the top-level of the source files and identify the application's building blocks. To view the top-level files:
 
  1. Download the Flash video gallery source files if you haven't already done so. You can download them from the Requirements section of this tutorial.
  2. Open the as3_flash_video_gallery folder to view the top-level files. The folder contains three subfolders and FLA, HTML, SWF, and XML files (see Figure 1).
Folder containing the top-level files for the Flash video gallery application
Figure 1. Folder containing the top-level files for the Flash video gallery application
The first thing to do here, at least mentally, is to separate the source files for the SWF from the overall file structure. (These files are mixed together in Figure 1.)
 
Here are the application files and folders that live in the top-level directory:
 
  • thumbnails: Folder that contains the separate thumbnail FLV files (if using the external file method)
  • video: Folder that contains separate video files, each stored in FLV format
  • FlashVideoGallery.html: HTML file that launches the gallery; the web page
  • FlashVideoGallery.swf: SWF gallery movie
  • Settings.xml: XML file that contains the user-defined settings for the application
  • Settings_streaming.xml: Alternate XML file showing a sample of streaming detail video
Note: The preceding files and folders are the application files that make up the video gallery on the website. These files will be uploaded to your server, while the source files will not.
 
Source files:
 
  • fvg: Folder containing the ActionScript 3 code package
  • FlashVideoGallery.fla: Editable master file for FlashVideoGallery.swf
Take a moment to familiarize yourself with the sample files. By understanding roughly what each of the files does, you'll be able to move much more quickly through your exploration of the application.
 

 
Exploring the source files

Now that you are familiar the top-level files, you're ready to dive into the details of the ActionScript source files, the FLA source file, and the XML file. Your goal in this section is to understand the role of each element in the larger application. By doing so, you can see how the application is structured and get a feel for its features. Let's start with an overview of the ActionScript 3 files in the fvg folder.
 
 
Understanding the ActionScript 3 source files
To view the Action Script 3 files:
 
  1. Open the as3_flash_video_gallery folder in the supplied source files.
  2. Open the fvg folder to view the five ActionScript 3 files. The files have an .as file extension (see Figure 2).
ActionScript 3 files in the fvg package
Figure 2. ActionScript 3 files in the fvg package
  1. Take a moment to explore the files. You can open them in Flash CS4 Professional or in any text editor. Don't worry too much about the details of the code. Focus on the general layout of the class construct and notice where the code pattern is replicated from file to file. Also notice the amount of code contained in each file. Some controls take a considerable amount of code to build, while others take very little.
Notice that each of the ActionScript 3 files represents some type of control or feature in the application. This is a common use of an ActionScript object—called a class. You can use object classes to create organized frameworks of control scripts that can be reused throughout your applications. As you dig a little deeper, notice that you can group the files into three categories that describe how they relate to the application. The categories and descriptions are as follows:
 
 
Main control
  • FlashVideoGallery.as defines the document class for the FLA file and acts as a container for the gallery application. The FlashVideoGallery class handles data loading and assets management.
 
Feature controls
  • DetailView.as defines the detail view feature.
  • Tooltip.as defines the rollover tip text for the thumbnail feature.
  • VideoThumbnail.as defines the thumbnail controls that create the site selection feature.
Note: FlashVideoGallery.as is the primary application file. It initializes the assets in the gallery and coordinates events as they occur.
 
 
Button controls
  • TextLink.as defines a text link button control.
Note: Other buttons in the user interface are either simple buttons (button symbols from the SimpleButton class in the Library) or the FLVPlayback custom UI components applied to the video display. In ActionScript 3, you can easily work with your button symbols as SimpleButton classes, which broadcast mouse events and work the same way as other ActionScript 3 components.
 
Defining the roles for each of the scripts makes it much easier to see what the ActionScript 3 package contains and where you may want to explore and edit it.
 
Tip: Notice that ActionScript files all end in the suffix .as. These files are really just text files that contain code written in the ActionScript language. The script becomes active only when run in Flash Player. ActionScript 3 requires that the user has the Flash Player 9 installed in their browser.
 
 
Understanding the FLA source file
The next source file we'll explore is the FLA file. The FLA file is the editable master file for the SWF file. The SWF file is a compressed version of the FLA that is created when the movie is published. As you'll recall, the SWF becomes the center point in the working application. The FLA file is important because it is where you tie all the pieces together. The FlashVideoGallery class is associated with the main Timeline of the FLA file through the FLA file's document class parameter. The other ActionScript 3 classes are associated with movie clip symbols in the Library through the symbol's properties.
 
Let's explore the elements of the FLA file:
 
  1. Open the FlashVideoGallery.fla file in Flash CS4 Professional.
  2. The main Timeline should be viewable by default. Look at the structure of layers and frames.
  3. Open the Library panel, if it's not open already. Explore the assets in the Library (see Figure 3).
List of assets in the FlashVideoGallery.fla source file
Figure 3. List of assets in the FlashVideoGallery.fla source file
The structure of the FLA file has been further simplified in this version of the gallery. All assets are accessible on the main Timeline or in the folders in the Library.
 
For now, your goal is to understand the structure of the FLA from a high level. The following is a breakdown of the main things to notice:
 
 
Frame 1
  • Loading layer: Contains the LoadingBar component displaying an indeterminate loading state while the thumbnail videos are downloading from the server.
  • Assets layer: Contains the filter components, logo, text fields, and link buttons that make up the general assets of the application interface. These assets are physically placed on the Stage so you can edit and position them during authoring.
  • Background layer: Contains the background graphic.
 
The Library
  • Detail View folder: Contains items associated with the detail view
  • Interface folder: Contains items associated with the user interface and controls
  • Thumbnail folder: Contains items associated with the video thumbnail control
 
Understanding the XML source file
The final stop on your tour through the source files is the XML settings file. XML is a simple text file format that contains a structure of data. In this example, the data represents the user-defined settings for the application. It provides the names of the labels in the user interface, the links that appear on the main screen, the filters used to select videos, and the details for each of the videos that are displayed.
 
There are many reasons why you might want to use external settings. Logically, holding settings externally lets you update certain parts of the content without having to update the FLA file. This can be particularly advantageous when creating localized versions of an application. For example, the Japanese version of an application can read Japanese data from an XML file configured with the Japanese language. The Spanish and English versions can use different versions of the XML file, and so on. By separating the data from the FLA, you can localize a single application by simply creating and defining new XML files.
 
Developers define XML formatting for each application they create; its format and usage changes from application to application to match the data being described. In this case, the XML formatting follows a specific format that must be used for the scripts in the application to work. The application XML format defines five sections of data as follows:
 
  • Labels: describes labels that appear in the user interface
  • Links: a list of links used on the main screen
  • Filters: a list of filter settings used by the filters feature (1)
  • Filters: a list of filter settings used by the filters feature (2)
  • Videos: a list of site details used in the detail view of the gallery including title, description, URL, and a "more info" link
Note: The links in the supplied sample files open their URLs in a new browser window (the default behavior of the navigateToURL command). If you would prefer to open the link in the same window, update the navigateToURL code in FlashVideoGallery.as and DetailView.as to look like the following line of code:
 
navigateToURL(new URLRequest(url),"_self");
Notice the second parameter ("_self"), which can be used to target the same browser window, a new window, or a window within a frameset.
 
To view the XML file:
 
  1. Open the Settings.xml file in a text editor.
  2. Scroll down and view the formatting in the file.
  3. Notice where the five sections appear in the formatting.
Here's a sample of a label node:
 
<label name="title"><![CDATA[ActionScript 3 Flash video gallery]]></label>
The name attribute must remain the same, but you can fill in the text in the CDATA section as desired. CDATA allows for the inclusion of HTML formatting and characters that would normally be illegal in an XML file's text node.
 
Here's a sample of a link node:
 
<link name="textLink1" url="/go/flashvideogallery_learn_more"><![CDATA[Learn more about Flash video >]]></link>
There are eight text links that appear on the right side of the main screen. You can supply link information for all of the links, some of the links, or none of the links (as needed). Leave the name attribute as it is, but go ahead and update the url attribute and the link text as desired. To initialize the user interface, include all eight link nodes. To force a link not to display, supply an empty link tag in the following format:
 
<link name="textLink8" url=""/>
Here's a sample of the filters nodes:
 
<filters> <filter name="radio1" view="1"><![CDATA[Filter videos by industry]]></filter> <filter name="checkbox1" id="i0" view="1"><![CDATA[Content]]></filter> <filter name="checkbox2" id="i1" view="1"><![CDATA[Entertainment]]></filter> <filter name="checkbox3" id="i2" view="1"><![CDATA[Marketing]]></filter> <filter name="checkbox4" id="i3" view="0"/> </filters> <filters> <filter name="radio2" view="0"><![CDATA[Filter videos by region]]></filter> <filter name="checkbox5" id="r0" view="1"><![CDATA[Europe]]></filter> <filter name="checkbox6" id="r1" view="1"><![CDATA[North America]]></filter> <filter name="checkbox7" id="r2" view="0"/> <filter name="checkbox8" id="r3" view="0"/> </filters>
The filters nodes allow you to set up two sets of filters to search the videos by category or keyword. The filters appear as radio buttons and check boxes on the interface that enable and disable videos in the list based on the filter criteria selected. Leave the name attribute as it is, but set the view attribute to 1 to view the category by default or to 0 if you want the category to be hidden by default. For the check box nodes, enter an ID name that corresponds to the filter1 and filter2attributes in the video nodes. Edit the name of the filter labels as desired.
 
Notice that you can use an empty tag, as seen with checkbox8 above, to signal that the filter option is not needed. Make sure you use all the filter nodes seen in the sample above. Set the node to an empty tag if you do not what the component to appear in the user interface. You can use two categories with up to four filter keys in each category.
 
Here's a sample of a video node:
 
<video preview="thumbnails/creativebubble.flv" flv="video/creativebubble.flv" filter2="r2" filter1="i2"> <title><![CDATA[Creative Bubble]]></title> <description><![CDATA[Creative Bubble needed a way to show their demo reels...]]>description> <moreInfo url="http://www.adobe.com"><![CDATA[More info...]]></moreInfo> </video>
Notice the general code structure. There is an opening video tag, then several child tags including title, description, and moreInfo, and finally a closing video tag.
 
Notice the location of key pieces of information. The opening video tag contains attributes that describe the preview (symbol linkage name or FLV URL), flv (the path to video file), and keys the two filter types. The title, description, and moreInfo child nodes contain their respective descriptions. You can have up to 36 videos in the list.
 
Note: One of the great features of ActionScript 3 is being able to retrieve XML data in a very easy-to-use format as well as write XML as you normally would in a text editor, without having to write it as a string.
 
Tip: The name attribute in the previous XML samples corresponds to the instance name of an asset on the main Timeline of the FLA file. You can expand the template by adding assets to the FLA and then referencing them using this pattern in the XML. The FlashVideoGallery class will automatically populate the assets on the Stage with the instance names corresponding to the values in the XML file.
 

 
Preloading and file management

Every developer has to devise a strategy for managing source files when creating web-based applications. The first couple of decisions to make are how to define your file structure and how to handle your content. When you work with video, you're working with a heavier media type. Incorporating these larger file sizes into your project may present challenges that are new to you. If you want to display a whole gallery of videos, you will have to split the content into separate files in order to create a smooth user experience.
 
The loading strategy is simplified in this version of the source files. The application itself is lightweight and downloads quickly. This allows the FLA file structure to place all of its assets on frame 1 of the main Timeline. The indeterminate loading bar obscures the screen and remains visible until each thumbnail video loads.
 
 
Using loader controls and indeterminate bars
Loader controls are commonly used to manage file downloads and display user feedback during the process. Loaders are components that pause the application and display a progress bar (or run another routine) while a file is downloading. Once the file has downloaded, the loader control usually continues on with the flow of the application, or it calls a processing function to start another routine. By using loader controls, you can load external content only as needed and provide the viewer with a graphic indicator that displays while files are downloading.
 
Flash CS4 Professional includes a ProgressBar component in its default set of User Interface components, but for our purposes, we'll monitor loading based on events received from the FLVPlayback controls in the application. In all instances of loading, the LoadingBar component is displayed for user feedback. This control does not actually have any functionality to it, but it provides an indeterminate loading bar state to inform the user that the application is loading data (see Figure 4).
 
Loader displaying a progress bar animation to provide feedback to the user
Figure 4. Loader displaying a progress bar animation to provide feedback to the user
The video gallery application uses the indeterminate bar for visual feedback at three locations in the FLA:
 
  • While loading the entire video gallery application file
  • While loading each video's FLV file into the thumbnail view
  • While loading each video's FLV file into the detail view
 
Splitting the content from the application (video thumbnails and full-sized detail video)
The ActionScript 3 version of the video gallery uses external FLV files for all of its video. The advantages of using external files include a faster production routine and an easier method for swapping thumbnail videos in the template. The Thumb component in the Library is duplicated and added to the Stage dynamically by the FlashVideoGallery class during initialization. The DetailView component handles video loading for each detail view when a thumbnail is clicked. By splitting the thumbnail videos and detail videos from the application, we've kept the application itself lightweight.
 
 
Assigning an ActionScript class to the FLA file's document class
One of the benefits of using the ActionScript 3 FLA file format is the ability to assign an ActionScript class directly to the main Timeline. In older versions of the video gallery, the application existed in a movie clip instance because that was the only way to assign the FlashVideoGallery class to a timeline. This version of the video gallery moves the application assets to the main Timeline and assigns the FlashVidepoGallery class directly to the root container of the SWF.
 
To assign an ActionScript class to the main Timeline:
 
  1. Click the Stage of an ActionScript 3 FLA file.
  2. In the Property inspector, enter the path to the ActionScript class in the Class field (see Figure 5). Notice the path to the ActionScript class in Figure 5 contains the "fvg" folder name followed by a dot. ActionScript classes are referenced by including the folder name of the package where the ActionScript class resides.
Assigning an ActionScript class directly to the main Timeline as a document class using the Stage properties
Figure 5. Assigning an ActionScript class directly to the main Timeline as a document class using the Stage properties
 
Assigning an ActionScript class to a movie clip symbol
Using the Symbol Properties dialog box, you can associate an ActionScript 3 class and subclass with a symbol and then control whether the symbol and class load before or after Frame 1 (see Figure 6).
 
Linkage Properties dialog box for the Thumb movie clip
Figure 6. Linkage Properties dialog box for the Thumb movie clip
In this version of the source files, the components are relatively lightweight and load on frame 1 as the application initializes. By turning on the symbol's Export for ActionScript option and leaving the Export in frame 1 option selected, you can make the related ActionScript class and symbol available as the application initializes.
 
To assign an ActionScript class to a symbol:
 
  1. Open the Linkage Properties dialog box for a symbol by right-clicking the symbol in the Library panel and selecting Linkage from the context menu.
  2. Check the Export for ActionScript option.
  3. Uncheck the default Export in first frame option.
  4. Type in the name of the class associated with this movie clip symbol. Note that if you don't add a class, Flash automatically builds a class of the same name as the symbol so that the movie clip can be instantiated by its class name consistently with all other objects in the ActionScript 3 environment.
  5. Place an instance of the symbol in the main Timeline to include it in the exported file. Make sure to place the instance on a frame after Frame 1.
Note: The source files place all of their instances on the frame2Export layer on Frame 2.
 
In some situations you'll find that it's advantageous to turn off the Export in frame 1 option that allows the application to start playing without waiting for the symbol to load on frame 1. In this case, you'll have to physically have an instance placed somewhere on the Stage.
 

 
Preparing FLV video files

The FLV video format has successfully evolved through a few generations now. In its first incarnation, the FLV format appeared in Macromedia Flash MX for use with Flash Communication Server (now Flash Media Server). In Flash MX 2004, we were able to play external FLV files in a SWF application. Flash 8 introduced a new codec for the FLV format. Adobe Flash CS4 continues the evolution progress with improvements to the FLV experience and the user interface components supplied to control it. In addition, Adobe Flash Player 9.0.115 and later supports MPEG-4 formats including the F4V format exported by Adobe Media Encoder CS4.
 
There are a number of benefits to using FLV files in your SWF application:
 
  • You can import and use video where the settings have already been applied.
  • You have greater control while downloading files using the NetStream and NetConnection objects.
  • You can play FLV video dynamically from external sources.
  • You can create progressive or streaming FLV videos.
  • You can export FLV video from Adobe Media Encoder or from a number of other programs.
  • You can use Flash CS4 Professional's FLVPlayback and custom UI components for video playback controls.
Adobe has a number of resources already posted which describe these topics in detail. For more information, please visit the links below:
 
 
Creating your own FLV files
First you will need a video source to work with. It's best to start with a high-quality source. If you don't already have video clips to work with, you can shoot your own video with a digital video recorder, purchase stock video clip art, or create a series of screen captures using a screen capture utility. However you obtain your video, you will most likely need to edit it to prepare it for the web. When you are editing your video clips, remember the following recommendations:
 
  • Start with high-quality video.
  • Do not use video that contains transitions or unnecessary high motion. Videos that contain less motion will play back better across slower frame rates.
  • Cut the video clips to lengths that are an appropriate size for the bandwidth of your target audience. You can do this step during encoding if you like.
  • Pick a frame size that is appropriate for your target audience bandwidth. (For modem users, use 160 × 120 pixels; for ISDN, 192 × 144 pixels; and for high-speed connections, 320 × 240 pixels.)
You can import and/or encode your source video by using the Import Video Wizard in Flash CS4 Professional (see Figure 7). You can also use Adobe Media Encoder to encode source video to the FLV format. Using either approach allows you to set the frame size, frame rate, and edit the clip to the appropriate size.
 
First screen of the Import Video Wizard
Figure 7. First screen of the Import Video Wizard
Refer to the following resources for more information on Adobe Media Encoder:
 
 
Video settings used in the Flash video gallery
The video gallery uses 36 thumbnail video displays. The thumbnail videos exist externally as separate FLV files, so it is important to keep file sizes to a minimum. Understanding these settings will help you when making similar decisions about how to prepare your video clips.
 
  • Sized to 84 × 68 pixels
  • Approximately 2–3 seconds in length
The full video clips that load into the detail view are also separate FLV files. Users will be presented with a loader if the videos take a moment to load, so their specifications are a little more relaxed. There are a range of acceptable file sizes and video lengths. The following list describes the range of settings in use:
 
  • Sized to a maximum of 240 × 180 pixels
  • Clip lengths range 4–20 seconds in length (longer if streaming)
 
Using more than 36 thumbnail videos
If you'd like to include more than 36 thumbnail videos, you can take a number of paths to extending the template. The easiest and recommended route is to increase the size of the user interface and include more videos rows and columns in the thumbnail grid. You can modify the size of the Thumb control by editing the assets in the document library. To change the layout and spacing of the thumbnail grid, you'll edit the variables at the top of the FlashVideoGallery class.
 
Alternate routes would include initializing the thumbnails in a scrolling TileList component or creating a paging system using Sprites containers and ActionScript. Both routes would require some work to change the initialization of the thumbnails and to ensure that the thumbnail events still arrive as expected in the event handler functions in the FlashVideoGallery class (main Timeline).
 
Keep in mind that performance issues and loading issues may occur with the more videos in use. Thirty-six videos appear to be a stable amount, but you can experiment with more or fewer videos in the thumbnail grid.
 

 
Building controls using ActionScript 3

ActionScript 3 continues the object-oriented metaphors that appeared in ActionScript 2, but it starts fresh in a new file type (the ActionScript 3 FLA) using a totally standardized approach to coding. Components are built in ways similar to those built before, but the general syntax of creating classes has been extended to include a package syntax for clearer naming and now also includes a common approach for handling events.

This section of the article overviews the primary components included in the Flash video gallery application and their editable features in the FLA and ActionScript source files.
 
Tip: A class is a definition for an object in ActionScript. It's similar to a symbol in that it defines the object.
 
For an overview of ActionScript 3, please see the getting-started resources in the ActionScript Technology Center. To learn how to use the new user interface and video ActionScript 3 components, read the Flash and ActionScript components learning guide.
 
 
Exploring the primary components of the Flash video gallery application
To better understand how components are created and implemented, you'll explore elements of the thumbnail and detail view controls in the gallery application. These controls compose the majority of the application's functionality.
 
 
Thumb component
The Thumb component (VideoThumbnail class) is basically a specialized button. Thumb component instances are positioned in a grid located on the upper left of the application as selectable previews. As the user rolls over one of the Thumb components, the preview for the video jumps into focus and plays in a loop. There is also a Tooltip component (Tooltip class) that floats on top of each Thumb component to display the thumbnail's title as Tooltip text (see Figure 8).
 
Preview and selection area of the application composed of a grid of thumb controls in the user interface
Figure 8. Preview and selection area of the application composed of a grid of thumb controls in the user interface
The ActionScript logic that powers the Thumb component lives in the VideoThumbnail.as class inside the fvg package. Start by taking a look at the ActionScript file.
 
To open the Thumbnail component ActionScript file:
 
  1. Open VideoThumbnail.as in Flash CS4 Professional or in a text editor. This file resides in the fvg folder in the source files.
  2. Review the sections of the script. Notice that most of the script is composed of functions. The functions encapsulate the basic features of the class.
Notice that the script contains the logic to:
 
  • Store title, index, and filter information for each Thumb component instance.
  • Zoom in and out of the thumbnail video display based on rollover and rollout events.
  • Supply a setData function to load the external FLV file.
  • Enable and disable each of the Thumb component instances, based on the user's selection of filters.
The VideoThumbnail class is associated with the corresponding graphic assets using the symbol properties of a movie clip in the FLA file. This step adds a physical presence to the script in the movie. It gives you a way to place the Thumb component and interact with it during authoring—even if the component is generated dynamically via script at run time. Take a look at the Thumb movie clip symbol for the Thumbnail component (see Figure 9).
 
Timeline and Stage for the Thumb movie clip symbol
Figure 9. Timeline and Stage for the Thumb movie clip symbol
To open the Thumb control movie clip:
 
  1. Open FlashVideoGallery.fla in Flash CS4 Professional.
  2. Open the Library panel, if it's not already open.
  3. Double-click the Thumb symbol, which is located in the Thumbnail folder in the library.
  4. Look at the layers on the Timeline and the various graphic assets. Notice that the layers include graphics, an FLVPlayback instance, and a background image.
  5. Right-click the symbol in the Library and choose Properties from the context menu. The Symbol Properties dialog box appears. Notice the export settings and the assignment of the ActionScript 3 class. Notice that the linkage identifier field is inactive in the ActionScript 3 file. This is due to the standardization in ActionScript 3 of all instances being created using the new keyword and a class name.
  6. Click OK to close the dialog box.
The ActionScript 3 class and the movie clip symbol are what define the Thumbnail component both physically and functionally. However, if you look through the layers of the Application timeline in FlashVideoGallery.fla, you notice that the thumbnail grid does not exist during authoring. The Application instance uses the ActionScript associated with it (FlashVideoGallery.as) to load the XML data and build the grid of thumbnails dynamically based on the data source. Take a look at the code in the FlashVideoGallery class to see the initialization routine.
 
To open the FlashVideoGallery.as ActionScript file:
 
  1. Open FlashVideoGallery.as from the supplied source files in Flash CS4 Professional or in a text editor.
  2. Scroll down through the code until you get to the layout function. At this point, the XML has been loaded and the class can build the layout based on the user-defined settings.
  3. Scroll down to line number 302 to see the thumbnail initialization code.
Notice that the initialization code does the following:
 
  • Loops through the thumbnail list supplied by the XML and creates a new thumbnail control instance for each item in the list
  • Positions the thumbnails correctly in the grid
  • Calls setData on each thumbnail instance and sets the unique data for that thumbnail as supplied by the XML file
 
DetailView component
The DetailView component sits on the right side of the application and displays the full video clip and its related site information. When a user selects a Thumbnail component, the DetailView component displays a new view on the right side of the screen (see Figure 10). Notice the addition of the ActionScript 3 FLVPlayback and custom UI components.
 
Editable layout of the detail view movie clip
Figure 10. Editable layout of the detail view movie clip
The DetailView component contains similar pieces to the Thumb component. Take a look, starting with the ActionScript 3 class.
 
To open the DetailView component ActionScript file:
 
  1. Open DetailView.as from the fvg folder in the source files in Flash CS4 Professional or in a text editor.
  2. Review the sections of the script. Pay close attention to the setData function.
Notice that the script contains the logic to do the following:
 
  • Load text, labels, and other data supplied by the XML settings file
  • Load and control a full-size video clip
  • Show video details including title, video, and a "more info" link
Here again the ActionScript 3 class is tied to the FLA file through a movie clip's symbol properties.
 
To open the DetailView movie clip:
 
  1. Open FlashVideoGallery.fla in Flash CS4 Professional.
  2. Open the Library panel, if it's not already open.
  3. Double-click the DetailView symbol located in the Detail View folder in the Library.
  4. Look at the layers on the Timeline and the various graphic assets. Notice the layers include graphics, text fields, an FLVPlayback instance with related video controls, and a background.
  5. Right-click the symbol in the Library and choose Properties from the context menu. The Symbol Properties dialog box appears. Notice the export settings and the assignment of the ActionScript 3 class.
  6. Click OK to close the dialog box.
The FlashVideoGallery.fla file initializes the DetailView component dynamically just before the thumbnails are loaded. Functions in the FlashVideoGallery.as class control the initialization of data into the instance as thumbnails are clicked. Explore the code to see how this all ties together.
 
To open the FlashVideoGallery.as ActionScript file:
 
  1. Open FlashVideoGallery.as from the supplied source files in Flash CS3 Professional or in a text editor.
  2. Scroll down to line number 327 to check out the showDetail function. As you would expect, this function shows and hides the detail view as needed. The function is called when the user clicks and releases their mouse button on a Thumb component.
 
TextLink and Tooltip components
The two remaining custom-built components are the TextLink and Tooltip controls. The TextLink control is basically a button that appears as a text link with a rollover highlight. The Tooltip control appears when the cursor is above a Thumb control.
 
These controls and associated classes are brief in comparison to the others. Take a look by exploring the assets as you did with the other controls.
 
 
ActionScript 3 component and custom FLVPlayback UI components
This version of the video gallery uses a standard approach to handling UI components and video components. Besides ease of development, the ActionScript 3 components allow you to fully customize the video gallery—making it easier to design your own controls and add your own branding.
 

 
Adding your own videos to the gallery

Now that you're familiar with the pieces that make up the gallery and the technology powering it, you may want to use the shell of the source files to create your own video gallery. Creating your own FLV video files and displaying them in the gallery application is easy to do. The following steps outline the process for updating the video source files and using the gallery features as implemented in this ActionScript 3 version of the Flash video gallery application.
 
 
Step 1: Creating full-length external video clips
The full-length video clips display in the detail view when a Thumbnail component is selected. These video clips are a bit larger in file size because they have larger dimensions and are longer in duration. As a result, it makes sense to store them externally in separate FLV files. This version of the video gallery uses external FLV files.
 
To create your own full-length video clips:
 
  1. Obtain high-quality source video for the detail video.
  2. Encode the video to FLV format using Adobe Media Encoder or the FLV encoder of your choice.
  3. Place the resulting FLV file in the video folder in the as3_flash_video_gallery folder. If you're using Flash Media Server to stream the files, place the FLVs in your application's instance directory. Make a note of the video filenames because you will need to enter them into the XML file later.
  4. Repeat Step 1 for each video clip in your gallery.
 
Step 2: Adding your own video thumbnails to the gallery
The thumbnail videos are similar to the detail videos, except that they should be brief enough to load quickly. You can include audio or not, but for performance purposes, it's best to exclude the audio during the FLV encoding process.
 
To create your thumbnail videos as separate FLV files:
 
  1. Obtain high-quality source video for the detail video.
  2. Encode the video to FLV format using Adobe Media Encoder or the FLV encoder of your choice.
  3. Place the resulting FLV file in the thumbnails folder in the as3_flash_video_gallery folder. If you're using Flash Media Server to stream the files, place the FLVs in your application's instance directory. Make a note of the video filenames because as you will need to enter them into the XML file later.
Note: The application looks at the path in the XML file for each thumbnail. If the path contains ".flv" or ".xml" (SMIL), the VideoThumbnail class displays the FLV in an FLVPlayback component. Otherwise the class assumes the path is a reference to a class name in the library—in which case it loads the symbol and the embedded video.
 
Option 2: Embed your thumbnail videos in the FlashVideoGallery FLA file:
 
  1. Create your thumbnail-sized FLV files using the thumbnail settings described in the video settings information of the Preparing FLV video files section of this article.
  2. Open the FlashVideoGallery.fla file. Open the Library panel, if it's not already open.
  3. Open the Thumb Videos folder, if it's not already open. Briefly examine the FLV videos and associated movie clips in the folder. View the linkage properties of the first movie clip. Explore the movie clip's Timeline. You will be recreating this structure for your own thumbnail clips.
 
Step 3: Updating the settings in the XML file to match the new video filenames and video details
To adjust the XML settings:
 
  1. Open Settings.xml in a text editor.
  2. Scroll down to the videos node.
  3. Update each individual video node with the relevant site details. Be sure to include the path to the thumbnail (or FLV path) and the detail video FLV file, as well as the site details for each clip.
You can use an HTTP, RTMP, or SMIL (.xml) path for the URLs in the video nodes. Using an RTMP or SMIL path means you can use streaming video from Flash Media Server. I recommend that you use progressive video for the thumbnails to achieve the best performance during browsing. For more information on how to set up your Flash Media Server application to work with the FLVPlayback component included in this template, please see the Streaming FLV files from Flash Media Server section of the Flash Quick Start, "Getting started with the ActionScript 3 FLVPlayback component."
 
Tip: There are currently 36 site nodes for the 36 thumbnails in the thumbnail grid view. You may choose to use fewer site nodes in the XML file to define fewer thumbnail components in the grid in the gallery. The grid is drawn in rows from left to right from top to bottom. If you use fewer site nodes, the grid will still draw itself in the same way but it will stop trying to place thumbnails in the grid when the site nodes run out.
 
The supplied files are configured for progressive download by default. If you'd like to see a sample of streaming video, remove the default Settings.xml file and rename the supplied Settings_streaming.xml file as Settings.xml. The streaming file shows the suggested configuration of progressive video for the thumbnails and streaming video for the detail FLVs using video streaming from Adobe's servers.
 
Tip: The XML format and video requirements have not changed from the Flash CS3 version of the video gallery application. You can plug your Flash CS3 XML and video assets into the updated template without making changes.
 
 
Step 4: Test the movie
Return to FlashVideoGallery.fla in Flash and select Control > Test Movie to export the SWF file and see how the new FLVs you've added to the gallery work in the application.
 
 
Step 5: Troubleshooting
Generally, if you run into challenges while working with the source files, it will be during the initial implementation or during the uploading of the application to your server.
 
If you have a problem while getting the files to run locally, go back to the text editor and Flash CS4 to check your XML file and FLA file assets. The loading screen obscures the user interface until all the thumbnail videos have loaded. If the loading screen seems to freeze, this is an indication that one or more of the videos isn't loading. During authoring, the easiest way to check on the state of things is to disable the Loading layer on the main Timeline of the FlashVideoGallery.fla file. Removing the loading screen will allow you to see which videos are not loading. From there you can check the specific location in the XML and verify that the file name and location match.
 
If the files run locally, but do not work when uploaded to the server, this usually indicates that a file is missing from the upload or the server isn't configured with the FLV MIME type. To test the file while running from a server, you can use the new URL variables feature to run the application in debug mode. When the debug mode is turn on, the loading screen does not appear, which enables you to see which videos are loading. Debug mode only works when viewing the application from a server (see the next section for notes on using the URL variable feature).
 
If text links and labels don't appear, this would hint that the XML file didn't load. If the links and labels appear, but none of the thumbnails load, this would hint that the server isn't recognizing the video's MIME type. In this case, you would contact your server administrator to add the MIME type. If a few individual videos are not loading, this would suggest that they weren't uploaded or that there is a problem with the file naming.
 
If you have problems streaming with Flash Media Server, check your video paths in the Settings.xml file (filenames are case-sensitive) and then make sure the Adobe-supplied main.asc file is in your application directory. Finally, check to see if the application needs to be restarted in order to initialize the main.asc file.
 
 
Initializing the application using the URL parameter feature
One of the new updates to the video gallery source files is the ability to configure parameters through the HTML page's URL. This enables you to initialize variables in the application while it loads without using other, more complex methods. Three parameters are available that allow you to launch the application in debug mode, launch the application with a specific video detail playing, or route the settings XML file to a different file of your choice.
 
URL variables are easy to use and can be easily generated in the HTML environment. Variables appended to a URL string appear as a series of name-value pairs following a question mark (?):
 
http://www.mysite.com/FlashVideoGallery.html?video=1
The sample above uses the video parameter to signal the application to display the detail video for the second video in the list (the index counting starts at 0, so the video at index 1 is actually the second video). Setting the video parameter triggers the detail view to play immediately after the thumbnails complete loading.
 
http://www.mysite.com/FlashVideoGallery.html?debug=1
The sample above uses the debug parameter to signal the application to launch in debug mode. Debug mode simply hides the loading screen, so you see which videos are loading or not while the application is downloading from a server.
 
http://www.mysite.com/FlashVideoGallery.html?settings=MyCustomSettings.xml
The sample above uses the settings parameter to signal the application to use a settings XML file other than the default file (Settings.xml). This feature can be useful if you need to switch between localized files or files containing content configured for specific users.
 
http://www.mysite.com/FlashVideoGallery.html?video=20&debug=1&settings=MyCustomSettings.xml
The sample above shows how you can use an ampersand (&) to separate multiple values.
 
Note: You can only use the URL parameter feature while viewing the HTML file from a server. Launching the HTML file from the desktop with URL variables appended will cause a "page not found" error in your browser.
 
Tip: The URL parameter feature requires a JavaScript function on the HTML page which the SWF file uses to retrieve the href property of the JavaScript location object. If you overwrite the supplied HTML file during publishing, the JavaScript function will be removed and the feature will cease to work. If this happens, open the supplied HTML file and copy the JavaScript function at the top of the code to your HTML file.
 

 
Where to go from here

By examining the files that constitute the structure of the Flash video gallery application and by identifying the features and architecture used within it, you can get a better understanding of how you can use ActionScript 3 and the features in Flash CS3 Professional to build engaging applications. Use the gallery source files to display your own video clips, or use the application as a springboard for new projects.
 
For helpful advice on common pitfalls to avoid when building your first Flash application using ActionScript 3, read Migrating from ActionScript 2.0 to ActionScript 3.0: Key concepts and changes.
 
Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License+Adobe Commercial Rights
 
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License. Permissions beyond the scope of this license, pertaining to the examples of code included within this work are available at Adobe.