Tài liệu Foundation Flash CS5 For Designers- P12 docx

VIDEO

529

The source files are available online from either of the following sites:
 www.FoundationFlashCS4.com
 www.friendsofED.com/download.html?isbn=1430229940
The authors would like to thank William Hanna, Dean of the School of Media Studies, at
the Humber Institute of Technology and Advanced Learning in Toronto, and Robert
O’Meara, a faculty member with the Film and Television Arts program at Humber, for
permission to use many of the videos in this chapter. The videos were produced by
students of Humber’s Interactive Multimedia program and Film and Television program.
We also want to thank Phoebe Boswell for letting us use her student project—The Girl
With Stories In Her Hair—and to her instructor, Birgitta Hosea, at Central Saint Martins
College of Art and Design in London, UK, for introducing us to Phoebe.
Video on the Web
Before we turn you loose with creating and playing Flash video, it is critically important that you understand
how it gets from the server to the user’s machine.
The Flash video format uses the .mp4, .mov, .flv, or .f4v extension. The first two must be encoded
using the H.264 codec and AAC encoding for the audio track. It plays only in Flash, Adobe Bridge, or
Adobe Media Player (a free AIR application available from www.adobe.com/products/mediaplayer/).
The key thing about this format is that the data is sent to the user’s computer from the server, and then
Flash Player plays it. To help you understand this process, let’s go visit the Hoover Dam in the United
States.
The Hoover Dam was built in the 1930s to control the Colorado River. When the dam was completed, the
water behind it backed up to form Lake Mead. Now the water flows along the Colorado River into Lake
Mead, and the dam releases that water, in a controlled manner, back into the Colorado River. That means
if the water rushes to the dam and overwhelms it, or the dam operator releases too much water, the
people downstream from the dam are in for a really bad day.
Streaming video is no different from the water flow to the Hoover Dam and beyond (see Figure 10-1). The
data in the FLV is sent, at a data rate established when the video was encoded, from the server to Flash

Player. The video is then held in a buffer and released, in a controlled manner, by Flash Player to the
browser. If the flow is too fast—the data rate is too high for the connection—the browser is overwhelmed,
and the result is video that jerkily stops and starts. This is because the buffer constantly emptying and
having to be refilled. In many respects, your job is no different from that of the crew that manages the flow
of water from the buffer behind the Hoover Dam back into the Colorado River. When you create the FLV,
the decisions you make will determine whether your users are in for a really bad experience.
www.zshareall.com
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
CHAPTER 10
530


Figure 10-1. When it comes to Flash video, you control the Hoover Dam.
Video formats
The first step in the process of creating the FLV file that will be used in the Flash movie is to convert an
existing video to the FLV format. This means you will be working with digital videos that use the following
formats:
 AVI (Audio Video Interleave): A Windows format that supports a number of compression
schemes but also allows for video without any compression
 DV: The format used when video moves directly from a video camera to the computer
 MPG/MPEG (Moving Pictures Experts Group): A lossy standard for video that is quite similar to
the lossy JPG/JPEG standard for still images
 MOV: The QuickTime format
For those of you wondering about the WMV (Windows Media Video) format, yes, you
can encode it. However, the encoding can be done only on a Windows computer. This
book is somewhat platform-agnostic, which explains why WMV didn’t make the video
format list here.
Do yourself and your users a favor, and check out the compressor used to create the video. If a lossy
compressor was used, you are going to have a serious quality issue. The compressors used to create FLV
files are also lossy, meaning you will be compressing an already-compressed video.

Both the QuickTime player and Windows Media Player show you compressor information. In the
QuickTime player, select Window
➤
Show Info. You will see a dialog box with movie information,
including the compressor used, as shown in Figure 10-2.
This book was purchased by
www.zshareall.com
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
VIDEO

531


Figure 10-2. QuickTime’s Movie info dialog box shows that the H.264 compressor was used for the The
Girl With Stories In Her Hair video.
Windows video files playing through the Windows Media Player are a bit different. Open a file in the Media
Player, right-click the file’s name, and select Properties from the context menu. You will see the
Properties dialog box, which identifies the video codec. Now that you know which file formats you can
use, you also need to know that three output formats are available to you:
 FLV: This is the common format used on the Web, which can be played by Flash Player 6 and
