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

   

   Figure 2. ActionScript 3 files in the fvg package

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

   

   Figure 3. List of assets in the FlashVideoGallery.fla source file

   (+) View larger

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 filter2 attributes 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.

Page 3 of 7

Previous Page

Next Page