Encoding
Chapter 12: Video
339
Customizing Settings
If you’re not content with a preset, or if you have additional needs (such as
resizing the source), you can click on the Settings button to customize the
settings. (You can even save your customizations as a preset of your own.)
Figure 12-4 shows the Settings interface. The upper left quadrant allows you
to see various sizes of the source material, as well as crop the source prior to
encoding. The bottom left quadrant allows you to create cue points that will
be embedded in the video during encoding. Between those areas is the video
timeline, which you can use to preview the video and set in and out points if
you wish to compress only a portion of the video.
Figure 12-4. The Settings interface of Adobe Media Encoder (CS5 pictured)
The upper right quadrant is a general settings area that allows you to choose
the file format, encoding preset, and output directory, as well as show a sum-
mary of the settings applied by the chosen preset. The lower right quadrant
contains more specific settings including video and audio encoding options,
and the ability to apply a blur during encoding.
Download from Wow! eBook <www.wowebook.com>
Part IV: Sound and Video
340
Components
For more information about Adobe Media Encoder, see the Using Adobe
Media Encoder CS5 resource at />cs/using/index.html. Information about embedding cue points during encod-
ing can be found in the “Encoding and exporting” section of this resource.
The companion website has additional information about creating cue
points—both during encoding and at runtime through ActionScript when
using the FLVPlayback component.
Starting the Queue
Once a preset is selected, all you need to do is press the Start Queue button.

Adobe Media Encoder will encode the file and save it in the location specified
in the Output File column. (The default location for the output is the same
directory in which the source file resides.)
Components
Components offer designers and coders alike a chance to speed up the
development process by using precreated widgets. Components usually
combine ActionScript and assets to make it easier to achieve a specific goal.
Components can be dropped onto the stage like a movie clip or button sym-
bol and often function with little or no intervention. When effort is required,
most components can be configured using the Flash Professional CS5
Properties panel or Flash Professional CS3 or CS4 Components Inspector
panel.
Most components can also be manipulated with ActionScript, which is what
we’ll focus on in this section. Before working with any component, however,
Flash Professional users must place the component in the library of the
FLA file that will compile to SWF. Simply drag any component from the
Components panel to the Library panel, or drag it to the stage and delete it
immediately. In this chapter, we’ll work with three different components. First,
we’ll add the FLVPlayback component as a prefabricated video player. Next,
we’ll add captioning support to the player with the FLVPlaybackCaptioning
component. Finally, we’ll add a Button component to satisfy a simple user
interface need.
Working with the FLVPlayback Component
The fastest way to add video to your ActionScript application is by using the
FLVPlayback component (Figure 12.5). The component is available in two fla-
vors. FLVPlayback is available to Flash Professional users of version CS3 and
later, and FLVPlayback 2.5 was introduced with version Flash Professional
CS4 and is also available for Flex.
N O T E
By default, Adobe Media Encoder will

start processing the assets in the encod-
ing queue after two minutes of idle time.
This behavior can be adjusted in the
application preferences.
Download from Wow! eBook <www.wowebook.com>
Components
Chapter 12: Video
341
Figure 12-5. The FLVPlayback component simplifies adding video to projects
In addition to Flex compatibility, FLVPlayback 2.5 was designed to take
advantage of features introduced in version 3.5 of Flash Media Interactive
Server—Adobe’s streaming media and real-time communication server
software. It improves performance for video on demand and live streaming
and supports live DVR functionality (pausing, rewinding, and recording live
streams) introduced in FMS 3.5.
If you prefer to avoid components—perhaps because you want to design your
own player interface, or because components increase the size of your SWF
(the FLVPlayback component contributes between 50k and 65k)—we’ll show
you how to play video entirely with ActionScript shortly. If you’re open to the
use of components, however, FLVPlayback has a few useful benefits.
First, you can pick from several preconfigured controllers, or skins, or you
can use the component without a skin and create your own custom control-
ler. This lets the component handle all the heavy lifting in the video display
area, but allows you to control playback with your own code and your own
design. (We’ll show you a very simple implementation of this approach later
in the chapter.)
More importantly, the code in the FLVPlayback component takes care of
some important behind-the-scenes tasks that you would have to recreate.
For example, the component will automatically determine if you’re using a
streaming server by parsing the URL of the video source. If so, it will then

