Flash Article

Flash video template: Video presentation with navigation

Understanding the project layout

In this version of the template, the content is distributed on layers on the main Timeline. This simplifies the customization process and provides easy access to all the editable features in a single location. Take a quick look at the main Timeline of the Flash video template (see Figure 2).

Figure 2. Layers on the main Timeline of the Flash video template file

Notice that there is only one frame in the Timeline. The content structure is organized into five layers:

• Actions: Contains a small amount of code (you can make some minor edits here)
• Text: Contains the title and copyright text (you can change the text and add whatever written content you'd like here)
• FLVPlayback: Contains the FLVPlayback instance, the custom UI controls, the video background, and the blue border around the video
• Buttons: Contains five instances of the CueNameButton symbol with static text typed over them
• Background: Contains the graphics that make up the background

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

Figure 3. Assets in the Library of the Flash video template

Notice the CueNameButton movie clip in the Skins folder. This symbol 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. Most of the other symbols are gathered from the Components inspector in Flash CS3 Professional.

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

Exploring the ActionScript supplied in the template

There are two places where ActionScript appears in the template: Frame 1 of the main Timeline and Frame 1 of the CueNameButton timeline. You will make some minor edits to the actions on the main Timeline, but you will not need to edit the button's code. The updates to ActionScript 3.0 are minor, but are different enough that they merit some explanation.

The following code appears on the Actions layer on the main Timeline:

import flash.events.*;
import fl.video.*;
 
//-----------------
// Video control assignment
//-----------------
// Use the skin assignment properties of the FLVPlayback
// instance to associate the controls with the player.
 
display.playPauseButton = play_btn;
display.stopButton = stop_btn;
display.seekBar = seek_bar;
display.volumeBar = volume_bar;
display.muteButton = mute_btn;
display.fullScreenButton = full_btn;
 
//-----------------
// Video event handling
//-----------------
// Create an event handler function to find  
// the nearest cuePoint to the end seek time
function scrubHandler( event:VideoEvent ):void
{
   var cue = display.findNearestCuePoint(event.playheadTime);
   navigate(cue.name, false);
}
display.addEventListener(VideoEvent.SCRUB_FINISH, scrubHandler);
 
// Create an event handler function to catch the
// cue event from the FLVPlayback instance.
 
function cuePointHandler( event:MetadataEvent ):void
{
   // On cuePoint, look for a button named with the cue name
   // plus "_btn". If it exists, then call its select method...
   navigate(event.info.name, false);
}
display.addEventListener(MetadataEvent.CUE_POINT, cuePointHandler);
 
//-----------------
// Navigation / screen state
//-----------------
 
// Store the current button name
var currentBtn:*;
var currentBtnName:String = "";
 
function navigate( cueName:String, seekTo:Boolean ):void
{
   // Handle previous button
   var prev = getChildByName(currentBtnName);
   if( prev != null ){
      currentBtn.reset();
   }
   // Handle new button
   var next = getChildByName(cueName+"_btn");
   if( next != null ){
      currentBtn = next;
      currentBtn.select();
      currentBtnName = cueName+"_btn";
   }
   // Seek to Cue Name
   if( seekTo == true ){
      var c = display.findCuePoint(cueName);
      if( c != null ){
         display.seekSeconds(c.time);
      }
   }
}
 
//-----------------
// Button event handling
//-----------------
 
// introduction_btn
function introductionHandler( event:MouseEvent ):void
{
   navigate("introduction", true);
}
introduction_btn.addEventListener(MouseEvent.CLICK, introductionHandler);
 
// overview_btn
function overviewHandler( event:MouseEvent ):void
{
   navigate("overview", true);
}
overview_btn.addEventListener(MouseEvent.CLICK, overviewHandler);
 
// aim_btn
function aimHandler( event:MouseEvent ):void
{
   navigate("aim", true);
}
aim_btn.addEventListener(MouseEvent.CLICK, aimHandler);
 
// formats_btn
function formatsHandler( event:MouseEvent ):void
{
   navigate("formats", true);
}
formats_btn.addEventListener(MouseEvent.CLICK, formatsHandler);
 
// summary_btn
function summaryHandler( event:MouseEvent ):void
{
   navigate("summary", true);
}
summary_btn.addEventListener(MouseEvent.CLICK, summaryHandler);

Note: The only part of this code that you will edit will be the mouse event handlers at the bottom. You will add and remove mouse event handlers to match the buttons and cue points in your movie.

The following code appears on the Actions layer on the CueNameButton timeline:

import flash.events.MouseEvent;
 
//-----------------
// Variables
//-----------------
 
var current:Boolean = false;
 
//-----------------
// Selection from an outside source
//-----------------
 
function select():void
{
   current = true;
   gotoAndStop("down");
}
 
function reset():void
{
   current = false;
   gotoAndStop("up");
}
 
//-----------------
// Mouse events
//-----------------
 
// rollOver
function rollOverHandler(event:MouseEvent):void{
   if(!current){
      gotoAndStop("over");
   }
}
// rollOut
function rollOutHandler(event:MouseEvent):void{
   if(!current){
      gotoAndStop("up");
   }
}
addEventListener(MouseEvent.ROLL_OVER, rollOverHandler);
addEventListener(MouseEvent.ROLL_OUT, rollOutHandler);

Note: The code above shows how to make a movie clip into a button in ActionScript 3.0. The button listens for its own mouse events and navigates to labeled frames in the Timeline to show button state graphics.

Page 2 of 5

Previous Page

Next Page