This chapter is from the book
This chapter is from the book
This chapter is from the book
Using Video
You need to understand one primary concept when using video in Flash: sounds perform like stream sounds, and pictures act like Graphic symbols. This isn't "streaming" where you can experience the beginning of a media source while the rest downloads (although Flash does this automatically). Recall that sounds in Flash can be set to Stream or Event, and it makes a difference. Additionally, remember how an instance of a Graphic symbol differs from one of a Movie Clip. (These topics were covered in Hour 10, "Including Sound in Your Animation," and Hour 12, "Animating Using Movie Clip and Graphic Symbols," respectively.)
As a review, a sound in a keyframe set to Event begins to play when that frame is reached and continues to play until it's finished—even if the timeline slows down to display all the frames. Stream sounds are locked to the timeline. This means that you need to make sure that the sound has enough space in the timeline to finish. The reason to review Stream sounds is that a video placed in a keyframe needs enough space in the timeline to finish playing the audio portion. For example, if the video is 10 seconds long and the frame rate is 12 fps, you need 120 frames in the timeline. Another reason to remember Stream is that by default all the audio in your video is affected by the global publish setting for stream audio (File, Publish Settings, Flash tab).
The visuals in your video behave like a Graphic symbol. In fact, videos are not really the same as Graphics, Buttons, or Movie Clips because you can't tween videos or tint them (through the color effects like other symbols). However, videos are most like Graphics in several respects. You can scrub to see a preview of videos. Also, you must extend the timeline far enough for all the video frames to play (like you did in step 4 of the preceding task).
Really, these concepts are just here to help you understand a few of the technical details that follow. Also, don't worry if the fact that you can't tween videos or tint them scares you. You'll see in the next task that after you place a video inside a Movie Clip, you're given all the controls you'll ever need.
Task: Make a Playback Controller for Video
In this task, you'll add some standard video buttons that give the user a way to control the video. Follow these steps:
- Create a new movie and import a video. You can use the same sample movie from the preceding task. The only difference this time is click No on the final dialog box (the one that asks you whether you want to extend the timeline—see Figure 17.4).
){kind=link}
Figure 17.4 For this exercise, don't let Flash automatically insert extra frames immediately after import.
-
Now that the movie is embedded and compressed, we can put it inside a Movie Clip. Select the video on the Stage and convert to symbol (press F8). Select Movie Clip in the dialog box and call this symbol myVideo.
-
Immediately after you create the symbol, Flash asks again whether you want to extend the timeline—this time the Movie Clip's timeline. Click Yes.
-
You're about to create buttons (for Stop, Pause, and Play). Just to make it easy, we'll put those buttons inside the myVideo symbol. Double-click on the myVideo symbol on the Stage to be taken inside the master symbol. (If you wanted the buttons outside the symbol, you would need to give the myVideo symbol an instance name and precede each of the following lines of code with that name plus a dot.)
-
While inside the master myVideo symbol, insert a new layer for the button. Select Window, Common Libraries, Buttons. Inside this library, you'll find a folder called Playback. Drag on each of the following buttons: gelPause, gelRight, gelStop. You can align these underneath the video however you want (consider using the Align panel).
-
Open the Actions panel and for each button, click once to select it; then insert an on mouse event (from the plus button, select Actions, Movie Control). (You can keep the default "release" option.)
-
For each button, you want an additional script placed between the curly braces of the on mouse event. Specifically, for the gelRight button insert a play() action (Actions, Movie Control). For the gelPause button, insert stop(). And, for gelStop, insert a goto and then change the option to go to and stop. All three buttons' actions are shown in Figure 17.5. (If you think I made a typo, think about it for a second—the right arrow is definitely play(); the Pause button is really stop() because Flash has no "pause" action; and the Stop button is really "go back to the beginning and stop.")
-
Finally, insert another layer in the myVideo symbol and then insert a keyframe in the last frame. Place a stop() action there.
-
Do a test movie, and you should be able to control your imported video.
){kind=link}
Figure 17.5 The final code for each button.
Advanced Video Controls
In the preceding task, you saw how easy it is to include simple controls. It's not much more difficult to add advanced features. For example, having both a Pause and a Play button onscreen at the same time is a little weird. After all, why would you need to press Pause if the video is already stopped? One solution is to create another Movie Clip (nested inside the myVideo symbol) that contains both the Pause and Play buttons but in separate frames. That is, in frame 1 place the Pause button and then in frame 2 (and whole new keyframe) place the Play button. Then you need to edit the script attached to each button. The Pause button's stop() Action needs to change to _parent.stop() because it is the timeline up the hierarchy that needs to stop. Similarly, the Play button's play() needs to change to _parent.play(). Finally, both buttons need an additional line of code: gotoAndStop(2) for the Pause button and gotoAndStop(1) for the Play button. That's so that the clip (containing the buttons) will jump to the other frame. Finally, this button clip needs a stop() on the first keyframe so that the Pause button appears at the start (and so that you don't see Play and Pause flickering as the movie clip loops by default—see Figure 17.6).
){kind=link}
Figure 17.6 The modified code to make a pause/play toggle clip.
There's still more you can do! Consider a progress bar that shows you how much of the video has played. A quick-and-dirty way to make one is to first create another layer above the video. Draw a rectangle that becomes the progress bar. Convert this to a symbol (as a Motion tween will be perfect) but select the middle left default center option in the Convert to Symbol dialog box shown in Figure 17.7. This way, the rectangle can have its horizontal axis scaled way down and then appear to grow to the right (during the tween). That is, just add a keyframe at the end of the progress bar's layer and then transform the rectangle in frame 1 by grabbing the middle horizontal handle on the right and scaling down to the left (see Figure 17.8). Then just set the first keyframe to motion tween, and you've got a progress bar. Add still another layer for an outline showing the progress bar's maximum width, and it looks pretty good.
){kind=link}
){kind=link}
Figure 17.7 Selecting the middle left default center point will make the progress bar's scale appear to grow to the right during a tween.
Figure 17.8 Transforming the scale of the progress bar involves grabbing the middle right handle.
You can probably think of more effects that could be appropriate for your movies. You can easily add mask layers or even tween the clip containing the video itself. Ultimately, however, videos can add a lot to your file size. For this reason, make sure that you learn about the loadMovie() action covered in Hour 19, "Designing Your Web Site to be Modular." Also, Hour 20, "Optimizing Your Flash Site," teaches you the skills necessary to analyze and optimize your movies. You're about to learn optimization tips for video, but realize that even more general techniques can also be applied.