Captioning your multimedia presentations with Hi-Caption® and   Flash™ 2004 and Flash 8

The Internet has become an increasingly easy way to publish and find information.  Increasingly Web developers are providing this information in multimedia format through technologies that provide a rich multi-sensory presentation. However, until recently this information was not accessible to all Internet users. Some users rely on third-party solutions to translate information to them. Today there are accessibility standards and guidelines that Web developers can follow to ensure that users of assistive technologies can access their Internet presentations. Captions provide the ability for users who do not have the ability to access the audio portion of a multimedia presentation, to still have access to it. This tutorial will introduce the reader to closed captions and then discuss the creation and use of closed captions with Hi-Caption and  Macromedia Flash and the Hi-Caption viewer.  To follow this tutorial, you will need HiSoftware Hi-Caption and Macromedia Flash.

If you do not have a copy of Hi-Caption from the HiSoftware Web Site

If using and creating FLASH XML please note use Single quotes in your sami ' versus the " in Hi-Caption DS2!

This tutorial will be the same steps whether using DS2 or SE

The tutorial uses demo files that can be downloaded from the HiSoftware web site: http://www.hisoftware.com/hmccflash2004/mmfcaptut.zip 12.9 mb, an unzip program like StuffIt... or WinZip... is required to extract the tutorial files.

If you do not have a copy of Macromedia Flash you can get an evaluation copy from the Macromedia Web Site: http://www.macromedia.com/

Contents

Why Closed Captions

Hi-Caption®

Getting Started

Creating the Caption for the Flash File

Adding the Hi-Caption viewer to Macromedia Flash

Adding Captioning to the Flash File

Using Preloaded Captions

Using Captions directly from the Hi-Caption XML file

Tips for using the Hi-Caption viewer with linked FLV files

Tips for using the Hi-Caption viewer with a Slider

Tips for using multiple languages

Some Caption Tips for the Flash Designer

Other Resources

About HiSoftware

Why Closed Captions

Closed captions are captioned text that can be turned on or off by the user, allowing flexible and accessible delivery of your multimedia project. Closed Captions solve real problems while providing design flexibility:

• Ability to translate caption text to different languages (Allowing Wider Distribution.)

• Compliance with a wide range of accessibility guidelines and standards.

• Ability to have access to full movie when technical capabilities do not include sound.

Hi-Caption®

HiSoftware Hi-Caption®  is a unique solution that allows designers and developers to deliver rich multimedia content that meets their accessibility and distribution requirements. The Hi-Caption solution consists of two main parts, the Hi-Caption Captioning System and the Hi-Caption viewer component for Flash:

Hi-Caption is a Closed Caption Generation system that allows users to easily create caption text for their multimedia. The system comes complete with:

• Transcript Import Wizard

• Transcript Creation Capabilities

• Project Support allowing for collaboration

• Direct Viewing of your flash movie allowing for a complete watch, pause and caption solution.

The Hi-Caption viewer Component - The Hi-Caption viewer Component provides a 100% customizable captioning interface. Remember, one of the most important gains with closed captions is that the developer can easily define the characteristics of the captions to better match their presentation. The Hi-Caption viewer allows for customization of all design elements and allows you to use the default captioning area or to define your own. Additional information about the Hi-Caption viewer component will be provided later in this tutorial.

Getting Started

For the tutorial we will use the sample media files that can be downloaded from the HiSoftware web site (see the link provided at the top of this tutorial).

In this tutorial you will:

1. Create a simple Flash movie (or use the movie provided)

2. Create a caption file using Hi-Caption

3. Modify the Flash movie, using the Hi-Caption viewer Component, to add captions

4. Be introduced to multi-language captioning

5. Be introduced to the theory of buffering initial captions

6. Be introduced to some captioning guidelines

Creating the Caption for the Flash File

The Caption file is an XML file that will be usable by the Flash Movie/Player. The File is used to display captions which are synchronized with the movie when it is playing in the Flash Player. The Hi-Caption SE Interface allows the user to interact with the movie while creating the captions. Before you begin there are several items to consider:

• Using individual captions greater than three lines may make your captions less usable