N O T E
You may notice in further research
that Flash Media Interactive Server is
typically abbreviated as FMS. This is
because “interactive” was added to the
product’s name only in recent versions.
Download from Wow! eBook <www.wowebook.com>
Part IV: Sound and Video
342
Components
handle the necessary initial communication with the streaming server for you
so you don’t have to script those connections yourself.
We advise starting out with the FLVPlayback component, even if you choose
to create your own controller. Then you can move on to coding your own
player to replace the component after you’re comfortable with the relevant
classes.
Scripting the component
The following example, found in the video_comp.fla source file, demonstrates
the minimum code necessary to play a video.
1 import fl.video.FLVPlayback;
2
3 var vid:FLVPlayback = new FLVPlayback();
4 vid.source = "nero.flv";
5 addChild(vid);
Note in line 1 that the FLVPlayback class must be imported even in the time-
line because it’s not part of the
flash package. (Most component classes are
found in the
fl package and are not automatically part of the Flash Player to
keep the player size small.) Line 3 types the instance variable and instantiates

the component. Line 4 populates the
source property (telling the component
which video to play), and line 5 adds the instance to the display list.
Skinning the component
To add controls simply, we can use a skin that ships with the component.
FLVPlayback skins are external SWFs that are loaded at runtime. Therefore,
to add a skin with ActionScript, you must know the path to the skin.
Fortunately, Flash Professional users can take advantage of the fact that Flash
will move your chosen skin to the same directory as your SWF when you
test your file. To choose a skin, save your FLA, or create a new temporary
file and save that, to the directory you’re using for your project. Temporarily
drag the component from your file’s library to the stage and select it. Flash
Professional CS5 users can then look in the Component Parameters section
of the Properties panel (shown in Figure 12-6) to customize the component.
Flash Professional CS3 and CS4 users will need to open the Component
Inspector panel to see the same content.
Next, click on the UI element next to the skin option. (In Flash Professional
CS5 there’s a pencil button, while other versions show a magnifying glass
button after clicking on the field.) This will open a dialog box that allows you
to preview all the available skins, collected into groups that display the con-
troller under your video or over your video. Flash Professional CS5 users will
also see an additional grouping of new skins called Minima. You can choose
which functionality to include in your controller by looking at the name of
the skin and previewing its appearance when displayed in the dialog box.
N O T E
If you test the video_comp.fla file, you
may wonder how it can play without
any instruction to do so. The component
has an
autoplay property that’s set to

true by default.
Figure 12-6. The Component Parameters
section of the Properties panel (CS5
pictured)
N O T E
Users of Flex Framework authoring
tools can download the component,
skins, sample files, component source,
and several additional related tools at
/>mediaserver/tool_downloads/.
Download from Wow! eBook <www.wowebook.com>
Full-Screen Video
Chapter 12: Video
343
For the following exercise, found in the video_comp_skin.fla source file, choose
the SkinUnderAllNoFullNoCaption skin and test your movie. Don’t worry
about the fact that it won’t work. After all, you didn’t select a video source.
All that matters is that Flash copies the skin to the same directory in which
you published your SWF. You should see SkinUnderAllNoFullNoCaption.
swf in that directory. (If not, be sure you save the FLA you were using for
this task and retest.) Once you have your skin in place, you can remove the
FLVPlayback component from the stage, or discard any temporary file you
created.
Once the skin is in place, all that remains is to add one or more of the fol-
lowing three lines to your existing script. Line 6 specifies your skin choice,
and the optional lines 7 and 8 specify the color and alpha of the skin. Now,
when you test your movie, you’ll see a skin that you can use to control video
playback.
6 vid.skin = "SkinUnderAllNoFullNoCaption.swf";
7 vid.skinBackgroundColor = 0x003366;

