Captioning your multimedia presentations with Hi-Caption® SE for use with Macromedia® Flash™ MX

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 SE for use with Macromedia Flash and the Hi-Caption viewer.  To follow this tutorial, you will need HiSoftware Hi-Caption SE for use with Macromedia Flash, and Macromedia Flash MX.

If you do not have a copy of Hi-Caption SE for use with Macromedia Flash you can get an evaluation copy from the HiSoftware Web Site: http://www.hisoftware.com/hmccflash/index.html.

The tutorial uses demo files that can be downloaded from the HiSoftware web site: http://www.hisoftware.com/hmccflash/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 MX you can get an evaluation copy from the Macromedia Web Site: http://www.macromedia.com/

Contents

Why Closed Captions

Hi-Caption® SE for use with Macromedia® Flash™ MX

Getting Started

Creating the Caption for the Flash File

Adding the Hi-Caption Viewer to Macromedia Flash

Adding Captioning to the Flash File

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® SE for use with Macromedia® Flash™ MX

HiSoftware Hi-Caption® SE for use with Macromedia® Flash™ MX  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 SE Captioning System and the Hi-Caption Viewer component for Flash:

Hi-Caption SE 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 SE

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 SE

1. From the Windows Start menu, select Start, then Programs, then HiSoftware Hi-Caption, then Hi-Caption SE.  Hi-Caption SE then 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-Caption Viewer.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-Caption Viewer.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:

1. With your Flash file opened, locate the Components panel in Flash and Hi-Caption from the Component drop-down menu. 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 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 dva02.xml. 
   
   Note: If you do 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.

4. For 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.

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

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

7. If you have set Buffer Initial Captions to true, then you can buffer up to 4 starting frames in your captioning presentation.  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.

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

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

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

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

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

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

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

    

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

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

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

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

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

20. 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).

21. 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, include the XML captioning file with it.

Tips for using multiple languages

The Hi-Caption Viewer Component for Macromedia Flash MX 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.setXMLFileName( val ); function to use ActionScript to change the caption file.