higher.
 F4V: This is the new kid on the block and was primarily developed to manage HD files that will
need to be converted to a format that is used by Flash Player 9,0,115,0 or higher. Think of this as
being an MP4 video for Flash, and you will be on the right track.
 H.264: This is a common format that you might know better as MPEG-4 or MP4. It is an
international standard (MPEG4 H.264) developed by the Moving Pictures Expert Group (MPEG)
and is also recognized by the International Standardization Organization (ISO).
www.zshareall.com
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
CHAPTER 10

532

From a Flash designer’s perspective, the H.264 format has some rather profound implications. The biggest
one is that video, for all intents and purposes, has become untethered—it is not device-dependent. The file
handed to you by your video producer can just as easily be played on a website as it can on an iPod,
Sony’s PlayStation Portable, or high-definition television (HDTV). It also means that, thanks to the addition
of hardware acceleration and multithreading support to Flash Player, you can play back video at any
resolution and bitrate, including the full HD 1080p resolution you can watch on HDTV.
Encoding an FLV
Surprisingly, the first step in the conversion process has absolutely nothing to do with Flash. Instead, open
the video in your player of choice and watch the video twice. The first time is to get the
entertainment/coolness factor out of your system. The second time you watch it, ask yourself a few
questions:
 Is there a lot of movement in this video?
 Is the audio of major importance?
 Is there a lot of color in the piece?
 Is the video in focus, or are there areas where the image becomes pixelated?
The answers to these questions will determine your approach to encoding the video.
To demonstrate encoding, we will use the Rabbit.mov file, located in this chapter’s Exercise folder. Go
ahead and open this file in QuickTime, and watch it twice.
Yes, the file is huge: just over 70MB. There is a reason. When creating Flash video, you need every bit of
information contained in the video when you do the conversion. Uncompressed video is about as big as it
gets. When you finish converting the video into an FLV, you will be in for a rather pleasant surprise.
Using the Adobe Media Encoder
To encode video, you use the Adobe Media Encoder CS5. This used to be known as the Adobe Flash
Video Encoder. The name change is deliberate. Adobe came to the conclusion that the Flash brand name
was being attached to a lot of stuff, and there was understandable concern that the brand was becoming
diluted. The release of Creative Suite 4 started the process of Adobe’s refocusing of the Flash brand. If
you have used Flash to encode video in previous, pre-CS4, iterations of the application, you will find that
things have really changed.

To begin, open the Adobe Media Encoder, found in C:\Program Files\Adobe\Adobe Media Encoder
CS5 on a Windows computer or Macintosh HD\Applications\Adobe Media Encoder CS5 on a Mac.
Then drag a copy of the Rabbit.mov file from your Exercise folder into the render queue, as shown in
Figure 10-3. Alternatively, you could click the Add button or select kFile
➤
Add. Then, using the Open
dialog box, navigate to your Exercise folder for this chapter, select the video, and click the Open button to
add the video to the queue. Just be aware that once a video is added to the queue, the clock starts
running. If you do nothing within the couple of minutes you get, the video will be created using the default
settings.
www.zshareall.com
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
VIDEO

533

The drop-down lists in the Format and Preset areas actually aren’t as complicated as they may first
appear. The Format drop-down list offers the format choices FLV/F4V and H.264. The Preset list
includes presets for a variety of situations and formats. To keep this chapter manageable, we aren’t going
to go deep into the choices and formats. Instead, let’s just create a simple FLV file that will allow you to
explore this application.
Click the Preset drop-down arrow, and select Edit Export Settings at the bottom of the menu. This
will open the Export Settings window, as shown in Figure 10-4. At the left is a preview area. The area
underneath the video preview is where cue points can be added. We’ll talk about cue points later in this
chapter. The right side of the window consists of a series of tabs that allow you to choose a preset
encoding profile, select a filter, choose an output format, set the video compression, and set the audio
compression.

