Tải bản đầy đủ (.pdf) (71 trang)

Flash CS5 THE MISSING MANUAL phần 6 pot

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (1.43 MB, 71 trang )

364
F CS: T M M
Incorporating Sound
Adding an Imported Sound to a Frame (or Series of Frames)
You can tell Flash to play an animated sound beginning with any frame of your ani-
mation. Depending on the settings you choose, Flash keeps playing the sound file
either until it finishes (regardless of whether your animation is still playing) or until
you tell it to stop.
The example below shows you how to use the stream option to synchronize a short
sound clip of a fly buzzing with an animated sequence showing—what else?—a
buzzing fly. Then you’ll learn how to start and stop a second sound (the sound of the
fly becoming a frog’s lunch).
To add an imported sound to a series of frames:
1. Open the file 11-1_Add_Sound.fla.
This file includes a simple animated sequence with a frog and a fly. The library
already includes a couple of previously imported sounds. You can find this file
on the Missing CD page at www.missingmanuals.com/cds. (To see a working
version, check out 11-2_Add_Sound_done.fla.)
2. In the Layers window, click to select the topmost layer (fly).
Flash highlights the layer name, as well as all the frames in that layer.
3. Select Insert➝Timeline➝Layer.
Flash creates a new layer and places it above the selected layer.
Double-click the new layer name, and then type in sounds, as shown in Figure 11-2.
Figure 11-2:
Technically speaking, you
can add a sound clip to any
layer you like. But if you’re
smart, you’ll create a separate
layer for your sounds (some
folks even create a separate
layer for each sound). Creating


separate layers helps keep your
keyframes from becoming so
cluttered that you can’t see
everything you’ve added to
them. It also helps you find
your sounds quickly in case you
want to make a change down
the road.
New layer for sounds Sound in library
Sound wave pattern
365
C : I S  V
Incorporating Sound
Tip: You add a sound to a button the same way you see shown here, but with two exceptions: You typi-
cally add a sound file for a button to the button’s third, or Down, frame (so that the sound plays when
your audience clicks down on the button) and you leave the synchronization option set to Event. To see
an example, check out the file 11-3_Button_Sound.fla on the Missing CD page.
deSiGn TiMe
Using Sound Effectively
If you’ve ever watched a movie that had a breathtakingly
beautiful (or laughably cheesy) musical score, you’ve ex-
perienced the power of sound firsthand. Effective sound
can elevate a decent visual experience into the realm of art.
Ineffective sound can turn that same visual experience into
a nerve-shredding mess.
If you’re thinking about adding sound to your animation,
consider these points:
• Why do you want to add sound? If your answer is
to add emotional punch; to cue your audience au-
rally to the interactive features you’ve added to your

animation, like buttons that click or draggable objects
that whoosh; or to deliver information you can’t de-
liver any other way (like a voice-over explaining an
animated sequence or realistic sounds to accompany
the sequence); then by all means go for it. But if
your answer is “Because I can,” then you need to re-
think your decision. Sound—as much as any graphic
element—needs to add to the overall message you’re
trying to deliver or it’ll end up detracting from that
message.
• Are you sure your audience will be able to hear your
sound? Sound files are big. They take time to down-
load. If you’re planning to put your animation on a
website, Flash gives you a couple of different options
for managing download time—but keep in mind that
not everyone in your audience may have a fast con-
nection or the volume knob on her speaker turned
up. (For that matter, some folks can’t hear. Check
out the box on page 32 for tips on providing hearing-
impaired folks with an alternate way of getting your
information.)
• How important is it that your soundtrack matches
your animation precisely? Flash gives you options
to help you synchronize your sound clips with your
frames. But you can’t match a 2-second sound clip to
a 10-second animated sequence without either slow-
ing down the sound or speeding up the animation. If
you want to match a specific sound clip to a specific
series of frames, you may need to edit one (or both)
to get the balance right before you begin synchroniz-

ing them in Flash.
4. Click the first keyframe in the newly created sounds layer.
In the Properties panel, Flash activates the Frame properties. With a sound file
in the Library, the Sound subpanel appears in the Properties panel.
5. In the Sound subpanel, click the Name drop-down menu, and then choose the
imported sound file fly_buzz.wav.
Alternatively, you can drag the sound file symbol from the Library to the stage.
Either way, the sound properties for the file appear at the bottom of the Proper-
ties panel, and the waveform for the buzzing fly sound appears in the sound-
track layer (Figure 11-3).
366
F CS: T M M
Incorporating Sound
Figure 11-3:
It’s rare that the
length of a sound clip
precisely matches
the length of the
animated clip to
which you want to
assign it. Here, the
sound clip stretches
only to Frame 14—but
the layer showing the
buzzing fly stretches
further. You could
cut and paste the
sound to fill those last
frames so that the
fly doesn’t become