• The amount of words that can be displayed in the caption area depend on the size that you will define in Flash as your captioning area

• You should always spell check your captions

To create the caption file follow the steps below. 

Starting Hi-Caption

1. From the Windows Start menu, select Start, then Programs, then HiSoftware Hi-Caption, then Hi-Caption .  Hi-Captionthen opens on your desktop.

2. From the File menu of Hi-Caption, select Open, then Select Media File.  In the Open dialog, select a file named dav02-start.swf (or whatever you named your file if you are not following the tutorial exactly.)  This is the movie file you created in the previous section.  Hi-Caption's interface will then look like the picture below.
   
   
   
   
    

3. The left portion of Hi-Caption displays a media control, depending on which type of media file was opened, while the right side displays a grid where captioning text will be added. (If you had opened a Windows Media file, or a RealNetworks file, then one of those controls would be present in the left pane.)

4. From the Settings menu, select Available Classes and make sure that ENUSCC is in the list.  If it is not in the list, click on the Add button and choose enuscc.hmccss from the SAMIstyles subfolder of the Hi-Caption installation directory. 

5. Play the media file using the Play item found under the Player menu at the top of Hi-Caption, or the media control buttons below.  After 5-10 seconds or so, pause the file using the Stop item found under the Player menu at the top of Hi-Caption, or the media control buttons below.

6. Next, after you have stopped the media file, click on the Add SYNC button.  This will add the time in which you first started playing the media file. 
   
   Note: This value will be measured in frames (if you are using a Windows Media or Real Networks file, the time will be in milliseconds.)  Hi-Caption SE will add the Time Start to the first column in the grid.  
   
   Next, select your class from the drop down menu in the Class column. 
   
   Next, you can optionally select the speaker from the drop down menu in the cell in the first row of the grid under the Speaker column. 
   
   Next, you add the text spoken by the media file into the fourth cell in the first row, found under the Captions column.  Add SYNC works by adding the time in which the Flash file was last played.  Because you do not know what text will be spoken prior to your hearing it, the feature works by letting you listen to the text, making a mental note of it, and then when the button is pressed, allows you to enter the starting time for that span of text and then type it in. 
   
   If you are lucky enough to have been provided with a transcript of the text in text or Rich Text Format (RTF), then you can use the Import Wizard found under the Tools menu.  The Import Wizard will load all the text into the grid, then the Step Current button is used to set the frame timings, while the Flash file is played in Hi-Caption.

7. Again, play the file again for 5 -10 seconds or so and then pause the file.  Click on the Add SYNC button.  Next, in the Captions field, we add the captioning for that portion of the file.

8. Repeat until the whole media file has been captioned.  Hi-Caption will have data populated in the fields, like the picture below.

9. When done, select Save from the File menu.  This saves the SAMI file.

10. To review and adjust your captioning times, rewind the Flash file to the beginning and play it. Use the Step Current button to add the current time to the grid and to then skip to the next time sequence. 

11. When you have completed your captioning, and are happy with the timings, then select Save from the File menu.  Next, select Save as XML from the File menu.  The Hi-Caption viewer for Macromedia Flash will use the XML file to display captioning in Flash.  By default, the XML that is generated by Hi-Caption will be in ANSI format.  This format is approximately 1/2 the size of Unicode format.  If you are using any special characters from other languages in your captioning file, then you need to save your XML in Unicode format.  To change the format, check or uncheck Generate Unicode XML from the Settings menu in Hi-Caption.

12. From the File menu, select Save Transcript As and save a text transcript of what was captioned.  Print this file out for use later.

Adding the Hi-Caption viewer to Macromedia Flash

We now have a flash movie that has a corresponding file with the captions and time points that will allow for closed captioning to be seen when someone watches the Flash movie. In order to use this captioning file in Flash we must install the Hi-Caption viewer for use with Macromedia Flash (if you have not done so already.) If you have not installed the component, follow the simple installation instructions that follow.

Installation of the Hi-Caption viewer

1. Locate the Hi-CaptionViewer.mxp file located in the extension folder of the HiSoftware Hi-Caption SE for use with Macromedia Flash installation directory.  On most user's systems, this location will be C:\Program Files\HISC\Hi-Caption SE\extension, but this can vary if a different installation path was selected during installation.

