Showcase and discover digital art at yex

Follow Design Stacks

Subscribe to our free newsletter to get all our latest tutorials and articles delivered directly to your inbox!

Understanding the Project Layout

Understanding the Project Layout

This section provides an overview of the process for using the template and gives you a place to start. If you already feel comfortable with the template layout and general concepts, you may want to jump to the following sections for more details. For anyone new to using Flash templates or unfamiliar with the supplied file structure, this section is for you.

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

  • FLV: This acronym refers to the Flash video format used by Flash Professional 8 and Flash Media Server.
  • FLVPlayback component: This is the next-generation FLV playback control available in Flash Professional 8. The FLVPlayback component includes many improvements in workflow, skinning options, and ActionScript API.
  • Cue points: You will add cue points at various locations in the video so that you can synchronize content displays with those points or navigate to those points by button click. You can embed cue points in the FLV using the Video Import Wizard or the Flash Video Encoder. You can also create cue points using ActionScript or the FLVPlayback cuePoints parameter. Embedded cue points are more accurate and can be accessed with more options in the ActionScript API. Either type of cue point will work with this template.

Before You Start

One of the key concepts repeated throughout the template is the concept of sections within the video. The big picture is that you are going to choose cue points within a video and use them for synchronization. The structure of the Flash template mirrors these cue points in the following ways:

  • Navigation buttons match the cue points in the video
  • Sections of text and animation content match the cue points in the video
  • FLVPlayback component settings define the cue points and control the automated navigation through the content

For best results, create a quick outline of the sections you want to show in your movie. The goal during this planning stage is to figure out where to divide your video. What locations will your viewer logically want to jump to? Then figure out what text, image, and animation content you want to show for each section. What content can you use to reinforce the video and provide visual interest?

Understanding the Supplied FLA File

The SynchronizedVideoPres.fla file contains a fully functional example of the working template. The content in the FLA file matches the content seen in the preview on the first page of this article. Take a moment to explore the FLA file.

Download the SynchronizedVideoPres.fla file from the first page if you have not done so already and then open the file in Flash Professional 8.

Notice the Screen Outline pane that appears on the left side of the Stage. Screens provide an easy way to structure hierarchical content. In addition, they work as containers that the FLVPlayback component and FLVPlayback behaviors can act upon to create the synchronization of video and content.

The Synchronized Video Template contains three sections of screens (see Figure 1):

  • background: Background screen that contains all the background colors, graphics, and text that you want to display throughout your presentation.
  • controls: Screen containing the video and navigation buttons that appear throughout your presentation. The controls screen also contains the code that powers the synchronization in the template. You can find the code on the Actions layer. It consists of four sets of functions that respond to events from the video component and clicks from the navigation buttons.
  • introduction, tellAFriend, trialDownload, and so on: Five screens below the controls screen that contain the text and graphics you might want to display as the video plays.

    Screens in the template

    Figure 1. Screens in the template

The content on the background screen and the controls screen appears continuously while the movie plays. On the background screen, you can customize the user interface graphics. On the controls screen, you can customize the buttons and update the media component parameters. The FLVPlayback component is the mechanism that loads and displays the FLV file. It acts as a center point and controller for the presentation.

The five subscreens below the controls screen are shown one at a time while the video is playing. To add your own collection of subscreens and associate them with cue point sections in the video, enter the screen names into the cue point parameters for the FLVPlayback component on the controls screen.

You can modify the presentation by going to the screen containing the content you want to update and making changes there. It’s a little like modifying the slides in a Microsoft PowerPoint presentation except that you have many more animation capabilities.

Screens Versus Frames

This template is built in a screens document for the ease of use of explaining and developing synchronized sections of content. Screens have built-in paging controls and are very simple to synchronize with video.

You can also use the template code, located on the Actions layer of the content screen, to power a frames-based Flash document. In this case, the template will navigate to frames labeled with the same names as the cue points. If you would like to try this, copy the code from this template into a standard Flash file and switch the value of the uses_screens variable to false. From there you will set up the document much the same way as described here, but in this case you will spread the content out horizontally across a timeline on labeled frames.

First Steps to Using the Template

If you are new to using templates or just want some direction, follow these steps to get started:

  1. Create a folder on your hard drive to store your copy of the presentation FLA file and your video.
  2. Duplicate the supplied SynchronizedVideoPres.fla file and rename it. Place the new file in the folder you just created. Note that it’s a good idea not to overwrite the original file so that you can refer back to the working sample as you move forward.
  3. Create your video, convert it to the FLV format , and place the FLV file in a relative position to the FLA file (usually next to the FLA or in a subfolder that is located in the same folder as the FLA file). Make a note of the filename and path relative to the FLA file. You will enter this information into the FLVPlayback component’s parameters later to load the file.
  4. Open the FLA file in Flash and start editing. Note that because the supplied file already contains a working sample, you will be adding and removing content as you customize the presentation. Read the following sections for details on how to edit from here.


Understanding the Project Layout

Understanding the Project Layout

In this version of the template, the content is distributed on layers on the main Timeline. This simplifies things and provides for easy access to all the editable features in a single location. Take a quick look at the main Timeline of the template shown in Figure 1.

Layers on the main Timeline of the template file

Figure 1. Layers on the main Timeline of the template file

The first thing to notice is that the main Timeline is divided into sections, at least conceptually, by the two layer folders. The Controls folder contains the video controls, video background graphic, and navigation buttons. You will edit these items to change the video and look and feel of the controls. The Background graphics folder contains the logos and background graphics, which make up the general look and feel of the template. You will edit these items to add your own logo and company branding. The Actions layer contains a few lines of ActionScript code, which you don’t necessarily need to edit.

In addition to clearly laying out the pieces of the template, the layer folders enable you to lock or hide easily the sections of the template that you are not currently working on.

Exploring the Symbols in the Library

While you’re browsing through the file, open the Library panel (Window > Library) and take a look at its contents (see Figure 2).

Assets in the template's document library

Figure 2. Assets in the template’s document library

The first thing to notice is that there are only two custom-built symbols in the Library. The first is the CueNameButton movie clip in the Controls folder. This is used for the navigation buttons, which sit to the left of the video display. The second is the VideoFrame movie clip, which creates the background for the video display. All of the other symbols are gathered from the Flash Professional 8 Components panel in the new FLV Playback categories.

Note: The FLV Playback Skins folder contains customizable skin graphics for each of the video controls.

Exploring the Flash Professional 8 Components Panel

The last stop on the project overview is the Components panel. One of the major upgrades in Flash Professional 8 is the improved video features. The Components panel has been expanded to contain two new categories: FLV Playback – Player 8 and FLV Playback Custom UI (see Figure 3).

Video controls in the Flash Professional 8 Component panel

Figure 3. Video controls in the Flash Professional 8 Component panel

Open the Components panel (Window > Components) and take a look at the two new video categories. The Flash team put a lot of effort into making the new FLVPlayback components easy to edit and customize. All of the controls in the template come from the Components panel except for the navigation button, which I designed to complement this set.

When comparing the Components panel to the Library, note that the template does not use every video control available. You will be able to add and remove controls as desired.