By Dan Carr
 
Created
25 January 2011
 

Requirements

 
Prerequisite knowledge

You should have previous experience encoding FLA video and understand the basics of using the FLVPlayback component and ActionScript 3. For additional information, refer to the resources provided in the Getting started section.
 
 
 
Note: The sample files are in CS5 FLA format. Flash Professional CS5 includes the updated FLVPlayback with Accessibility component.
 

 
User level

Intermediate
 

 
Required products

 
Sample files

This article provides an overview of programmatically controlling the ActionScript 3 FLVPlayback component, which is included in Adobe Flash Professional CS5 as a built-in solution for displaying video on the web. The FLVPlayback component can be manipulated manually at author time or dynamically at runtime using the component's ActionScript programming interface. To take full advantage of all the component's features, you have to dive into the dynamic approach.
 
In Flash Professional CS5 you can add code to control your video player by using the code snippets in the video section of the Code Snippet panel or by directly writing code into the Actions panel. This article focuses on making simple adjustments to code that you'll copy and paste into the Actions panel. By using the samples and simple instructions for customization, you'll be able to create your own controls that allow you to load, start, seek, and stop one or more videos.
 
Note: The ActionScript 3 version of the FLVPlayback component is available in the Components panel only when an ActionScript 3 FLA file is active. If you open an existing ActionScript 2, the ActionScript 2 FLVPlayback component is displayed in the Components panel along with the Flash MX 2004 Media components. You cannot run ActionScript 3 components in an ActionScript 2 file, and vice versa.
 
If you are using Flash Professional 8 or are working with an ActionScript 2 file, see the previous version of this article, Controlling web video with the ActionScript 2 FLVPlayback behaviors.
 

 
Getting started

This section provides a quick overview of what you'll need to know to begin customizing video playback with ActionScript 3. If you have previous experience using ActionScript 3 and working with FLA video and the FLVPlayback component, then you may wish to skip ahead to the following pages of this article.
 
 
Before you start
Familiarize yourself with the following resources (beginning to intermediate) so that you understand encoding FLV and H.264 video and working with the FLVPlayback component:
 
To follow along with the instructions in this article, you will need to have an ActionScript 3 FLVPlayback component and an FLV or MPEG-4 file to use with the provided code examples.
 
Note: Video files encoded with the H.264 codec can be viewed using the ActionScript 3 FLVPlayback component if viewed in Flash Player 9,0,115 and later. H.264 video support includes a range of MPEG-4 formats: F4V, MP4, M4A, MOV, MP4V, 3GP, and 3G2.
 
 
Understanding the FLVPlayback's ActionScript API
Throughout this article you'll spend time exploring the application programming interface (API) of the FLVPayback component. The component's API is the list of properties, methods, and events that allow you to interact with it in ActionScript at runtime:
 
  • Properties define the characteristics of the video player. For example, setting the source property define the URL of the video and triggers the player to load the file.
  • Methods are functions that cause something to happen. For example, calling the play() method on the video player causes the video to play.
  • Events are timing cues that signal when something is happening. For example, you'll respond to the "complete" event to do something when the video finishes playing.
Understanding the ActionScript API is the first step to understanding how to program with any Flash component. For full details on the ActionScript 3 FLVPlayback API, see the FLVPlayback class section of the ActionScript 3 Reference for the Adobe Flash Platform.
 
For an overview of ActionScript 3 basics, see the Learning ActionScript 3 documentation.
 
 
Understanding the sample files
Download the supplied sample files at the top of this article and uncompress the folder to see working code examples that control a short FLV file. Notice that each of the files is set up consistently with two layers on the main timeline: assets and actions. The assets layer holds the FLVPlayback component (named "display") and the actions layer contains the code. Use the sample files as a guide to compare with the files you create or use them as a foundation to begin building your own project.
 
 
Setting up your own file to run the code samples
You need three things to complete each sample: an FLV file, an FLVPlayback component instance, and an actions layer with a few lines of code. To use the code samples in this article, do the following:
 
  1. Create a folder on your desktop or select a location where you'd like to save your files. Save a copy of your own FLV file or the FLV file from the sample files folder into this location.
  2. Create an ActionScript 3 FLA file in Flash Professional. Save your file next to the FLV file described in the last step.
  3. Rename the default layer 1 to assets.
  4. Open the Components panel and drag an instance of the FLVPlayback component from the Video folder. Because you are working in an ActionScript 3 FLA file, the component available is the ActionScript 3 FLVPlayback component.
    Note: While it is possible to create and position the FLVPlayback component and other UI components programmatically, the components must first be copied from the Components panel to the Library of the current FLA file. For the purposes of this article, I go one step further and suggest that you start your file by dragging an FLVPlayback component to the Stage, naming its instance, and positioning it visually as desired.
     
  5. Place the component on the Stage and resize its dimensions as desired using the Free Transform tool.
    Tip: You can automatically size the video player to the size of the video by selecting it and clicking the source parameter in the Properties panel. Setting the component's source parameter automatically sizes the video player if the Match Source Dimensions option is checked.
     
  6. With the component selected, name the instance in the Properties panel.
    Note: The examples in this article use the instance name display for the FLVPlayback instance. Either use this instance name or change the name in your code to match the instance name of your video component.
     
  7. Create a new layer and name it actions.
  8. Select the keyframe on Frame 1 of the actions layer and open the Actions panel (F9).
  9. Copy the code example from the article or the sample file and paste it into the text editor of the Actions panel.
  10. Update the flvControl variable to the video component instance name you used and update the flvSource variable with the URL of your FLV file.
  11. Export the SWF (Control > Enter) or publish the movie to see the results.
 