Figure 10-3. A file is in the render queue waiting to be encoded.
www.zshareall.com

Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
CHAPTER 10
534


Figure 10-4. The Export Settings window
We are not huge fans of the encoding presets in the Preset drop-down list. The problems with the
presets are that they assume the lowest common denominator, tend to be wrong, and result in files that
are unnecessarily large. For example, many of the presets have the audio track encoded to stereo, which,
as we explain later, usually just increases the file size and bandwidth demand, without adding any quality
to the audio. Making your own choices for the encoding, rather than using presets, puts you in control of
the process and allows you to produce files that meet your specific design needs, instead of satisfying a
broad, homogenous audience.
Previewing and trimming video
Under the preview area is the current time indicator. It displays time in the format hours: minutes: seconds:
milliseconds. The triangle at the top of the line is the jog controller. If you drag it back and forth, the video
will follow along.
Underneath the jog controller are two other triangles. The one on the left is the In point, and the one on
the right is the Out point. You can use these to trim the video. For example, assume there are two
www.zshareall.com
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
VIDEO

535

seconds of black screen and no audio at the end of the video. If you drag the Out point to the start of the
stuff you don’t need, it will be removed when you create the FLV.
Here’s a neat little trick that can help with setting In and Out points. The preview
controls are very precise, and reaching an exact point in time can be an exercise in
tedium. Assume you want the current video to last 4 minutes and 14 seconds instead of

04:14:53. Drag the playhead slider rightward to the end of the video. Press and hold
the left arrow key. When the key is down, the milliseconds measure will reduce. When
you are close to the 000 milliseconds point, release the key, and then click the Out point
slider. The video will now have an Out point at that precise point in time.
Video settings
On the right side of the Export Settings window, click in the Format tab, and click the FLV radio
button. Then click the Video tab to open the Basic Settings area, as shown in Figure 10-5. This is
where you set the all-important video data rate.
If you want to change the name of the video, double-click the Output Name on the right
side of the Export Settings window to open the Save As dialog box. All this does is
save the filename. It does not create the FLV.

Figure 10-5. Setting the encoding values for the video portion of the movie
www.zshareall.com
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
CHAPTER 10
536

The various areas of the Video pane are as follows:
 Codec: The job of the codec (short for COmpressor/DECompressor or enCOder/DECoder) is to
reduce the data rate while maintaining image quality. In simple terms, there are two types of
codecs: lossy and lossless. Lossless codecs, like QuickTime’s Animation codec, add minimal
compression to preserve data, which explains why these files are massive and inappropriate for
direct web playback. The two codecs that are available for your selection here—Sorenson
Spark and On2 VP6—are lossy. They preserve playback quality while tossing out a ton of
information, which explains how a 1MB video file becomes an 800KB FLV or F4V file. Note that If
your target is Flash Player 7 or lower, your only choice is the Sorenson Spark codec. For our
example, select On2 VP6.
 Encode Alpha Channel: If your video contains an alpha channel, select this. Alpha channel
video can be encoded using the On2 VP6 codec only. For our example, this option should not be

selected.
 Resize Video: If this is selected, deselect it. This is not the place to resize video. If you really
need to resize a video, do it in Adobe Premiere, After Effects, Final Cut Pro, or another video-
editing application.
If you need to resize a video, be sure to maintain the video’s aspect ratio. When digital
video is created for your television, it is created at a 4:3 ratio. This ratio is called the
video’s aspect ratio and fits most computer monitors. Other common examples would be
widescreen television video, which has an aspect ratio of 6:5, and HDTV, which uses a
16:9 aspect ratio.
For example, the video you are encoding has a physical size of 320 pixels wide by 240
pixels high. The width is easily divisible by 4, and the height is divisible by 3. By
maintaining the aspect ratio, you avoid introducing artifacts (blocky shapes and other
nastiness) into the video when it is resized.
While we are on the subject of resizing video, never increase the physical size of the
video. If you need to change the size, use this area to reduce, not increase, the width
and height values. Increasing the physical dimensions of the video from 320

240 to
640