8 vid.skinBackgroundAlpha = 0.75;
If you don’t want to store the skin file in the same directory as your main
SWF (for example, if you want to store multiple skins in a directory), you can
specify another path for the skin property. Also, remember that the skin you
see is an external SWF that’s loaded at runtime. Therefore, just like the video
file, the skin must be deployed with your main SWF and HTML files.
Full-Screen Video
One of the most entertaining Flash video features is true full-screen video—
video that occupies the entire screen, rather than a maximized browser or
player window, hiding other computer operating system interface elements
for a fully immersive experience. Both the FLVPlayback component and pure
ActionScript can launch into full-screen mode, both of which we’ll cover.
Before we get to implementation, however, we need to cover two preliminary
steps.
The first step is to start with optimal source material for final assets. This
includes the highest quality source, the largest size your interface will allow,
and careful attention during encoding. Beyond those common sense sug-
gestions, you’ll probably want to experiment with such encoding options as
different bitrates and deinterlacing your content if you’re using a DV source.
Deinterlacing is the process of converting the two fields of a DV source (which
are like video frames but each contain half the horizontal lines and are dis-
played twice as fast) into the frames used by the FLV format. One common
artifact that is more pronounced when working with interlaced source mate-
rial is jagged lines visible along sharp edges in your videos. Deinterlacing the
source during encoding significantly reduces this effect.
Download from Wow! eBook <www.wowebook.com>
Part IV: Sound and Video
344
Captions
The second step is to instruct Flash Player to allow the switch to full-screen

display. If you think about it for a moment, you certainly don’t want the deci-
sion to switch to full-screen mode left in the hands of content creators. If that
were the case, every Flash advertisement would take over your screen, leaving
you no control. Instead, the developer must make the feature possible, and
the user must be responsible for switching back and forth between normal
and full-screen modes.
To enable the feature, you must add the
allowFullScreen parameter, with a
value of true, to the file’s host HTML file. One way to do this is to add this
parameter manually to the object and embed tags, as seen in the following
excerpt.
<object>

<param name="allowFullScreen" value="true" />
<embed allowfullscreen="true" />
</object>
Flash Professional users can also use the quick and easy solution (par-
ticularly handy during testing) of choosing the “Flash Only – Allow Full
Screen” publishing template in the Publish Settings dialog (File
→Publish
Settings
→HTML→Template).
After adding support for full-screen video in your HTML host file, you’re
ready to enable the full-screen button in the FLVPlayback component. To
do so, choose any skin that supports full screen, such as SkinUnderAll or
SkinOverPlayFullscreen, to cite two examples. These and other skins add the
Full Screen button shown in Figure 12-7.
The following change to line 6 of the previous example, found in the video_
comp_skin_full.fla source file, changes the skin to one that supports full
screen mode.

6 vid.skin = "SkinUnderAllNoCaption.swf";
Once you have a video and have supported full screen mode in your host
HTML file and skin, you can test your file in a browser. Full screen mode will
not work when testing within Flash Professional, so Flash users can select the
default Publish Preview command, File
→Publish Preview→HTML. Pressing
the Full Screen button in the skin will switch to full-screen mode, and you
can press the Escape key to return to normal mode. Later in this chapter, we’ll
show you how to add full-screen playback using your own ActionScript.
Captions
Captions, also referred to in some contexts as subtitles, consist of text that
is displayed synchronously during video playback. Captions are useful for
providing alternate language tracks to bring your video to a wider audience.
Captions are also appreciated by the deaf and hearing impaired, as they provide
Figure 12-7. The Full Screen button used
by select FLVPlayback skins (color and
alpha may differ)
N O T E
If HTML is not available for
Flash Professional users, go to the
File
→Publish Settings menu dialog and
add HTML as a publishable format.
Download from Wow! eBook <www.wowebook.com>
Captions
Chapter 12: Video
345
a much needed accessible alternative for audio tracks when it comes to dialog
and descriptive audio services.
Captions help satisfy requirements imposed by the United States

