2 June 2009
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:
Changes to the video gallery include:
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.
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:
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:
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:
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.
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.
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.
To view the Action Script 3 files:
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:
Note: FlashVideoGallery.as is the primary application file. It initializes the assets in the gallery and coordinates events as they occur.
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.
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:
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:
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:
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:
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:
Here's a sample of a label node:
<label name="title"><![CDATA[ActionScript 3 Flash video gallery]]></label>
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
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
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.
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.
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.
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).
The video gallery application uses the indeterminate bar for visual feedback at three locations in the FLA:
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.
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:
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).
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:
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.
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:
Adobe has a number of resources already posted which describe these topics in detail. For more information, please visit the links below:
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:
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.
Refer to the following resources for more information on Adobe Media Encoder:
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.
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:
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.
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.
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.
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).
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:
Notice that the script contains the logic to:
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).
To open the Thumb control movie clip:
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:
layoutfunction. At this point, the XML has been loaded and the class can build the layout based on the user-defined settings.
Notice that the initialization code does the following:
setDataon each thumbnail instance and sets the unique data for that thumbnail as supplied by the XML file
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.
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:
Notice that the script contains the logic to do the following:
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:
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:
showDetailfunction. 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.
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.
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.
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.
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:
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:
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:
To adjust the XML settings:
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.
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.
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.
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 (?):
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.
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.
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.
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.
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.
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.