480 will only make the pixels larger, just as it does in Photoshop and Fireworks
when you zoom in on an image. The result is pixelated video, and it will also place an
increasing strain on the bandwidth, or flow of data into Flash Player.
In spite of our having said to never increase the size of a video, Flash Player 9,0,115,0
(and higher) now permits full-screen video playback. We’ll review this feature later in the
chapter. It changes video size in an exception-to-the-rules way.
www.zshareall.com
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
VIDEO

537

 Frame Rate [fps]: This is how fast a video plays, measured in frames per second (fps). If you
are unsure of which frame rate to use, a good rule of thumb is to choose a rate that is half that of
the original file. If the original was prepared using the NTSC standard of 29.97 fps (close enough
to 30), select 15 fps. If the PAL standard was used (25 fps), rates of 12 or 15 fps are acceptable.
Of course, with the improvements to Flash Player, the industry is steadily moving toward 24 fps.
For this example, set Frame Rate to 15.
 Bitrate Encoding: Your choices are CBR (for constant bitrate) and VBR (for variable bitrate). If
you are streaming video through Flash Media Server 3 or using the Flash Video Streaming
Service, choose CBR, which, as the name implies, provides a level bitrate into Flash Player.
Choose VBR if you are intending to use a web server making standard HTTP requests. For this
example, select VBR.
 Encoding Passes: One pass means the video analysis and encoding are done at the same
time. Two passes means the encoder analyzes the video in the first pass looking for major
changes, and the second pass encodes the video to accommodate those changes. So, what’s
the difference? Two-pass encoding is the best for videos with numerous bitrate changes. For
example, you could have a video with a narrator who stays put for the first few seconds of the
video and, when he finishes, race cars go roaring by. The narration doesn’t require much to play,
but the cars zipping by will require a higher bitrate to display accurately. Encoding in two passes
allows the bitrate savings at the start of the video to be passed on to the action sequence. So,
Two is the right choice for our example.
 Bitrate [kbps]: This slider sets the bitrate for the video portion of the encoding process in
kilobits per second (kbps). Be very careful when choosing a Bitrate setting. For example, don’t
think you can supersize the quality and set the data rate to, say, the maximum of 10,000 kbps. Do
that, and you can guarantee that residents downstream from the Hoover Dam are in for a day that
involves scuba gear. The data rate for an FLV is the sum of the audio and the video data rates.
What should you choose? Until you become comfortable with creating FLV files, consider a
combined audio and video data rate of around 350 kbps to 400 kbps as being a fair target. For
the example, use 300 kbps.

 Set Key Frame Distance: This is in the Advanced area for a reason. Unless you have
mastered video, it is best to let the software do the work and leave this option unselected.
 Key frame interval: Enter a value here, and the Key frame placement selection will
change to Custom. Remember that first question we asked you to consider at the start of the
chapter: is there a lot of movement? The answer determines key frame placement. If you are
recording paint drying, having a key frame every 300 frames of the video would work. If you are
encoding a video of a Formula One race from trackside, you will want the key frames to be a lot
closer to each other, such as every 30 frames or so.
After you’ve set the video values, click the Audio tab, not the OK button, to continue.
www.zshareall.com
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
CHAPTER 10
538

Audio settings
The Audio pane, shown in Figure 10-6, is where you manage the audio quality. As we pointed out in
Chapter 5, the default format for all audio in Flash is MP3. This explains why you have only that one
choice in the Audio pane.

Figure 10-6. Setting the data rate for the audio portion of the movie
You need to make two decisions here:
 Will it be stereo or mono?
 What will the data rate be?
Unless there is a persuasive reason—you are encoding a band’s video, for instance—stay with a Mono
setting for Output Channels. Don’t think you can improve the audio track by outputting it as a stereo
track if it was originally recorded in mono. You can’t change mono to stereo. All that does is double the
size of your audio by playing two synchronized mono tracks. Outputting stereo will only serve to increase
the final file size of the FLV.
Twirl down the Bitrate Settings. For Bitrate [kbps]; you should generally choose either 48 or
64. Anything lower results in an increasing degradation of audio quality. Anything higher only serves to