2. After locating the Hi-CaptionViewer.mxp file, double-click on it to use the Macromedia Extension Manager to load the Hi-Caption viewer into Flash.
   
   
   
    

Adding Captioning to the Flash File

We are ready to add captioning to the Flash movie at this point. When adding the component we can control; location, size, and many other properties. Follow the below steps to enable the flash movie to use the caption file you created in the previous section of this tutorial:

Setting Up the captioning display in the Component

1. With your Flash file opened, locate the Components panel in Flash and expand the HiSoftware tree item in the Component tree. Drag the Hi-Caption viewer from the components view to your Stage.  In our example here, we dragged an instance of the Hi-Caption viewer to just below the movie file.
   
   
   
    

2. Click on the instance of the Hi-Caption viewer in your stage to display the component properties.  You will now edit the component parameters.
   
   
   
   
   
    

3. The first component property we will modify is the Show Captions property, click to change this property to TRUE because we wish to display the captioning.
   
   Note: This will help you to set up the design of the captioning area, however, for the final creation of the movie you may want to set this to false. If you set this to false, then when watching the movie users can choose to enable the captions if they wish to see them (This is one of the advantages of closed captioning.) If it is set to false the captioning area does not view and a user can simply click on the "CC" button to display the captions. Remember the "CC" button is a toggle button and by design a click can enable or disable the captions.

4. For the Show Caption Speaker property, click to change this property to TRUE, because we want to display the speakers from our captioning text.
   
   Remember there are some captions that do not require a speaker name, because of this you may not want to view the speaker name. This modifies how the captions will display.

5. For the Use Default Caption Button, make sure the value is set to TRUE for this tutorial.
   
   Note: Designers may want to use a custom closed caption button for their Flash movie. If this is the case, set this property to false.  Remember to define the symbol that you will be using for your own caption button.

6. For the Caption Control Button field, leave it empty, as we are using the default caption button and not a custom one.  If you were using a custom button, you would enter a reference to the instance of that symbol in this field and would set the Default Caption Button property to FALSE.

7. For CC On Button Image and CC Off Button Image, leave these fields empty also.  These fields are used if you wish to display a symbol for the closed captioning button, while the captioning is playing or not playing. To use these, enter the symbol linkage identifier name of the symbol in this field.  These properties are associated with the default caption button only.

8. Caption Button X Position and Caption Button Y Position are used to determine where the captioning button will appear.  The location of (0,0) is based on the top left corner off where the viewer was placed on the Flash stage as shown in the crosshairs symbol.  Positive values for X and Y move the button to the right and down respectively, while negative values move the button position to the left and up respectively.  In our example here, we have leaving the default position as (0,0).  In the picture below, the Hi-Caption viewer control is displayed below the movie file, with the control aligned to the lower left of the movie.

   

9. Set the Caption Button Foreground Background Color to #000000 and set the Caption Button Background Color to #FFFFFF, which will create a white button with black text.  You can use other colors if you choose instead of the defaults mentioned here.
   
   Click in the value column top open the color chooser control where colors can be selected.  Leave the Caption Button Background Alpha set to 0. This is a transparency value where 0 is fully transparent, and 100 is not transparent.
   
   

10. For Use Default Captions Text Box, set this to TRUE.  If you set it to false, you will need to provide your own dynamic text field in the following property named Captions Text Box.

11. There are various fields to set the appearance of the captioning text. These include Captions Text Box, Captions Font Name, Captions Font Size, Captions Font Color, and Captions Background Color.  For this example, we will leave these as default.  Alpha Captions Background and Background Captions Alpha relate to allowing transparency of the background of the captioning text.  Leave these as default in this example.

12. If you wish to have a border around your default captioning box, set Border Caption Text to TRUE.

13. The height and width as measured in pixels of the captioning area are controlled by the Caption Area Height and Caption Area Width fields.  In this example, set them to 60 and 320 respectively.

