Web video template: Showcase website for personal video

Additional Requirements

Note: The source files have been updated for Flash CS4 Professional with the following additions:

• Updated look and feel
• Refined ActionScript structure using ActionScript 3 classes
• Option to load ActionScript cue points from the settings XML file
• Fixed cue point and navigation glitches

This video template provides a simple way to combine multiple videos into a video showcase. The showcase is easy to edit and comes complete with visual subnavigation and captions for chapters within the videos. The template could be used for anything, but it has a great set of features geared toward displaying your personal video collection. This article provides an overview of the process required for customizing the template.

Preview the showcase website for personal video template

This section is for anyone who would benefit from a better understanding of the project files and general process for working with this type of template. If you're already comfortable with the gist of the project, you can skip to the next section and start customizing the supplied files.

You should be familiar with the following terms used throughout this article:

• FLV: This acronym refers to the Flash Video (FLV) format.
• F4V and MPEG-4: This acronym refers to Flash Video 2.0 (F4V), the Adobe Media Player format for H.264 video. F4V and MPEG-4 formats are used for high-definition video and are supported in Flash Player 9,0,115 and later.
• FLVPlayback component: The FLV playback control available in the Flash authoring tool. The ActionScript 3 FLVPlayback component includes many improvements in workflow, skinning options, and the ActionScript API.
• Cue points: These are markers in FLV video that are used for synchronization with the SWF file.
• Progressive video: This is an FLV file that must be downloaded to the browser's cache before it can be displayed in Flash Player.
• Streaming video: This is an FLV file that is streamed down from a server running Flash Media Server such that it can be played immediately while it is being downloaded.
• Sections: There are five sections in the presentation; each section is represented by its own content screen containing a video clip, captions, and navigation buttons.
• Chapters: Each section's video clip contains cue points that mark chapters within the video.

Tip: For the purposes of this template, navigation cue points should be embedded during encoding for progressive video download. Doing so will ensure accurate navigation when the chapter buttons are used.

Understanding how the template works

This version of the video showcase uses a template approach to address the task of displaying multiple videos. Although you will display several different sections of video, you will build only one template page to accomplish the task. By separating the video, image, and text content from the Flash movie (SWF file), you can reuse a single page layout by simply swapping out its content (see Figure 1).

So where does the content go? The content sits alongside the SWF file in folders similar to the way a website would store its files. When the SWF file plays in a browser, it loads an XML (text) file that supplies the showcase with a definition of the video sections. From there the SWF file uses ActionScript to load the text, images, and videos from their external locations.

The benefit of using this type of approach is that you can easily edit and change the content that the showcase displays without having to edit the FLA file. That means that a non-Flash developer can contribute to your site. Another benefit is the ability to switch the XML definition file prior to the SWF file being loaded. That means that you could localize text content to different languages or show different sets of content based on the target audience.

The general flow of the development process goes like this:

1. Decide how many video sections to show and how many chapters (cue points) within each section to show.
2. Encode your section videos and create the images to be used as the chapter buttons.
3. Update the XML definitions file to include your video sections and related content.
4. Edit the FLA file to create the look and feel of the application and lay out the buttons and controls as desired.

Understanding the FLA file

The FLA file is constructed very simply. In this template the content exists externally to the SWF, so the resulting SWF file size is relatively small. You'll edit the assets placed on frame 1 of the main timeline to create the look and layout that you're after (see Figure 2).

Understanding the XML file

An XML file is a text file saved with an .xml file extension. XML files do not contain any programming logic or layout logic; they simply contain relationships of data that web applications use to transfer text and information back and forth between the server and the local computer.

XML files are composed of user-defined pairs of tags, similar to HTML tags. The relationship of tags and the nesting of those tags is what defines the structure of the data being described. For the purpose of using this template, you will learn to write the XML file in a specific way to describe your video sections.

The following is a simplified example of the XML format used in the template:

Notice that a tag is indicated by the word appearing between the brackets (<>). Each pair of tags consists of open and close tags that surround the content being described. The close tag is the same as the open tag, except that it contains a forward slash. The pair of tags and everything between them is referred to as a node.

The XML file always contains a root node, in this case "showcase," that contains all the other nodes in the document. The nesting of nodes thereafter is what creates the relationships between the data. For example, the XML above describes a list of video sections. Two sections are described in this list. Each section has a title value and a path to a video.

Tip: The easiest way to work with formatting the XML file is to start by editing the file supplied with this template.

