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 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. } [...]... cueTextArray is displayed, and so on Our scripting is complete, and now it's time to do one final test 10 Choose Control > Test Movie When the movie appears and the video begins to play, simply sit and watch as cue points are reached and the cuePoint event handler does its job Utilizing this event is a great way to synchronize other elements in your movie to the playback of a video, or even an MP3 file... 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 The event handler is passed an Event... the event handler converts this value to a number and assigns it to the index variable The remaining two lines in the event handler use this value A loadMovie() action loads one of the external JPG images into the cueBox_mc instance Which JPG is loaded depends on the value of index When the first cue point is reached, cue0.jpg is loaded; when the next cue point is reached, cue1.jpg is loaded; and so on... in your movie to the playback of a video, or even an MP3 file 11 Close the test movie to return to Flash, and save this file as video2 .fla This step completes the exercise and this lesson As you've learned, Flash provides many tools and a lot of flexibility when your project calls for the use of external media assets < Day Day Up > ... on The last line in the event handler displays one of the text snippets in the cueTextArray in the cue_txt instance Again, the snippet displayed depends on the current value of index When the cue point named "0" is fired, cue0.jpg is loaded and the text snippet at index position 0 of the cueTextArray is displayed; when the cue point named "1" is fired, cue1.jpg is loaded and the text snippet at index... look at how the event handler works The event handler is passed an Event object when the event is fired This Event object contains the name and time of the cue point that fired the event The name of the cue point is accessible using this syntax: eventObj.target.name and the time of the cue point with the following syntax: eventObj.target.time When our third cue point is fired, the event objects will have . < Day Day Up > Loading and Controlling External Video With the growing popularity of broadband, the use of video in applications continues. 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