Flash video component tutorial

This article or section is currently under construction

In principle, someone is working on it and there should be a better version in a not so distant future.
If you want to modify this page, please discuss it with the person working on it (see the "history")

Introduction

Video components are prebuilt interface elements (widgets) that will speed up video integration. In particular, the FLVPlayBack Video Component allows to render videos without any ActionScript programming. It includes a nice choice of skins for user controls. Videos also can be enhanced with captioning or they may interact with the rest of the animation. This is discussed in the Flash augmented video tutorial

Learning goals

Learn how to encode *.flv and (older) *.flv files

Learn how to use the Flash 9 (CS3) video component for simple video playback

Prerequisites for the first part

Flash CS6 desktop tutorial

Flash drawing tutorial

Flash component button tutorial

Moving on

Flash augmented video tutorial

The Flash article has a list of other tutorials.

Quality

This text should technical people get going and may not be good enough for self-learning beginners. It can be used as handout in a "hands-on" class. That is what Daniel K. Schneider made it for...

Level

It both aims at beginners (FLV encoding, using the video playback component and embedding a video in the timeline) and intermediate Flash designers (inserting captions and using cue points to trigger animations).

The executive summary about Flash Videos

Flash has built-in video management components.

• The FLVPlayBack Video Component is really easy to use since it provides a series of ready-made skins (user interfaces) from which you can choose.
• The Caption component requires some XML Editing.
• For more sophisticated video-animation interaction you need to code with ActionScript.

The executive how-to summary for simple video playbacks

• Encode your video with the Video Encoder. Flash has its own *.flv video format.
• Drag the FLVPlayBack Video Component to the stage.
• Open the component inspector panel. Choose a skin and provide the file name or URL of the *.flv video

Preparing your video in CS3/CS4