Before you start

It may sound obvious, but once you're familiar with the features of the template, you should stop and take a minute to plan out your customizations. How many video sections will it have? How many chapters within each section? How will you create the thumbnail images? What graphic customizations do you want to make? And so on...

Spend some time brainstorming so that the process will be easier during development.

Adding your own graphics and branding to the showcase template is easy to do. Because the background graphics are only loaded once, regardless of how many video chapters are displayed, you have some freedom to add content to the background as desired. Have some fun changing the graphics by adding your own background graphic, logo, and custom content. Add some text and maybe a title if it suits your presentation. Feel free to change the canvas size, number, and position of the buttons, and anything else you can think of to spice things up.

This page is intended to help you understand how to customize the look and feel of the template assets and change their layout on the stage.

Change the background graphics and text

One of the easiest ways to make the template your own is to change the background graphics. It's usually a good idea to start the editing process in Flash with a good idea of the results you'd like to produce. Sketch out your interface design ideas or work in a graphics program to flesh out your approach.

To change the background, follow these steps:

1. Open VideoShowcase.fla in Flash CS4 Professional.
2. Select the Background layer and lock all other layers.
3. Edit the background graphics as desired.
4. To replace the background panel image, select it and press Delete on your keyboard. Draw a new graphic or import an image by choosing File > Import.

Feel free to add layers and graphics as needed to the Timeline. If you extend the Timeline beyond a single frame, make sure that all the controls appear throughout the length of the Timeline.

Change the FLVPlayback controls

This version of the showcase uses the FLVPlayback components for the display of the video. This feature makes development and ActionScript integration fairly straightforward and provides lots of possibilities for extending the template. The FLVPlayback component is the primary control used to display video. The component can display progressive video or streaming video from a Flash Media Server.

To change the video controls, follow these steps:

1. Open VideoShowcase.fla in Flash CS4 Professional.
2. On the main timeline, select the FLVPlayback layer and lock all other layers.
3. To add your own custom arrangement of video controls, first delete any controls currently on the screen that you do not want.
4. Open the Components panel and drag control components from the Video folder to the stage (see Figure 3). Place the new instance wherever you like and name each instance in the Properties inspector.

5. Select the Actions layer and open the Actions panel to register the video controls with the FLVPlayback instance. The FLVPlayback component contains properties that match each type of control. When you assign the instance name of the control to the related FLVPlayback property, the control instance becomes associated with the video. For example, if you added a buffer bar instance named myBuffer, you would write the following code on the Actions layer to register the buffer bar instance with the video:

Tip: The UI component will automatically associate itself with the FLVPlayback component when you drag it onto the Stage. The step above should be used to explicitly assign instance names to the FLVPlayback component, but it's not a necessary step in this case.

Feel free to add and remove FLVPlayback UI components as desired. Be aware that some components can conflict with each other when used within a multifunctional template such as this. Experiment until you find the right mix of controls.

Please see my article, Skinning the ActionScript 3 FLVPlayback component, for more information.

Change the section and chapter buttons

The template contains two types of buttons for two types of navigation within the showcase: section buttons and chapter buttons. Section buttons define the different sections (FLV videos) available in the showcase. Clicking a section button loads a new video and chapter information to the screen. The chapter buttons provide a visual metaphor for navigating the cue point sections within the current section. Clicking a chapter button jumps to the related cue point time in the video.

Since the template's content is dynamically driven, you need only edit a single instance of either button to effect a change in all the instances. Then add and remove instances on the stage to create the number of desired buttons. Feel free to move the buttons around and change their appearance as much as you like.

To change graphics included in the buttons, follow these steps:

1. Open VideoShowcase.fla in Flash CS4 Professional.
2. Open the Library panel if it's not already open and double-click the Section Button symbol to enter its editing mode (see Figure 4).

3. Edit the Text, Background, and Border layers as desired. If you change the text field, make sure it still has the instance name label_txt.
4. Repeat the same editing process for the ChapterButton located in the Library (see Figure 5).

To change the layout and number of buttons, follow these steps:

1. Return to the main timeline if you're not already there.
2. The section buttons appear as the long rectangular buttons in the top left of the screen. Add and remove button instances as desired. Place the instances anywhere on the stage that you like.
3. Name each button instance from the top down with the naming convention section_[n]. For example, if there are three buttons, from the top down their instance names would be section_1, section_2, and section_3.
4. The chapter buttons are the image-filled buttons on the lower left corner of the screen. Add and remove chapter button instances as desired. Place the instances anywhere that you like.
5. Name each chapter button instance with the naming convention chapter_[n]. For example, if there are three chapter buttons, their instance names would be chapter_1, chapter_2, and chapter_3.

