Dawn Pedersen
American River College
Introduction
 This will be a brief overview of using video in
Flash.
 We will cover the following topics today:
 Streaming Video: an Analogy
 Video Formats
 Using the Adobe Media Encoder
 Playing an FLV in Flash CS4
Introduction
 We will not cover the following topics; I encourage
you to research these on your own:
 Using FLVPlayback Manually
 Playing Video Using ActionScript
 Adding Captions
 Using Alpha Channel Video
 Going Full Screen
 Embedding Video into an SWF
 Adding Cue Points
Introduction
 Prepare for the upcoming tutorial by downloading
Rabbit.zip from here—it’s 63MB, so start now (the
file refuses to upload to bookofcels.com):
 http://blulob.com/arc/Rabbit.zip
 Unzip/Extract Rabbit.mov from the Rabbit.zip file.
Streaming Video: an Analogy
 Think of Hoover Dam. It controls the powerful
Colorado River.
 When the dam was
completed, the water
behind it backed up
to form Lake Mead.
Streaming Video: an Analogy
 Now the water flows along the Colorado River into
Lake Mead.
 The dam releases
that water, in a
controlled manner,
back into the
Colorado River.
Streaming Video: an Analogy
 That means that if the water rushes to the dam ad
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: an Analogy
 Streaming video is like that
water flow to the Hoover
Dam and beyond.
 The data in the FLV file is
sent, at a data rate
established when the video
was encoded, from the
server to the Flash Player.
Streaming Video: an Analogy
 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.
 The result is video that
jerkily stops and starts.
Streaming Video: an Analogy
 This is due to the buffer
constantly emptying and
having to be refilled.
 Your job is similar to that of
the crew that manages the
flow of water from the buffer
behind the Hoover Dam
back into the Colorado
River.
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.
 You will be working with digital videos that may
include the following formats:
 AVI (Audio Video Interleave) – a Windows format
 DV – the format used when video moves directly
from a video camera to the computer
 MPG/MPEG (Moving Pictures Expert Group)
 MOV – the QuickTime format from Apple
Video Formats
 These are the three output formats available to
you:
 FLV – the common format found on the web,
playable on Flash Player 6 and higher.
 F4V – developed to manage HD files for use in Flash
Player 9.0.115.0 or higher
 H.264 – a common format better known as MPEG-4
or MP4
Encoding an FLV
 The first step in the conversion process does not
involve Flash.
 Open the video in the player of your choice and
watch the video twice.
 The first time, just enjoy the video.
 The second time, ask yourself the following:
 Is there a lot of movement in this video?
 Is the audio of major importance?
 Is there a lot of color in the video?
 Is the video in focus, or are there areas where the
image becomes pixelated?
Encoding an FLV
 The answers to these questions will determine
your approach to encoding the video.
 Open and watch Rabbit.mov twice now.
 It’s a little over 4 minutes long.
 In class, I’ll play it on the big screen for everyone at
once.
 Yes, the file is huge—over 70MB.
 When creating Flash video, you need every bit of
information contained in the video when you do
the conversion.
Using the Adobe Media
Encoder
 To encode video, you use the Adobe Media Encoder
(rather than Flash.)
1. Open the Adobe Media Encoder, found here:
 PC: Start Menu > All Programs > Adobe Design
Premium CS4* > Adobe Media Encoder CS4
 Mac: Hard Drive\Applications\Adobe Media
Encoder CS4
*The exact title here will depend on what version of CS4 was installed.
Using the Adobe Media
Encoder
2. Open Rabbit.mov in Adobe Media Encoder:
1. File > Add
2. Navigate to Rabbit.mov
3. Click on Open
3. Leave the Format dropdown set to FLV/F4V.
4. Click the Preset dropdown arrow and select Edit
Export Settings… at the bottom of the list.
Using the Adobe Media
Encoder
 In the Export Settings window, you will see a
preview area on the left and a settings on the
right.
 If you are in Simple Mode,
you will see a circle button
with two arrows pointing
down.
4. Click it to jump to
Advanced Mode for this
exercise—the two arrows point up.
Using the Adobe Media
Encoder
 Below the preview area is a timeline.
 You can scrub across the timeline here and set IN
and OUT points.
 You can also set cue points, which we will not cover
today.
Using the Adobe Media
Encoder
5. Click on the Video tab on the right.
 Codec: also mentioned in the audio lecture, the
Codec reduces the data rate while maintaining
image quality. Set this to On2 VP6.
 Encode Alpha Channel: for use only if the video
contains an alpha channel (for example for use with
a green screen). Deselect it for our video.
 Resize Video: videos should be resized in video
software such as Adobe Premier, not here. Deselect
it.
Using the Adobe Media
Encoder
 Frame Rate: means frames per second. A good rule
of thumb is to choose a rate that is half that of the
original file. For our example, set Frame Rate to 15.
 Bitrate Encoding: CBR (constant bitrate) is for