uncharacteristically
silent all of a sudden,
but Flash gives you
much easier ways
to match a sound
clip to a frame span:
streaming, repeating,
and looping.
Expanded layer Sound file details
6. In the Properties panel, click the Sync field, and then, from the first drop-
down list that appears, choose Stream.
Your synchronization choices include these:
• Event. Tells Flash to give the sound its very own timeline. In other words,
Flash keeps playing the sound until the sound finishes, regardless of wheth-
er or not the animation has ended. If you repeat (or loop) the animation in
the Controller, Flash begins playing a new sound clip every time the anima-
tion begins again—with the result that, after a dozen or so loops, you hear a
dozen flies buzzing! Flash assumes you want your sound to behave this way
unless you tell it otherwise.
• Start. Similar to Event, but tells Flash not to begin playing a new sound if
the animation repeats.
• Stop. Tells Flash to stop playing the sound.
• Stream. Tells Flash to match the animation to the sound clip as best it can, ei-
ther by speeding up or slowing down the frames-per-second that it plays the
animation. This option is the one you want for lip-synching, when you’re try-
ing to match a voice-over to an animated sequence featuring a talking head.
Because choosing this option also tells Flash to stream the sound file (play it
367
C : I S  V
Incorporating Sound

before it’s fully downloaded in those cases where you’ve put your animation
on a website), someone with a slow connection can get a herky-jerky
animation.
Tip: With your sound set to stream, you can preview your newly added sound on the stage, drag (scrub)
the playhead along the timeline. You can scrub forward or backward. To hear just the sound in a specific
frame, Shift-click the playhead over that frame. Flash keeps playing the sound until you let up on either
the Shift key or the mouse.
7. From the second drop-down menu next to the Sync field, choose Loop.
Loop tells Flash to repeat the sound clip until the timeline ends. Repeat lets you
tell Flash how many times you want it to play the sound clip (regardless of the
length of the frame span).
8. Test the soundtracked animation by choosing Control➝Test Movie.
You hear a buzzing sound as the fly loops its way across the test movie.
Add a second, short sound clip to your animation to make the scene more realistic.
To do so:
1. In the “sound” layer, click Frame 20.
On the stage, you see the frog’s tongue appear (Figure 11-4).
Figure 11-4:
Beginning sound clips in individual keyframes lets you
change the soundtrack at the exact moment your visuals
change. Here, you see the frog’s tongue appear in Frame 20
of the frog layer, and it doesn’t change until Frame 22 (which
contains the final keyframe of the animation). So to match
the “zot!” sound to the tongue action, you want to tell Flash
to start playing the zot.wav file on Frame 20 and stop playing
it on Frame 22.
368
F CS: T M M
Incorporating Sound
2. Select Insert➝Timeline➝Blank Keyframe, or press F6.

Flash places a blank keyframe (a hollow circle) in Frame 20.
3. With Frame 20 selected, in the Sound subpanel, click the arrow next to Name,
and then, from the drop-down list that appears, choose zot.wav.
Flash places the waveform for the sound file into the timeline, beginning with
Frame 20.
Tip: If you need a better view of the sound’s waveform in your timeline, right-click the layer with the
sound, and then choose Properties. The Properties panel opens. At the bottom, set the layer height to
either 200% or 300%, as shown in Figure 11-3.
4. In the Properties panel, click the arrow next to Sync, and then, from the drop-
down list that appears, choose Start. Then, in the soundtrack layer, click to
select Frame 22.
On the stage, you see a very satisfied frog (Figure 11-5).
5. Select Insert➝Timeline➝Blank Keyframe or press F6.
Flash places a blank keyframe (a hollow circle) in Frame 22.
Figure 11-5:
Because the synchronization option for the “zot!” sound was
set to start in Frame 20, Flash automatically stops playing
the zot.wav sound file when the animation ends. Still, it’s
good practice to tell Flash specifically when you want it to
stop playing a sound file. You’ll be glad you did when you
come back to the animation a week or two later, because
you won’t have any cleanup to do before you add additional
sounds to the timeline.
369
C : I S  V
Incorporating Sound
6. In the Sound subpanel, click the Name drop-down menu, and then choose
zot.wav. Click the arrow next to Sync, and then, from the drop-down list that
appears, choose Stop.
You’re done!

7. Test the new sound by choosing Control➝Test Movie.
You hear a buzzing sound as the fly loops its way across the test movie. But
as the frog’s tongue appears, the buzzing stops and you hear a satisfying
“zot!”
Tip: If you don’t hear any sounds, select Control and see whether the checkbox next to Mute Sounds is
turned on. If it is, click it to turn it off.
deSiGn TiMe
Stock Images, Sounds, and Video Clips
If you’re using Flash to create stuff for work—presentations,
tutorials, web advertisements, marketing materials, or what
have you—then you or someone else on your team is prob-
ably going to be creating all your content from scratch. But
there’s a place in every Flash fan’s toolkit for stock media:
generic images, sound clips, and video clips that you pur-
chase (or, more rarely, get for free) from companies whose
job it is to produce such items.
Typically, you pay a modest fee to use stock images,
sounds, and video clips. Sometimes, you also pay a royalty
fee based on the number of times you use a stock element
in your animation.
If you’re using Flash to jazz up your personal website,
you may find that stock media is just what the doctor or-
dered: You get something cool that you can use for a rela-
tively low price without having to invest time and money
buying audio and video equipment or taking drawing
lessons.
But even professional animators have been known to rely
on stock media occasionally because it lets them test out a
concept quickly and cheaply.
Places to find stock images, sound clips, and video clips

