Closed Captions and Flash Video
This is from my talk, How to Shoot, Edit, and Publish Web Video, at MAX 2007. For more step-by-step tutorials purchase my book, Producing Flash CS3 Video.
Adding Closed Captions to Flash Video
- First, download the example file: captions-player.zip.
- Unzip this archive, open the folder captions-player and then open captions-player.fla in Flash Professional CS3.
- Open the Components panel.
- Open the Video category and drag the FLVCaptioning component to the left of the stage. It need not be on the visible stage to work.
- With the captioning component selected, give it a name in the Properties panel (Window > Properties). Name it myCaptioning.
- In the Timeline window, select the first frame in the Actions layer and open the Actions panel. You'll notice that I've set up most of the code for the player and source video. All that's needed is to add code for the captions. Create a new line after the last line of code and enter:
myCaptioning.source = "captions.xml"; myCaptioning.flvPlaybackName = "my_Video"; myCaptioning.captionButton = captionPlayback;
- Save the file and test the movie (Control > Test Movie).
- If you want to know more about timed text, I've included the XML source with comments below.
<?xml version="1.0" encoding="UTF-8"?> <tt xml:lang="en" xmlns="http://www.w3.org/2006/04/ttaf1" xmlns:tts="http://www.w3.org/2006/04/ttaf1#styling"> <head> <styling> <!-- The styling goes inside this tag, notice how the attributes are like CSS properties. Also notice how a one style can inherit style properties from another style by using an id for the style attribute --> <style id="base" tts:fontFamily="Arial" tts:fontSize="18"/> <style id="left" style="base" tts:textAlign="left"/> <style id="center" style="base" tts:textAlign="center"/> <style id="right" style="base" tts:textAlign="right"/> <style id="bold" tts:fontWeight="bold"/> <style id="italic" tts:fontStyle="italic"/> <style id="red" tts:color="#ff0000"/> <style id="orange" tts:color="#ff9900"/> <style id="yellow" tts:color="#ffee00"/> </styling> </head> <body> <div xml:lang="en"> <!-- An individual caption is a p tag. It contains attributes for begin time, duration and style. Notice how the style tag is used in the p tag to format the text. Span tag can be used to style a single word. --> <p begin="00:00:00.00" dur="1400ms" style="center"> The <span style="strong red">one thing</span> I would recommend to <p begin="00:00:01.50" dur="1400ms" style="center"> all filmmakers, short filmmakers, <p begin="00:00:03.00" dur="1900ms" style="center"> or people starting out as filmmakers, <p begin="00:00:05.00" dur="2000ms" style="center"> is to go to <span style="bold red">film festivals.</span> <p begin="00:00:07.40" dur="1900ms" style="center"> Film festivals are the only place <p begin="00:00:09.40" dur="1000ms" style="center"> to see the work of your peers, <p begin="00:00:10.50" dur="1900ms" style="center"> people just like you, <p begin="00:00:12.50" dur="1800ms" style="center"> who want to break into filmmaking, <p begin="00:00:14.30" dur="2000ms" style="center"> that have a story they want to tell, <p begin="00:00:16.50" dur="2400ms" style="center"> or want to <span style="italic yellow">learn how</span> to make films. <p begin="00:00:19.00" dur="2800ms" style="center"> Go there and see what other people are doing. <p begin="00:00:22.00" dur="1900ms" style="center"> You see the <span style="italic yellow">really great things</span> they did, <p begin="00:00:24.00" dur="1900ms" style="center"> and you see the <span style="italic yellow">really bad things</span> that they did, <p begin="00:00:26.10" dur="1200ms" style="center"> so you know what to avoid. <p begin="00:00:27.50" dur="2000ms" style="center"> Plus, you get to hear other people's war stories, <p begin="00:00:30.00" dur="1700ms" style="center"> things that they've already figured out. <p begin="00:00:31.80" dur="2500ms" style="center"> There are tens of thousands of people, <p begin="00:00:34.30" dur="2500ms" style="center"> probably hundreds of thousands of people, <p begin="00:00:37.00" dur="2000ms" style="center"> in this country that are out making <p begin="00:00:39.00" dur="1500ms" style="center"> short films every single day <p begin="00:00:41.60" dur="1500ms" style="center"> trying to tell stories <span style="bold red">visually.</span> <p begin="00:00:44.00" dur="1900ms" style="center"> Be a <span style="italic yellow">part of that big community,</span> <p begin="00:00:46.00" dur="2000ms" style="center"> join organizations, there's always <p begin="00:00:48.20" dur="1800ms" style="center"> filmmaking organizations in your <p begin="00:00:50.30" dur="2000ms" style="center"> area through colleges, through arts <p begin="00:00:52.50" dur="2000ms" style="center"> organizations, places like that. </div> </body> </tt>