Change the caption window

The caption window appears when the caption button is clicked. It displays caption text associated with the current chapter.

To change the caption window, follow these steps:

1. Open VideoShowcase.fla in Flash CS4 Professional.
2. Open the Library panel if it's not already open and double-click the Caption Window symbol to enter into its editing mode.
3. Hide the Mask layer and unlock the Sliding panel layer to edit the caption text fields (see Figure 6). If you change the caption text fields beyond formatting, make sure they still contain the expected instance names; title_txt and caption_txt.
4. Edit the timeline as desired, but try not to change the actions or frame labels on the Actions layer.

Tip: Figure 6 shows a classic tween built along the Timeline in Flash CS3. You can work with Flash CS4 motion tweens or any of the new Flash CS4 animation effects in your work. See the Animation Learning Guide for Flash for more details.

Change the ActionScript code

The ActionScript code that powers the template is located in external ActionScript 3 class files. You can find the files in the code folder in the supplied assets. In general, you won't need to edit the code, but you may find that making small changes is necessary. One of the most common changes would be to switch the cue points between the embedded type or ActionScript generated type.

To change the importCuePoint setting, follow these steps:

1. Open VideoShowcase.as in Flash CS4 Professional or in a text editor.
2. Change the importCuePoint property to true if you want the cue points to be generated dynamically. Set the property to false if you want the embedded cue points in the video to be used. If embedded cue points exist, this property should be set to false.
3. Save the file and publish the SWF file from the VideoShowcase.fla file.

Now that you've customized the template to suit your needs, you need to produce the video and image content to display in the showcase. The process is fairly straightforward, but some experience in FLV encoding is required for best results. If you're new to creating video for Flash CS4, please see the Video Learning Guide for Flash for a more detailed overview of the encoding process.

This page provides an overview of the process necessary for creating video and images for the template.

Encode your section FLV files with embedded cue points

Once you have edited your source video, encoding the source file to FLV format is a relatively easy process. The process itself does not require a lot of experience, but knowing the proper encoding settings to use can be a challenge. In general the default settings will work, but you'll see a difference in your video performance if you learn the ins and outs of FLV encoding.

To use Adobe Media Encoder to embed cue points, follow these steps:

1. Adobe Media Encoder is installed onto your computer at the same time as Flash CS4 Professional. Open Adobe Media Encoder from your Start menu.
2. Click the Add button and browse for the video(s) you'd like to encode. They should appear in the source file list.
3. With the source file selected in the list, choose Edit > Export Settings. The Export Settings dialog box opens. Click the Cue Points tab to add navigation cue points (see Figure 7).
4. Drag the slider to the time that you want to embed the cue point and then click the plus (+) button to add a cue point. Enter a name and set the Type field to Navigation for the cue point in the cue point list.

   Also, when a cue point is selected in the list, you can select the cue point time marker below the timeline and use the arrow keys to move the time to a whole second or the exact time you're after.

5. Repeat this process to embed a cue point for each chapter within your video. It's a good idea to write down the names and times of the cue points as you will need that information later.
6. Complete your settings by clicking through the tabs and then click OK. The dialog box closes.
7. Click the Start Queue button to encode the video to FLV.

For progressive video, cue points have to be embedded in the video at the time of encoding to ensure accurate navigation to those points during playback. Video streams served from a Flash Media Server do not require the cue points to be embedded.

Tip: One of the new features in the CS4 version of this template is the ability to load the cue point times from the Settings.xml file as ActionScript cue points. Switch the importCuePoints property to true in the VideoShowcase.as file and then export the SWF file to activate this feature.

Create your chapter images

The next step is to create the thumbnail images used for each chapter button. You can either capture still frames from the cue point times in the video, or create images containing custom text and graphics.

To create a chapter image, follow these steps:

