Understanding the project layout

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

Figure 1. Flow of files and content associated with the template

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

Figure 2. Default view of the template assets included in the supplied file

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:

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

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.

Page 2 of 5

Previous Page

Next Page