abound on the Web. Here are a few you might want to
check out:
www.freestockfootage.com
www.bigshotmedia.com
www.wildform.com/videolibrary
www.flashkit.com/soundfx
www.a1freesoundeffects.com/household.html
www.findsounds.com
www.gettyimages.com
Editing Sound Clips in Flash
You can change the way your imported sound clips play in Flash. You can’t do any-
thing super-fancy, like mix down multiple audio channels or add reverb—Flash isn’t
a sound-editing program, after all—but you can crop the clips, add simple fade-in/
fade-out effects, and even choose which speaker (right or left) your sounds play
out of.
370
F CS: T M M
Incorporating Video
First, import the sound clip you want to edit, as described on page 362. To edit it,
follow these steps:
1. In the timeline, click any frame that contains a portion of the sound clip’s
waveform.
Flash activates the sound options you see in the Properties panel.
2. In the Properties panel, click the drop-down box next to Effect, and then
choose from the following menu options:
• Left channel. Tells Flash to play the sound through the left speaker.
• Right channel. Tells Flash to play the sound through the right speaker.
• Fade left to right. Tells Flash to begin playing the sound through the left
speaker, and then switch midway through the clip to the right speaker.
• Fade right to left. Tells Flash to begin playing the sound through the right

speaker, and then switch midway through the clip to the left speaker.
• Fade in. Tells Flash to start playing the sound softly, and then build to full
volume.
• Fade out. Tells Flash to start playing the sound at full volume, and then taper
off toward the end.
• Custom. Tells Flash to display the Edit Envelope window you see in
Figure11-6, which lets you choose the in point (the point where you want
Flash to begin playing the sound) and the out point (where you want the
sound clip to end). You can also choose a custom fading effect; for example,
you can fade in, then out, then in again.
If you want to do more extensive sound editing, you need a separate program like
Soundbooth. (If you’ve installed one of Adobe’s Creative Suites, then you may
already have it on your computer.)
Note: Clicking the Property panel’s Edit button displays the same Edit Envelope window you see when
you choose the Custom option.
Incorporating Video
In the past few years, Flash has become the video champion of the Internet. You
find Flash video on sites from YouTube to Hulu to CNET. It wasn’t long ago that a
battle royale raged among Microsoft, Apple, and RealMedia for web video bragging
rights. Flash was seldom mentioned in the contest; after all, it was just for making
little animations. But, like the Trojans with their famous horse, Flash Player man-
aged to sneak onto about 90 percent of today’s computers. And guess what? Flash
does video, too. It’s easy for you to add video to a web page or any other project
by adding it to a Flash animation. It’s easy for your audience, too, since they don’t
371
C : I S  V
Incorporating Video
have to download and install a special plug-in to watch your masterpiece. Flash is
also fueling the recent surge in video blogging, or vlogging—adding video clips to
plain-vanilla blogs. You can find out more at sites like www.vidblogs.com or http://

mashable.com/2009/10/09/video-blogging.
Figure 11-6:
The sound file you
see here is a two-
channel (stereo)
sound, so you see two
separate waveforms,
one per channel. To
crop the sound clip,
drag the time in and
time out control bars
left and right. Flash
ignores the gray area
during playback and
plays only the portion
of the waveform that
appears with a white
background, so here
Flash plays only the
second half of the
waveform. To create a
custom fading effect,
you can drag the en-
velope handles sepa-
rately. These settings
tell Flash to fade out
on the left channel
while simultaneously
fading in on the right
channel. To preview

your custom effect,
click the Play icon.
Time in Time out Envelope handles
Click to edit sound
Show seconds
Show frames
Play
Tip: If you’re watching a video on the web and wondering whether the site uses Flash to publish it,
right-click (Control-click) the video. If you see “About Flash Player” in the shortcut menu, you know Flash
is working behind the scenes.
May as well face it: Sometimes video footage is more effective than even the most
well-crafted animation. For example, video footage showing a live product demon-
stration, a kid blowing out the candles on his birthday cake, or an interview with a
CEO can get the point across quickly and directly.
There are two basic steps to creating Flash video:
• Convert your video to the Flash video file format: .flv or .f4v. Before you can
add video to your Flash animation, you have to convert it to a special file format.
372
F CS: T M M
Incorporating Video
The process, which video techies call encoding, creates small files that can travel
quickly over the Internet. Flash comes with the Adobe Media Encoder, which
lets you convert most types of video into Flash video format. The next section
describes the encoding process.
Note: Adobe is working hard to keep Flash at the forefront of the Internet video revolution. With version
9.0.124 of the Flash Player (code named Moviestar), Adobe added capabilities for HD (high definition)
video and audio. As of this writing, the current version of Flash Player was 10.1.15.95, but you can expect
Adobe to release new versions with added features and capabilities.
• Import your video into a Flash animation. Once your video clip is in Flash
video format, you can import it into your project. Flash stores a copy of the vid-

eo in the Library, and you can drag the video to the stage like any other graphic.
It’s remarkably easy to add video playback controls to your Flash video. If you
have a video that’s already in the Flash video format (.flv or .f4v), you can jump
ahead to page 385 to learn how to import it into your Flash file.
Tip: Neither Flash nor the Adobe Media Encoder let you do extensive editing. At best, they let you
crop a segment out of a larger video clip. If you’re interested in piecing together different video segments
to create a movie or a scene, turn to a specialized video editing program like Adobe Premiere or Apple
Final Cut Pro. If your needs are more modest, you can probably get by with Premiere Elements, Apple’s
iMovie or Microsoft’s MovieMaker. When using those programs, it’s best to save or export your video as
a Flash video (.flv or .f4v). The next best choice is to save your video as uncompressed .mov or .avi. Why?
Because you only want to compress your video once. Otherwise, the quality of the image and sound will
suffer.
Encoding: Making Flash Video Files
Video files are notoriously huge, which means standard video files take a long time
to travel the Internet. To solve this problem, Flash uses special video formats that
shrink or compress video into smaller files. The quality might not be what you’d ex-
pect from your 50-inch plasma HDTV, but it’s certainly acceptable for web delivery.
The process of converting a video from its original format to Flash video (.flv or .f4v)
is called encoding. If you already have a file in the Flash video format, or if someone
else is responsible for this part of the job, you can jump ahead to page 385.
Using the Adobe Media Encoder, you can encode any of the common video files
listed in Table 11-2. As explained in the box on page 376, it’s best to start off with a
high-quality, uncompressed video. You can add prebuilt controls that let your audi-
ence control the playback and adjust the volume. You can even apply effects to a
video clip in Flash: for example, skewing and tinting.
373
C : I S  V
Incorporating Video
Table 11-2. Video file formats you can convert to Flash Video with Adobe Media Encoder
File Type Extension Note