Understanding your working files
Once you've run through the previous steps, you'll have a handful of files to work with including the FLV file, possibly an HTML file, the master FLA file, the SWF file, and the skin SWF file (if a skin is used). You will upload all of these files, except the FLA file, to the server for the deployment of progressive video.
 
At this point you should have the background you need to get started. The following sections show you how to set up common functionality using ActionScript 3 and the FLVPlayback component.
 

 
Loading, preloading, and displaying a video

The starting place for loading a video programmatically is usually the same; simply set the URL of the video file in the component's parameters. The ActionScript 3 FLVPlayback component uses the source property to define the URL of the FLV video. You can use a handful of other properties to affect how the video loads and starts to play.
 
This section covers the following topics:
 
  • Importing the fl.video package
  • Loading a video file and setting its autoPlay property
  • Handling preloading
  • Adding a progress bar component
  • Displaying an image overlay when the video is stopped at frame 1
  • Applying a fade transition
See the "Getting started" section in this article if you're wondering how to set up your file to work with these samples.
 
 
Importing the fl.video package
A package is a group of classes that provide functionality to the movie through ActionScript 3 programming. It is common practice to import packages at the start of a script so that the script has direct access to the class names within the package.
 
To start a script by importing the video package, copy and paste the following code to a keyframe on the Timeline containing your component instance:
 
import fl.video.*;
Note: Using the asterisk causes the compiler to import all classes within that package. Think of the asterisk as a wildcard character that will, in this case, import all the packages within the video package. If you do not wish to import all of the classes within a package, you can import a specific class path, such as fl.video.FLVPlayback.
 
 
Loading a video and setting the autoPlay property
Loading a video can be as simple as setting the source property of the component to the URL of the FLV file. Setting the autoPlay property at the same time can be a convenient way of controlling how the video behaves once loaded; setting autoPlay to false stops the video from starting when it's ready to appear.
 
To load a video and set its autoPlay property to false, copy and paste the following code below the import code you just wrote:
 
// Load the FLV and stop it until it is started later display.autoPlay = false; display.source = "myMovie.flv";
This code assumes that there is an FLVPlayback instance on the Stage named display.
 
Note: The FLVPlayback source property requires an HTTP URL to an FLV file, an RTMP URL to a stream, or an HTTP URL to an XML file.
 
 
Handling preloading
The FLVPlayback component pauses display of the progressive video until it is ready for viewing. The general process for handling preloading involves one of two approaches; you either let the video start playing automatically once its ready event has fired, or you pause the video and wait till a greater amount has loaded.
 
One of the keys to smooth video playback is the ability to listen to timing events broadcast from the FLVPlayback component. Notice in the sample below that the event handling process consists of two parts: first a function is created which responds to the event; second, the function is associated with the object broadcasting the event using the addEventListener method. You'll repeat this pattern to respond to any event the FLVPlayback broadcasts.
 
To respond to the video's ready event, copy and paste the following code to the same keyframe containing your ActionScript:
 