increase the demand on the bandwidth, with no appreciable quality gain. Still, 32 kbps is a good choice if
the soundtrack is nothing more than a voice-over, and 16 kbps is ideal if the soundtrack is composed of
intermittent sounds such as the buzzing fly sound used in the Butterfly project that started this book. For
this example, select 64 from the Bitrate [kbps] drop-down menu.
www.zshareall.com
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
VIDEO

539

Cropping video
Let’s now turn our attention to the left side of the Export Settings window, as shown in Figure 10-7.
The top of the pane contains a Crop tool. You can use this tool to eliminate unwanted areas of the video.
When you click the tool, handles are added to the sides of the video, and you can use them to crop. If you
want to do it by the numbers, scrub across the values. The Crop Proportions drop-down list is very
important. It helps you to not only crop a video but also to maintain the all-important aspect ratio.

Figure 10-7. The left side of the panel allows you to crop the video, set the In and Out points, and
generally manipulate the final output.
Click the Output tab. You get one choice: Crop Setting. Provided you have selected the Crop tool in
the Source pane, the drop-down menu offers three choices. These choices have nothing to do with
physically cropping a video. They specify how to deal with the dead area once an aspect ratio has been
applied during the actual crop, as follows:
 Scale To Fit will scale the video to fit the area.
 Black Borders will keep the original aspect ratio of the video and fill areas on the sides where
there is no video with black.
 Change Output Size will change the size of the video to the dimensions of the crop.
You can toggle between the Source and Output panes by clicking the toggle button—
Switch To Output—to the right of the Crop Setting drop-down list.
www.zshareall.com

Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
CHAPTER 10
540

Running the render process
After you’ve set your export settings, click OK to return to the render queue. Then click the Start Queue
button to start the process.
You will see the progress bar move across the screen as the video is being rendered, and you will also
see the video being rendered in the preview area, as shown in Figure 10-8. If you click the Stop Queue
button, you will see a dialog box asking you whether you want to stop the process or finish the render. If
you have a number of videos in the queue, clicking the No button in the dialog box will stop the process,
and an Errors dialog box will appear, telling you that you stopped the render process. If you want to
make changes to the settings or restart the render process, select the video—its status will be set to Skip
in the Status area—and select Edit
➤
Reset Status.
Don’t be terribly surprised if you see your video look like it is being encoded twice. New to Flash CS5 is a
little message that tells you which pass of the two passes selected with the encoder is currently being
undertaken.

Figure 10-8. Rendering an FLV
This book was purchased by
www.zshareall.com
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
VIDEO

541

Here’s a little-known technique that will make your life much less stressful. Selecting a
video in the render queue and clicking the Remove button will remove it from the render

queue. What if you have made a mistake and need to make a simple change to the
video or audio settings? If the video is still in the render queue and its status is set to
either Skip or Completed, you can select the video and choose Edit
➤
Reset
Status to put it back into the render queue and then click the Settings button to
return to the original video and audio settings. This is really handy in situations where
you have messed up a cue point or two. For this to work, though, you can’t move the
video from its original folder or delete the video from the render queue.
When the encoding is complete, a green check mark will appear in the Status area. Close the Adobe
Media Encoder, and open the Chapter 10 Exercise folder. If this is the first time you have used the Adobe
Media Encoder, you had better sit down. You will notice the FLV and the QuickTime movie are in the same
folder. Check out the file size of the FLV. The size has plummeted from around 59MB to 13MB, as shown
in Figure 10-9. Don’t panic—this is common with the Adobe Media Encoder. Remember that the On2 VP6
codec is lossy, and it really spreads out the keyframes. Both of these combine to create significant file-size
reductions. This also explains why it is so important that the source video not be encoded using a lossy
codec.

Figure 10-9. It is not uncommon to have an FLV shrink to 20 percent or less of the original file size.
Batch encoding
If there was one common complaint about encoding videos for Flash, it was that there was no way of
encoding a bunch of them all at once. Third-party software, such as Sorenson Squeeze and On2’s Flix
Pro, allowed for batch processing, but this feature was unavailable in Flash—that is, until now. Here’s how
to encode a folder full of videos:
1.
Create a folder on your desktop named WatchMe or something like that.
2.
Add a bunch of MOV and/or AVI files to this folder.
3.
Open the Adobe Media Encoder.

