Using the mediaDisplay Component in Flash MX Professional 2004This document contains the following sections: DescriptionThis sample demonstrates some of the more advanced video features available in Flash MX 2004. The application takes you through a computer-generated world in FLV video and lets the user set video bookmarks and demonstrates advanced video techniques featuring non-linear video, executing functions from video cue points, and using ActionScript to pause, rewind, fast forward and reposition video. This example also demonstrates how to use and control multiple MediaDisplay components, video synchronization, and skinning components. If you plan on including video in your Flash applications, this sample highlights the capability of Flash video. The sample demonstrates how to accomplish the following:
Source FilesThe source file for this movie (videoRIA.fla) can be found in the Samples folder on your hard drive. Using the video applicationPlaying the video:
Adding/Deleting a cue point:
Playing the Time Lapse video:The Time Lapse video shows lets you move watch the changes to the environment at different time of the day. The video plays in its own window that displays the time of day.
Displaying the Map:The map shows your progress through the environment as the video plays.
How the application was createdThis section contains the following topics:
Application overviewThe center of this sample application is a MediaDisplay component named md . The md component loads a Flash Video (FLV) file called main.flv. As the user plays the video, other parts of the application synchronize with and react to the video. The user can interact with the application using various UI components to create bookmarks and navigate to them. A movie clip named mapShell represents the current video location by sliding a two-dimensional map on a guide and under a mask, in synchronization with the main video. A second MediaDisplay component named timeLapse manages a video named clock2.flv. When directed to play by the user, the main video pauses. When this video is directed by the user to stop playing, the main video continues from its paused location. A movie clip named lensFlare waits for ActionScript commands that are generated from video cuepoints in the main video. Saving and navigating to video bookmarksBookmarks in this application are managed and displayed in the movie clip named mark on the lower right side of the Stage just below the component md . When the application starts, mark is made invisible using ActionScript on the _root timeline. To show the mark movie clip, the user must press the Mark button on the left side, under the component md . Inside the movie clip mark, four bookmarks are displayed using MediaDisplay components. The four bookmark components load the mark0.flv through mark3.flv FLV files, respectively. These Flash videos are replicas of the main.flv file. The application uses them to visually show the user the scene at the bookmark the user has created. Layer 2 of the mark movie clip contains the ActionScript needed to manage the bookmarks. The method function plusMethod(){ barray.unshift(_parent.videoPosition()); setBookmarkTime(); } The barray array saves the video positions for each bookmark. The function videoPosition() { return this.md.playheadTime; } The function setBookmarkTime() { for (i in barray) {> if (i < 4) { bookmarkList["b"+i].bm._visible = true; bookmarkList["b"+i].bm.play(barray[i]); bookmarkList["b"+i].bm.pause(); bookmarkList["b"+i].bm.onPress = bookmarkPressed; } } } In the function bookmarkPressed() { _parent.seekToVideoAt(this.playheadTime); } This method simply calls a _root timeline() method named function seekToVideoAt(theTime) { this.videoSeekTime = theTime; } The root variable this.onEnterFrame = function() { // fast-forward or rewind to the videoSeekTime if (this.videoSeekTime != -1) { if (Math.abs(this.md.playheadTime-videoSeekTime)<1) { this.videoSeekTime = -1; // done } else { var speed = .7; /* not a magic number, you can choose the speed you like */ var newTime = this.md.playheadTime; if (this.videoSeekTime > this.md.playheadTime) { newTime += speed; //fast-forward } else { newTime -= speed; // rewind } this.playVideoAt(newTime); } } } When the When the user removes a bookmark by clicking on the minus sign to the right of the bookmark components, the application calls the function minusMethod(){ if (barray.length > 0) { barray.shift(); } setBookmarkTime(); if (barray.length < 4) { for (var i:Number = barray.length; i < 4; i++) { bookmarkList["b"+i].bm._visible = false; } } } The Using the Executing methods from video cue pointsYou can see the properties of the The md component FLV video has five cue points set. To make the application react to the cue point events, you must create an object that acts as a listener for that event. A listener object contains methods that are executed by Flash when specific events are generated: listenerObject = new Object(); listenerObject.lensFlareMC = this.lensFlare; listenerObject.cuePoint = function(eventObject){ if (eventObject.cuePointName == "lensON") { this.lensFlareMC._visible = true; this.lensFlareMC.gotoAndPlay(lensFlare._currentframe+1); } else if (eventObject.cuePointName == "endFlare") { this.lensFlareMC._visible = false; } else if (eventObject.cuePointName == "startFlare") { this.lensFlareMC._visible = true; this.lensFlareMC.gotoAndPlay(2); } else if (eventObject.cuePointName == "lensOFF") { this.lensFlareMC._visible = false; this.lensFlareMC.gotoAndStop(1); } else if (eventObject.cuePointName == "init") { this.lensFlareMC._visible = false; this.lensFlareMC.gotoAndStop(1); } } Now you need to tell the md.addEventListener("cuePoint", listenerObject) The Using this same process, your cue points could also execute other methods that may communicate to a server, change displayed data, or any other action you want to include in your video. Synchronizing the 2D mapAbove the Stage, you can see the movie clip mapShell. This clip slides a large map, representing a 2D view of the area in the main.flv video, under a mask. The There is no ActionScript in the mapShell movie clip. The entire map is controlled from the root Timeline. The mapShell.onEnterFrame = function() { // map synchronization updateMapPosition(); } This ActionScript code tells mapShell to continuously execute the function updateMapPosition() { if (this.md.playing) { var mapFrameCount:Number = this.mapShell.layout._totalframes; this.mapShell.layout.gotoAndStop(Math.round(videoProgress() * mapFrameCount)); } else { return } } The When the user presses the Map button, the map is displayed and then constantly updates its own position based on the position of the main.flv video. Even when bookmarks are pressed, as the video moves to the bookmark, the map position moves accordingly. Spinning the clockWhen the user plays the main FLV video and presses the Clock button, the clock parts and the timeLapse movie clip becomes visible over the left side of the main video. The user can then click anywhere on the clock to start the clock spinning. When the clock spins and the timeLapse video is playing, the main video is paused. When the user clicks the clock again, the clock and timeLapse video pause and the main video starts playing from its paused position. All of the ActionScript code that controls the clock is in the root Timeline. When the application starts, the clock and timeLapse video are set to move in a forward direction. When the clock reaches 12 hours (the unaccelerated length of the timeLapse video), the clock and timeLapse video reverse and play backwards until the video goes back to the beginning, where it reverses again and plays forward. The digital clock readout at the bottom of the timeLapse video is not taken directly from the video playhead position. It is actually calculated from the positions of the hour and minute hand on the analog clock. Flash positions the hands on the clock by calculating a rotation value based on the timeLapse video position. This involves a bit of trigonometry (sin and cos functions) but is fairly straightforward. About keyframesOne important concept that is important to the functionality of this sample but not immediately apparent is the keyframe. The number of keyframes per second is one of the user options when exporting to FLV video. A keyframe is a frame where all of the information about a video frame is stored in the video file. The information stored about non-keyframes, the ones between keyframes, consists of elements of change since the last keyframe. The farther the play head gets from a keyframe, the lower the video quality becomes. The obvious question is, “Why not use a keyframe every frame?” The reason is your video will be very large and will take more CPU time to play. Storing all elements of every frame is expensive in system resources. The developer must weigh the size and performance of the video with the needs of the application. Another issue affecting the keyframes-per-second setting is how the video will be used with ActionScript. If ActionScript will be directing the video to a specific time, the developer must realize that the video will actually be directed to the keyframe nearest that time. The fewer keyframes per second, the less accurate this type of direction becomes. Using Flash MX and the strategies outlined in this sample application, you can take video presentation to its highest level. |
|