Rehabilitation Act of 1973, Section 508, which establishes accessibility man-
dates for content developed for government use, or financed by federal funds.
Many private entities, particularly those serving the educational markets, also
require accessible content. As the demand for this requirement increases, cap-
tions will play an increasingly more important role in digital video.
Using the FLVPlaybackCaptioning Component
Flash supports captioning via the FLVPlaybackCaptioning component,
when used in conjunction with the FLVPlayback component. Adding the
FLVPlaybackCaptioning component to the stage at authoring time, or
dynamically at runtime with ActionScript, opens the door for caption use.
The simplest way to display captions is to use the FLVPlayback component.
In fact, with only one FLVPlayback instance on the stage the captioning
component will automatically detect the playback component, and use its
internal text element for caption display. You can also manually specify any
FLVPlayback component as the target for the captions (in case you require
more than one at any given time), or even your own target for the captions
(in the event that you want to use another text element—perhaps integrated
into your interface, rather than the video).
To use the FLVPlayback, you’ll need to choose any skin that supports cap-
tions, such as SkinUnderAll or SkinOverPlayCaption, among others. These
skins feature the Captions button shown in Figure 12-8.
The following edit to line 6 of the previous example, found in the video_
comp_skin_full_captions.fla source file, uses a skin that supports all skinned
features, including captions.
6 vid.skin = "SkinUnderAll.swf";
Once the FLVPlayback component is configured to display captions, we must
add the FLVPlaybackCaptioning component to the stage.
The following code continues the example first by importing the component
class in line 10, and instantiating the component in line 11. Line 12 assigns the
caption file for loading at runtime (which we’ll discuss in a moment), and

line 13 adds the component to the display list.
10 import fl.video.FLVPlaybackCaptioning;
11 var cap:FLVPlaybackCaptioning = new FLVPlaybackCaptioning();
12 cap.source = "nero_timed_text.xml";
13 addChild(cap);
Note that we’re not placing the component at a particular location on the
stage. Although it appears as a small rectangle when dragged to the stage in
Figure 12-8. The Captions button used by
select FLVPlayback skins (color and alpha
may differ)
N O T E
As with the FLVPlayback component,
Flash Professional users must have the
component in the library of their FLA
to instantiate it with ActionScript. See
the “Working with the FLVPlayback
Component” section of this chapter for
more information.
Download from Wow! eBook <www.wowebook.com>
Part IV: Sound and Video
346
Captions
authoring mode, this is merely to simplify selecting the component. At run-
time, it will be invisible, so its position is irrelevant.
Now both components are ready to display captions, so we need to create the
caption file. You can create a captioned video in two ways. You can embed the
caption data in the video using cue points. Embedding means they’ll always
be with the video, but it also means that you have to reencode the video just
to edit the text. A far more flexible option is to load a caption file at runtime.
This approach also allows you to switch caption files dynamically—ideal for

offering subtitles in multiple languages, a task we’ll look at later in the chap-
ter. First, however, we need to know how to format the captions.
Creating Captions with Timed Text
To create a caption file to load at runtime, you need to write an XML
(Extensible Markup Langauge, discussed in Chapter 14) file using the World
Wide Web Consortium (W3C) Timed Text Markup Language (TTML or,
familiarly, TT)—also sometimes referred to by its format name, Distribution
Format Exchange Profile (DFXP). We’ll cover a portion of Timed Text features
here, but you can learn more about the language by visiting the W3C page
at More importantly, you can learn about
the subset of features supported by the FLVPlaybackCaptioning component
from Adobe’s ActionScript 3.0 Language and Components Reference at http://
www.adobe.com/livedocs/flash/9.0/ActionScriptLangRefV3/TimedTextTags.
html.
Several tools can create Timed Text files, including the pair listed in the
adjacent note. However, you can also write your own Timed Text files. The
example XML that follows is an edited excerpt of the nero_timed_text.xml
source file provided in this chapter’s source archive. (For brevity, two cap-
tions are shown and minor edits have been made to use all features from the
source file.)
1 <?xml version="1.0" encoding="UTF-8"?>
2 <tt xmlns=" />3 xmlns:tts=" />4 <head>
5 <styling>
6 <style id="1"
7 tts:textAlign="center"
8 tts:fontFamily="_sans"
9 tts:fontSize="18"
10 tts:fontWeight="bold"
11 tts:color="#FFFF00FF" />
12 <style id="2" tts:backgroundColor="#00000000" />