4.
Select File
➤
Create Watch Folder to open the Browse for Folder dialog box.
www.zshareall.com
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
CHAPTER 10
542

5.
Navigate to the folder you just created, select it, and click Choose. When you return to the Adobe
Media Encoder, the folder and the files in it will appear, as shown in Figure 10-10.

Figure 10-10. You can do batch encoding.
6.
Select a preset, including a custom one you may have created. This preset will be applied to all
the files in the folder. For better or worse, you can’t apply different encoding settings to each of
the files in the folder. It is sort of: “One setting for all.”
7.
Click the Start Queue button to encode all the files.
When the encoding finishes, open your folder. You will see that the Adobe Media Encoder has created a
folder named Output and placed the encoded files in that folder. It has also created another folder,
Source, and moved the original files into it.
Creating an F4V file
The F4V format was introduced in conjunction with Flash Player’s ability to play H.264-encoded files. Even
though .mov files encoded with the H.264 compression can be played directly out of Flash Player, the F4V
format offers one significant difference: these files can’t be played anywhere but through Flash Player and
can’t be converted to another format and subsequently edited. Based on the ISO base media format, F4V
www.zshareall.com
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

VIDEO

543

is becoming a secure format for HD video because the video track is encoded using H.264 and the audio
is compressed using the AAC compression standard. As well, it is ideally suited to video with the 16:9
aspect ratio, whereas FLV has always been the choice for video with a 4:3 aspect ratio. Here’s how to
create an .f4v file:
1.
Open the Adobe Media Encoder, and add the Vultures.mp4 file in your Exercise folder to the
Render Queue.
2.
Click the Settings button to open the Export Settings dialog box shown in Figure 10-11.
Click the Format tab, select the f4v option, and then click the Video tab to open the video
settings.

Figure 10-11. Creating an .f4v file
www.zshareall.com
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
CHAPTER 10
544

3.
In the Video settings area, use these values:
 Frame Rate: Select 24. According to the summary, the original’s frame rate is 23.98 fps.
 Bitrate Encoding: Select VBR.
 Encoding Passes: Select Two.
 Bitrate Level: Select High from the drop-down. The plan for this video is to play it from
the desktop so data rate is not an issue.
 Quality: Select Best.

4.
Click the Audio tab, and use these values:
 Output Channels: Select Stereo.
 Bitrate: Select 128 kbps.
5.
Click OK to return to the render queue. Click the Start Queue button to start encoding the
video. Close the encoder when you finish.
More Media Encoder Goodness
The changes between the Adobe Media Encoder CS4 and its CS5 reincarnation are rather startling. In
many respects, the CS5 version is a sleek, well-oiled machine dedicated to a sole purpose: create video
for Flash Player. For example, if you were to click the Export formats available box for the
Vultures.mp4 file in the CS4 render queue, you would be presented with a list of 16 potential formats
ranging from Audio Interchange File Format to MPEG2 Blu-ray. The CS5 version gives you two choices:
H.264 and FLV/F4V.
The H.264 format is the most important because it is the most ubiquitous. You can find it playing video on
everything from an iPod to a 60-inch HD screen and from YouTube and Vimeo to your cell phone.
Another really interesting aspect of the Adobe Media Encoder can be found in the Export Settings
dialog box. If your output format is H.264, the preset drop-down list shown in Figure 10-12 appears. As you
can see, your choices range from the TV in your home to the formats preferred by Vimeo, YouTube, and
Apple’s iPod and Apple TV devices.
If you select one of the 3GPP choices—a common video format for cell phones—the Open in Device
Central area lights up. With the advent of Flash Player 10.1 and the increasing growth of the Android
platform, the Adobe Media Encoder CS5 is destined to be the device workhorse when it comes to video.
When you select the format and encode the video, it will be placed into a letterbox if the video’s and
device’s aspect ratios aren’t similar. When the encoding finishes, Device Central launches, and, as shown
in Figure 10-13, the video starts playing in the device chosen.
www.zshareall.com
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
VIDEO

