Loading and Controlling External Video

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.. Graphical playback contr

< 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

two elements of interest on the Boxes layer: a movie clip named cueBox_mc and a text field named cue_txt Our application will eventually load a JPG into the cueBox_mc instance in response to a specific cue point's being reached The cue_txt text field will display text associated with that loaded JPG

The Media Component layer holds an instance of the MediaPlayback component named display We'll load and play back our video clip within this instance

The Actions layer will contain all the script for this project

As with the other projects in this lesson, we'll start by reviewing the external files

that this project will use

2 Using your operating system's directory-exploring application, navigate to the Lesson18/Assets directory and locate bluezone.flv, cue0.jpg, cue1.jpg, cue2.jpg, cue3.jpg, cue4.jpg, cue5.jpg and cue6.jpg

The bluezone.flv file is the external Flash video file that our application will load The other files represent snapshots of various points in the video file's playback Our application will eventually load each of these snapshots, using cue point functionality

NOTE

The video file for this project was graciously provided by Brooks Patton, who helped co-author two of Derek Franklin's first Flash books He brilliantly wrote, produced, and directed this commercial, which Derek feels is one of the best he's ever seen Thanks, Brooks!

3 Return to Flash With the Actions panel open, select Frame 1 of the Actions layer and add the following script:

4

5 display.autoPlay = true;

6

7 display.activePlayControl = true;

8

9 display.controllerPolicy = "on";

10

11 display.totalTime = 60;

12

These four lines of script tell the display instance how it should be configured before we load any media into it

The first line tells the instance to immediately begin playback of the loaded media file The next line tells the instance to show the Play button in an active state, indicating that the media file is playing You would think this would happen

automatically with the autoPlay property set to true, but it doesn't If autoPlay is set to false, activePlayControl must also be false

The next line indicates that the component's playback controls should always be visible By default, this property is set to "auto", which causes the playback

controls to slide into visibility whenever the user mouses over the playback control area

The last line indicates to the component instance that the media to be loaded is 60 seconds long We specify this setting so the playback slider/indicator can

accurately reflect the playback progress of the loaded file Again, you would think that this would be known automatically by the instance, but it's not

NOTE

The totalTime property doesn't need to be set in order for the rest of the

functionalities of the component instance to work properly

Before we script the display instance to load the video file, let's set it up to open a

URL when playback of the loaded file is complete

4 Add the following script:

5

6 var displayListener:Object = new Object();

7

8 displayListener.complete = function(){

9

10 getURL("http://www.thebluezone.com");

11

12 }

13

14 display.addEventListener("complete", displayListener);

15

Here we've created the displayListener object and scripted it to open a URL in response to the firing of a complete event We've also registered this object to listen for this event from the display instance When the loaded video file has completely played, www.thebluezone.com opens in a browser window

5 Add the following script to load the external video:

6

7 display.setMedia("bluezone.flv", "FLV");

8

This loads bluezone.flv into the display instance

Let's do a test

6 Choose Control > Test Movie

As soon as the movie appears, the external video file is loaded and begins to play You can interact with any of the playback controls to see the effect they have on the video's playback As you've seen, using a Media component instance makes

adding external video to your project a breeze

Let's return to the authoring environment to add several cue points

7 Close the test movie to return to Flash With the Actions panel open, select Frame

1 of the Actions layer and insert the following script, just below the line

display.addEventListener("complete", displayListener);:

8

9 display.addCuePoint("0", 1);

10

11 display.addCuePoint("1", 8);

12

13 display.addCuePoint("2", 14);

14

15 display.addCuePoint("3", 31);

16

17 display.addCuePoint("4", 35);

18

19 display.addCuePoint("5", 53);

20

21 display.addCuePoint("6", 56);

22

This script creates seven cue points in the display instance The first cue point is named "0" and is set to trigger one second into the media's playback The next cue point is named "1" and is set to trigger eight seconds into the media's playback The remaining cue points are self-explanatory The name of the cue points can be any string value you choose We've named them for specific reasons, which we'll explain in a moment

NOTE

If you load a different media file into the display instance, these cue points still exist Because these cue points may not be appropriate for the newly loaded file, you can use the removeAllCuePoints() method to delete them all quickly:

display.removeAllCuePoints()

8 Insert the following script just below display.addCuePoint("6", 56);:

9

10 var cueTextArray:Array = new Array();

11

12 cueTextArray[0] = "Potential Fluffy victim";

13

14 cueTextArray[1] = "Sweet, innocent Fluffy appears";

15

16 cueTextArray[2] = "Fluffy is crammed into dial-up pipe";

17

18 cueTextArray[3] = "Fluffy enters The Blue Zone";

19

20 cueTextArray[4] = "Fluffy's revenge!";

21

22 cueTextArray[5] = "Faceful of Fluffy";

23

24 cueTextArray[6] = "Blue Zone information";

25

This script creates an array named cueTextArray, which is then filled with short snippets of text Each of these snippets is displayed in the cue_txt text field when its corresponding cue point has been reached It should be noted that the index position of each snippet relates to the name of a cue point added in the preceding step (the cue point named "0" relates to the snippet in index position 0 of this array)

It's time to bring together our cue points, the text snippets in cueTextArray, and

our external JPGs to complete the functionality of this project

9 Insert the following script just below the closing brace of the

displayListener.complete event handler:

10

11 displayListener.cuePoint = function(eventObj:Object){

12

13 var index = Number(eventObj.target.name);

14

15 loadMovie("cue" + index + ".jpg", "cueBox_mc");

16

17 cue_txt.text = cueTextArray[index];

18

19 }

20

21 display.addEventListener("cuePoint", displayListener);

22

The first part of this script creates a cuePoint event handler on the displayListener object, and the last line of the script registers that object to listen for that event from the display instance Because we added seven cue points to the display instance in Step 7, this event handler will be triggered seven times by the time the video has played through Let's look at how the event handler works