Skip to Local Navigation
Skip to Content
California State University, Long Beach
Office of the Provost, Division of Academic Affairs Home
Print this pageAdd this page to your favoritesSelect a font sizeSelect a small fontSelect a medium fontSelect a large font
 
 

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 environment.

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 staff.

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.

Tools

Video editor

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.

Text Editor

WordPad (or text editor of your choice). It is convenient to use the XML editor built into Dreamweaver.

MAGpie2

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 application available.

FTP (File Transfer Protocol) application

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.


Process


Video Editor

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:

  1. Launch the Adobe CS3 FLASH Video Encoder
  2. File/Add. . .
  3. Browse to the AVI file you want to convert to FLV
  4. With the file selected in the encoder dialog box, click on the SETTINGS button.
  5. Select the ENCODER PROFILES tab
  6. Select Flash 8, low quality (150 kbps)
  7. VIDEO tab: check Deinterlace
  8. Select the CROP AND RESIZE tab
  9. Check resize video. Select dimensions. [See Adobe Best Practices ]
  10. Edit/preferences . . ./Place output file in . . ./(designate the newly created "flash" folder)
  11. Click OK and then Click START QUEUE

Text Editor

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.

MAGpie2

Generate the required *.dfxp.xml (Distribution Format Exchange Profile) file by pulling the AVI and TXT files into MAGpie2:

  1. Launch MAGpie2
  2. File/New Project. . .
  3. Base Media/browse to the AVI file and select it (not the FLV file)
  4. Media Toolkit: Apple QuickTime Player
  5. Text color: Yellow (this is just a temporary selection)
  6. Video width and height (set this to match your video, usually 720 X 480)
  7. Caption width and height can be anything for now (e.g. 720 X 80)
  8. Click OK
  9. In "Create New Project Track" dialog box, click OK
  10. Captions/Insert captions from file. . .
  11. Browse to the *.txt file that has a blank line after every line of text.
  12. 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.
  13. (Optional) Identify the speaker by typing her name or title into the appropriate cell in the Speaker column.
  14. 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.
  15. 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 Playback/Show Player]
  16. File/Save (to save the project)
  17. Export/Adobe Flash - W3C DFXP
  18. 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 closed captioning.

  1. Launch Adobe CS3 FLASH Professional
  2. File/New. . .
  3. Select Flash File (ActionScript 3.0) and click OK
  4. 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)
  5. Set the stage color to a light grey (#EFEFEF)
  6. File/Import/Import Video. . .
  7. Browse to the video file (*.flv) and select it, then Click NEXT
  8. Select "Progressive download from a web server" and click NEXT
  9. Select the skin called SkinUnderAll.swf and then select a skin color, click NEXT
  10. Click FINISH
  11. 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.
  12. Select the T (text) tool and set the text properties to: Static text. Select other properties to taste.
  13. Drag out a text box that will hold a title above the video.
  14. Type in a title and then click on the selection tool to allow placement of the text box, utilizing the keyboard’s arrow keys.
  15. 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.
  16. Create an <Instance Name> (e.g. "words" without the quote marks) for the captions text box.
  17. 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.
  18. File/Save (save the *.fla project file in the "flash" folder)
  19. Make sure you can see the components window (Window/Components)
  20. Double-click FLVPlaybackCaptioning
  21. With the FLVPlaybackCaptioning selected, click on the Parameters Tab:
    1. autoLayout: false
    2. CaptionTargetName: words (Instance Name created for the captions box)
    3. flvPlayback name: auto
    4. ShowCaptions: true
    5. SimpleFormating: true
    6. source: (provide the name of the *.dfxp.xml file)
  22. Click on an open part of the stage and then select File/Save
  23. Test your work with Control/Test Movie
  24. File/Publish Settings. . .
  25. (optional) Change the HTML (.html) from the default to index.htm
  26. Click on the HTML tab and for the template select Flash Only - Allow Full Screen
  27. Click OK
  28. File/Publish
  29. Exit Adobe CS3 Flash Professional

Dreamweaver (optional)

(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 server.
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:

  1. *.flv (file generated by Adobe FLASH CS3 video encoder)
  2. *.dfxp.mxl (file generated by MAGpie2)
  3. *.swf (file generated by Adobe FLASH CS3)
  4. AC_Runactivecontent.js (file generated by Adobe FLASH CS3)
  5. SkinUnderAll.swf (file generated by Adobe FLASH CS3)
  6. 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 applications.]

Publish the finished project out to a web server:

  1. Create a new folder (outside the current folder) into which you will archive the unnecessary files.
  2. 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).
  3. 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.
  4. Test the results by launching a web browser and entering the newly created
    URL (web address), usually http://www.csulb.edu/~myaccount/flash/index.html where "myacount" would be replaced by your actual account name.

Bonus Material

Use the latest version of Internet Explorer as an FTP application:

  1. Open a folder that contains the files (or folders) you want to upload to the server
  2. Launch Internet Explorer
  3. 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.
  4. A plain page with the message FTP root at ftp.csulb.edu will appear.
  5. Follow the on-screen instructions to click Page, and then click Open FTP Site in Windows Explorer.
  6. Enter your User Name and Password and then click Log On
  7. A new window displaying your server files and folders will open. At the top, click on Folders.
  8. 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.
  9. 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).

Back to top

​