Flash video captions tutorial

Introduction

Video components are pre-built interface elements (widgets) that will speed up video integration. As explained in the Flash video component tutorial, the FLVPlayBack Video Component allows to render videos in an easy way since it includes a nice choice of skins for user controls. Videos also can be enhanced with captioning, i.e. subtitles or side-text as we shall explain in this tutorial. For this purpose, you need another component: FLVPlayback Captioning

Learning goals

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

Learn how to use the Flash 10/11 (CS5/6) video component for simple video playback

Prerequisites for the first part

Flash CS6 desktop tutorial

Flash drawing tutorial

Flash video component tutorial (important)

Timed Text

Flash embedded movie clip tutorial (maybe)

Moving on

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 that do have some web technology background and intermediate Flash designers.

Making use of captions

A caption is a text that is displayed dynamically while the video is playing. Captions may serve several purposes:

• You can deploy videos to people with hearing disabilities
• Users can look at videos without making noise
• You can emphasize important passages, or paraphrase or comment voice tracks.

In order for captions to work, you must do three things:

• Use a skin for the playback component that includes a Caption button, e.g. SkinUnderAllNoFullscreen.swf.
• Make use of the FLVPlayback Captioning component (in addition to the playback component)
• Encode captions in an XML file (there are at least two options). This XML file then must be registered with the captioning component.

To import the video, use the same procedure as in the Flash video component tutorial

• Drag the video component to the stage
• Configure the file name and skin in the properties panel

The caption component with timed text

The Timed Text standard and XML

If you are not familiar with XML, you may have a glance at the XML article and maybe the DTD tutorial. Then, we also suggest to work with an XML editor in order to insure that your file is well formed. We suggest the free Exchanger XML Lite. If you don't feel learning XML, just make very sure that you exactly use a template as described below. One missing tag or or some syntax mistake like a missing ">" will make your animation fail.

Flash doesn't support the full Timed Text specification and the documentation at Adobe is rather shaky. For those who are familiar with XML I wrote a little DTD that helps editing. Just grab it from the Timed Text article and also copy/paste the XML template.

Notes: Timed Text is defined with a complex XML Schema but since Adobe Flash only implements a subset, it's not worth using this. Also, Internet Explorer 10 supports Timed Text in the HTML5 video tag, read HTML5 audio and video.

Figuring out time for captions

There are several methods:

• Use the Adobe Media Encoder, i.e. the playhead in the Export Settings as explained in the Flash video component tutorial
• Use a Skin with full controls, then slide the playhead you can see in the component on the stage to the right position. Add a cue point. It will show the current "time". Of course, don't save these cue points...

A minimal example XML captioning file

As a minimum we suggest to enter the following data. For each caption enter:

• A <p> </p> tag. Each "p" should include:
• a begin attribute that defines when the caption should appear,
• a dur attribute that defines how long it will stay on screen.

Time is in seconds, but also may use a more complex format like

02:30.5

meaning 2 minutes, 30 seconds and a half.

Here is the file we called timed-text.xml and that we used in this example

<?xml version="1.0" encoding="UTF-8"?>
<tt xml:lang="en" xmlns="http://www.w3.org/2006/04/ttaf1"
    xmlns:tts="http://www.w3.org/2006/04/ttaf1#styling">
  <head>
    <styling>
    </styling>
  </head>
  <body>
   <div xml:lang="en">
      <p begin="1" dur="4">Daniel´s Office</p>
      <p begin="5" dur="5">My Palm Tree (from NYC)</p>
      <p begin="11" dur="7">My Bookshelf</p>
      <p begin="18" dur="5">My favorite Flash Drawing Book</p>
      <p begin="25" dur="5">My DELL XPS Laptop Flash machine</p>
      <p begin="30" dur="5">My Ubuntu Linux workstation</p>
      <p begin="33" dur="5">Working hard on Flash Tutorials using the Xemacs Editor</p>
      <p begin="42" dur="5">The outside (not my bike)</p>
    </div>
  </body>
</tt>

Note: Captions may overlap, i.e. Flash will display a new caption on a new line if the previous one is still on. You can see this in the example we present in the next section.

For now, just grab the template below and add "p" tags, make sure to close them as in the example above. Replace "Let's start" by your own caption of course.

<?xml version="1.0" encoding="UTF-8"?>
<tt xml:lang="en" xmlns="http://www.w3.org/2006/04/ttaf1"
    xmlns:tts="http://www.w3.org/2006/04/ttaf1#styling">
  <head><styling></styling></head>
  <body>
   <div xml:lang="en">
      <p begin="1" dur="4">Let´s start</p>

    </div>
  </body>
</tt>

Using the FLVPlayback Captioning component

• Create a new layer and call it "Caption" or something like that. Go there.
• Then drag the "FLVPlayback Captioning component" somewhere to the workspace or even to the stage.
• Unlike the playback component, this component will not be seen by the end user, so you can place it anywhere.