545


Figure 10-12. H.264 is the way to go when a video is destined for more than web playback.

Figure 10-13. You can preview the file in Device Central.
www.zshareall.com
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
CHAPTER 10
546

Playing an FLV in Flash CS5
After encoding the video, you’re ready to have it play in Flash. There are three ways to accomplish this
task:
 Let the wizard do it for you.
 Use the FLVPlayback component.
 Use a video object.
The first two are actually variations on the same theme. Both will result in the use of the FLVPlayback
component, but they approach the task from opposite angles. The final method is the most versatile but
involves the use of ActionScript. Regardless of which approach you may choose, the end result is the
same: you are in the Flash video business.
Using the wizard
We’ll begin with an example of using the wizard. We’ll cover the steps involved in actually adding video to
Flash. If you have never used Flash video, this is a great place to start. Let’s get going:
1.
Create a new Flash document, and select File
➤
Import
➤
Import Video. This will open the

Import Video wizard.
2.
The first step in the process is to tell the wizard where your file is located. Click the Browse
button, and navigate to the folder where you placed the FLV created in the previous exercise, or
use the Rabbit.flv file in your Chapter 10 Exercise folder.
There are only two possible locations for a video: your computer or a web server. If the file is located on
your computer, the Browse button allows you to navigate to the file, and when you select it, the path to the
file will appear in the File path area, as shown in Figure 10-14. This rather long path will be trimmed, by
Flash, to a relative path when you create the SWF that plays the video.
3.
Click the Load external video with playback component radio button. This tells Flash
it needs to stream the video into Flash Player.
If you have a lot of videos, you may have put them in a folder on your website. In this case, you need to
add an absolute path to the file. The path to Rabbit.flv would be www.mySite.com/FLVfile/
Rabbit.flv. The path to the Flash Video Streaming Service or Flash Media Server would be a bit
different—something like rtmp://myHost.com/Rabbit. (We won’t be getting into the use of the Flash
Video Streaming Service or Flash Media Server in this book. All videos will be played back either locally or
through an HTTP site.)
www.zshareall.com
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
VIDEO

547


Figure 10-14. Setting the path to an FLV using the wizard
If you are into beating yourself in the head with bricks, then by all means, be our guest
and select the Embed FLV in SWF and play in timeline option. This will place
the entire video into the SWF. If that FLV is, say, 7MB, the user will need to wait as that
7MB makes the timeline creep along. The other danger is the tendency for video to last

several minutes. Flash has a maximum timeline length of 16,000 frames. If the video is
substantially long, the odds are almost 100 percent Flash will run out of timeline. We’ll
talk more about embedding video in the “When video is not video” section later in this
chapter.
4.
When the path is established, click the Next (Continue) button to move to the Skinning
page.
5.
Click the Skin drop-down menu to see the choices available to you. Click a skin style, and the
preview area will change to show the chosen skin, as shown in Figure 10-15.
www.zshareall.com
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
CHAPTER 10
548


Figure 10-15. What skin or control style will be used?
Skin? Think of it as a techie word for video controls.
You are presented with two major skin groupings: Over and Under. Skins containing the word Over will
overlay the controls directly on top of the video, which means you may want to configure the skin to
automatically hide until the user moves the mouse cursor over the video. You can do this later by selecting
the component and using the Properties panel to set the skinAutoHide parameter to true. Skins
containing the word Under place the controls below the video.
Pay close attention to the minimum width for each skin. For example, selecting SkinUnderAll.swf
requires a video that is at least 330 pixels wide. So, if your video is 320 pixels wide, the skin is going to
hang off the sides of the video. You can see this in the preview.
Selecting None in the Skin drop-down menu means no skin will be associated with the video. Choose this
option if you are going to create your own custom controls, use the components in the Video area of the
Components panel, or display the video without allowing for user interaction.
www.zshareall.com

Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.