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
Slide 3
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
Slide 4
Introduction Prepare for the upcoming tutorial by downloading
Rabbit.zip from hereits 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.
Slide 5
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.
Slide 6
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.
Slide 7
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.
Slide 8
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.
Slide 9
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 fastthe data rate is too high for the
connectionthe browser is overwhelmed. The result is video that
jerkily stops and starts.
Slide 10
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.
Slide 11
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
Slide 12
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
Slide 13
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?
Slide 14
Encoding an FLV The answers to these questions will determine
your approach to encoding the video. Open and watch Rabbit.mov
twice now. Its a little over 4 minutes long. In class, Ill play it
on the big screen for everyone at once. Yes, the file is hugeover
70MB. When creating Flash video, you need every bit of information
contained in the video when you do the conversion.
Slide 15
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.
Slide 16
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.
Slide 17
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 exercisethe two arrows point up.
Slide 18
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.
Slide 19
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.
Slide 20
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.
Slide 21
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.
Slide 22
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 qualityyou 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.
Slide 23
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.
Slide 24
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 bands video, stick with mono. Also, if you are
starting with mono, you cannot improve sound quality by selecting
stereoit will only increase file size. Select Mono.
Slide 25
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.
Slide 26
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.
Slide 27
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) Were going to use the wizard.
Slide 28
Playing an FLV in Flash 1. Create a new Flash document. 2. File
> Import > Import Video (this will open the Import Video
wizard) 3. Tell the wizard where your FLV file is located: click
Browse and navigate to Rabbit.flv 4. Click Next to move to the
Skinning page. 5. Click the Skin dropdown menu to see the available
choices. 6. Click a skin style and preview the skin.
Slide 29
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.
Slide 30
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.
Slide 31
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.
Slide 32
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).
Slide 33
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
Slide 34
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)