Customization of the component

Click on the component and edit the parameters, either in the Parameters or the Component Inspector panel (CS3 only). Then,

set showCaptions to true if you want all users to see captions (probably most users don't know how to turn it on or off, so turn it on)

specify the source file of the Timed Text XML file to download. So, create the xml file now, if you didn't so far. Make sure to get the spelling right.

The FLVPlayback Captioning component and its parameters

The example

• flash-cs3-video-simple-server-caption.html
• flash-cs3-video-simple-server-caption.fla
• XML file: timed-text.xml
• Directory: http://tecfa.unige.ch/guides/flash/ex/component-video-intro/

Tuning

• You can style text and background of the Caption Box (see below)
• Put down the volume: Set it to 0.5 in the parameters of the FLVPlayer or even lower. I am fed up listening to my own voice, really.

CaptionsBox and Style

You can use a different text box to display the captions, i.e. nothing prevents you from displaying the text somewhere in the middle of the video or outside of the playback component's area.

Step 1 - Draw a textbox for the captions to appear

• Create a captions layer if you don't already have one
• Draw a textbox
  • Give it the instance name caption_box
  • Select font size, color etc.
  • Select Multiline
  • Make it Dynamic Text (if it is not)

Step 2 - Configure the component

Tell the captioning component to use the textbox you just made to display captions:

• Select FLVPlayback Captioning component

In the Properties panel:

• Set captionTargetName = caption_box
• Untick autoLayout
• Add the source, i.e. the XML file name (or do it later)

The FLVPlayback Captioning component and its parameters

Step 3 - Add some style to the XML File

Just look at this example (file timed-text2.xml). I don't really understand how some styling tags work. I'd expect for instance to behave backgroundColor within a span like in HTML but it doesn't. I don't know this behavior is a feature or a bug or my misunderstanding of the manual.

If something is not clear, please download the *.fla file and look at it. Make sure to verify that both the playback and the captioning component parameters are ok and that you put all the files in your computer or the server (including the skin *.swf, the *.flv and the *.xml file) in the same directory. Do not forget to copy the skin !

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE tt SYSTEM "mini-tt.dtd">
<tt xml:lang="en" xmlns="http://www.w3.org/2006/04/ttaf1"
    xmlns:tts="http://www.w3.org/2006/04/ttaf1#styling">
  <head>
    <styling>
      <style id="title" tts:backgroundColor="transparent" tts:color="red" tts:fontSize="24"/>
    </styling>
  </head>
  <body>
   <div xml:lang="en">
      <p begin="0" dur="9" style="title">Daniel´s Office</p>
      <p begin="5" dur="4">My Palm Tree (from NYC)</p>
      <p begin="10" dur="13" style="title">Books ....</p>
      <p begin="11" dur="7">My Bookshelf</p>
      <p begin="18" dur="5">My favorite Flash Drawing <span tts:color="red">Book</span></p>
      <p begin="24" dur="16" style="title">Computers ....</p>
      <p begin="25" dur="5">My DELL XPS Laptop Flash machine</p>
      <p begin="30" dur="5">My 
        <span tts:backgroundColor="yellow" tts:color="black">
        Ubuntu Linux workstation</span>
      </p>
      <p begin="35" dur="5">
        <span tts:backgroundColor="transparent"></span>
        Working hard on Flash Tutorials using the Xemacs Editor
      </p>
      <p begin="40" dur="4">The outside (not my bike)</p>
    </div>
  </body>
</tt>

The result

• flash-cs3-video-simple-server-caption2.html
• Source: flash-cs3-video-simple-server-caption2.fla
• XML file: timed-text2.xml
• Directory: http://tecfa.unige.ch/guides/flash/ex/component-video-intro/

Adding captions with Cue Points

There is an alternative method and the principle is obvious if you understood the principles explained in the flash augmented video tutorial.

1. Add cue points to your video, i.e. one for each "moment" where you plan to display some text.
2. Use these cue points to display various hidden statics text boxes, or better, substitute text of the same dynamic text box.

Absolute beginners solution:

• Put textboxes on the stage and give each a different instance name, e.g. text1, text2, etc.
• In the ActionScript code hide these at start:

text1.visibility = false;
text2.visibility = false;

• Define event handlers for each of these, as explained above
• In the function that is called when a cue point event occurs:

text1.visibility = true;

In some distant future we may create an example. For the moment, implementation is left as an exercise to the reader.

A totally different solution is to directly edit the video file. E.g. read Captions for Video with Flash CS3 (Part Two), by Tom Green, Digital Web Magazine, June. We don't know if this solution works and is still accurate.

Links

Timed Text (TT)

• Timed-Text, W3C Specification
• Timed Text Tags (List of supported tabs, Adobe, retrieved Feb 2013)