14. Where the captioning text appears in relation to the top left of the Hi-Caption viewer is controlled by the Caption Area X Position and the Caption Area Y Position.   Positive values for X and Y move the captioning text to the right and down respectively, while negative values move the captioning text position to the left and up respectively.  In our example here, we have leaving the default position as (0,22).

Setting Up the Captions in the Component

We have added the Hi-Caption viewer component to the Flash File and have set up the display properties. Now we are going to set up the component to use the captions you have created. The Hi-Caption viewer component can either load the captions directly from the Hi-Caption XML file when it plays or it can use preloaded captions stored directly in the component instance. Both methods are described below.

Using Preloaded Captions

Follow the steps below to preload the captions into the component instance:

1. Select Window | Other Panels | Hi-Caption Captions Loader from the menu. This will open the Hi-Caption Captions Loader panel.
   
   

2. In the edit box provided, enter the full file path and name of the XML file that you saved when creating the captioning.  The default name would have been dav02.xml.  
   
   

3. For the Language Class Identifier, enter ENUSCC as the value.  This is the value of the class that was used in the original captioning file in Hi-Caption, except without the . prior to the name.

4. Select the Load All (for the "Use Preloaded Captions" parameter) option from the Captions Preload Option drop-down.
   
   

5. Make sure that you have the Hi-Caption viewer component instance selected on the stage and press the "Load the Captions from the XML" button.

6. When this is completed you will see the following message 
   
   

7. The following parameters for the selected Hi-Caption viewer component instance will be populated automatically:

   • Use Preloaded Captions - will be set to true

   • Buffer Initial Captions  - will be set to true

   • Buffered Start Frames for Language 1 - will be populated with the start frame numbers from the caption file

   • Buffered Speakers for Language 1 - will be populated with the speakers from the caption file

   • Buffered Captions for Language 1 - will be populated with the captions from the caption file

   • Language Class Identifiers - will have the value ENUSCC  

8. The captions are now loaded directly in the component instance and you do not need to distribute the caption XML file with your Flash file.

9. When done with the properties, save your project in Flash, then from the Control menu in Flash, select Test Movie.  Test your movie to make sure that the captioning appears and that everything works as designed.  When distributing your Flash file, if you have chosen not to use the preloaded captioning option, include the XML captioning file with it.

Using Captions directly from the Hi-Caption XML file

 Follow the steps below to enable the flash movie to use the caption file you created in the previous section of this tutorial:

1. The first component property we will modify is the Hi-Caption XML File.  In this field, enter the name of your XML file that you saved when creating the captioning.  The default name would have been dav02.xml.  
   
   Note: If you do not enter a value for this field, then the Hi-Caption viewer will look for an XML file with the same name as your Flash file, but with the XML extension.  When distributing or testing your final Flash file, the XML captioning file needs to be in the same folder as your Flash file. 

2. Since the captioning is stored in the accompanying captioning XML file for the Flash file, the XML file will need to be downloaded by the end user's system in order to be loaded.  Depending on the size of the captioning, this may cause a delay in display.  You have the option of buffering the initial captions to compensate for this delay. In our example here, we will set the Buffer Initial Captions property to TRUE.

3. If you have set Buffer Initial Captions to true, then you can buffer up to 4 starting frames in your captioning presentation.  The next 8 steps are for preloading the first 4 captions from your captioning file automatically.  This is the recommended way to load captions for buffering, however, you can also enter the information manually.  To enter the information manually proceed to Step 12.

4. Select Window | Other Panels | Hi-Caption Captions Loader from the menu. This will open the Hi-Caption Captions Loader panel.
   
   

5. In the edit box provided, enter the full file path and name of the XML file that you saved when creating the captioning.  The default name would have been dav02.xml.  
   
   

6. For the Language Class Identifier, enter ENUSCC as the value.  This is the value of the class that was used in the original captioning file in Hi-Caption, except without the . prior to the name.

7. Select the Load First 4 (for the "Buffer Initial Captions" parameter) option from the Captions Preload Option drop-down.
   
   

8. Make sure that you have the Hi-Caption viewer component instance selected on the stage and press the "Load the Captions from the XML" button.

9. When this is completed you will see the following message 
   
   