QuickTime movie .mov, .m4v,
.m4a
The audio/video format. Apple’s video player uses.
A free version of QuickTime player is available for
both Macs and PCs.
Audio Video Interleaved .avi Microsoft audio/video format.
Motion Picture Experts
Group
.mpg,
.mpeg
MPEG-1 is an early standard for compressed audio
and video media.
MPEG-2 is what standard DVDs use.
.mp4 MPEG-4 Part 2 is used by the DivX and Xvid
codecs.
.264 MPEG Part 10 is used by QuickTime 7 and the
H.264 codec.
Digital video .dv Many camcorders use this digital video format.
Windows Media .asf, .wmv These Microsoft formats are for compressed
audio/video files.
Flash video .flv, .f4v Flash’s video format employs a lossy compression
technique to produce very small files suitable for
broadcast over the Internet.
The hardest part of encoding video files is the wait. It takes time to encode large
video files, but it’s getting better with today’s faster computers. Flash CS5’s installer
automatically puts Adobe Media Encoder on your computer. Fire it up, and it looks
like Figure 11-7. There are two basic things you need to do: Locate the file you want
to encode, and give Adobe Media Encoder instructions about how to process it.
Here are the steps:
1. In Adobe Media Encoder, click Add.

Flash displays a standard Open window similar to the one you use to open a
Flash document.
2. Navigate to the file on your computer that you want to encode, and then click
Open.
The name of the video file appears under Source Name.
3. Under Format, choose the Flash video format: FLV/F4V.
Flash video files automatically determine whether your file is encoded in the
FLV or the F4V format. That determination depends on the preset you choose
in the next step. Flash gives you these presets (predetermined settings) because
choosing all the settings to encode video can be ridiculously complicated. Even
when you choose a file format like FLV or F4V, there are still dozens of settings
you can choose based on how the video is to be distributed and viewed. Adobe
helps you wade through the swamp of video settings by providing presets for
common video needs.
374
F CS: T M M
Incorporating Video
Figure 11-7:
Adobe Media Encoder is
a multipurpose conver-
sion tool that comes with
several different Adobe
products, including Flash.
You add media files to
the queue and tell Flash
what type of file you
want it to produce.
4. Under Preset, choose a preset format that matches your project.
The Media Encoder has what may seem like a bewildering number of presets, as
shown in Figure 11-8. The names are marginally descriptive. If your project is des-

tined for a web page, try FLV – Web Medium to start. The FLV format works with
Flash Player 8 and later. The F4V formats show better quality video in smaller files,
but they work only in Flash Player 9 and later. Experienced videographers may
want to tweak the encoding settings or trim the video clip before it’s encoded.
5. Under Output you can change the name or location of the file.
If you don’t make any changes under Output, then the encoded file appears in
the same folder as the original video file. It has the same name, but will end with
either .flv or .f4v.
6. Click Start Queue.
Adobe Media Encoder starts to encode your file. A bar at the bottom of the win-
dow tracks the progress (Figure 11-9). If you have several files to encode, you
add them all to the queue before you hit Start Queue. The encoder makes no
changes to the original file. When the encoder is finished, a checkmark appears
next to the file in the queue, and you have a new file with a .flv or .f4v extension.
Batch encoding to save time
No matter how you cut it, encoding video takes time and can slow down your com-
puting workflow. If you have lots of video to encode, prepare several video clips for
375
C : I S  V
Incorporating Video
encoding using the steps described in this section. You can add several encoding jobs
to the encoding queue, and then run them all at the same time when you click Start
Queue. Why not do all that encoding overnight or when you head out to lunch?
Figure 11-8:
When you first use Adobe Media Encoder, it’s
best to use one of the presets that match your
project. Later, you may want to create your
own settings by clicking Edit Export Settings.
Figure 11-9:
While the Media Encoder

processes your file, it
keeps you updated with
a progress bar and the
estimated remaining time.
The video also appears in
a preview window.
Progress bar
Estimated
remaining time
376
F CS: T M M
Incorporating Video
Up To Speed
Overcompression: Too Much of a Good Thing
The final destination for many Flash projects is a website.
One of Flash’s great virtues is the ability to present anima-
tions, video, and sound over the web without making the
audience wait while humongous files travel the Internet.
Flash makes big files small by compressing them. It uses
different compression methods for images, sound files, and
video files. Some types of compression actually degrade
the image, sound, or video quality. It’s a tradeoff, but it’s
the best way to create really small files that travel the Net
quickly. The idea is to keep as much information as is need-
ed to maintain acceptable quality and throw out the extra
bits. These types of compression schemes are called lossy
formats because they lose data and as a result lose quality.
Examples of lossy formats are JPEG photo files, MP3 audio
files, and FLV or F4V Flash video files. While compression is
a good thing because it keeps the file size down and helps

