FLASH Video Captioning
[NOTE: This FLASH captioning tutorial is also available as an MS Word document and as a PDF text file.]
You can publish your video clips to the web as FLASH Video with closed
captioning. FLASH Video has been widely popular ever since the advent of
the YouTube video
sharing website. The problem with YouTube however, is that the video
segments don't include closed captions. Captions provide an aid to
people with hearing disabilities. They are also particularly useful when
the viewer is watching your video while situated in a noisy
Samples of captioned FLASH video are available at the CSULB
Chemistry TestTube site and at the CSULB
Education Department video lessons site.
This web page provides a list of tools required to publish your own
video to the web. All but one of the required software applications are
available at no charge, either as an element included with your
computer's operating system (e.g. Windows Movie Maker, WordPad, FTP
application) or as a free download off the web (MAGpie2). However, the
most essential application required for publishing FLASH video to the
web is not free. That is the Adobe CS3 FLASH Professional, which
includes the Adobe CS3 FLASH Video Encoder.
Besides a list of required tools, this website provides detailed step
by step instructions on how to start with a video file on your local
computer and eventually publish it out to a common web server. The CSULB
web server is available to all CSULB students, instructor members and
Feel free to contact Walter Gajewski with questions or suggestions by
email to gajewski at csulb dot edu or by phone at (562) 985-2266.
Use the editor of your choice. Create an avi video
file. (or an mov file on a Mac). Episode 10 of TechTips includes
instructions on saving a movie file in the avi format from within
the free Windows Movie Maker.
FLASH CS3 Video Encoder (included as part of
Adobe CS3 FLASH Professional)
Flash CS3 Encoder from Adobe (stand alone application that is included
with FLASH CS3 Professional). Be sure to read the
Best Practices for FLASH Video Encoding
document made available from Adobe.
WordPad (or text editor of your choice). It is
convenient to use the XML editor built into Dreamweaver.
MAGpie2 can generate the required *.dfxp.xml (Distribution Format
Exchange Profile) text file.
MAGpie2 (Media Access Generator) is a free
download from the WGBH National Center for Accessible Media. Make
sure to follow the Magpie2 instructions carefully. However, you are
probably better off ignoring the instruction to install the GRINS
player. GRINS is no longer free. Just use Quicktime.
FLASH CS3 Professional from Adobe
This will include the FLASH CS3 Video Encoder as an
included but separate file and, depending on which configuration of the
CS3 suite you purchased, you may also have the Dreamweaver
FTP (File Transfer Protocol)
You can use any one of several FTP applications available. If you are
developing websites with Dreamweaver, use the built in
file upload feature. Other possibilities are the FireFTP
extension for the Firefox browser, the latest version
of Internet Explorer (see Bonus Material
at the end of this document), WS_FTP for Windows PC’s,
or Fetch for Mac computers.
Make a beautiful video and save it as a Windows *.avi file or a Mac
QuickTime *.mov file. [NOTE: Replace the asterisk with a
word of your choice.] Save this file in a new, emply folder. For
puprposes of this tutorial, call the folder "flash."
Adobe CS3 FLASH Video Encoder (included as
part of Adobe CS3 FLASH Professional)
Convert the video file to the FLASH *.flv format:
- Launch the Adobe CS3 FLASH Video Encoder
- File/Add. . .
- Browse to the AVI file you want to convert to FLV
- With the file selected in the encoder dialog box, click on the
- Select the ENCODER PROFILES tab
- Select Flash 8, low quality (150 kbps)
- VIDEO tab: check Deinterlace
- Select the CROP AND RESIZE tab
- Check resize video. Select dimensions. [See Adobe Best Practices ]
- Edit/preferences . . ./Place output file in . . ./(designate the
newly created "flash" folder)
- Click OK and then Click START QUEUE
Write a script for the narrator and save it as a plain text document
(*.txt) with a blank line after each line of text. Any instances of
music or sound effects should be indicated as a parenthetic entry as if
it were a line of text. Save this file in the "flash" folder.
Generate the required *.dfxp.xml (Distribution Format Exchange Profile)
file by pulling the AVI and TXT files into MAGpie2:
- Launch MAGpie2
- File/New Project. . .
- Base Media/browse to the AVI file and select it (not the FLV file)
- Media Toolkit: Apple QuickTime Player
- Text color: Yellow (this is just a temporary selection)
- Video width and height (set this to match your video, usually 720 X
- Caption width and height can be anything for now (e.g. 720 X 80)
- Click OK
- In "Create New Project Track" dialog box, click OK
- Captions/Insert captions from file. . .
- Browse to the *.txt file that has a blank line after every line of
- If the first line of narration starts with the start of video
picture, select the empty row and delete it with: Captions/Delete
selected row(s) from table.
- (Optional) Identify the speaker by typing her name or title into
the appropriate cell in the Speaker column.
- Press the green play button to start the video and hit F9
at the start of every line of narration. NOTE: It is often the case
that F9 will be depressed immediately after hitting the
play button to insert the first line.
- Check your work by sliding the playback head to the left (time
0:00:00.00) and pressing the green playback button. [if the captions
don't show up under the video go to Playback/Hide Player and then
- File/Save (to save the project)
- Export/Adobe Flash - W3C DFXP
- Exit MAGpie2
Adobe CS3 Flash Professional
Use the FLASH video file (*.flv) with the coded transcript file
(*.dfxp.xml) to generate a web page that plays an embedded video with
- Launch Adobe CS3 FLASH Professional
- File/New. . .
- Select Flash File (ActionScript 3.0) and click OK
- In the Properties inspector, adjust the stage size to accommodate
the FLV video file with play controls, text box for captions, and text
box for optional title. Add pixels to taste. (e.g. 800px X 340px)
- Set the stage color to a light grey (#EFEFEF)
- File/Import/Import Video. . .
- Browse to the video file (*.flv) and select it, then Click NEXT
- Select "Progressive download from a web server" and click NEXT
- Select the skin called SkinUnderAll.swf and then select a skin
color, click NEXT
- Click FINISH
- Drag the video into position (e.g. lower left corner of the
stage). You can use the keyboard’s arrow keys to move the video around
the stage in small increments.
- Select the T (text) tool and set the text properties to: Static
text. Select other properties to taste.
- Drag out a text box that will hold a title above the video.
- Type in a title and then click on the selection tool to allow
placement of the text box, utilizing the keyboard’s arrow keys.
- Select the T (text) tool and set the text properties to: Dynamic
Text, Multiline, style with something appropriate for captions and then
drag diagonally across the stage to create the box to hold the captions.
- Create an <Instance Name> (e.g. "words" without the quote
marks) for the captions text box.
- Click the selection tool and then click on the captions text box.
This will allow you to specify the box dimensions (e.g. W:380 by H:240).
Move the box to position with the arrow keys.
- File/Save (save the *.fla project file in the "flash" folder)
- Make sure you can see the components window (Window/Components)
- Double-click FLVPlaybackCaptioning
- With the FLVPlaybackCaptioning selected, click on the Parameters
- autoLayout: false
- CaptionTargetName: words (Instance Name created
for the captions box)
- flvPlayback name: auto
- ShowCaptions: true
- SimpleFormating: true
- source: (provide the name of the *.dfxp.xml
- Click on an open part of the stage and then select File/Save
- Test your work with Control/Test Movie
- File/Publish Settings. . .
- (optional) Change the HTML (.html) from the default to index.htm
- Click on the HTML tab and for the template select Flash
Only - Allow Full Screen
- Click OK
- Exit Adobe CS3 Flash Professional
(optional) You can pull the index.html file into a web authoring
application (e.g. Dreamweaver) and add additional elements (images,
links, annoying background music, the usual stuff).
FTP (file transfer protocol) Application
Use an application like Dreamweaver, WS_FTP,
FireFTP for FireFox, Fetch (on a
Mac), or the latest version of Internet Explorer (see
bonus material below) to move only the necessary files out to the web
First, test these files locally by double-clicking the index.html file
to launch the video in its own web page with the title and captions. The
Full Screen and Captions buttons
(part of the player controls) should work properly.
Only six files are required to make this work:
*.flv (file generated by Adobe FLASH CS3 video
*.dfxp.mxl (file generated by MAGpie2)
*.swf (file generated by Adobe FLASH CS3)
AC_Runactivecontent.js (file generated by Adobe
SkinUnderAll.swf (file generated by Adobe FLASH
index.html (file generated by Adobe FLASH CS3)
[NOTE: in each of the three cases
above, the asterisks represent a word generated by the software
Publish the finished project out to a web server:
- Create a new folder (outside the current folder) into which you
will archive the unnecessary files.
- Return to the original folder. It should contain only the six
necessary files listed above (and files that represent the optional
elements you might have added to the index.html web page).
- Use your preferred ftp application to move the entire folder out to
your web folder on the remote server. At CSU Long Beach, the web folder
is the htdocs folder.
- Test the results by launching a web browser and entering the newly
URL (web address), usually http://www.csulb.edu/~myaccount/flash/index.html
where "myacount" would be replaced by your actual account name.
Use the latest version of Internet Explorer as an FTP
- Open a folder that contains the files (or folders) you want to
upload to the server
- Launch Internet Explorer
- In the space where you usually enter a web address (starting with
http://www etc.), enter an ftp address (ftp://ftp.csulb.edu) and hit Enter.
- A plain page with the message FTP root at ftp.csulb.edu
- Follow the on-screen instructions to click Page,
and then click Open FTP Site in Windows Explorer.
- Enter your User Name and Password
and then click Log On
- A new window displaying your server files and folders will open. At
the top, click on Folders.
- The Folders list will open as the left hand pane of the FTP window.
Click on the folder designated for your web files. At CSULB this would
be the htdocs folder.
- Now you can drag files and folders from your desktop into the right
hand pane of the ftp window and they will be copied to your web server.
If you haven’t done so already, drag over the flash
folder created earlier. This should make your flash presentation with
captioning available to the world at:
http://www.csulb.edu/~myaccount/flash/index.html (where "myaccount"
would be replaced by your actual account name).