10. The following parameters for the selected Hi-Caption viewer component instance will be populated automatically:

    • Buffer Initial Captions  - will be set to true

    • Buffered Start Frames for Language 1 - will be populated with the start frame numbers from the first four captions in the caption file

    • Buffered Speakers for Language 1 - will be populated with the speakers from the first four captions in the caption file

    • Buffered Captions for Language 1 - will be populated with the first four captions from the caption file

    • Language Class Identifiers - will have the value ENUSCC  

    • Use Preloaded Captions - will be set to false

11. The first four captions have now been loaded directly in the component instance and it is setup to use buffering.  Proceed to Step 17.

12. The next 4 steps are for entering the first 4 buffered captions manually.  

13. If Buffer Initial Captions is set to true, then the captioning which will be buffered will be associated to frames in the Flash presentation.  If you imported your movie file at 12 frames/second for example, then for every second that goes by, the Flash file moves 12 frames.  Click on the Buffered Start Frame for Language field and enter up to four starting frames to display captions from the buffer.  In our example here, we are entering the values of 1, 89, 111 and 136, based on our 4 starting frames times as displayed in Hi-Caption.

14. If you have set Buffer Initial Captions to true, then click in the Buffered Speakers for Language and enter up to four speakers for the captioning.  In our example here, we are entering Narrators as the speaker in all 4 instances.

15. If you have set Buffer Initial Captions to true, then click in the Buffered Captions for Language and enter up to four blocks of text for the captioning.

16. For the Language Class Identifier, enter ENUSCC as the value.  This is the value of the class that was used in the original captioning file in Hi-Caption, except without the . prior to the name.  Adding a valid class name to this field is crucial to having the captioning appear in Flash.
    
    
    
     

17. When done with the properties, save your project in Flash, then from the Control menu in Flash, select Test Movie.  Test your movie to make sure that the captioning appears and that everything works as designed.  When distributing your Flash file, if you have chosen not to use the preloaded captioning option, include the XML captioning file with it.

Tips for using the Hi-Caption viewer with linked FLV files (The MediaDisplay and MediaPlayback components are only available with Flash MX 2004 Professional)

The Hi-Caption viewer Component for Macromedia Flash allows you to show captions for a flash video (FLV) that is being displayed in either a MediaDisplay or MediaPlayback component. This is done by "hooking" the Media component to the Hi-Caption viewer. Follow the steps below to use this functionality:

1. With a flash file open that has either a MediaDisplay or MediaPlayback that loads an FLV file that has been captioned using Hi-Caption SE, add and setup a Hi-Caption Viewer component to the file as shown in previous sections.

2. In the ActionScript for the flash file, add the following line of code:

   InstanceName.HookMediaComponent(myMedia);

   where: InstanceName is the name of the Hi-Caption viewer Component assigned by you in the instance field and myMedia is the name of media component.

3. The Hi-Caption Viewer will hook the media component and do the following: 
   - Remove all existing CuePoints from the media component 
   - Add CuePoints for each captioned frame using the addCuePoint method with the Frame number as the cuePoint name and the following calculation as the Timing: Math.ceil(FrameNumber / aMedia.fps )
   - Set a cuePoint event listener that will set the caption text based on the cuePoint name

4. To remove the reference to the media component, simply use the following line of code:

   InstanceName.UnHookMediaComponent();

   where: Instance Name is the name of the Hi-Caption viewer Component assigned by you in the instance field.
    

Tips for using the Hi-Caption viewer with a Slider

One of the more common things that a flash interface allows users to do is to change the position of the movie being played using a slider control (or something simliar). The Hi-Caption viewer component will display the proper caption if the user sets the position of the movie to a captioning point, however, it is more likely that the position of the movie will be between 2 captioning points. To make the Hi-Caption viewer Component display the caption for the closest captioning point follow the steps below:

1. With a flash file open that has a Hi-Caption Viewer component and a slider control.

2. In the ActionScript for the slider control that executes once the new frame of the movie is known, add the following line of code:

   InstanceName.setCaptionClosestToFrame(myNewFrame, bShowFirstEarly);

   where: InstanceName is the name of the Hi-Caption viewer Component assigned by you in the instance field, myNewFrame is the frame number that was moved to and bShowFirstEarly is a Boolean value that controls what happens if the frame number is before the first caption.
   The value of bShowFirstEarly should be true if you want the first caption to be shown when the frame is before the first captioned frame,
   if you exclude this parameter or pass a value of false, then the caption text will be set to a blank string when the frame is before the first captioned frame.