13 <style id="3" tts:backgroundColor="#000000FF" />
14 <style id="trans" style="1 2" />
15 <style id="opaq" style="1 3" />
16 </styling>
17 </head>
18 <body>
19 <div>
20 <p begin="00:00:05.00" dur="00:00:04.00" style="opaq">
N O T E
MAGpie is a free captioning tool devel-
oped by accessibility leaders at the
National Center for Accessible Media
(NCAM). For more information, see
/>web_multimedia/tools-guidelines/mag-
pie. You can find the Manitu Group’s
Captionate at tionate.
com, and Adobe’s Flash Developer
Center features a tutorial on using
Captionate with the FLVPlayback and
FLVPlaybackCaptioning components
( />articles/video_captionate.html).
Download from Wow! eBook <www.wowebook.com>
Captions
Chapter 12: Video
347
21 Nero is a Lionfish<br /> (<span tts:fontStyle="italic">
22 Pterois volitans</span>),
23 </p>
24 <p begin="00:00:09.00" dur="00:00:02.00" style="trans">
25 in his reef aquarium.

26 </p>
27 </div>
28 </body>
29 </tt>
We’ll discuss custom XML solutions in Chapter 14, but Timed Text is a
predefined format so conforming to its specification is pretty straightfor-
ward. We’ll occasionally point out things that we’ll cover in greater detail in
Chapter 14, but you should feel comfortable simply editing an existing Timed
Text file until you gain a little experience with XML.
Lines 1 through 3 include two default tags used to validate the file. The first
tag (also called a node) is
<?xml ?> and is the XML declaration tag. We’ll
discuss this in Chapter 14 but, essentially, it declares the version of XML in
use and the character encoding used when writing the document.
The second tag,
<tt>, is the document’s root node. All XML documents must
have a root node that encloses all other nodes, and we’ll discuss this further
in Chapter 14, as well. Be sure to see the accompanying note describing the
use of attributes in this tag.
N O T E
The ActionScript 3.0 Language and Components Reference entry “Timed Text
Tags”, found at />TimedTextTags.html, specifies that all attributes of the
<tt> tag are ignored.
However, this is not the case if you style your captions. If you omit the
xmlns attri-
bute, your captions will not be styled, and if you omit the
xmlns:tts attribute, the
use of the tts namespace in styles will result in errors. When using styles, consider
both of these attributes required.
A <head> tag (spanning lines 4 through 17) is optional, but we recommend its

use because it makes styling your captions much easier. Within it, a
<styl-
ing>
tag (spanning lines 5 through 16) is also optional but necessary if you
intend to create styles. Styles are Cascading Style Sheet (CSS) entities for the
Timed Text document and are itemized in lines 6 through 15. You can have as
many styles as you like, but each must have a unique
id attribute. The style
attributes that are actually responsible for the formatting are very similar to
CSS properties, but are preceded by the
tts: prefix.
It’s possible to assign multiple styles directly by their alphanumeric id, but
it’s also possible to manage formatting efficiently by creating new styles con-
sisting of other styles. Take a look at the styles in our example. We wanted to
achieve two looks for our captions: one with a black background, for use over
light areas of video, and one with a transparent background, to allow more of
the video to show through the text.
N O T E
Character encoding just maps text
characters to specific codes (usually
numeric), so that software responsible
for parsing the text know which char-
acter to use based on a given code. It’s
a way of bringing platform, hardware,
and software neutrality to the process
of rendering text. We recommend using
UTF-8, which includes a wide range of
characters, such as those used in differ-
ent languages around the world.
For more information about character