web-based Flash animations load quickly, it’s possible to
overcompress a file. One way that happens is when you
compress a file that’s already been compressed.
If you repeatedly compress photos, sound files and video
files, you can end up with media mush. For example, take
a JPEG and save it five times using 50% quality and you
find that the last copy is much poorer in quality than the
first. You can do the same thing to MP3 audio files and
video files. Ideally, it’s best to bring uncompressed files into
Flash, and then let Flash do the compression once, when it
publishes an SWF file.
For audio files, that means it’s best to use uncompressed
AIFF files on a Mac or WAV files on a PC. For video files,
use video that hasn’t already been compressed. On a PC,
you can use uncompressed AVI files; on a Mac, use uncom-
pressed QuickTime MOV files. If you’re working in another
video editing program and there’s an option to encode di-
rectly to Flash Video (.flv or .f4v), choose that. Then you can
skip the step with Media Encoder. With video, the compres-
sion takes place when you use the Adobe Media Encoder to
make .flv or .f4v files. So, if you just shot the video with your
camcorder, feed the raw .dv file to Adobe Media Encoder
for the best results. If the file is coming from someone else,
ask him to give you the best quality possible.
Encoding Part of a Video Clip
There are a few reasons why you might want to dig into Adobe Media Encoder’s
export settings before you encode a file. One of the most common scenarios is that
you have a long video and you need to bring only a small part of it into your Flash
project. To do so, follow the encoding steps that begin on page 373. When you reach
step 4, instead of choosing one of Adobe’s presets, click Edit Export Setting at the

bottom of the list. The next thing you see looks like a video editing window, shown
in Figure 11-10. You can’t do extensive editing in this window like you can with
Adobe’s Premiere or Apple’s Final Cut, but you can select a portion of a video clip to
encode. Encoding is pretty slow business, and there’s no reason to waste time con-
verting video that you won’t use.
In the upper-left corner of the Export Settings window is a small preview screen.
Below the screen is a timeline with a playhead similar to Flash’s. Drag the playhead
to see different frames in your video. The two markers in the timeline below the
playhead are called the in point and the out point. You use these two points to select
a segment of the video. As you drag either point, the preview window shows the
377
C : I S  V
Incorporating Video
image (or video frame) for that point in time. A highlight appears on the selected
segment of video.
Figure 11-10:
You can’t do exten-
sive editing in Adobe
Media Encoder, but
you can select the
portion of a video
file that you want
encode. The program
also provides tools
to resize the entire
video, to select por-
tions of the image,
and to fine-tune the
video codec used to
encode your Flash

video file.
Preview source or output Export video and/or audio Advanced/Simple
Mode toggle
In point Playhead Out point Resize video Codec options
If you want to use one of Adobe’s encoding presets, you can choose one in the upper-
right corner of the Export Settings window. (If you’d rather tweak the export settings
on your own, see page 379.) Click OK, and you’re back at the Media Encoder, where
you can change the name and location for your encoded file, as described in step 5
on page 374. Or, you can simply click the Start Queue button to encode the video
segment you selected.
Resizing and Cropping a Video Clip
When you choose an encoding preset in Adobe Media Encoder, the preset deter-
mines the dimensions of the video image. For comparison, a wide-screen TV might
show a high-definition image that’s 1920 pixels wide by 1080 pixels high. When you
choose the FLV – Web Medium setting, the preset encodes an image that’s 360 pixels
wide by 264 pixels high. When you’re in Export Settings, you can choose any size
you want. Understandably, large dimensions, like those for that hi-def TV, mean
much larger files. If your video is traveling the Internet, you can dramatically reduce
the travel time by reducing the video dimensions. The 360 × 264 size of the FLV –
Web Medium preset is a nice, compact size for the Net. If you know everyone in
378
F CS: T M M
Incorporating Video
your audience is going to have a fast cable or DSL connection, you can go ahead and
bump the dimension up to 640 × 480, another fairly standard dimension for video.
After you’ve opened Adobe Media Encoder and added a video to the encoding
queue, as described on page 373, follow these steps to choose a custom size for the
encoded video:
1. Instead of choosing one of Adobe’s presets, click Edit Export Setting at the
bottom of the list.

The Export Settings window appears, where you can fine-tune many aspects of
the encoding process.
2. On the left side of the Export Settings window, click the Video tab.
If you don’t see tabs in the Export Settings window, click the Advanced/Simple
Mode toggle button, as shown in Figure 11-10.
3. Click the Resize Video checkbox.
Once you’ve checked the Resize Video box, the encoder uses the size dimen-
sions entered in the next step.
4. Change the height and width dimensions, as shown in Figure 11-11.
Most of the time, you want to maintain your video’s proportions to keep the im-
ages from looking too tall or too fat. To constrain the proportion, make sure the
Constrain Width/Height button is depressed. Then you can enter either a width
or a height dimension, and the other dimension automatically sizes itself.
5. Click OK.
The Export Settings window closes, and you see the Adobe Media Encoder
queue.
Cropping a video while encoding
Cropping a video is just like cropping a photo. Instead of resizing the entire image,
you select a portion of the image that you want to view. With moving pictures, it’s a
little trickier, because the image is changing at multiple frames per second. The crop
that looks great for the first 20 seconds of a clip might not look as good a minute
later. Also keep in mind that when you crop a video, you’re changing the dimensions
and the quality of the image. When you crop into an image too far, you end up with
a blurry picture.
To crop your video, follow the preceding steps to open the Export Settings win-
dow in Adobe Media Encoder. Above the preview window, click the Crop button. A
frame appears around the video image with handles at the corner. Drag the handles
to frame the portion of the picture you want to keep, as shown in Figure 11-12. A
tooltip shows the dimensions of your video image in pixels. You can click the Crop
dimension numbers and then type new values, but keep in mind that these numbers