1. One quick way to create your chapter images is to take screen shots of the video display while working with the cue point embedding controls in Adobe Media Encoder.
2. Follow the same steps as described in the section above to add or edit cue points.
3. While in the cue point editor, take a screen shot of the still image seen at that cue point time. (Note that you'll need screen capture software installed on your computer to take the screen shot.)
4. Save the image file and open it in an image editor.
5. Change the image size to 56 × 47. This is the default size of the chapter button. Of course, use whatever size you've defined if you're working with a customized chapter button.
6. Choose File > Save As to save the thumbnail image. It's a good idea to save it as a copy so you can later edit using the original full size image if necessary.

You may find it easier to extract still shots from the source video using a video editing program, or you may want to use different images that are not stills. All of these approaches will work.

Prepare your website file structure

Once you have your video and images ready to go, you need to place them in a folder along with the SWF file and Settings.xml file. Creating a well-organized file structure for the website will make it easier to edit and maintain.

To create the file structure for the showcase, follow these steps:

1. Collect the videos you've produced for your sections and move them to the video folder in the supplied files.
2. Collect the chapter images and move them to the images folder in the supplied files.
3. While you're confirming the file structure, make sure that the Settings.xml file sits next to the SWF file and assets folders in the application directory. All files seen in Figure 8 are uploaded to the server except for the FLA file, which is for editing only.

The final stop before testing your work is to create (or update) the XML configuration file. The XML file is the project definition that ties everything together. It supplies text and paths to videos and images to the SWF file. This information is supplied separately, so a single template can be reused for any number of sections. This approach also creates a file structure that is easier to update, edit, and change. For example, you could create localized versions of the template. Let's say that half your family speaks Spanish and the other half speaks English; you could easily create two versions of the site without having to redo your work.

This page is intended to give you the information needed to work with the XML structure expected by the template.

Create your XML file

It's probably easiest to work over the top of the supplied XML file, but in the interest of describing how to create an XML file as a Flash data source, here's a complete overview.

To create an XML file, follow these steps:

1. Open a text editor, like Dreamweaver, and create a new text file; select XML text file if your text editor gives you an option.
2. Save the file next to the SWF file. Name the file Settings.xml.
3. In your text editor, add the open and close tags of the root node to start the file:

Add your video chapters to the XML definition

The big picture is that the XML file contains a list of section nodes at the root of the document. The section nodes define the video sections to be displayed in your showcase. The number of section nodes should match the number of section button instances you have included in your Flash template.

To create a section node, follow these steps:

1. Nested between the root node tags, you will add any number of section nodes.
2. Add a set of section nodes for each video section included in your showcase. The following example shows a configuration containing four sections (four videos):

Add a title and video path to each chapter

A section node is composed of three elements; a title, a video path, and a list of cue points for synchronization. Continue to write the XML by adding a title node, a video node, and a cue points node.

To create the three nodes that describe a section, follow these steps. From here on, the process repeats within each section node. One section is shown below for brevity.

1. Add a title, video, and cue points nodes wherein the title is used for the section button label, the video value contains the source for the FLVPlayback component, and the cue points contains values used by the chapter buttons:

2. Repeat the process for each section node.

Add cue point definitions for each chapter

Finally, you'll fill in the cue point information in the cue point nodes to complete the showcase definition. The chapters within each section use the cue point values to set the chapter navigation.

To create the definition of the cue point, follow these steps:

1. Add a list of cue point nodes nested within the cue points node, but not within each other. One cue point is shown below for brevity.
2. Add a title, time, image, and caption node to each cue point node:

3. Repeat the process until you have a cue point definition for each chapter in each section.

Tip: For best results when using progressive video, the FLV files should have navigation cue points embedded in them that correspond to each cuepoint entry in the XML file. The time values in the XML should exactly match the cue point times embedded in the video—and should be translated into seconds in the XML. If you don't embed Navigation cue points, then make sure you set the VideoShowcase class's importCuePoints property to true to signal the application to generate ActionScript cue points from the settings XML file.

Please see the Settings.xml file in the supplied files for a complete example of the working XML data source.

Now you're ready to test your showcase application. Export the SWF file to see the resulting work. If the showcase does not display properly, it's most likely a problem with the XML file. Look back through your work and compare it to an unaltered version of the supplied files. Good luck!

Where to go from here

Working with this template's structure is a good exercise in building dynamic, reusable video templates. As a next step, you might try creating multiple XML definition files and routing to them based on a FlashVars parameter. This is a great trick for creating localized versions of the site in different languages or for displaying different sets of content based on the intended audience.

For further exploration, check out the other video templates and ActionScript 3 resources available in the Flash Developer Center. Also check out the following articles for related topics:

• Skinning the ActionScript 3 FLVPlayback component
• Controlling video with ActionScript 3 FLVPlayback programming
• Deconstructing the ActionScript 3 Flash video gallery application