Loading and Controlling External Video

< Day Day Up >

Loading and Controlling External Video
With the growing popularity of broadband, the use of video in applications continues to
escalate. Fortunately for us, so do Flash's capabilities for loading and playing video.
The previous version of Flash (Flash MX) could load and play external video clips, but
only with the assistance of Flash Communication Server. It was possible to embed video
clips within the SWF, but this tended to make the file size rather large. Not only does
Flash MX 2004 not need Flash Communication Server when using external video, but it
provides some excellent tools in the form of Media components. These tools make the
process of using video in your applications much easier.
External video clips have some great advantages over embedded clips:
•
The clip can be edited separately from the SWFs that use it.
•
The clip can be progressively downloaded as it plays, making it unnecessary for
the entire clip to load before it can be viewed.
•
The clip can play at a different frame rate than the SWF in which it's loaded,
ensuring that the video clip always plays at the intended frame rate.
To use an external video clip in a Flash project, it must first be converted to the .flv
(Flash Video) file format. Flash has the built-in capability to import most video formats
(including AVI and QuickTime), which can then be exported to the FLV format for use
as an externally loaded clip. Although this is a sufficient means for creating FLV files,
you may want to create, edit, and eventually export a video from your favorite video-
editing application, such as Adobe Premiere. Fortunately, Flash MX 2004 Professional
ships with the Flash Video Exporter. After installation, the Exporter allows you to export
FLV files directly from your favorite video-editing application. (For more information
about importing and creating FLV files, consult your Flash documentation.)

TIP
Sorenson Media's excellent application called Sorenson Squeeze was built for the
purpose of creating FLV files from many video file formats. For more information about
this useful tool, visit www.sorenson.com
.

After you have a usable FLV file, you need to know how to load it into Flash as well as
how to control it and communicate with it. The direct way is by creating an instance of
the Video class and then loading video into that object via instances of the NetConnection
and NetStream classes. If that sounds like too much work, you're absolutely right. A more
elegant solution is to use the incredibly versatile and powerful Media components that
ship with Flash MX 2004 Professional. These components allow you to work with the
Media class to handle the most demanding video-related tasks, including the use of cue
points.
The Media components come in three forms:
•
MediaDisplay. This component is used as a container for loading and playing
either external FLV or MP3 files. Graphical playback controls are not provided
with this component, but the loaded file can be controlled using methods of the
component, including play() and stop(), or by setting property values such as
volume. This component is useful for inserting media into your project without the
added intrusion of playback controls.
•
MediaController. This component complements the MediaDisplay component by
providing playback controls for controlling media loaded into a MediaDisplay
instance. Media is never loaded into or played by the MediaController; the
MediaController is used only for controlling playback in a MediaPlayback or
MediaDisplay instance. This component allows you to place media in one location
on the screen, via the MediaDisplay component, and control it from another
location on the screen. Associating an instance of the MediaController component

(named controller) with an instance of MediaDisplay component (named display)
is as simple as this:
•

•
controller.associateDisplay(display);
•


•
MediaPlayback. This component contains the combined functionality of both the
MediaDisplay and MediaController components.

Although the Component Inspector provides a visual way of configuring Media
component instances, there are a number of properties, methods, and events that can be
used to configure and control Media component instances via ActionScript. All these
components inherit functionality from the Media class, which means that instances of the
components can be controlled and configured using common commands. Let's look at
what you can do with Media component instances.
One of the most important tasks a Media component instance can perform is to load
media. This can be done using the setMedia() method:

myMediaComponent.setMedia("myVideo.flv", "FLV");


This line loads myVideo.flv into the Media component instance named
myMediaComponent. Because Media components can also load MP3 files, the second
parameter of the setMedia() method is used to define the media type. Loading an MP3
file into the same instance would look like this:

myMediaComponent.setMedia("mySong.mp3", "MP3");


NOTE
Media cannot be loaded into instances of the MediaController component.

After media has been loaded into an instance, its playback can be controlled via
ActionScript using the play(), pause() and stop() methods. Here's an example of the
play() method:

myMediaComponent.play();


NOTE
Of course, the playback of media is also controlled automatically via playback controls
when using the MediaController and MediaPlayback instances.

Media component instances generate various events, allowing your application to react to
such actions as a click of the Play button, the end of playback, or a volume adjustment by
the user. Reacting to these events requires Listener objects. For example:

var myListener:Object = new Object()

myListener.volume = function(){

//actions

}

myMediaComponent.addEventListener("volume", myListener);

Here, myListener is set up to react to volume changes in the myMediaComponent
instance.
Media component instances can generate unique events in response to cue points. Cue
points are used to mark points of time during a media file's playback. When playback
reaches a point in time marked as a cue point, the component instance playing the media
fires a cuePoint event. This event can be captured by a Listener, which can be scripted to
react to that particular cue point. For example:

myMediaComponent.addCuePoint("liftoff", 54);

myListener.cuePoint = function(eventObj:Object){

//actions

}

myMediaComponent.addEventListener("cuePoint", myListener);


This script adds a cue point named liftoff to the myMediaComponent instance. This cue
point is fired 54 seconds into the playback of the loaded media. The Event object sent to
the cuePoint event handler when the event is fired contains the name of the cue point
("liftoff") so that the event handler can be scripted to take action based on that specific
cue point's being reached.

In this exercise, you'll use an instance of the MediaPlayback component to load and play
an external video file. You'll add cue points so that the application can react to specific
points during the video's playback.

1. Open video1.fla in the Lesson18/Assets folder.
This project contains four layers named Background, Boxes, Media Component,
and Actions. Our project's static graphics are on the Background layer. There are