are showing the number of pixels being trimmed from the edges of the picture.
379
C : I S  V
Incorporating Video
Figure 11-11:
Open Adobe Media
Encoder’s Export
Settings window to
choose a custom size
for your encoded
videos. Click the Con-
strain Width/Height
button to maintain
the picture’s original
proportions.
Video tabResize check box
Width
Constrain
width/
height
Height
Figure 11-12:
Drag the handles in the
crop frame to select
the portion of the video
picture you want to
keep in your encoded
video.
Crop button Crop dimensions
Crop frame

380
F CS: T M M
Incorporating Video
Adding Cue Points to Your Video
Flash lets you place cue points (markers) in your video clips, which you can then use
to trigger other actions in your Flash animation. For example, perhaps you’d like to
show text on the screen at a certain point in the video, or perhaps you’d like to trigger
a certain sound or narration track. You give cue points names—like “narration”—
as you create them. Then you use ActionScript code to identify the cue points and
trigger the actions you want performed. (There’s more on ActionScript starting in
Chapter 12.)
You add cue points in Adobe Media Encoder, using the same Export Settings win-
dow that you use to resize or crop your video.
1. In Media Encoder select Edit➝Export Settings to open the Export Settings
window.
You see a preview window showing your video, with a timeline underneath, as
shown in Figure 11-13. Just as in Flash, the timeline has a playhead. Drag the
playhead to a point in the timeline, and you see that frame in your video. Below
the preview, there are two panels: one for cue points and one for parameters.
Figure 11-13:
You use cue points to place mark-
ers in your video. With the help of
ActionScript, you can use the cue
points to trigger events in your
animation.
Add Queue Point
Queue Point Name
Delete Queue Point Queue Point Type
381
C : I S  V

Incorporating Video
2. Drag the playback head to the point in your video you want to mark.
The video image changes as you move the playback head.
3. Click the + button to add cue points; click the – button to remove them if you
make a mistake.
Flash creates a cue point in the list and gives it a name, a time setting, and a type.
The time setting is determined by the playback head’s position in the video clip.
In the next steps, you’ll change the name and type of the cue point.
4. Click the name, and then type a descriptive name for your cue point.
Flash names all cue points “cue point” when it creates them. It’s up to you to type
something more descriptive.
5. Choose the type of cue point you want to create—Event or Navigation. If
you’re an ActionScript hotshot, set parameters.
Event cue points trigger an action when the video reaches them. Navigation cue
points let you locate and play certain portions of your video. Both Event and
Navigation cue points require ActionScript to work their magic.
6. Click the + button to add parameters to your cue point; click the – button to
remove them if you make a mistake.
Parameters are key-value pairs that programmers use to store and retrieve infor-
mation. So the parameter values are available to ActionScript programs when
the video reaches the cue point.
7. Repeat steps 2–6 to add more cue points, or click OK to go back to the
encoder queue.
Choosing a Video Codec
Part of the encoding process is choosing the codec (compressor/decompressor…get
it?) that shrinks your video as it converts it to the Flash video format. Over its short
history, Flash video has used three different codecs. The makers of Flash have updat-
ed the Flash Player to use new codecs as they’ve become available. The new codecs
provide new features and produce better quality video using smaller file sizes. As a
Flash designer, you need to guess which version of the Flash Player your audience is

likely to have when you choose the best codec for encoding.
Flash makes these decisions relatively easy for you. If you use one of the presets
when you encode, all you need to do is choose the Flash player your audience will
use, and then decide the relative size. For example, one of the choices is FLV – Web
Medium (Flash 8 or higher). If you customize the Export Settings, you can choose
the video codec that’s used to shrink your video file to size. Here’s a guide to the
Flash Players that work with different codecs (the year the Flash Player was released
is shown in parentheses):
• Sorenson Spark: Flash Player 6 (2002) and above. It’s the safest choice; if your
audience’s Flash Player is video-capable, this codec will work.
382
F CS: T M M
Incorporating Video
• On2 VP6: Flash Player 8 (2005) and above. This choice is pretty safe, unless
you’re sure your audience has older computers. One advantage of this codec is
that you can perform tricks like making part of the video image transparent,
just like the news folks do when they put the weather guy in front of a map.
• F4V (H.264): Flash Player 9.2 (2008) and above. This choice produces the
best-quality video using smaller file sizes. If you choose the F4V Flash video
format, it automatically uses the same H.264 codec that Apple uses for iTunes
and Apple TV.
You can manually choose a codec from the Export Settings window of the Adobe
Media Encoder. Here are the steps:
1. In the Media Encoder, select Edit➝Export Settings.
The Export Settings window opens, as shown in Figure 11-10.
2. Click the Format tab, as shown in Figure 11-14.
If you don’t see tabs in the Export Settings window, click the Advanced/Simple
Mode toggle button, as shown in Figure 11-10.
Figure 11-14:
Flash video uses two file formats. The FLV