streaming video services such as Flash Media
Server 3. VBR (variable bitrate) is for regular web
servers using the HTTP protocol. Select VBR.
Using the Adobe Media
Encoder
 Encoding Passes:



One pass is for videos with few bitrate changes. The
video analysis and encoding are done at the same time.
Two passes is for videos with numerous bitrate changes.
For example, at one point a narrator may stay put, but
the next scene has race cars roaring by. In the first pass,
the encoder analyzes the video for major changes. In the
second pass it encodes the video to accommodate those
changes.
Select Two.
Using the Adobe Media
Encoder
 Bitrate [kpbs]: The slider sets the bitrate for the
video portion of the encoding. This is where your job
is like the Hoover Dam operator:





If you set this too high, the residents downstream will
have a bad day.
You cannot supersize the quality—you will end up with
the same quality as the original and a much larger file.
The data rate for an FLV is the sum of the audio and
video data rates.
For novices, a good target is 350 kbps.
Set the video bitrate to 300 kbps.
Using the Adobe Media
Encoder
 Set Key Frame Distance: this is in the Advanced are
for a reason. Leave this unselected until you master
video compression.
 Key Frame Interval: will appear only if Set Key
Frame Distance is selected. This will depend on how
much action is going on.


Video of paint drying would work with one keyframe for
every 300 frames.
Video of a race car in motion would work with one
keyframe for every 30 frames.
Using the Adobe Media
Encoder
6. Click on the Audio tab to change audio settings.
You need to make two decisions here:
 Stereo or mono?
 What will the data rate be?
7. Stereo or Mono: unless you are encoding your
band’s video, stick with mono. Also, if you are
starting with mono, you cannot improve sound
quality by selecting stereo—it will only increase
file size. Select Mono.
Using the Adobe Media
Encoder
7. Bitrate Settings: for Bitrate [kbps], you should
generally choose 48 or 64.
 Anything higher only serves to increase demand on
the bandwidth.
 Anything lower results in an increasing degradation
of audio quality.


Still, 32 will work if the soundtrack is nothing more than
a voice-over.
16 is ideal if the soundtrack is composed of intermittent
sounds like frogs.
 Set the Bitrate to 64 for our video.
Using the Adobe Media
Encoder
8. Click OK to return to the render queue.
9. Click the Start Queue button to stat the render
process.
10. You will see the progress bar move across the
screen as the video is being rendered.
11. When the encoding is complete, a green check
mark will appear in the Status area.
12. When you see the green check mark, close the
Adobe Media Encoder and check out the file size
of the resulting FLV file.
Playing an FLV in Flash
 There are three ways to set the video to play in
Flash:
 Let the wizard do it for you
 Use the FLVPlayback component
 Use a video object (requires ActionScript but most
versatile)
 We’re going to use the wizard.
Playing an FLV in Flash
1. Create a new Flash document.
2. File > Import > Import Video (this will open the
3.
4.
5.
6.
Import Video wizard)
Tell the wizard where your FLV file is located:
click Browse and navigate to Rabbit.flv
Click Next to move to the Skinning page.
Click the Skin dropdown menu to see the
available choices.
Click a skin style and preview the skin.
Playing an FLV in Flash
 A skin is a techie word for video controls.
 You are presented with two major skin groupings:
 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.
 Under – place the controls below the video.
7. Select SkinUnderAllNoCaption.swf.
8. Click the color chip to open the color picker,
choose a color, and the skin will change to that
color.
Playing an FLV in Flash
9. Click the Continue (Next) button to move to the
Finish Video Import page.
10. Review your settings.
11. Click the Finish button.
12. You will see a progress bar as the video is added
to the Flash stage.
13. Click the video on the stage.
14. In the Properties panel, set its x and y
coordinates to 0.
Playing an FLV in Flash
15. Save the Flash movie as Rabbit.fla in the same
folder/location as the FLV file. The playback
component needs this path to ensure playback of
the video.
16. Modify > Document
17. Click the Contents radio button to shrink the
stage size to fit the video, and click OK.
18. Click the video on the stage and press the right
or left arrow key a few times. Oops! The controls
are hanging off the stage.
Playing an FLV in Flash
19. Return the video to x=0.
20. Change the stage dimensions to accommodate
the controls (Modify > Document): 320 x 285.
21. Save the movie and test it (Control > Test
Movie).
A Last Word About Files
 You should find that all of these files ended up in
the same folder/location on your computer:
 Rabbit.fla
 Rabbit.flv
 Rabbit.mov
 Rabbit.swf
 Rabbit.zip
 SkinUnderAllNoCaption.swf
A Last Word About Files
 If you were to upload the movie to the web for
playback, it is imperative that you keep all of
these files within the same folder on the server:
 Rabbit.flv (the actual encoded FLV movie)
 Rabbit.swf (the SWF Flash Player file)
 SkinUnderAllNoCaption.swf (the SWF skin with
video controls)
 These files need not be uploaded at all:
 Rabbit.fla (your source Flash file)
 Rabbit.mov (the original high-resolution video)
 Rabbit.zip (the compressed file you downloaded)