Friday Jan 30, 2009

Screencast Tips

I recently produced a screencast for Update Center 2, and I've had some folks ask me how I did it. There are a zillion tools and techniques for producing screencasts. This blog describes one approach. I in no way claim it's the best approach -- and in fact I'm certain it is not. But it worked OK for me.

I did this on a Mac laptop running Mac OS 10.5. Windows users will likely need to look elsewhere for guidance.

I've broken down the job of creating a screencast into four steps:

  1. Recording raw content
  2. Editing content into a video
  3. Converting video into final screencast format
  4. Publishing screencast

Recording Raw Content

To record the raw content off of the screen I used  iShowU HD  from shinywhitebox. Benefits to this software:

  • It's inexpensive: $30
  • It's easy to use
  • It seems to do enough for basic screencasts

The main drawback is it's pretty basic. I imagine there are more sophisticated solutions out there. For example I needed to use some additional software to convert my Quicktime video into Flash Video for publishing to the web.

I really did not evaluate any other solution. You may want to before blindly following me.

Here are the iShowU HD settings I used for screen recording:

Output Video Size 720x540, 4:3
Output Video Codec Apple Animation, High Quality
Output Video Framerate 4 fps
Output Audio AAC, 44100 khz, 2 channel
Capture Area Same as video size (720x540)
Mouse Mode Fixed / Stretch


Notes:

  1. To set these I first selected "iMovie '08 Standard (4:3) Large", then changed the framerate
  2. 720x540 seemed to be a reasonable compromise. Large enough to be legible but not giant
  3. Throughout this process I made sure to always keep my video size the same so I never scaled the original content
  4. Note the low framerate. If your software uses snazzy animations you may want to bump this up a bit.
  5.  Audio quality is better than needed, but I down-converted it later
  6. I set my capture area to be the upper left corner of the screen. So the area of the screen being recorded is a 720x540 box in the upper left of the screen -- except when the mouse moves out of that box. See next item.
  7. The mouse mode means the capture area is fixed, but if the mouse leaves the capture area the video zooms out to keep the mouse in frame. More on this later.

General Recording Tips:

  1. Practice a few times before recording.
  2. I found the built-in mic on the Mac to be of pretty good quality, so I just used that. If you have a high quality external mic you may want to give it a try.
  3. Make sure you are in a quiet area where you won't be interrupted.
  4. Be aware of the location of your mouse. When it's "in frame" you will have a tight shot of the upper left corner of the desktop. If you move out of frame the video will zoom out to keep the mouse in frame. You don't want to oscillate back and forth. Don't wiggle the mouse nervously (talking with your hands!)
  5. Keep the mouse pointer near the upper left when you want to show detail. To show your entire app move the mouse to the lower right corner of your app. To show the entire desktop move your mouse to the lower right corner of the desktop.
  6. If you are using a terminal increase the font size until it just fits in 720x540. This will be legible.
  7. iShowU HD will preview what it will record when it is up. Use that to get a feel for the framing and zooming.
  8. I put post-its on the edge of my screen to mark the 720x540 boundary and remind me what was in frame.

Once you are ready to record, click Rec and go! Do your best to get it done in a single take. You want to minimize the amount of editing required. Consider breaking down your screencast to 5 minute clips (I violated this with my 15 minute take).

When you're done recording you will have a mov file in Movies/iShowU HD/.

Editing Content

I used iMovie '08 to assemble the content into a video. Import your video using File->Import Movies. I performed very minor edits -- basically splicing in an intro and conclusion that I had to "re-shoot". iMovie '08 is pretty weak -- rumor has it '09 is a significant improvement.

I then exported the video using "Share->Export Quicktime" with the following settings (click the "Options..." button in the export dialog)

Export Movie to QuickTime Movie
Video Settings
Compression Type H.264
Frame Rate 4
Key Frames Automatic
Compressor Quality High
Encoding Best quality
Data Rate Automatic
Audio Settings
Format Linear PCM
Channels Mono
Rate 22.050 kHz
Quality Normal
Sample Size 1


After this you will have a new .mov file with your screencast

Convert Video to Final Format

The problem with video formats is that it is still, after all these years, difficult to find one format that plays universally on all platforms. To get around this I converted to flash video format. To do this conversion I used  ffmpegx  to convert my Quicktime movie to flash video (.flv).

Here are the ffmpegX settings I used:

Video
Codec Flass Video (.FLV)
Size 720x540
Auto Size 4:3
Frame Rate 4 fps
Audio
Codec MP3
Bitrate 64 kbit/s
Sampling 22050
Channels Mono
Mode
CBR
Options
High Quality Two pass encoding|

Publishing Screencast

So, now you have a .flv file -- what the heck do you do with it?  Well, first you want to preview it, then you want to publish it to the world.

To preview it, place the file someplace accessible via an http URL, then put the following code in an HTML page:

<object type="application/x-shockwave-flash" width="720" height="556" wmode="transparent" 
    data="http://mediacast.sun.com/flash/jw-flv-player/mediaplayer.swf?file=
          http://yourserver.sun.com/path/to/video/screencast.flv&autoStart=false">
    <param name="movie"
        value="http://mediacast.sun.com/flash/jw-flv-player/mediaplayer.swf?file=
        http://yourserver.sun.com/path/to/video/screencast.flv&autoStart=false" />
    <param name="wmode" value="transparent" />
</object>

This uses the Flash NLV player from mediacast.sun.com to play the video in your web page.

For final publication Sun employees can upload the flv file to http://mediacast.sun.com. Once you do that you can click the "Share" area on the video to see various options for sharing.

About

jdipol

Search

Archives
« April 2014
SunMonTueWedThuFriSat
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
   
       
Today