format works with more Flash Players, but
the F4V format uses the latest, greatest
technology to create good-looking video in
small file sizes.
Format tab
FLV F4V
Video tab
3. Choose either FLV or F4V format.
If you choose the F4V format to take advantage of its good looks and small file
sizes, your job is done. The encoder uses the H.264 codec. If you choose the FLV
383
C : I S  V
Incorporating Video
file format so you have compatibility with the older Flash Players out there, then
you need to go on to step 4 to specifically choose a codec.
4. If you’re using the FLV format, click the Video tab, and you see the On2 VP6
codec is selected.
With the On2 VP6 codec, you can go on to the next step to choose whether or
not to add an alpha channel (transparency) to your video.
5. If you chose the On2 VP6 codec, you can click the Encode Alpha Channel
checkbox.
With an alpha channel encoded in your video, you have the ability to replace a
specific color with transparency. Called chroma keying, this technique is com-
mon in newscasts and feature films.
Other Techniques for Reducing Video File Sizes
No one likes to wait while a web page loads. So when you’re publishing video on the
web, life is a constant quest to shrink the size of your video files so they’ll travel the
Net faster. In addition to the encoding tricks already mentioned, here are some tips
for shrinking those files while still providing a good video experience. Some of these
techniques are related to creating the video, and others are related to Adobe Media

Encoder and Export Settings.
Video techniques for reducing file sizes
• Use a tripod and keep pans and zooms to a minimum. Steady shots make for
better compression results.
• Start out with good-quality video. When possible, use uncompressed video
before you encode to Flash Video. If your video has blips and glitches (called
noise by videographers) before you encode it, the video file ends up bigger.
• Avoid fancy effects and transitions. Special effects like fancy wipes or spiral
transitions don’t work as well in Flash video as a plain cut from one scene to the
next. Even dissolves add to the size of your video file.
Encoding techniques for reducing file sizes
• Reduce the dimensions of the video. It’s great to have a high-resolution video
that looks beautiful when the audience clicks the full-screen button. But if it
takes too long to download over the Internet, you won’t have an audience. As
described on page 377, you can change the dimensions of your video to reduce
the file size.
• Consider using a lower frame rate. You can set the frame rate in the Video
tab of the Export Settings window. The standard frame rate for American TV
is 29.97 frames per second (don’t ask about the decimal; it’s a long story). The
standard for film is 24 fps. Test your videos at 18, 15, or even 12 fps to see
whether the quality/file size tradeoff is worth it.
384
F CS: T M M
Incorporating Video
• Use mono sound where possible. If your video is a musical performance, it
may be important to have stereo sound, but otherwise you can save precious
file space by clicking the Audio tab in the Export Settings window and then
choosing Mono.
• Use a lower bit rate for sounds that are mostly voices or don’t require high
fidelity. Go to the Audio tab in Export Settings, and then use the drop-down

menu to reduce the bit rate for sound. The encoder has bit rates from 16 to 256.
A bit rate of 64 works for many Flash videos. You can go even lower if the sound
track is primarily voice, with no music.
Preparing to Import Video Files
Before you can import a video clip into Flash, it’s good to know up front how you
expect to link the video file to your finished Flash animation file at runtime: by em-
bedding the video file directly into your Flash timeline, or by linking to the video
file at runtime, and so on.
This cart-before-the-horse consideration isn’t quite as odd as it seems at first blush.
Video files tend to be so huge that you don’t usually want to embed them directly
into your Flash document the way you embed graphics (page 339) and sound files
(page 362). The process of setting up your Flash animation and Flash video files for
the public to view them is called deploying.
Note: Chapter 20 tells you all you need to know about publishing Flash files, including Flash files contain-
ing video clips.
Your deployment options include the following:
• Progressive download from a web server. This option is one of the most popu-
lar because all you need to publish video on the Internet is a regular, garden-
variety web server. Your Flash animation files (.swf) and Flash video files (.flv
or .f4v) are stored on the server. It’s called progressive because the video starts
playing for your visitors before the entire video file is downloaded. The down-
side to this option is the fact that the entire video is eventually stored on your
visitor’s computer, giving her the ability, if she’s clever, to make a copy of your
video. If you aren’t comfortable with bootleg copies, then consider one of the
next two options.
• Stream from Flash Video Streaming Service. This option is the most popular
way to show videos without letting others copy them. Basically, you hire a com-
pany to stream your video from their computers to your website visitors. Your
visitors never have a complete copy on their computers, making it more dif-
ficult (but not impossible) for them to swipe it. You can find a long list of com-

