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.

Page 7 of 7

Previous Page