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).

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).

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.

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.

Page 6 of 7

Previous Page

Next Page