CHAPTER 12

Working with Video

Because video is such an intrinsic element in our lives, any rich media document must be able to support videos that tell all or part of your story. The developers of Flash have made it amazingly easy to incorporate your videos into your rich media documents.

• Understanding supported Flash video file types
• Setting up ActionScript cue points

Understanding Supported Flash Video File Types

Humans are analog creatures. When you talk, your voice creates nice round undulating waves of sound, and when you listen, your ears receive waves of sound. When you smell, you receive waves of smell. When you feel warmth on your body, you are receiving waves of heat. Humans and all other life forms live in an analog—in other words, streams of waves—environment. Figure 12.1 shows what the analog waveform for the sentence “Hello, my name is Bill” looks like.

FIGURE 12.1 What the sentence “Hello, my name is Bill” looks like in analog waveform

Video represents the same kind of waves. Creatures typically move in a smooth analog kind of way. When someone shoots a video of the real world, they are capturing analog signals.

But computers are digital. They like to have nice sawed-off square waves (see Figure 12.2) because the waves represent sequences of ons and offs. In the end, that’s all a computer really knows about: 0s or 1s, which signify on or off, respectively.

FIGURE 12.2 Digital waves: on/off

So, the problem becomes how to take an analog sound or video and convert it into something computers can understand and yet still have realistic sound and video—in other words, maintain that fidelity to the ears and eyes.

This is a job for a codec. Codecs are simply software applications that do two jobs: convert analog signals to digital while at the same time compressing what would otherwise be a huge file size into something more manageable. The level of compression, hence the fidelity of the file, is relative to the kind of codec chosen.

When you want to include video files in Flash, you must use one of three different file formats:

