13 July 2009
This article is geared toward beginning to intermediate developers interested in working with multiple videos in Flash CS4 Professional. General experience working with Flash Professional and FLV video is advised.
Note: The source files have been updated for Flash CS4 Professional with the following additions:
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:
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.
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:
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).
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:
<showcase> <section> <title>ATV Riding</title> <video>video/ATV.flv</video> </section> <section> <title>Jetskiing</title> <video>video/JetSki.flv</video> </section> </showcase>
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.
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.
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:
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.
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:
flvDisplay.bufferBar = myBuffer;
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.
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:
To change the layout and number of buttons, follow these steps:
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:
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.
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:
trueif you want the cue points to be generated dynamically. Set the property to
falseif you want the embedded cue points in the video to be used. If embedded cue points exist, this property should be set to
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.
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:
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.
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.
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:
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.
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:
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.
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:
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:
<showcase> <section></section> <section></section> <section></section> <section></section> </showcase>
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.
<showcase> <section> <title>ATV Riding</title> <video>video/ATV.flv</video> <cuepoints></cuepoints> </section> </showcase>
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:
<showcase> <section> <title>ATV Riding</title> <video>video/ATV.flv</video> <cuepoints> <cuepoint> <title>Chapter 1</title> <time>1</time> <image>img/atv_1.jpg</image> <caption>Caption text for chapter 1.</caption> </cuepoint> </cuepoints> </section> </showcase>
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!
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:
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.