function readyHandler(event:VideoEvent):void { // Pause until the video can play till the end display.pause(); display.playWhenEnoughDownloaded(); } display.addEventListener(VideoEvent.READY, readyHandler);
Note: This code pauses the movie during the ready event unless the movie has downloaded enough to play all the way through without interruption.
 
 
Adding a progress bar component
If you're using one of the FLVPlayback's built-in skins, notice that the SeekBar control contains a progress bar that shows the loading progress of the video. If you're not using an FLVPlayback skin, you can display a progress bar while the video is loading using the ProgressBar UI component. Follow the steps below to create a working example.
 
To add a progress bar:
 
  1. Create a new ActionScript 3 FLA file and save the FLA next to your video file.
  2. Rename the default layer 1 as assets.
  3. Drag an instance of the FLVPlayback component from the Components panel to the Stage. Position and resize the component as desired.
  4. Name the instance display in the Properties panel.
  5. Drag a ProgressBar component from the Components panel to the Stage. Position and resize the progress bar as desired.
  6. Name the progress bar instance pb in the Properties panel.
  7. Create a new layer and name it actions.
  8. Select the keyframe on Frame 1 of the actions layer and open the Actions panel. Copy and paste the following code in the text editor:
import fl.video.*; import fl.controls.ProgressBarMode; // Set Variables var flvControl:FLVPlayback = display; var flvSource:String = "Call_to_Action.flv"; // Create event handler functions to control the progressbar function progressHandler(event:VideoProgressEvent):void { var bl:Number = Math.round(event.bytesLoaded/1000); var bt:Number = Math.round(event.bytesTotal/1000); // Update progress... pb.setProgress(bl,bt); } function readyHandler(event:VideoEvent):void { // Remove progressbar when we start playing (optional)... // removeChild(pb); // Remove the comments on this line if desired } // Set progress bar state pb.mode = ProgressBarMode.MANUAL; pb.indeterminate = false; // Add listeners and load the video flvControl.addEventListener(VideoProgressEvent.PROGRESS, progressHandler); flvControl.addEventListener(VideoEvent.READY, readyHandler); flvControl.source = flvSource;
  1. Update the flvSource variable to match the URL of your video file.
  2. Export the SWF (Control+Enter) to see the results.
  3. Save your file.
Another variation for using the progress bar would involve stopping the video from automatically playing and monitor the bytesLoaded vs. bytesTotal values in the progress handler function. You could then remove the progress bar and play the video based on a return of a specified percentage of bytes loaded.
 
Tip: Progress bars are not necessary for short videos (such as the FLV included with these samples) and may appear to flicker onscreen if the bar is removed when the video is ready to play. The sample above does not remove the bar in the readyHandler function to avoid this issue. Your best bet is to reserve this approach for larger videos.
 
To see a working example, see flvplayback_programming1.fla in the sample files.
 
 
Displaying an image overlay when the video is stopped on frame 1
It's not uncommon for a video to start on a black frame and then fade in. On the web, this can be a visual issue if the video is paused until the user clicks the play button. In this case, the paused first frame of the video doesn't give any visual information about the video's content. One way to get around this is to load a default, static image that's the same size as the video. The image remains visible if the video is paused on frame 1 and is invisible otherwise.
 
Note: This sample requires that you have an image available in the assets folder sized to the same dimensions as the video. Another option is to supply a path to an image elsewhere on a remote server.
 
To display a static image overlay above the FLVPlayback:
 
  1. Create a new ActionScript 3 FLA file and save the FLA next to your video file.
  2. Rename the default layer 1 as assets.
  3. Drag an instance of the FLVPlayback component from the Components panel to the Stage. Position and resize the component as needed (the size should match the size of your video and image).
  4. Name the instance display in the Properties panel.
  5. Create a new layer and name it actions.
  6. Select the keyframe on Frame 1 of the actions layer and open the Actions panel. Copy and paste the following code in the text editor:
import fl.video.*; import flash.display.*; import flash.events.Event; import flash.net.URLRequest; // Set Variables var flvControl:FLVPlayback = display; var flvSource:String = "Call_to_Action.flv"; // Load image... var defaultImage:Bitmap; var defaultImagePath:String = "frame1.jpg"; var defaultImageLoader:Loader = new Loader(); defaultImageLoader.load(new URLRequest(defaultImagePath)); // Determine when to show the image... function enterFrameHandler(event:Event):void { // If the video is stopped on frame 1, show the image defaultImage.visible = display.playheadTime < 0.2; } // Handle image positioning when loaded... function defaultImageHandler(event:Event):void { // Position with video... defaultImage = event.currentTarget.content as Bitmap; defaultImage.x = display.x; defaultImage.y = display.y; addChild(defaultImage); // Monitor the video addEventListener(Event.ENTER_FRAME, enterFrameHandler); } defaultImageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, defaultImageHandler); // Load the video... flvControl.autoPlay = false; flvControl.autoRewind = true; flvControl.scaleMode = VideoScaleMode.NO_SCALE; flvControl.source = flvSource;
  1. Update the flvSource and defaultImagePath variables to match the URLs of your asset files.
  2. Export the SWF (Control+Enter) to see the results.
  3. Save your file.
To see a working example, see flvplayback_programming2.fla in the sample files.
 

 
Applying a fade transition

Video is treated as a display object in Adobe Flash Player and therefore can be manipulated like any other display object. You can add filters, 3D rotations, and transformations to create transitions and playback effects. One common effect is to have the video fade in or out. The following sample shows how to apply a fade transition.
 
To apply a fade transition to an FLVPlayback component:
 
  1. Create a new ActionScript 3 FLA file and save the FLA next to your video file.
  2. Rename the default layer 1 as assets.
  3. Drag an instance of the FLVPlayback component from the Components panel to the Stage. Position and resize the component as needed.
  4. Name the instance display in the Properties panel.
  5. With the instance still selected, set the skin component parameter to None to turn off the built-in skin feature.
  6. Create a new layer and name it actions.
  7. Select the keyframe on Frame 1 of the actions layer and open the Actions panel. Copy and paste the following code in the text editor:
import fl.video.*; import fl.transitions.Tween; import fl.transitions.easing.*; // Set Variables var flvControl:FLVPlayback = display; var flvSource:String = &quot;Call_to_Action.flv&quot;; var flvTween:Tween; function readyHandler(event:VideoEvent):void { // Tween alpha property to fade flvTween = new Tween(flvControl, &quot;alpha&quot;, Strong.easeOut, 0, 1, 1.25, true); } // Add listeners and load the video flvControl.addEventListener(VideoEvent.READY, readyHandler); flvControl.source = flvSource; flvControl.alpha = 0;
  1. Update the flvSource variable to match the URL of your video file.
  2. Export the SWF (Control+Enter) to see the results.
  3. Save your file.
To see a working example, see flvplayback_programming3.fla in the sample files.
 
For more information on working with tween transitions, see the Tween class in the ActionScript 3 Reference for the Adobe Flash Platform.
 

 
Playing, pausing, and stopping a video

Starting, pausing, and stopping a video are very common controls that are needed when programming video user interfaces. Note that these controls can be accessed through the FLVPlayback custom UI components included in Flash Professional CS5. The custom UI components are simple to use, however there will be many times when you'll need to access the FLVPlayback commands directly via programming as demonstrated in the next part of this article.
 
This section covers the following topics:
 
  • Simple commands
  • Looping
  • Toggle play and pause
  • Stop and reset
 
Simple commands
You'll probably find that most custom functionality revolves around events generated in the video's life cycle. But at the core of it all, you will also use a lot of simple commands like those shown in the list below. Notice how each command starts with the instance name of the FLVPlayback component—in this case, we've named our instance of the FLVPlayback component display.
 
To apply a play command, use the following code:
 
display.play();
The play command now supports three parameters: source, totalTime, and isLive. You can initialize these values in the constructor similar to the following code:
 
display.play("videos/myVideo.flv", 32, false);
To apply a pause command, use the following code:
 
display.pause();
To apply a stop command, use the following code:
 
display.stop();
 
Looping
The ability to loop a video can be very useful. The following steps show how to listen for the video's complete event and then restart playback from the beginning.
 
To create a looping video:
 
  1. Create a new ActionScript 3 FLA file and save the FLA next to your video file.
  2. Rename the default layer 1 as assets.
  3. Drag and instance of the FLVPlayback component from the Components panel to the Stage. Position and resize the component as desired.
  4. Name the instance display in the Properties panel.
  5. Add a new layer and name it actions.
  6. Select the keyframe on Frame 1 of the actions layer and open the Actions panel. Copy and paste the following code in the text editor:
import fl.video.*; // Video component instance name var flvControl:FLVPlayback = display; var flvSource:String = "Call_to_Action.flv"; // Loop the video when it completes function completeHandler(event:VideoEvent):void { flvControl.seek(0); flvControl.play() } flvControl.addEventListener(VideoEvent.COMPLETE, completeHandler); // Set video flvControl.source = flvSource;
  1. Update the flvSource variable with the URL of your FLV.
  2. Export the SWF (Control+Enter) to see the results.
  3. Save your file.
 
Toggle play and pause
You can use the FLVPlayback's ActionScript API to create your own custom buttons and controls. The following steps show the code that toggles playback on and off by using a custom button.
 
To toggle play and pause:
 
  1. Continue working in the same file as used in the previous example. Select the assets layer again.
  2. Create a button symbol and place an instance of the button next to the display.
  3. Name the button instance toggle_btn in the Properties panel.
  4. Select the keyframe on Frame 1 of the actions layer and open the Actions panel. Copy and paste the following code continuing from where you left off, as shown below:
// Add toggle code function toggleHandler(event:MouseEvent):void { if( flvControl.playing ){ flvControl.pause(); }else{ flvControl.play(); } } toggle_btn.addEventListener(MouseEvent.CLICK, toggleHandler);
  1. Export the SWF (Control+Enter) to see the results.
  2. Save your file.
 
Stop and reset
Once you have a looping video in place, it's a good idea to provide a way to stop the video from playing. The following code shows you how to stop and reset a video to stop it from looping.
 
To stop and reset:
 
  1. Continue working in the same file as the previous example. Select the assets layer again.
  2. Create a new button symbol and place an instance of the button next to the display.
  3. Name the button instance reset_btn in the Properties panel.
  4. Select the keyframe on Frame 1 of the actions layer and open the Actions panel. Add the following code, continuing from where you left off in the previous example:
// Add reset code function resetHandler(event:MouseEvent):void { flvControl.seek() flvControl.stop(); } reset_btn.addEventListener(MouseEvent.CLICK, resetHandler);
  1. Export the SWF (Control+Enter) to see the results.
  2. Save your file.
To see a working example, see flvplayback_programming4.fla in the sample files.
 

 
Using cue points and seek commands

Cue points are user-defined timing markers associated with a video. They can be used to assign navigation points to allow seeking to specific locations in the video and to synchronize those locations to the content in the movie. For example, you can respond to cue points as the video playback passes their time code or seek to a cue point when a button is clicked. The FLVPlayback supports ActionScript cue points (FLV, F4V, and H.264) and embedded Navigation or Event cue points (FLV only).
 
This section covers the following topics:
 
  • Cue points, progressive video, and seeking
  • Adding ActionScript cue points
  • Cue point event handling
  • Seek to cue point name
  • Seek to time
  • Seek to percent
 
Cue points, progressive video, and seeking
There are two types of cue points to consider: runtime cue points (ActionScript) and embedded cue points (Navigation or Event). ActionScript cue points can be added and removed at runtime using code or at author time using the Cue Points component parameters area on Properties panel. Navigation and Event cue points are embedded when the video is encoded and cannot be affected at runtime.
 
Embedded Navigation cue points are recommended when you need to progressively download a video and seek accurately to a specific time code. Navigation cue points force the encoder to generate a whole keyframe at the location in the video where the cue point is added. This is necessary for the playhead to land on the exact spot in the footage.
 
Beyond seeking to locations marked by Navigation cue points, progressive video does not seek accurately. If you scrub or seek to a time in the video that does not have a whole keyframe associated with it, the playhead will jump to the nearest whole keyframe. To accurately seek in all situations, you must use streaming video supplied by Flash Media Server or a Flash Video Streaming Service (FVSS).
 
Note: F4V and H.264 video do not support embedded cue points. Use the FLV format for best results when working with cue points, seeking, and progressive video.
 
 
Adding ActionScript cue points
ActionScript cue points are a great option if you're synchronizing Flash content to times in your video or when you need to add timing markers to F4V and H.264 video. You can add cue points using code or by using the Cue Points parameters in the Properties panel while an FLVPlayback instance is selected.
 
To add ActionScript cue points to your video:
 
  1. Create a new ActionScript 3 FLA file and save the FLA next to your video file.
  2. Rename the default layer 1 as assets.
  3. Drag an instance of the FLVPlayback component from the Components panel to the Stage. Position and resize the component as desired.
  4. Name the instance display in the Properties panel.
  5. Add a new layer and name it actions.
  6. Select the keyframe on Frame 1 of the actions layer and open the Actions panel. Copy and paste the following code in the text editor:
import fl.video.*; // Video component instance name var flvControl:FLVPlayback = display; var flvSource:String = "Call_to_Action.flv"; // Set video flvControl.source = flvSource; flvControl.addASCuePoint(0, "introduction"); flvControl.addASCuePoint(10.01, "tellAFriend"); flvControl.addASCuePoint(16.23, "trialDownload"); flvControl.addASCuePoint(22.11, "salesRep"); flvControl.addASCuePoint(28.18, "onlineStore");
Note that the source property wipes out the list of ActionScript cue points so you have to set them after the source. The code above demonstrates what the embedded cue points in the sample video would look like if they were written as ActionScript cue points. While this is unnecessary for the sample file, adding duplicate ActionScript cue points does not cause an error.
 
  1. The addASCuePoint method requires two parameters; a time in seconds and a name for the cue point. Update the code sample with your cue point names and times.
  2. Update the flvSource variable with the URL of your FLV as well.
  3. Save your file.
 
Cue point event handling
Cue points can be used to signal when content synchronization should occur while the video plays. This technique is often used to synchronize images, text, and other types of content with chapters or sections in the video. One way to show content synchronization is to navigate to different frames on the timeline when cue point events occur.
 
The following steps demonstrate how to listen for cue point events and navigate to frame labels with the corresponding names:
 
  1. Continue working in the same file as the previous example.
  2. Select the keyframe on Frame 1 of the actions layer and open the Actions panel. Copy and paste the following code continuing from where you left off:
// Add cue point handler code function cuePointHandler(event:MetadataEvent):void { trace("name = "+event.info.name); trace("time = "+event.info.time); // Go to a frame label with the cue point name gotoAndStop(event.info.name); }
  1. Export the SWF (Control+Enter) to see the results.
To see a working example, see flvplayback_programming5.fla in the sample files.
 
 
Seek to cue point name
You can accurately seek to an embedded Navigation cue point by using the cue point's name. The following steps show how to create a button that will seek to the cue point named introduction:
 
  1. Create a new ActionScript 3 FLA file and save the FLA next to your video file.
  2. Rename the default layer 1 as assets.
  3. Drag an instance of the FLVPlayback component from the Components panel to the Stage. Position and resize the component as desired.
  4. Name the instance display in the Properties panel.
  5. Create a button symbol and place an instance of the button next to the display.
  6. Name the button instance seek_btn in the Properties panel.
  7. Add a new layer and name it actions.
  8. Select the keyframe on Frame 1 of the actions layer and open the Actions panel. Copy and paste the following code in the text editor:
import fl.video.*; // Video component instance name var flvControl:FLVPlayback = display; var flvSource:String = "Call_to_Action.flv"; // Set video flvControl.source = flvSource; // Add seek functionality to the button function seekHandler(event:MouseEvent):void { flvControl.seekToNavCuePoint("introduction") } seek_btn.addEventListener(MouseEvent.CLICK, seekHandler);
  1. Update the introduction cue point name in the code with the name of your intended cue point.
  2. Export the SWF (Control+Enter) to see the results.
  3. Save your file.
 
Seek to time
You can also seek to a specific time within your video:
 
  1. Continue working in the same file as the previous example. Select the assets layer again.
  2. Create a new button symbol and place an instance of the button next to the display.
  3. Name the button instance seekToTime_btn in the Properties panel.
  4. Select the keyframe on Frame 1 of the actions layer and open the Actions panel. Copy and paste the following code continuing from where you left off:
// Add seek to time code function seekToTimeHandler(event:MouseEvent):void { var sec:Number = 0; flvControl.seek(sec); } seekToTime_btn.addEventListener(MouseEvent.CLICK, seekToTimeHandler);
  1. Update the sec variable value to use the time you'd like to target.
  2. Export the SWF (Control+Enter) to see the results.
  3. Save your file.
 
Seek to percent
You can seek to a percentage to jump to a location by specifying the percent complete.
 
  1. Continue working in the same file as the previous example. Select the assets layer again.
  2. Create a new button symbol and place an instance of the button next to the display.
  3. Name the button instance seekToPercent_btn in the Properties panel.
  4. Select the keyframe on Frame 1 of the actions layer and open the Actions panel. Copy and paste the following code continuing from where you left off:
// Add seek to percent code function seekToPercentHandler (event:MouseEvent):void { var percent:Number = 20; flvControl.seekPercent(percent); } seekToPercent_btn.addEventListener(MouseEvent.CLICK, seekToPercentHandler);
  1. Update the percent variable value with the percentage of time you'd like to target.
  2. Export the SWF (Control+Enter) to see the results.
  3. Save your file.
Tip: The Seek to Percent behavior won't work if you use it with older FLV files that do not have metadata embedded in them. If this occurs, you can work around the problem by encoding the video to the FLV format again using Adobe Media Encoder CS5.
 
Note: This feature works best when used with streaming video.
 

 
Handling full-screen mode and layout controls

The ActionScript 3 FLVPlayback component can play your video in full-screen mode. With the click of a button, the SWF file fills the screen and shows the video scaled in the center. You can control the video layout, background color, and skin delay using ActionScript.
 
To use the full-screen feature, you'll need to work with the FLA file's publish settings, the FLVPlayback custom UI components, and a little bit of ActionScript.
 
This section covers the following topics:
 
  • Setting up your file for full-screen mode
  • Using the FLVPlayback component's built-in full-screen feature
  • Working with full-screen mode and custom controls
 
Setting up your file for full screen mode
Before you can use the full-screen capabilities of Flash Player, you have to set up the HTML embed code to allow it. You can do this by adjusting the Publish Settings dialog box in Flash Professional.
 
Follow these steps to set the HTML parameters to allow for full-screen video:
 
  1. Create a new ActionScript 3 FLA file and save the FLA next to your video file.
  2. Select File > Publish Settings from the main menu.
  3. Click the HTML tab in the Publish Settings dialog box and choose the Flash Only – Allow Full Screen option from the Templates pop-up menu (see Figure 1).
Choosing the Flash Only – Allow Full Screen option for full-screen video
Figure 1. Choosing the Flash Only – Allow Full Screen option for full-screen video
  1. Click the Publish button to publish the HTML and SWF file and then click OK to commit the settings.
  2. Save your file.
 
Using the FLVPlayback component's built-in full-screen feature
The easiest way to launch your video to full-screen mode is to use the built-in full-screen feature in the FLVPlayback component. You can choose a skin that contains the Full Screen button or use the FullScreenButton component from the Components panel. If you use a pre-built skin, the controls will appear in full-screen mode; if you use the individual button component, the video will fill the screen without any controls appearing (the viewer presses the Escape key to exit).
 
Follow these steps to set up a video user interface with a full-screen button:
 
  1. Continuing in the file from the last sample, rename the default layer 1 as assets.
  2. Drag an instance of the FLVPlayback component from the Components panel to the Stage. Position and resize the component as desired.
  3. Name the instance display in the Properties panel.
  4. Drag an instance of the FullScreenButton component from the Components panel to the Stage. Position the button as desired.
  5. Name the button instance fullScrn_btn.
  6. Create a new layer and name it actions.
  7. Select frame 1 of the actions layer and open the Actions panel. Copy and paste the following code in the text editor:
import fl.video.*; // 1. Video component instance name var flvControl:FLVPlayback = display; var flvSource:String = "Call_to_Action.flv"; // 2. Set video parametes flvControl.fullScreenButton = fullScrn_btn; flvControl.source = flvSource;
  1. Update the flvSource path to match the video you're using.
  2. Export the SWF and test the movie.
  3. Save your file.
Tip: If you choose a built-in skin containing the Full Screen button, you get the full-screen feature for free. You can select a built-in skin in the Properties panel while an FLVPlayback instance is selected. If you need to create customized user interface elements, use the FLVPlayback UI components or create custom controls. When using custom skin elements you'll want to use the Stage's displayState property to toggle full-screen mode while controlling the layout of your user interface.
 
You can also change the align and scaleMode properties of the FLVPlayback instance to change how the video layout looks during scaling and full-screen layout.
 
To apply the recommended defaults for full-screen viewing, follow these steps:
 
  1. Return to the code in the FLA file that you built in the last set of steps.
  2. Copy and paste the following code below the fullScreenButton assignment line:
flvControl.align = VideoAlign.CENTER; flvControl.scaleMode = VideoScaleMode.MAINTAIN_ASPECT_RATIO;
  1. Export the SWF and look at the results while viewing the movie on the HTML page. Experiment with changing these settings to see varying results in the layout. Usually the width and height proportions of the video determine how drastic the changes in layout become.
  2. Save your file.
If you are interested in pursuing further layout controls for your video, take a look at the registration height, width, x, and y properties in the FLVPlayback section of the online documentation. You can use these properties along with the align and scaleMode properties to fine-tune how your videos look while scaling, switching from video to video, and so on.
 
To see a working example, see flvplayback_programming6.fla in the sample ZIP file linked to at the beginning of this article.
 
 
Working with full-screen mode and custom controls
The process of toggling to full-screen mode changes a bit if you need to display custom controls. In this scenario, you want to use the displayState feature of the Stage so that you can keep all the controls on the screen.
 
By default, Flash Player tries to use hardware acceleration from your video card to display video in full-screen format. The key to correctly scaling your video lies in sizing it to 100 percent before triggering full-screen mode. In other words, if you're using HD video, the video will be larger than the standard display size in normal display mode. You have to scale the video player to 100 percent of the video's actual size and then jump to full-screen mode, letting hardware acceleration handle scaling from there.
 
Follow these steps to jump to full-screen mode using the displayState property of the Stage:
 
  1. Create a new ActionScript 3 FLA file and save the FLA next to your video file.
  2. Update the Publish Settings to allow full-screen mode.
  3. Rename the default layer 1 as assets.
  4. Drag an instance of the FLVPlayback component from the Components panel to the Stage. Position component at the 0, 0 coordinate (top left of the Stage) and resize the component as desired.
  5. Name the instance display in the Properties panel.
  6. Drag an instance of a Button component from the Components panel to the Stage. Position the button below the lower right corner of the video component. Name the Button instance fullscreen_btn.
  7. Add a new layer and name it actions.
  8. Select the keyframe on Frame 1 of the actions layer and open the Actions panel. Copy and paste the following code in the text editor:
import fl.video.*; import flash.display.StageDisplayState; import flash.events.FullScreenEvent; import flash.events.MouseEvent; // 1. Video component instance name var flvControl:FLVPlayback = display; var flvSource:String = "Call_to_Action.flv"; // 2. Create variables to track video's full // size and regular size. In this case the // 1280 x 720 size would be 100% scale for 720p HD video var videoHDWidth:Number = 1280; var videoHDHeight:Number = 720; var videoRegWidth:Number = 480; var videoRegHeight:Number = 270; // 3. Create an event handler to toggle full screen // mode when a button is clicked. function toggleFullScreen(event:MouseEvent):void { // Jump to full screen if( stage.displayState == StageDisplayState.NORMAL ) { // Set video to 100% size flvControl.setSize(videoHDWidth, videoHDHeight); // Position button fullscreen_btn.x = flvControl.x + flvControl.width - fullscreen_btn.width; fullscreen_btn.y = flvControl.y + flvControl.height - fullscreen_btn.height - 10; // Activate hardware scaling based on HD state... stage.fullScreenSourceRect = new Rectangle(0, 0, videoHDWidth, videoHDHeight); stage.displayState = StageDisplayState.FULL_SCREEN; } // Return to normal size else{ // Set video to regular size flvControl.setSize(videoRegWidth, videoRegHeight); // Position button fullscreen_btn.x = flvControl.x + flvControl.width - fullscreen_btn.width; fullscreen_btn.y = flvControl.y + flvControl.height + 4; // Return to normal mode stage.displayState = StageDisplayState.NORMAL; } } fullscreen_btn.addEventListener(MouseEvent.CLICK, toggleFullScreen); // 4. Resume normal mode if the Escape button is pressed during full screen function resumeNormalMode(event:FullScreenEvent):void { // The displayState is already 'normal' by the time this // event fires. This signals that the Escape button was clicked. if( stage.displayState == StageDisplayState.NORMAL ) { // Set video to regular size flvControl.setSize(videoRegWidth, videoRegHeight); // Position button fullscreen_btn.x = flvControl.x + flvControl.width - fullscreen_btn.width; fullscreen_btn.y = flvControl.y + flvControl.height + 4; // Return to normal mode stage.displayState = StageDisplayState.NORMAL; } } stage.addEventListener(FullScreenEvent.FULL_SCREEN, resumeNormalMode); // 5. Set video parametes flvControl.align = VideoAlign.CENTER; flvControl.scaleMode = VideoScaleMode.MAINTAIN_ASPECT_RATIO; flvControl.fullScreenTakeOver = false; flvControl.source = flvSource;
  1. Update the flvSource path to match the video you're using and adjust the layout code to position your button (or other controls) where needed on the screen.
  2. Export the SWF (Control+Enter) to see the results.
  3. Save your file.
Manually positioning your controls in full-screen mode can be tricky when using this approach. In this sample the button is positioned over the top of the video in full-screen view, allowing it to be seen in the 1280 × 720 video area. You could also try altering the width and height of the fullScreenSourceRect object before jumping to full screen to capture the area below the video player or elsewhere on the screen. Be prepared to experiment and problem-solve if you choose to take this route for custom control development.
 
To see a working example, see flvplayback_programming7.fla in the sample ZIP file linked to at the beginning of this article.
 
Note: Full-screen mode requires the use of Flash Player 9,0,28,0 or later, the ActionScript 3 version of the FLVPlayback component, and an HTML file set up correctly for full-screen viewing. For more information, you can read Exploring full-screen mode in Flash Player 9.
 

 
Creating a video playlist (playing multiple videos)

So far we've covered how to control a single video in the user interface, but many projects will require the manipulation of a list of videos. A common approach would be to either create a playlist in an external XML file (editable as a text file) or to create a playlist in ActionScript (editable within Flash). For the purposes of this example, we'll work with a playlist created in Flash as an ActionScript array:
 
To create an ActionScript playlist and load multiple videos:
 
  1. Create a new ActionScript 3 FLA file and save the FLA next to your video file.
  2. Rename the default layer 1 as assets.
  3. Drag and instance of the FLVPlayback component from the Components panel to the Stage. Position and resize the component as desired.
  4. Name the instance display in the Properties panel.
  5. Add a new layer and name it actions.
  6. Select the keyframe on Frame 1 of the actions layer and open the Actions panel. Copy and paste the following code in the text editor:
import fl.video.*; // Define the variable for the video component instance name var flvControl:FLVPlayback = display; // Create the video playlist var videoList:Array = ["video1.flv","video2.flv","video3.flv"]; var videoIndex:uint = 0; var loopAtEnd:Boolean = true; // Handle the video completion (load the next video) function completeHandler(event:VideoEvent):void { // Get next item in list videoIndex++; // Validate index if( videoIndex == videoList.length ){ if( loopAtEnd ){ videoIndex = 0; }else{ return; } } // Load the next video flvControl.source = videoList[videoIndex]; } flvControl.addEventListener(VideoEvent.COMPLETE, completeHandler); // Set the default video (Start) flvControl.source = videoList[0];
  1. Update the videoList with your comma-separated list of video URLs. Be sure that you include quotes around each URL string.
  2. Set the loopAtEnd variable to false if you want the videos to stop playing after the last video finishes.
  3. Export the SWF (Control+Enter) to see the results.
  4. Save your file.
Note: You can also load multiple videos by using multiple video indexes within the FLVPlayback component. The approach shown above has some advantages when using progressive video.
 
In a real-world scenario, you may need to load the playlist from an external XML file. You can achieve this by retrieving the XML from a server script.
 
To create a video playlist in XML:
 
  1. Open a new file Dreamweaver or another text editor and add the following code:
<videos> <video>Call_to_Action.flv</video> </videos>
  1. Add as many video nodes as needed by repeating the pattern seen above.
  2. Save your file as videos.xml next to your FLA file.
To create an ActionScript playlist and load multiple videos:
 
  1. Continue working in the previous sample's FLA file.
  2. Update the code on frame 1 to the following:
import fl.video.*; import flash.events.Event; import flash.net.*; // Set Variables var flvControl:FLVPlayback = display; var flvIndex:Number = 0; var loopAtEnd:Boolean = true; // Load XML file... var xmlList:XML; var xmlPath:String = "videos.xml"; var xmlLoader:URLLoader = new URLLoader(); xmlLoader.load(new URLRequest(xmlPath)); // Receive the XML and load the first video function xmlLoadedHandler(event:Event):void { // Save XML xmlList = new XML(xmlLoader.data); // Set video (Start) flvControl.source = xmlList.video[0]; } xmlLoader.addEventListener(Event.COMPLETE, xmlLoadedHandler); // 3. Handle video completion (load next video) function completeHandler(event:VideoEvent):void { // Get next item in list flvIndex++; // Validate index if( flvIndex == xmlList.video.length() ){ if( loopAtEnd ){ flvIndex = 0; }else{ return; } } // Load next video flvControl.source = xmlList.video[flvIndex]; } flvControl.addEventListener(VideoEvent.COMPLETE, completeHandler);
  1. Update the flvControl variable and the xmlPath variable to match your asset URLs.
  2. Export the SWF (Control+Enter) to see the results.
  3. Save your file.
  4. Change the paths in the XML file, and then launch the SWF file again to see a different list of videos. Because the video paths are supplied at runtime, you don't have to publish the SWF file again to see the updates to the XML.
Note: An alternative to loading the XML list is to load the list of videos in a FlashVars parameter in the HTML code. Doing so supplies variables to the SWF file as it initializes. For more information on retrieving FlashVars variables, see the parameters section of the LoaderInfo class in the ActionScript 3 Reference for the Adobe Flash Platform.
 
To see a working example, see flvplayback_programming7.fla in the sample files.
 

 
Where to go from here

Check out the video snippets in the Code Snippets panel in Flash Professional CS5 and experiment with saving your code variations as snippets. Take a look at the video templates section in the Flash Developer Center to see sample projects containing more of these coding techniques. Also be sure to explore the ActionScript 3 Reference for the Adobe Flash Platform to see all your options available in the FLVPlayback component ActionScript 3 API.
 
For more information on working with FLVPlayback error handling and video exceptions, see the VideoError class section of the ActionScript 3 Reference for the Adobe Flash Platform.
 
For information on working with captioning with the ActionScript 3 FLVPlaybackCaptioning component, please read the Using the FLVPlaybackCaptioning Component section of Using ActionScript 3 Components.
 
For more information on working with a SMIL file to control multiple streams for multiple bandwidths, see the Use a SMIL file section of Using ActionScript 3 Components.
 
For more information on working with the FLVPlayback 2.5 component and Adobe Flash Media Server, see the relevant section in Dynamic streaming in Flash Media Server on the Adobe Developer Center.