This chapter is from the book
This chapter is from the book
This chapter is from the book
6.3 Movie Control
In the Shane Dorian featured rider section, we kept the higher res color images and the two movies as external movie clips to help cushion the download time for the user. To demonstrate the controller, we developed for the movies. We've included one of the movies in the featuredrider.fla file.
Before we look at that file, we'll quickly discuss how to use video inside of Flash. As of Flash 5, you cannot directly play a QuickTime, AVI, or MPEG (and so on) movie inside your Flash file. There are times, however, when you need to utilize bitmap movies inside of Flash. To do this, you'll need to import your video as an image sequence. Motion pictures are basically many still images displayed rapidly in a sequence. With just about any 2D effects/compositing/ NLE software available today (that is, After Effects, Premier, Final Cut Pro), you can export digital video to a folder of sequentially named, still images. See your software's manual for specific instructions on how to do this.
If you don't own any of this software, and your budget's not ample, a cheap tool that can do this function is QuickTime Pro, which sells for about $30 at http://www.apple.com/quicktime. QuickTime Pro can do a variety of tasks, including exporting your movies as image sequences. Regardless of what software you use, we recommend using no compression on the still images. It's advantageous to bring images into Flash as high-quality images and let Flash do the compression. This avoids even further loss of quality from redundant compression. Also, make sure your output files are named with a sequential numeric order. Most software will do this automatically or will offer it as an option.
One great feature of Flash is that it recognizes sequentially named image sequences. All you need to do is import the first image of a sequence, and Flash will recognize the other images. Flash will then prompt you to decide whether or not to import the whole sequence. If you select yes, Flash will create a new keyframe on the currently selected layer of your timeline for every image. Export this and—viola!—your video is playing in Flash. Keep in mind that Flash isn't meant for just displaying video, and you'll start fighting performance issues depending on the size of the video and how many frames it is. Remember, the user has to download every single still image, which can quickly add up.
One technique you can use to deal with this is to delete every other frame of video and leave one frame in between each of the remaining keyframes. The motion will start to be less smooth, but now your user only has to download half as many images. If this isn't enough, delete every other two frames. Experiment until you reach an acceptable equilibrium between quality of the motion and file size.
We used this technique for the two videos controlled in Flash. Let's go back to featuredrider.fla (see Figure 6.11).
){kind=link}
Figure 6.11 A screen from the feature rider page.
Open this file, edit the content clip, and then edit the symbol content_node3 (see Figure 6.12). You'll see that we structured the clip like the other content clips, with an off frame and an on frame.
){kind=link}
Figure 6.12 The timeline on the content_node3 clip.
On the movie layer, we've put the movie clip node3_movie with an instance name of surfmovie on the on frame. Edit this symbol. You'll see that we've imported an image sequence into a movie clip. Go back one level to the node3 clip.
We'll be concentrating on the movie clip content_video_controller, which is on the controls layer (see Figure 6.13). Edit this clip.
){kind=link}
Figure 6.13 The timeline on the content_video_controller clip.
We've structured this clip with a "playing" frame and a "paused" frame. On the first frame, playing, there are the following actions:
stop ();
controller.gotoAndPlay("playing");
_parent.surfmovie.play();
We start by telling the controller clip (which we'll look at next) to gotoAndPlay("playing"). We also tell the surfmovie to start playing. On the paused frame:
stop ();
controller.gotoAndPlay("paused");
_parent.surfmovie.stop();
Look at the hotspot layer. The playing frame has a hotspot over the timeline graphic that tells the clip to go to the paused frame. On the paused frame, we have several hotspots with actions to tell the clip to go back to the playing frame.
Now edit the content_video_controller_button movie clip with an instance name of controller (see Figure 6.14).
){kind=link}
Figure 6.14 The timeline on content_video_controller_button.
You'll see that we've set up two, two-frame loops. The first loop starts at the playing frame. The first frame has the actions, and the second frame loops back to the first frame. The second loop starts at the paused frame. During the playing loop, the movie is playing, and we want the scrub bar to move in sync with the movie.
Look at the actions on the playing frame:
dragLeft = -32; dragRight = 80; frame = _parent._parent.surfmovie._currentframe; step = (dragRight-dragLeft)/(_parent._parent.surfmovie._totalframes); _x = (frame*step)+dragLeft;
First, we set the left and right limits of the scrub bar with the variables dragLeft and dragRight. These values were determined by manually moving the scrub bar to the left and right of the timeline and noting the X position.
We next set the frame variable to the currentframe of the surfmovie. Step is a variable determined by taking the drag area (dragRight-dragLeft) and dividing it by the number of frames in the surfmovie (_parent._parent.surfmovie._totalframes).
Lastly, we set the X position of the scrub bar to the frame variable multiplied by the step variable. We offset this variable by the left of the drag area. Now, on every loop, the scrub bar will move along with the surfmovie.
Now that we've set up the scrub bar to move along with the surfmovie, we need to set it up so that when the user rolls over the scrub area, he or she can drag the scrub bar and consequently the surfmovie.
Look at the actions on the paused frame.
_root.moviePosition = Math.round((_x-dragLeft)/step); _parent._parent.surfmovie.gotoAndStop(_root.moviePosition);
First, we set the variable moviePosition. This is an inverse equation to the step variable we set in the previous loop. We limit this value to an integer. We tell the surfmove to gotoAndStop(_root.moviePosition).
Finally, look at the actions on the hotspot on the paused frame.
on (press) {
startDrag ("", true, dragLeft, _y, dragRight, _y);
}
on (release) {
stopDrag ();
}
Now the scrub bar is draggable and is constrained to the scrub area. When the user drags the scrub bar, it will evaluate its position and move the surf movie to the appropriate frame. This technique is scalable and can be used to control a movie clip of any length.
6.3.1 JavaScript Pop-Up Window
In our minds, the key to creating a good site is to use technology for its strengths and work around its weaknesses, if possible, with other technologies. We love Flash because it has so many strengths that work around the many weaknesses of HTML. However, Flash has its own weaknesses, and at times we use things like HTML, JavaScript, and QuickTime to provide solutions for those weaknesses. The key is to weave all these elements together to make a consistent presentation that feels seamless. You can opt to make every page a hybrid. In other words, a balance of HTML and Flash together on each page. Or you can isolate the unique elements of content that will need HTML and pop them up in JavaScript windows. This is the method we choose on the Billabong site because it allows the main focus of the content to reach a high level of concentration through Flash without the distracting breaks in experience that come with HTML page loads.
To open a new browser window with JavaScript, the window.open() method is used. The syntax of that JavaScript method is as follows:
window.open(theURL,winName,features);
The benefit of using JavaScript to open a new window rather than targeting a blank new window is that you are given control over the size and properties of the new window. To control the features, you would use a method similar to this example:
window.open('window_url.html','window_name','toolbar=no, location=no,status=no,menubar=no,scrollbars=no, resizable=no,width=400,height=400');
All of the features set to no can be set to yes. At Juxt, if a new window will be filled with Flash (such as Pickled.tv), we'll set status=yes and the other features to no. We do this so that the user can see the browser's status bar, which will display the download status of the files being loaded (see Figure 6.15).
){kind=link}
Figure 6.15 We set the status to yes for new windows opening with Flash so that the user can monitor the browser's status.
There are several ways to invoke this JavaScript method from Flash. The most compatible way is to define a JavaScript function in the HTML page where you've embedded your Flash file. Put this in the head of your document:
<SCRIPT LANGUAGE="JavaScript">
<!--
function openWindow(theURL,winname,features) {
window.open(theURL,winname,features);
}
//-->
</SCRIPT>
NOTE
This is the only method that works for Internet Explorer 4.5 on the Macintosh.
In Flash, create a button with a getUrl action that calls the JavaScript function (see Figure 6.16). For example:
){kind=link}
on (release) {
getURL ("javascript:openWindow('http://www.yahoo.com',
'newWindow','width=400,height=400')");
}
Figure 6.16 A button in Flash with a getUrl action that calls a JavaScript function.
There's another technique we use that involves a hidden frame. When a Flash site is contained in a pop-up window, usually the HTML file that the window contains is actually an HTML frameset with one or more hidden frames. A hidden frame is a frame that isn't allowed any viewable space. Here's a sample frameset for you to see this principle:
<html> <head> <title></title> </head> <frameset rows="100%,*" frameborder="NO" border="0"
You'll see that we've given the mainframe frame100% of the viewable size, while the hidden frame is limited to whatever's left (*), which in this case isn't anything.
Through the browser, the only frame you will see is the mainframe. But the hidden frame is still there, and its existence allows us to load data into that frame without the user seeing it. We can use this hidden frame to launch JavaScript functions as well as opening JavaScript windows. Create an HTML file called launch_yahoo.html with the following contents:
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function openWindow(theURL,winname,features) {
window.open(theURL,winname,features);
}
function openYahoo() {
openWindow('http://www.yahoo.com','yahooWindow','
toolbar=yes,location=yes,status=yes,menubar=yes,
scrollbars=yes,resizable=yes,width=400,height=400');
}
//-->
</SCRIPT>
</HEAD>
<BODY onLoad="openYahoo()">
</BODY>
</HTML>
In your Flash file, the getURL action will look like this:
on (release) {
getURL ("launch_yahoo.html", "hidden");
}
When you invoke this action, the launch_yahoo.html file will be loaded into the hidden frame, and the JavaScript function will run, opening a new window.