In CS3 and CS4, Flash uses a special video format (*.flv) to render videos. You may directly encode your formats with the CS3 or CS4 video encoding tool (that's what I suggest) or wait until Flash will prompt you to encode when you import a video in non *.flv format.

Flash CS5 allows to directly play other formats, e.g. *.mp4. However it is often necessary to adapt the video to your special needs (e.g. make it smaller, clip it, remove frames from the start or the end) and therefore to use the Media encoding tool. In addition, Flash 10/CS5 supports a new more efficient Flash video format: fl4. See below, for a short "how to".

Video encoding with Flash CS3

The Flash package includes a video encoder with which you can transcode various video formats into *.flv format. It also lets you define cue points and edit (somewhat) the video.

The Flash CS3 Video encoder tool

Now, open the Flash CS3 Video encoder program directly from the Desktop (i.e. not from Flash!).

Video transcoding

The tool supports most current video formats. You can for example import *.mov, *.avi, *.mpeg, *.dvi, *.wmv, *.3pg and *.mp4 formats in this tool. If you need a video file to play with see the Artwork links at the end of this tutorial.

Opening a video file

• Open the Flash CS3 Video Encoder tool
• Click on the Add ... button to add a new video.

Edit

• Click Settings to define output settings and to add video cues, etc. You can just leave the defaults if you like, unless your video file is long and/or big and you want to trim it down.

Encoding

• Click Start Queue to encode your video. By default, the resulting *.flv file will be saved in the same directory as the source video. Flash will not overwrite an older *.flv version but rather renumber the new version.

Video Editing

The Flash Video Encoder tool has some limited editing capacity you can access through the settings button. Since videos quickly can become huge, you may want to crop off space from top, bottom or left and right and also make it shorter. You also can choose from various levels of video and audio quality.

Look at the contents

• Move the horizontal glider (yellow triangle) from left to right.

To resize and crop

• Select the "Crop and Resize" tab
• You can crop the video (i.e. take of space on top, bottom, right, left.

See the screen capture below.

To crop off frames at start and at the end

• You cut off frames from the beginning and the end of the original video (move the little triangles below the playhead as shown in the screen capture below.

Cropping and resizing the length of a video - listening to sound with QuickTime Player

Tip: If you want to hear the video, just listen to it with an other tool, e.g. the QuickTime Player if your source is *.mp4. Both tools show time in seconds.

It is import to make a video as small as possible if you plan to do timeline animations as shown in the Importing a video to the timeline section.

Typical quality settings

• Select "video" and "audio" tabs
• Video: For short videos I use the medium Flash quality with default codecs
• Audio: If video quality is bad from start (e.g. made with your cell phone) you can reduce audio to 64 kpbs mono or even less since it can't get worse than it already is.

Cue Points

“Cue points cause the video playback to start other actions within the presentation. For example, you can create a Flash presentation that has video playing in one area of the screen while text and graphics appear in another area. A cue point placed in the video starts an update to the text and graphic, while they remain relevant to the content of the video. (Adobe CS3 Video Encode Help, sept. 2007)”

You don't need cue points for just playing a video, so you may come back later and read about inserting cue points.

There are several ways of adding cue points.

(1) Adding Cue points in the video encoder

• Select the Cue Points Tab
• Glide forwards and backwards the video play head to select positions you'd like to mark
• Click on the + to add a new cue point.
• Event cue points are used to trigger ActionScript methods when the cue point is reached, and let you synchronize the video playback to other events within the Flash presentation.
• Navigation cue points are used for navigation and seeking.

The difference between these two kinds of cue points are only manifest if you use cue points to search for something. e.g. to trigger animations from cue points, it doesn't matter if the cue point is of type "event", "navigation" or "actionscript". However if you seek a cue point, there will be a difference.

Adobe CS3 Video Encoder Cue Points

Each cue point consists of a name, a type and the time at which it occurs and we then can retrieve this information in Flash as you will see in handling events from the movie section below. Anyhow, I rather suggest to add cue points through ActionScript or the component's parameters, since you then can add/remove cue points whenever there is a need.

(2) Adding "ActionScript" cue points with the component inspector

• Through the FLVPlayBack component's parameters, i.e. open the parameter or the component inspector panel (see below). I recommend this method for beginners.

(3) Adding "ActionScript" cue points with ActionScript

• In ActionScript with the addASCuePoint() method, example:

video_component.addASCuePoint(10.5, "wonder");

The advantage of the ActionScript method is that you easily can change these cue points when adjustments are needed. E.g. you may notice at some point that your video file is too big and you may want to shorten it down. It's muchfaster to change AS code or XML descriptors than entering the cue points again with the encoding tool and faster than editing the component through the inspector.

Disadvantage is that some methods made for navigation cue points will not work.

AS3 example:

video_component.addASCuePoint(40, "End");

video_component is the name you gave to the component instance

Other transcoding tools

Your modern cell phone may encode video with MP4. Flash 9 (CS3) can not directly import this format. If you don't have access to the CS3 Flash Video Encoder tool (an older Flash version may not encode newer formats), you may download the free SUPER tool (it has more features than many commercial tools).

Read the MP4 article to see how I managed to use this free (and excellent) SUPER encoder to go from MP4 to MPV with MPEG3-v2/MP3.

Using the FLVPlayback component

Let's now import a video and use it the simple way. In this example we will show how to import a video I (quickly) made with my Nokia N73 cell phone. The easiest strategy is to directly import a *.flv file.

Using the video with the component first method

The most simple procedure to use a video with the FLVPlayBack component is the following one:

Step 0 - Get/create a *.flv file

• See above.
• Put it in the same directory as your Flash file.

Step 1 - Open the component library

• Menu Window->Components or hit Ctrl-F7.
• Dock it next to your library.

Step 2 - Drag the video component to the stage

• Drag the FLVPlayBack component from the components library to the stage.

Step 3 - Tell FLVPlayBack where to find the video

• Open the Component Inspector panel (Window->Component Inspect) and dock it next to the library.
• Add the name of a video file in the source field of the parameters. Click on the field and then either type the file name or use the file chooser menu.
• Tick match source FLV dimensions. This will adjust the size of the video control widget to your video.
• Make sure to remove the directory path from the file name. For example, instead of:

E:\schneide\te\coap2110\ex\component-video-intro\office-dks3.flv

just keep the file name

office-dks3.flv

Else when you copy both the *.sfw and the *.flv file to some other place you flash file won't find the video anymore and the playback will break.

Step 4 - Adjust the skin

• Play around with various skins in the component inspector panel. Basically you can add/remove various user controls.
• Click on the value of the "skin" parameter. A popup menu will let you select from various skins.
• Finally, you can change the color of the component.

Select the video component skin

Enjoy ....

Importing the video with the import method

Here is an alternative and longer method for using the FLVPlayBack component.

Step 1 - FLV files

• Encode the video as *.flv file as described above.
• If you directly import other formats, i.e. *.mov, *.avi, *.mpeg, *.dvi, *.wmv, *.3pg (but not MP4), Flash will at some point open the Video encoder tool. So the result is the same: a *.flv file. It will be saved by default in the same directory as your original video file.

Step 2 - Import the video

• Create a new layer and call it "video"
• Menu File->Import->Import Video

You then can from a popup menu choose how the video should be deployed (see next step).

Step 3 - Choose "Standard web server / progressive download"

• If you only have access to a standard web server: Choose "progressive download" from a web server.
• You then can choose from a variety of built-in video control skins for the FLVPlayBack Video Component which will be automatically added to your library (you later can change the skin again, so don't worry now).

The video you will import will simply use the standard video playback component that you also can find in the "Components" panel.

Step 4 - Fine tune the stage

• Change the background
• Adjust stage size to video size or alternatively add some text or graphics if the stage is bigger. Create a new layer for these.
• You also can change the skins for the video control skin. Simply open the Parameters panel. Scroll down to the skin field and select another one from the popup menu. Same thing for other parameters. You can quite safely play around with them.

Step 5 - Fix the source file location

You must tell Flash where the video file will sit on your server (see also the next step)

• Click on the video component
• Open the parameter panel (menu Window->Properties->Parameters in case it's not already docked) or the open the Property inspector panel. I prefer the latter since I have it docked next to library and don't need to scroll as much as in the bottom panels.
• Change the source field, scroll down if needed (!). In our case I killed everything in front of the file name office-dks.flv.

For example, instead of:

E:\schneide\te\coap2110\ex\component-video-intro\office-dks3.flv

I only kept the file name since I plan to put all files in the same directory on the server. Also on my desktop the files sit in the same directory.So I shortened down the path:

office-dks3.flv

Configuring the video component

Step 6 - Tune some parameters

In the property inspector or parameters panel you may set things like:

• Volume: I suggest to turn it down to 0.3 since you will be fed up listening to your video after a while
• AutoPlay: True means that the video will start playing after it loads. False requires the user to press the play button

Step 7 - Copy the *.flv and *.swf skin file to your web server (optional)

• I suggest to put all files in same directory since they will be easier to manage that way. If you don't, go back to step 5. Also remember that the *.flv file may sit in the same directory where you original video is.
• Do not forget to copy the "*.swf skin file, for example SkinUnderAllNoFullscreen.swf.

If the video doesn't play...

• Most likely you forgot to define the right source path, either a full URL, a relative URL, or a *.flv file name that sits in the same directory.
• File names are case sensitive on most Web servers ! Also avoid using blanks and other strange characters in your file name.
  • Good = myvideo.flv - Bad = my Video.flv

Results

• flash-cs3-video-simple-server.html
• Source: flash-cs3-video-simple-server.fla
• Video file: office-dks.flv
• Directory: http://tecfa.unige.ch/guides/flash/ex/component-video-intro/

The Flash CS5 Video component and the Adobe Media Encoder CS5

Using the Flash CS5 video component

Using Flash CS5 component is somewhat easier than prior versions and for two reasons:

• On can use *.mp4 videos without prior encoding to a Flash video format
• All operations are now centralized in the properties panel.

Procedure for an *.mp4, *.flv or *fl4 video that already is "ready" for production.

1. Open the components panel (Menu Window->Components or CTRL-F7)
2. Drag FLPLayback 2.5 on the stage
3. Set the name of the video file with source in the Properties panel (e.g. BFB-BBC.mp4)
4. Select an appropriate skin

... That's it.

RapMan video from BBC

In order to publish the flash file do not forget to put all the files on your web server (!), e.g.

• flash-cs5-mp4-video.html (the HTML file, optional)
• flash-cs5-mp4-video.swfl (the Flash file)
• BFB-BBC.mp4 (the video)
• SkinUnderAllNoFullscreen.swf (the skin library)

Using the Adobe Media Encoder CS5

Importing a video

In the welcome screen,

• Click on Add... to add a video for encoding
• Select the video (click on the line) and click on Settings ...

Adding a video to the Adobe Media Encoder CS5

Make adjustments to the settings

• We suggest to select a preset F4V format
• To left, you can remove frames for the start or the end (move around the playhead)
• If you shot the video yourself, you likely also want to do some clipping
• As a general rule, we suggest to add cue points (if needed) in Flash CS5 and not during the encoding ...

Adobe Media Encoder CS5 Settings