panies that provide this service on Adobe’s website (www.adobe.com/products/
flashmediaserver/fvss/). These companies have a program called Flash Media
Server on their computers, which detects the speed of your web visitor’s Internet
385
C : I S  V
Importing Video
Files
connection and sends the video at a speed it can handle. Your visitor gets a
higher-quality video experience, and you get added security for copyrighted
material. All you have to do is pay for the service.
• Stream from Flash Media Server. This option is similar to the second option
above, except that you (or, more likely, your organization’s IT department) buy
the server hardware, install the server software, and maintain the resulting sys-
tem. This option is best if you have deep pockets (Flash Media Server costs
$4,500) and don’t mind the hassle of maintaining a media server.
Note: If you have your own web server and want to dip your toe in the Media Server water, you may
want to investigate Red5, an open source (free) Flash Server ( />• As mobile device video bundled in SWF. Use this option in combination with
Flash’s templates for consumer devices and handsets to create animations for
small handheld devices. This option is used to place video inside SWF files used
with phones and handsets.
• Embed video in SWF and play in timeline. This option represents the simplest
way to embed video into your animation, but it works only for very short video
clips (somewhere between 5 and 10 seconds or less). Any more than that, and
the size of your animation file grows so large that you have trouble editing the
file in Flash and your audience has trouble viewing it in their Flash Players.
Importing Video Files
Once you have access to a video in the Flash video format (.flv or .f4v), you’re ready
to begin importing the video file into Flash. When you begin this process, your vid-
eo can be on your computer or it can be on the web, where it’s served up by a Flash
Media Server. In this section, you see step-by-step examples for both scenarios.

Importing a Flash Video File Stored on Your Computer
When you have a video on your computer in one of Flash’s two video formats
(.flv or .f4v), it’s easy to import it into your Flash project. By making a couple of
choices along the way, you can give your Flash audience standard controls to play
and pause your video and adjust its sound. To work on the following exercise, you
can download the video 11-4_Building_Implode.flv from the Missing CD page at
www.missingmanuals.com/cds.
Note: If you need to convert a video to one of the Flash video formats (.flv or .f4v), see page 372.
When you add video to your Flash project using this method, Flash creates a link
between the Flash file and your project. Even after you publish a Flash .swf file for
386
F CS: T M M
Importing Video
Files
final distribution, the Flash file and your video file remain separate. If the project is
for a website, you need to place both the Flash .swf file and the video file (.flv or .f4v)
on the website, ideally in the same folder. To make things easy for yourself, it’s best
to put your Flash video in same folder where you save your Flash work file (.fla) and
publish your Flash animation (.swf).
1. Create a new Flash document, and then save it.
It’s always good to name and save your Flash projects at the beginning. It’s even
more helpful when you work with external video files, as you do in this project.
A name like building_bye_bye.fla might be appropriate for this one.
2. Place the Flash video 11-4_Building_Implode.flv in the same folder where you
save your Flash file (.fla) and your published Flash file (.swf).
This step makes it easier for Flash to create a link to the video file. After publish-
ing the .swf, as long as both files are located in the same folder, the link between
the two will continue to work.
3. In Flash, select File➝Import➝Import Video.
The Import Video dialog box appears, as shown in Figure 11-15, with several

options you can choose using radio buttons. The question is: Where is your
video file? Either it’s on your computer, or it’s stored on a web server with Flash
Media Server software.
Figure 11-15:
The large Import
Video dialog box
walks you through
adding video to your
Flash project. In the
first step, shown here,
you answer questions
about the location
of the video file and
how you want to use
it in your project.
387
C : I S  V
Importing Video
Files
4. Click the radio button for “On your computer”.
Flash wants to know where the file is right now, so it can load it into your project.
At this step, don’t jump ahead and start thinking about where the final project
is going to be published.
5. Click the Browse button, and then locate and select your video file.
Flash displays a standard Open window similar to the one you use to open a
Flash document. It should be easy to locate 11-4_Building_Implode.flv, because
it’s in the same folder as your Flash file. After you select the file, its name and
path show up under the Browse button. Now that Flash knows where the file is
located, it can work with the video.
Note: The video of the imploding building is copyrighted and was provided by www.freestockfootage.com.

6. Tell Flash how you want to work with the video by clicking the radio button
labeled: “Load external video with playback component”.
• Load external video with playback component creates a link between
your Flash file and an external video file. When Flash gets a command to
play the video, it finds and plays the external file.
The other two options are used less frequently, but they’re useful for special
cases:
• Embed FLV in SWF and play in timeline. This option embeds video into
your animation. Each frame of video becomes a frame in the Flash time-
line. The result is that the Flash file gets huge very fast, and your audience
will be frustrated trying to download and play the video. Don’t try this
option with clips any longer than 5 or 10 seconds.
• Import as mobile device video bundled in SWF. Use this option in
combination with Flash’s templates for consumer devices and handsets
to create animations for handheld devices (a topic not covered in this
book).
7. Click Continue to move to the next Import Video step.
The Import Video box changes to show skinning options for your video. A skin
is a sort of container that adds Play/Pause/Stop type controls to your video, as
shown in Figure 11-16.
8. From the Skin drop-down box, choose SkinOverAll.swf.
Use the drop-down menu to choose an Adobe predesigned skin, as shown in
Figure 11-17. Adobe supplies a whole slew of skins with different combinations
of controls. SkinOverAll includes all the controls, so this exercise shows you
what’s available. When you tackle a real-world project, you may find you don’t
need quite so many gadgets on your videos.
388
F CS: T M M
Importing Video
Files

Figure 11-16:
There are two basic types of skins
for Flash video. “Over” skins like
the one shown here sit on top
of the video image, hiding some
parts of the picture. “Under” skins
are completely outside the image.
Pause
Stop Rewind
Fast Forward
Mute
Volume
Full Screen
Captions
Figure 11-17:
Give your audience
snazzy video controls
by simply choos-
ing from the Skin
drop-down menu.
Use the buttons in
the lower-right corner
of the Import Video
dialog box to move
forward (Continue)
or backward (Go
Back) in the Import
Video process. Or you
can give up entirely
(Cancel).

There are also options to provide no controls at all (usually not the best option)
or to use a custom-designed skin. For example, you might want to put your cli-
ent’s logo on the video skin as another way to establish his brand.

×