Tips for using multiple languages

The Hi-Caption viewer Component for Macromedia Flash allows you to switch languages in code (on the fly) during the caption display. This is done by using ActionScript to access the SelectedLangStyleName property of the Hi-Caption viewer Component.  Note the value that you are setting the SelectedLangStyleName property value to must be in the language ID List. Additionally the component will, by default,  define the property to be the first item in the list if you have not set this property.

InstanceName.setSelectedLangStyleName( val );

where: Instance Name is the name of the Hi-Caption viewer Component assigned by you in the instance field and val is equal to a language id code from the Language ID list.

• Remember that Hi-Caption SE allows for the editing and creation of  multiple languages for the same captioning file. There are some important things to remember:

• If you are using languages other than English you should save your XML in Unicode format.  To change the format, check or uncheck Generate Unicode XML from the Settings menu in Hi-Caption.

• Because the XML File size can impact the performance of the caption display because it has to load the whole file you should use a single XML Captioning file for each language (Though this is not required.) If you do this simply call the InstanceName.setHiCaptionXMLFile( val ); function to use ActionScript to change the caption file.

• Do not use online translation tools to convert to another language, the translations are rarely 100% accurate to the meaning

• NOTE:  The Use Preloaded Captions option only supports a single language (the first language in the list).  If you are using this option then you will have to add some additional ActionScript to turn the option off and load the Hi-Caption XML File. You will also need to include the Captioning XML file when distributing your Flash. The ActionScript to perform this would look something like this:

  InstanceName.usePreLoadedCaptions = false;

  where: Instance Name is the name of the Hi-Caption viewer Component assigned by you in the instance field.

Some Caption Tips for the Flash Designer

The following are general Closed Caption guidelines that should be followed, check the other resources section of this tutorial for more information:

• Captions that are two or more lines should be left aligned

• In general, you should not exceed three lines of captions

• Captions should be at the bottom of the Flash movie

• Follow standard capitalization and punctuation rules

• Italics should be used for Emphasized words and several other instances. Please review a captioning guidelines document for more information on the use of italics. Remember the Hi-Caption program will allow you to enter HTML Tags and will escape them out as necessary when writing the XML Caption File.
  
  For information on what HTML Tags are available in the Flash player visit the Macromedia Web Site. http://www.macromedia.com/support/flash/ts/documents/htmltext.htm

• Emotion and Tone should be conveyed with punctuation marks (i.e. use multiple explanation marks for strong emotion. )

• Sound effects or off screen effects should be noted, e.g. [jet engine roar]

• Keep the captions synchronized to the video

• It is a good practice to not spell out numbers (use 50 not Fifty)

• Use colors smartly with good contrast to make the captions easy to read
  
  

• Any captioning credits should go at the end of the movie

Other Resources

More information on Macromedia Flash: http://www.macromedia.com/software/flash/

Other HiSoftware products for Accessibility and Content Quality: http://www.hisoftware.com/products/products.htm

ABOUT HISOFTWARE

HiSoftware Company, the leader in enterprise content quality management solutions, provides innovative products that empower quality assurance teams, content developers, Web site architects, and company executives to work collaboratively on their efforts to create and manage corporate Web standards for Accessibility, Privacy, Searchability, Usability and custom guidelines and policies. HiSoftware’s integrated, full lifecycle solutions dramatically reduce the time required to test, manage and deploy e-business Web sites.

HiSoftware works closely with industry leaders and visionaries to provide solutions for today's information accessibility, content quality, search and retrieval needs. HiSoftware’s customers represent Fortune 500 companies, and many of the largest e-commerce, government, and educational sites in North America and around the world.

Founded in 1998, HiSoftware Company maintains North American corporate headquarters in Concord, New Hampshire. Further information about HiSoftware can be found online at www.hisoftware.com

(c) 2003-2006 HiSoftware Incorporated