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