encoding, see />wiki/Character_encoding. For more
information about UTF-8, see http://
en.wikipedia.org/wiki/UTF-8.
N O T E
Be sure to consult the “Timed Text
Tags” ActionScript 3.0 Language and
Components Reference resource, men-
tioned earlier in this section, for a com-
plete list of supported and unsupported
properties. Here are a few noteworthy
mentions:
• fontFamily supports device fonts, as
seen in our example.
• fontSize supports only the first size
found; supports absolute and rela-
tive sizes but not percentages.
• li neHeight, pa dding, and over-
flow
, although potentially useful
for captions, are among several
options that are not supported.
Download from Wow! eBook <www.wowebook.com>
Part IV: Sound and Video
348
Captions
Style 1 consists of all styling attributes common to both treatments, which
means that the background alpha information appears in other styles. Styles
2 and 3 itemize only the background color and specify transparent and
opaque, respectively. The Timed Text format uses #RRGGBBAA color nota-
tion, where AA is alpha. However, the ActionScript components support only

opaque and transparent settings. All zeros will be seen as transparent, but
any value other than zero will be opaque. We’ve used the opposite of zero for
alpha, FF, to remind us that this is opaque. The resulting value of #000000FF
is, therefore, an opaque black background.
Once you’ve created these individual styles, you can then apply more than
one style at a time. It’s possible to do so at the caption level by using syntax
like
id="1 2", but it’s also possible to create a new style the same way. For
example, you can create a new style combining styles 1 and 2 and, because
the style names can be alphanumeric, you can give it a descriptive name.
We’ve done this in lines 14 and 15, specifying that trans is centered, sans-serif,
18-point, bold, yellow text on a transparent (because it uses styles 1 and 2),
and opaq shares the same font attributes but is atop an opaque background
because it uses styles 1 and 3.
A
<body> tag (lines 18 through 28) is required and is used to hold all the
caption data. Within the body tag, one
<div> tag (lines 19 through 27) is
required, and paragraph tags
<p> are required for each line of caption (lines
20 through 26).
The ActionScript documentation doesn’t say that
<div> is required but nei-
ther
<p> nor <span> tags can appear in the <body> tag. Similarly, the documen-
tation says zero or more paragraph tags are supported, but we didn’t find a
logical way of applying time or style attributes to individual captions without
them. For example,
<span> tags (lines 21 and 22) are supported, but not in
the

<body> or <div> tags. Therefore, we suggest you consider <div> and <p>
tags required.
For each caption (in our case, in each
<p> tag), a begin attribute is required
to set the time of the caption. The attributes
dur (duration) and end (the time
at which the caption should end) are optional. If omitted, the caption will
remain onscreen until the next caption appears. Time can be specified in full
clock format (HH:MM:SS.m, where m is milliseconds), partial clock format
(MM:SS.m or SS.m), or offset time (with units, such as “1s” for one second).
Frames are not supported as a measure of time.
Now that you know how to create a Timed Text file, you can run the previous
source file, video_comp_skin_full_captions.fla, (discussed in the “Captions”
section of this chapter) which makes use of the nero_timed_text.xml caption
source file.
N O T E
If you’ve spent some time with Chapter
9 in this book, you may recall that the
color notation that included alpha was
specified as 0xAARRGGBB. The dif-
ference between this BitmapData color
notation, and the #RRGGBBAA used
with Timed Text, can lead to confusion.
If you see an unpredictable color behind
your caption text, check to see if you’ve
used the wrong format.
N O T E
In our main Timed Text example, we
used full clock format for clarity and
consistency, even when the duration

matched the time at which the next
caption appeared. However, you can
simplify this by using partial clock for-
mat, and omitting any duration or end
attributes when the caption is to remain
on screen until replaced. As an illustra-
tion, we have formatted our Spanish-
language example this way, which we’ll
discuss shortly.
Download from Wow! eBook <www.wowebook.com>