Here are the notes to myself about how I made my captioned video (embedded in a web page) while on sabbatical in the Spring 2008 semester. Please don't laugh too hard!
A big thanks to my husband Dena, Somphone Chen, Brad Hinson, Jim Chardi, Anthony Ginger and Karen Korstad for all of their advice, assistance and patience.
The hardware I used was: a Dell computer (Vista Home Edition), a Creative WebCam called 'Live! Ultra" and a headset microphone
The software I used was: Notepad to create the script, CreativeWebCam Center to record the video, Windows Movie Maker to edit the video and Adobe Master Collection CS3 (Dreamweaver to create the HTML and XML documents, Flash Video Encoder for video conversion and Flash Professional to link the video and captions).
I also used a desk lamp for lighting (along with overhead lighting and the blinds open in the room) and random objects to prop the webcam up to face level.
Install Adobe CS3
Install the Creative WebCam Center
Connect the webcam
Connect the microphone
Open the Creative WebCam Center
Make a short test video to check that webcam and microphone are working properly. If microphone is plugged into the front of computer go to tools>settings. Click on the Capture Tab, then the Select 'Video Capture'. Under 'AVI Options' be sure that the checkbox next to 'Include Audio' is checked. Under 'Audio Options' be sure that the pull down menu 'Audio device' shows FrontMic.
Check microphone level and distance from mouth to create optimal conditions. I stuffed my microphone up my shirt and wrapped it around my bra strap.
You may need to close doors, close windows, etc. to minimize distractions (e.g. cats strolling in while you're recording, neighbors dogs barking, phone ringing, etc.).
Think about what to say.
Write a script in Notepad.
Be sure that sentences are generally short and friendly/upbeat - but informative.
Practice the script and edit it until comfortable.
Be sure that it's not longer than 5 minutes (2-3 minutes are ideal).
Once happy with script, format the text so that there are vertical spaces between each sentence (or logical breaks in the sentence).
Each line should be one sentence (or logically broken sentence) no longer than 100 characters (this makes it easier to read on-screen while you're recording if you don't have it memorized as well as making the XML caption document easier to produce later).
See link to my Notepad script: Janeen's Video Script
Work on lighting in room and webcam height/angle/zoom so that your face and shoulders can be seen well and the top of your head is not cut off.
Consider the color and coverage (short sleeves, long sleeves, etc.) of clothing worn.
Minimize other stuff that will be seen in the video (chair, desk, stuff on walls, etc.)
Once you have sufficiently practiced and feel as though you are ready to record you video, do one last check of your shot (placement of webcam, lighting, background, your teeth, up your nose, etc.)
Be sure to place your webcam in a location so that you can still see the controls on the computer screen.
In WebCam Center, click on the button at the bottom (center) of the screen that looks like a white circle with a red video camera in the center to begin recording your video.
Smile like you want to look when the video begins and hold that smile for at least 6-8 seconds. This gives time for the computer to start recording and for you to get some lead material.
Begin talking.
If you don't have your script memorized, you can have it open or printed off and put somewhere close to the webcam so that you don't totally look like you're reading from a teleprompter.
When you are done talking, hold your smile for about 6 seconds, then click again on the white-circle-with-red-video-camera-in-it button to stop recording.
Watch your video. If you're happy with it, keep it.
If you're not happy with it, record it until you are happy. Alternately, you could re-record just the parts that you didn't like then edit the parts later.
Once you have the video that you want, go back to your script and play your video.
Edit the script so that it matches exactly with what you actually said. I find that I add or change words here or there while recording. This amended script will be used later to create the captions (which should reflect what you actually say in the video and not what you planned to say in the video).
The file you create will be an AVI. WebCam Center automatically saves it with a name that relates to the date and time you recorded the video. Know where this original AVI file is, you may need it later down the road. It will be a very large file! My 1 minute 42 second (AVI) movie is about 1.16 GB.
Go to where the video (AVI) was saved (mine has a name related to the date and time it was recorded) and open it in Windows Movie Maker.
Edit the video so that it is exactly how you want it to play. I generally clip off a little of the smiling at the beginning and at the end.
If you want to add a title, use the Edit>Titles and Credits> then choose the location of your title. You can choose the color, font, etc. of your title also.
I made a title over my clip that showed up at 7 seconds into the video and lasted 3 seconds on-screen. In the timeline at the bottom I can drag the title to wherever I want it and make it's duration on screen whatever I would like.
Once you are done with editing the video, you can begin working on getting the captions in the correct format. Captions need to be in a timed text file (XML document) with start-times and durations for each sentence (When I use the word sentence, I am also referring to logical parts of a sentence also). This is a file that basically makes it possible to show one sentence of text on the screen at at time. The hope is that your words are showing up on the screen a in sync with when the words are coming out of your mouth in the video.
We're going to now edit the following timed text file in Dreamweaver: Janeen's Example XML Timed Text File
You can save it to your computer, then open it in Dreamweaver.
Resave it under a new name that makes sense to you, if you'd like.
Notice each line that starts with "<p begin=" is one of your sentences from your actual video script. The words said in the video are shown in black in the XML file.
Copy and paste your sentences from your Notepad text file over (on top of) my sentences. Leave everything else in that file alone for now.
If you have fewer sentences than I did, delete from the XML document the extra lines (that start with "<p begin=" ) you do not need.
If you have more sentences than I did, copy and paste more lines (that start with "<p begin=" ) and continue to paste in the words to your video.
Be sure that you don't accidentally write over any of the colored text while you are pasting your sentences into the XML document.
If you are advanced and want to change the font color, font size, color of the background in the captions window, etc., please feel free. I have my settings I like and I know work for the size of the captions window and the video window I like to use.
Next, we will edit the time codes for your video. While still in Windows Movie Maker, check out your movie while looking at the time display (the numbers below the screen where you video is playing).
You should see the numbers change as your video plays.
The time display for my video initially looks like 0:00:00.00/0.01:42.13. The first number is how far along you are in the video. The last number tells how long your movie is (i.e. the end time of your video). The format is hours : minutes : seconds . hundredths of seconds
The lines in your timed text document which correspond to your words each have a start time (e.g. begin="00:00:51.20" ) and a duration (e.g.dur="00:00:03.40" ) for each sentence.
Let's go get those times now.
In Windows Movie Maker, play your video while watching the time codes.
Write down the time when each sentence starts. Alternately, you can pause the movie and edit the XML document as you go. You may want to round to the nearest tenth of a second to make things easier for you.
In your XML timed text document, fill in the start times for each sentence. We'll deal with the duration next.
After you are done filling in all of the start times, we can fill in the durations.
The easiest way to get the duration is to subtract. To get the duration of the first sentence, we subtract the start time of the first sentence from the start time of the second sentence. To get the duration of the second sentence, we subtract the start time of the second sentence from the start time of the third sentence, and so on. To get the duration of the last sentence, we subtract the start time of the last sentence from the end time of the video. Please remember that there are 60 seconds in a minute.
Once we link the video and the captions (we'll do this a bit later), if you have made a mistake in the timed text XML file it's very each to change. You can just alter the XML file with no other changes needed.
Make a folder where you will save this XML file and the rest of the files that we're going to create from here on out. Make it a different folder than where the unedited AVI file was saved. We're going to keep that first unedited AVI file separate from everything else.
Now, let's get your video into a file format that we can use in Flash.
In Windows Movie Maker chose
File>Publish Movie> select 'This Computer' and click on 'Next'.
Name the file something that makes sense to you (I called mine "welcomevideo") and save it in the folder with your timed text XML file.
Select the radio button next to 'More Settings'.
From the drop down menu, choose 'DV-AVI (NTSC)'.
At the bottom of the screen choose "Publish".
Wait patiently while your movie is published. It will be a AVI video file again., but it will have a much smaller file size compared to the first AVI file. My 1 minute 42 second (AVI) movie was about 359,779 KB.
A little about the names of the files I used. My raw video was named by the webcam software (something weird with numbers). After editing the raw video, I saved that video unedited AVI file as another AVI file named "welcomevideo.AVI" and kept the filename 'welcomevideo' throughout the rest of this process. After this whole process was over, I ended up with multiple files named "welcomevideo" (each with a different extension). You may or may not choose to name yours the same way. Also, I have all of these files (except for the weirdly named original unedited AVI file) saved in the same folder (note: the raw unedited AVI file I saved elsewhere so that it wouldn't get confused with the edited AVI file).
In order to caption the movie in Flash, we need to convert the (edited) welcomevideo.AVI video file to an FLV file.
I used Flash Video Encoder.
Open Flash Video Encoder.
Click on the 'Add' button located at the top right.
Browse until you find your
edited AVI video file. Select it and click on 'Open'.
Under the 'Settings' button, choose Flash 8 - Medium Quality. Click on the 'Start Queue' button.
Unless you specify otherwise your output file will be saved in the same folder as your edited AVI file and will have the same name as your edited AVI file but with a FLV extent ion instead of an AVI extension.
My 1 minute 42 second (FLV) movie took about 4 minutes to encode and is about 6,831 KB.
Now you should have filename.avi and filename.flv (e.g. I had welcomevideo.avi and welcomevideo.flv)
Next, we're going to go into Flash CS3 Professional and put all of the pieces together to make a close-captioned video.
Open Flash CS3 Professional.
Under 'Create New' choose 'Flash File (ActionScript 3.0)'
Select Window>Components
Drag a copy of the FLVPlayBack component from the panel to the big white rectangular area in the middle of the page (this area is known as the stage)
Drag a copy of the FLVPlaybackCaptioning component from the panel to the stage.
If you would like, you can drag the FLVPlaybackCaptioning component (it's the one with the little speech bubble beneath it) from the stage to the gray area outside of the white rectangle (this gray area is known as the pasteboard). I drug my FLVPlaybackCaptioning component to the left of my stage.
Click on save (or save as). Give it a name (I kept the name "welcomevideo").
This will save it as a FLA. You should now have filename.fla (e.g I had welcomevideo.fla)
Click on the FLVPlayBack component that's on the stage (it's the one that does NOT have the little speech bubble beneath it).
Click on the 'Parameters' tab towards the bottom of the screen.
Click on the word 'skin' and notice that a pull down menu appears to the left of the word 'skin'.
From that pull down menu, select 'SkinUnderPlayCaptions.swf'. This gives you a skin which allows the viewer to turn your captions on and off while your video is playing.
Scroll down a bit (in the 'Parameters' area) until you see 'skinBackgroundColor'. Click on the word 'skinBackgroundColor'. Click on the colored rectangle to the left of the word skinBackgroundColor". At the top of the box that appears, type in #2065a0 (these are all numbers except for the 'a'). This gives you a pretty blue color for your caption/play controls on your movie.
Don't forget to save your work as you are going along.
While still in the 'Parameters' tab, click on the word 'source' (it's right below the word 'skinBackgroundColor'). A box will show up to the left of the word 'source'. Type in the name of your FLV movie. Mine is welcomevideo.flv
I found that when I eventually played this movie on a web page, I liked my video to show up with
To set these dimensions, click on the FLVPlayBack component that's on the stage (it's the one that does NOT have the little speech bubble beneath it).
Click on the 'Properties' tab towards the bottom of the screen and type in the above values.
Now, select the FLVPlaybackCaptioning component (it's the icon which DOES have the little speech bubble beneath it).
Click on the 'Parameters' tab.
Click on the word 'source' and a box will appear to the right of the word 'source'. In that box type the name of your XML (timed text) document. Mine was named "welcomevideocaptions.xml". After doing this, you have linked your captions to your video.
Save it again.
At this point you should have 4 files in your folder:
(1) an edited AVI file you sent through the Flash encoder (e.g. welcomevideo.avi)
(2) an FLA file (e.g. welcomevideo.avi)
(3) an FLV file (e.g. welcomevideo.flv)
(4) an XML captions file (e.g. welcomevideocaptions.xml).
A fifth possible file would be your script if you chose so save it with the rest.
At this point, save and test your movie. File>Publish Preview>Default - (HTML)
Doing this creates some necessary file automatically. Please do NOT delete these added file.
You now should have the additional files:
AC_RunActiveContent.js (a javascript file)
yourfilename.html (e.g. mine was welcomevideo.html)
yourfilename.swf (e.g. mine was welcomevideo.swf)
SkinUnderPlayCaption.swf
Notice that this displays your captions directly on top of your video (if it doesn't, or if the captions are out of sync with your lips, check your XML captions document). If you like your captions on top, then go ahead and publish your movie. You can skip down to the section about embedding your move in a web page.
It is possible to place your captions elsewhere. I didn't like having my words covering my movie. The location I liked best for the captions was below the video so that none of the movie was obscured. So, I'm NOT going to stop here.
To get your captions to display underneath your movie, first add a new layer by going to Insert>Timeline>Layer.
You'll notice that a new layer named 'Layer 2' appears in the top left of the screen.
Click on the words 'Layer 2' and rename it 'Caption'.
With that 'Caption' layer selected, click on the capital "T" along the left side of the screen (this capital "T" is known as the Text Tool).
Draw a text box under your movie where you want your captions to display.
With that text box selected, click on the Properties tab and select Dynamic Text from the Text pull down menu (top left of the Properties area).
Click on <Instance Name> and type CaptionBox.
Select a font, a size, and a color for the text in your caption box. I chose Tahoma, 14, and black. (Please note that the background color of your captions will be white. So, black is the best color choice for your captions. These are also defined in your XML captions file. So, I'm not sure if what we do here actually makes a difference.)
While still in the Text Properties box, choose 'Multiline' for your Line type. This will make sure that longer lines of text are not cut off.
I found that when I eventually played this movie on a web page, I liked my text box to show up with
To set these, click on the text box that's on the stage.
Click on the 'Properties' tab towards the bottom of the screen and type in the above values.
Click on the FLVPlaybackCaptioning component (it's the icon which has the little speech bubble beneath it).
Click on the 'Parameters' tab.
Use the following parameters:
Be sure that autoLayout is set to False.
Be sure that the captionTargetName is CaptionBox.
At this point, save and test your movie. File>Publish Preview>Default - (HTML)
If it looks OK, go ahead and Publish it: File>Publish
If it does not play the captions back below the movie, go back to the steps that have your display your captions under the move. Odd are you missed a step.
You should now have eight (8) files which are all needed for your movie.
AC_RunActiveContent.js (a javascript file)
yourfilename.avi (e.g. mine was welcomevideo.avi)
yourfilename.fla (e.g. mine was welcomevideo.fla)
yourfilename.flv (e.g. mine was welcomevideo.flv)
yourfilename.html (e.g. mine was welcomevideo.html)
yourfilename.swf (e.g. mine was welcomevideo.swf)
yourfilename.xml (e.g. mine was welcomevideocaptions.xml)
SkinUnderPlayCaption.swf
Lastly, let's embed your movie into a web page
If Dreamweaver is not still open, open it and create a new blank HTML page.
Immediately save it and give it a name that makes sense to you. Please note that you will already have an HTML document named yourfilename.html. This was created by Flash and is part of the bundle of files needed to make your captioned video work. So, you'll have to choose a DIFFERENT name for this new web page Since watching this video is the first step in my orientation, I named this page step1.html.
Choose Insert>Media>Flash (Yes, you are dealing with a video, but you'll need a lot more files than just the video to get the Close Caption skin to show up and make the captions display below the movie.)
Search for and select yourfilename.swf (e.g. welcomevideo.swf)
Type in a Title into the alt tag (e.g. MLC Orientation Welcome Video).
Click on the gray box with the Flash emblem on it. You can change the width and height of your movie. You may want to experiment with making it bigger or smaller and see how big/small you like it to appear on the web page I set it to:
(At some point here a new folder named 'Scripts' is created. It has it in another copy of AC_RunActiveContent.js. You can look in the code in Dreamweaver and see which copy of AC_RunActiveContent.js Dreamweaver is pointing to, then delete the extra copy. I leave both because the file is tiny and I have better things to do with my time. It won't hurt to have two copies of that file.)
Save it and you're done!
Congratulations!!!