• FLV, which uses the Sorenson Spark codec (see http://en.wikipedia.org/wiki/Sorenson_codec) or the On2 VP6 codec (see http://en.wikipedia.org/wiki/VP6). (Sorenson Spark is the older of the two codecs.) FLV files are embedded directly into Flash Player. They’re great when you have a quick little video you want to embed into the timeline. These are intended for smaller videos—you’ll want to consider the F4V file type, which is a file that sits alongside your SWF, for larger videos. There’s nothing wrong with embedded videos, but go carefully! For larger files you’ll want to use the F4V format instead.
• F4V, which uses the H.264 codec (see http://en.wikipedia.org/wiki/H.264). F4V files sit alongside the SWF file and are consumed by the Flash Player a little bit at a time. The F4V format is useful for larger videos.
• MP4, which also uses the H.264 codec.

You should also be aware that Flash also supports server-side streaming video, and as a matter of fact, Adobe manufactures video streaming software. See www.adobe.com/products/flashmediaserver/ for more details. This is a topic that’s beyond the scope of this book, so just be aware there is a hierarchy of video-serving capability via Flash. In most cases, you’ll likely use the FLV format and occasionally use F4V. There are many benefits for using FLV for Adobe AIR apps including popular file format, good audio and video quality, good compression, ease of editing, and copyright protection among others.

Converting Non-supported File Types

Fortunately for you, the folks at Adobe have included two different programs that can help you get your videos into Flash:

• The Flash Media Encoder utility
• The Flash Import Video Wizard

First, there is a nifty little utility called the Adobe Media Encoder that will take your video in an unsupported file type and convert it to one Flash can use. This is a separate program from Flash Pro and is invoked the same way you start any program. If you lack a video to convert, feel free to use RaymondLeeTheDrummerDude.wmv on this book’s website at www.sybex.com/go/flashessentials.

1. Start the Adobe Media Encoder program (Figure 12.3). (You’ll find this program in the Applications folder on your Mac or by clicking Start Adobe Create Suite in Windows.)

FIGURE 12.3 The Adobe Media Encoder 6.0 program screen

2. Click the plus sign underneath the Queues tab at the top of the window. This brings up a file browser window.

3. Navigate to the video you want to convert and select it.

4. In the Preset Browser pane on the right side of the Media Encoder program, select the Flash drop-down in the Web Video section (Figure 12.4).

FIGURE 12.4 With movie now loaded, select a conversion type.

5. Select the conversion type you’re interested in. For example, maybe you have a larger-format movie you want to convert to a smaller format. In most cases, F4V will be a better choice than FLV because F4V is the newer of the two Flash video formats.

6. Click the Start Queue button or press Enter (Return on the Mac) to begin the conversion.

The process can take a bit of time and will show you each frame as it is processed.

Using the Import Video Wizard

Unless you’re interested in converting your movie to a different size or frame rate, you will usually want to use the Flash Import Video Wizard in place of the Media Encoder program. When you use the Flash Import Video Wizard, you will have a choice between two ways Flash will import the video for you:

• Load external video with playback component.
• Embed FLV in SWF and play in timeline.

Generally speaking, the first option (the default in the Flash Import Video Wizard) is the best because the movie stays separate from the Flash SWF file. You should be aware that when FLVs are placed on the timeline, their frame rate must match the frame rate of the SWF (24 fps by default). Also, it’s important to point out again that using longer videos on the timeline may produce syncing bugs. And, you cannot import video to a Flash document when the publish style is HTML.

In this exercise you will use the movie RaymondLeeTheDrummerDude.f4v that’s included on the book’s website. This is a movie of a drummer rehearsing various songs with a big band jazz group.

1. Open a new ActionScript 3.0 document.

2. From the Flash main menu, click File Import Import Video selection to bring up the Import Video Wizard (Figure 12.5).

FIGURE 12.5 The Flash Import Video Wizard

3. Click the Browse button, navigate to the movie you want to import, and select it.

4. Assure that the Load External Video With Playback Component radio button is selected and click the Next button.

5. You are presented with a Skinning screen (Figure 12.6), in which you can determine what tools you want to include with the playback component as well as its color. Stick with the default MinimalFlatCustomColorPlayBackSeekCounterVolMuteFull.swf file (Figure 12.7). The list of prepared SWF files that provide playback capability is substantial, providing you with a variety of canned choices. The wizard also provides the ability to create your own if you do not find any of these choices satisfactory.

FIGURE 12.6 The Flash Import Video Wizard Skinning dialog

FIGURE 12.7 The list of playback component styles from which you can choose when in the Flash Import Video Wizard

6. You can choose to stick with the default dark-gray color or pick a new color from the Color Picker. Once you have chosen a color, click the Next button.

7. The Finish Video Import screen (Figure 12.8) provides you with a summary of the work the Import Video Wizard is going to do. Click the Finish button.

FIGURE 12.8 The Finish Video Import summary report

8. If the video imports a bit larger than the stage area, use the Align panel to match the height and width of the stage and to center the movie on the stage (Figure 12.9). Note that there is some room at the top utilized by the FLVPlayback component. Make sure the movie and controls appear on the stage: it’s okay if the FLVPlayback component appears above the stage (that is, in the pasteboard).

FIGURE 12.9 Aligning the movie to the size of the stage

9. Play the movie with Ctrl+Enter (Command+Return on the Mac).

10. While the movie is playing, test all of the control elements: stop and start the movie, change the volume, mute the volume, and so forth. The FLVPlayback component handles all of the playback elements for you.

11. Save the file.

---

TIP

Images and movies can also be exported using File Export from the main Flash menu.

---

Once you have a movie on the stage, Flash notes in the Property Inspector that your movie is an instance of FLVPlayback and provides you with several different control elements for adjusting your movie (Figure 12.10) in the Component Parameters section. Additionally, the library has an FLVPlayback component in it.

FIGURE 12.10 The FLVPlayback Component Parameters section in the Property Inspector

The following list includes brief explanations of the FLVPlayback component parameters, some of which are directly adjustable within the Property Inspector; others must be managed via code:

• align: Determines the alignment of the video within the FLVPlayback component bounds.
• autoPlay: A Boolean (true/false) value that determines if the video will immediately begin playing when the Flash movie is launched.
• cuePoints: If cue points are used in the video (more on that in the next section), the points are noted here.
• isLive: If the video is being served up by Flash Media Server, this check box should be checked.
• preview: Provides a preview image that will appear before the video plays. The viewer sees the playback controls and the preview image.
• scaleMode: This dropdown allows you to select aspect ratios for the video should you resize the playback screen. The default is to maintain the vertical and horizontal aspect ratio.
• skin: This is the skin you picked when you ran the Import Video Wizard.
• skinAutoHide: Hides the skin when the mouse cursor is not over the video.
• skinBackgroundAlpha: Sets the transparency value (0: 1) of the skin. This is a percentage value. Zero is no alpha—completely transparent, whereas one means completely opaque. Think of this the same way you would express a percentage without using the percent sign (e.g., 50% = 0.50). Thus a 50% alpha value would be expressed as 0.5 in this field.
• skinBackgroundColor: Sets the background color of the skin.
• source: The relative path to the video. Relative means that you don’t include a drive letter; you use slashes (/) and folder names to point to the video file. This is hugely important when you’re ready to install the video on a web server. Flash needs to know the path to the video.
• volume: Sets the volume (0: 1). See note above about how this number setting works.

Setting Up ActionScript Cue Points

The drummer in the movie—Raymond Lee—plays drums for a big band jazz and swing group in the Denver area called William and the Romantics. This video was shot during a rehearsal session. Ray used his video editing software to chop out various sections of his playing to reduce the video down to a few short segments. There are two songs he is rehearsing with the band: Louis Prima’s famous “Sing, Sing, Sing” and Glen Miller’s “I’ve Got a Gal in Kalamazoo.” The video switches between the two songs several times.

As you watch the video, you’ll see that there are distinct places where the video changes somehow. These would be ideal locations to introduce cue points (provided, that is, you would like to have places to which viewers can jump in the video).

Adding ActionScript Cue Points to Your Video

In this exercise, you will use the FLVPlayback component you created in the previous exercise and add some ActionScript cue points. Additionally, you will include some buttons on the stage so that viewers can navigate to the various sections of the video using the ActionScript cue points. (Reference the file RayTheDrummerDude2.fla on this book’s website if needed.) As you do this work, pay attention to the location in which the video is located. This path must match the path you use on the web server at the time you decide to publish the movie and the SWF file or the cue point data will be erased.

1. If the video you created in the previous exercise is not open, open it.

2. Click the video player (in reality you are clicking the FLVPlayback component).

3. In the Property Inspector, click the arrow next to the Component Parameters section to minimize it. The Cue Points section beneath it is expanded (Figure 12.11).

FIGURE 12.11 The Cue Points section of the FLVPlayback properties

4. Using the Free Transform tool, resize the video so it takes up about two-thirds of the stage.

5. Change the stage color to match the video player’s skin color (Figure 12.12).

FIGURE 12.12 Making the FLVPlayback component smaller, getting ready for buttons

6. Click the FLVPlayback component to activate it.

7. Give the component an instance name of RTDD (realizing that the acronym stands for Ray the Drummer Dude). In order to tie the ActionScript cue points you’ll be creating to the buttons you’ll be creating, you must have an instance name for your video.

8. Activate the Selection tool.

9. In the Cue Points section of the Property Inspector, click the plus sign to add a new ActionScript cue point.

10. Click the name section and give this new ActionScript cue point the name Start (see Figure 12.13).

FIGURE 12.13 Giving an ActionScript cue point a name

11. Click the slider on the FLVPlayback component that allows you to move ahead or back in the video—it’s called the seek bar—and slide to 00:16:01:54.

12. Repeat steps 9 and 10, giving this new ActionScript cue point the name Kalamazoo.

13. Drag the seek bar to 00:25:01:54.

14. Repeat steps 9 and 10, giving this new ActionScript cue point the name KalamazooBW (see Figure 12.14).

FIGURE 12.14 Adding additional ActionScript cue points

15. Drag the seek bar to 00:42:01:54.

16. Repeat steps 9 and 10, giving this new ActionScript cue point the name Sing_Sing_Sing.

17. Drag the seek bar to 00:55:01:54.

18. Repeat steps 9 and 10, giving this new ActionScript cue point the name Kalamazoo_Reprise.

19. Save your work.

Adding Parameters to Cue Points

Now that you have some cue points set up, you can add parameters to them. Parameters are simply data points that describe more about a specific cue point. The parameters consist of two sections: parameter and value. In the Parameters part, you type the name of the parameter. In the Value section, you type the data you’d like to store. The data can be anything, but if you type words, you need to use underscores to separate them: no spaces!

In this exercise you’ll add some parameters to a couple of your cue points.

1. In the same video you were working with in the previous exercise, click the Start cue point.

2. In the Parameters section, click the plus sign to add a parameter.

3. In the Parameters area, click and type the name RTDD.

4. In the Value area, type Ray_At_Rehearsal (see Figure 12.15).

FIGURE 12.15 Giving an ActionScript cue point a parameter

5. Click the Kalamazoo cue point.

6. Repeat steps 3 and 4 using the parameter name Kalamazoo_Info and the value Recorded_1942_In_film_Orchestra_Wives.

7. Add a second parameter with the name Singers and the value Tex_Beneky_Marion_Hutton_The_Modernaires.

8. Save your work.

You can assign as many parameters and values for each cue point as you like. Programmatically, you could access these values using ActionScript.

Adding the Buttons

Now all you have to do is add some buttons that, when pressed, navigate the user to a particular cue point. With the Flash Code Snippets panel, this job is easier than it sounds.

1. If the Flash file from the previous exercises isn’t open, open it now.

2. Activate the Rectangle tool, select no stroke and a fill color that matches your stage background and video skin colors.

3. In the Rectangle Options section of the Property Inspector, set all four corners to 25.

4. Draw a rectangle on the pasteboard.

5. Activate the Text tool, and select a sans-serif font and an appropriate font color.

6. Make a text field on the pasteboard with the word Start in it and position it atop the rectangle you created.

7. Activate the Selection tool and marquee both objects.

8. Right-click the marqueed objects and select Convert To Symbol.

9. Make a button symbol named btnStart.

10. Double-click the new button symbol to enter button-editing mode.

11. Right-click the Over frame and select Insert Keyframe. Flash makes an exact copy of the asset on the Up frame.

12. Alter the button’s look somehow (e.g., change its color or change the text color).

13. Repeat steps 11 and 12 for the Down frame.

14. Move the button into place (see Figure 12.16).

FIGURE 12.16 Placing the button on the screen

15. Repeat steps 2 through 14 for the remaining buttons, labeling them Kalamazoo, KalamazooBW, and SingSingSing.

16. Save your work.

Now it’s time to add the code to the buttons.

1. Select the FLVPlayback component.

2. In the Property Inspector, uncheck the autoPlay property.

3. Give the video an instance name of videoJazz.

4. Select the Start button.

5. Give the symbol an instance name of btnStart.

6. Open the Code Snippets panel and navigate to the Audio And Video section.

7. Double-click the Click To Seek To Cue Point snippet. Flash creates an Actions layer at the top of the main timeline (if it does not already exist), opens the Actions panel, and copies the required code into the Actions panel at this frame.

8. In the Actions panel, there are two changes you need to make to the code: the video instance name and the cue point. Change them to videoJazz and Start, respectively. You’ll need to key in the video instance name twice.

9. Add stop(); to the top of the Actions panel (see Figure 2.17).

FIGURE 12.17 Adding ActionScript code to the button: two places where you change the video instance name and one place where you key in the cue point name

10. Test the movie.

11. Repeat steps 4 through 10 for the remaining buttons.

12. When you play the movie, you should be presented with four active buttons that, when clicked, take you to the cue point you gave in the ActionScript code (see Figure 2.18). This is an exciting merger of code and rich media: code even the coding neophyte can manage!

FIGURE 12.18 Final video product running in a Flash movie

13. Save the file.

---

The Essentials and Beyond

In this chapter, you learned how easy it is to bring video into your Flash documents. You learned about the Flash Media Encoder utility and the Flash Import Video Wizard. You also learned how to create cue points and tie them to ActionScript events.

Let’s polish this chapter off with one last video activity: attaching a video directly inside a Flash document on the main timeline. This is something you should not be frequently doing. It’s better for most movies to live outside the Flash file and be referenced by the FLVPlayback component. This prevents you from having inordinately large Flash files. The video streaming mechanism in the FLVPlayback component will help regulate the opening and downloading of video frames by your viewers.

But there are occasional times when you just want to place a video right on the stage. Let’s go through the exercise. You’ll use the supplied video RayTheDrummerDudeLive.flv, a video of Raymond Lee playing “I’ve Got a Gal in Kalamazoo” at a wedding.

1. Open a new ActionScript 3.0 document.

2. Using Windows Explorer in Windows or a Finder window on the Mac, locate the file and drag it onto the stage. The Import Video Wizard launches (shown here).

3. Click the Embed FLV In SWF And Play In Timeline button, then click Next. The Embedding window appears.

4. Make sure Embedded Video is the selection in the Symbol Type drop-down.

5. Make sure the Place Instance On Stage, Expand Timeline If Needed, and Include Audio check boxes are checked. Click Next.

6. The Finish Video Import window appears. Click Finish.

7. Launch the Align panel.

8. In the Match Size section, click the Match Width And Height button.

9. In the Align section, click the Align Horizontal Center and Align Vertical Center buttons to place the video directly on the stage.

10. Play the movie.

Answer to Additional Exercise

---