ThisIsLeon.co.uk

*Updated*

If you need to add Closed Captions to Flash Video, this app is the easiest way to do it. All you need to do is link to the swf of embed it in your movie, change a few parameters and its all configured. The Captions integrate beautifully with the standard Flash Video interface so it looks neat and professional.

This project was created while trying to create a custom video playback display. The brief was to create a re-usable video window to play external videos and display captions. There is also full control over the display itself in terms, of auto play and window size. The code is fully commented, and allows you to cater for users with accessibility issues. The main feature is the Closed Captions tool. This has been custom built and included so that users can get a textual description of what is happening on screen. The video player itself is self contained within its own movie clip, so you can just drop it into your Flash files. This was built for Flash MX 2004/8. Sorry for the lack of CS3 support, but the platform I was working on does not have support for this yet.

Creating the button.

On to the interesting part, its possible to create a button and style it so that it appears to be part of the standard Flash Video Display UI. The code is below, download the Flash file, and it will all make sense. Everything is commented. If you decide to add this to your own Flash file, be sure to add an instance name of ‘videopane’ to the Movie Clip.

Code for styling the UI components:

_root.videopane.showcapbut.setStyle("toggle", false)

_root.videopane.showcapbut.setStyle("color", 0x6F7777);

_root.videopane.showcapbut.setStyle("fontFamily", "Verdana");

_root.videopane.showcapbut.setStyle("fontSize", 13);

The above code styles the ‘CC’ button, which has been positioned so that it looks like part of the UI. The properties are a bit hit and miss. This page shows some other variables.

The code shows how to create a toggle effect so that the captions can be turned off and on, and also the default position of the captions (i.e. turn them on at start up).

Creating the Closed Captions

To create the captions I set up a text box, that could b turned on and off (change the Y value accordingly).

A listener is used to display the captions which are created from two array’s. One for the time in seconds, and the other for the array text. You can add as many captions as you like, just change the array.

A caption is also displayed showing ‘Video Finished’ when the video completes. This is achived by creating a listener that listens for the completion of the video.

Other Features

Some video’s may require a disclaimer. For legal reasons this must always be on the page. For this reason a text box is created called ‘disclaimer’ which allows you to add a disclaimer. However if the captions are set on by default this is covered up. You can change this by moving the disclaimer text, or adding your disclaimer to the captions. Its up to you.

A line is added to stop the video being displayed in full screen via the tab in the top corner.

View a demo here.

Source Files Below:

Custom Flash With Captions