Digital Web Magazine

The web professional's online magazine of choice.

Capture a Screencast with a Mac

Got something to say?

Share your comments on this topic with other web professionals

In: Articles

By Miraz Jordan

Published on March 12, 2007

As a writer, I often make screenshots to accompany my tutorials, blog posts, and articles. But, sometimes, static screenshots aren’t up to the job of clearly illustrating a point.

I recently wrote Web Accessibility: The Flip Side of the Coin for About This Particular Mac (ATPM). I wanted to demonstrate how using multiple links with non-unique text, such as “Read more…” can be confusing, and created a short movie to make my point. The movie showed how Apple’s VoiceOver (included with recent versions of the Macintosh operating system) could build a list of the links on one page. It clearly and dramatically displayed how unclear and repetitious the “Read more…” links could be for visitors.

As it stands, the movie is very short and sharply focused, and depends on the context of the article to be understood. Making a screencast or stand-alone tutorial usually requires more elements: an intro screen, some static shots of the web page, perhaps a copyright statement, credits, and more.

While putting together a good tutorial movie for your blog or for an article you’re writing requires some thought and preparation, and would benefit from extra time spent on post-processing, the good news is that capturing screen shots and screen movies can be done inexpensively on a Mac. Although I take a glance at the wider context of preparing an entire tutorial and give you some tips along the way, my focus here is on the low-cost software you can use.

The Movie-making Workflow

Stand-alone tutorials may have a number of components: screenshots, a screen movie, some slides, and, perhaps audio. The entire process for creating a high-quality movie includes storyboarding, recording audio, and post-processing, in which you assemble all the created or captured materials into a final product. Very simple tutorials can be made without some of these steps.

The basic workflow is:

  1. Plan and rehearse: Figure out what to tell and show, what’s required, what’s not, and rehearse the action.
  2. Set up:
    1. Declutter: remove the irrelevant.
    2. Focus: remove distractions and provide visual aids.
  3. Capture content:
    1. Screenshots, with and without cursors.
    2. Movies and sound.
  4. Process captured material: assemble, trim, add captions, titles, credits.

Of course, there are other considerations, such as finding a quiet space and decent microphone for recording voice, learning how to use post-production software, and having the capacity to deliver very large files.

1. Plan and Rehearse

Begin by writing a script, and work through it, making screen captures, voice recordings, photos and so on, as required.

Be prepared to make several attempts before capturing the definitive content. As a writer and trainer, I’ve learned through real-world experience that rehearsals and re-dos are required, whether you plan to do them or not. It seems that it’s only after you review your screenshots that you realize that there’s a menu-bar item in the way, or you need to clear the browser history, or turn off automatic form-filling.

You’re likely to find that the neighbor starts the lawnmower in the middle of your voice recording session. Or, on playback, you discover your bad sniffing or loud breathing habit. In writing this article, I made the same short movie about twenty times, only to throw it away, after all, when the article took a slightly different direction. My twenty takes each had problems, including the neighbor’s lawnmower, an email filter that announces the sender of a message, and other similar glitches.

2. Set Up

There’s no point in trying to teach or show anything if the audience isn’t paying attention. It’s a good idea to reduce distractions, to direct the viewer’s gaze, and to highlight what you wish them to see. So, before making a screenshot or movie, clear the screen.

a. Declutter

People are easily distracted when watching a tutorial. I’ve discovered several software applications when I actually was supposed to be learning something else. I’ve wondered, “What’s that icon in the menu bar of that screenshot?” when I was meant to be learning about digital storytelling, for example.

Declutter your screen. Direct the viewer’s attention to what you want to show them. Get rid of distractions such as the desktop picture and irrelevant windows.

A superb way to achieve this is Backdrop, a free application that fills your screen with a solid color or picture of your choice.

Backdrop's Preferences
Backdrop, although simple, has useful preferences for its behavior.

Set up the window to be recorded, then switch to Backdrop to clear the screen. Bring your target window to the front, and it now appears against a clean background.

Before sample
Before: a normal screen with window clutter.

After sample
After: System Preferences window against a white background.

Remember to remove unnecessary menu-bar items. Be especially careful of any items that may reveal information you shouldn’t disclose, such as icons for applications still in secret beta, or other confidential information.

Many people log in to a clean user account when they create screenshots or movies. This can minimize menu bar clutter and help prevent interference from non-standard interface enhancements.

b. Focus

Are you showing an entire window, or do you want to direct the viewer’s attention even more precisely? The Mac has some built-in features that can help.

Call up System Preferences -> Universal Access on your Mac and consider which features could help your viewers. How about Display pressed keys on screen (on the Keyboard tab), or a large cursor size (on the Mouse & Trackpad tab)?

Big cursor sample
Mac OS X can display a huge cursor. Set the size in the Mouse & Trackpad tab of the Universal Access System Preference.

Boinx Mouseposé and OmniDazzle both offer options such as the ability to highlight the cursor, dim other parts of the screen, and may even display keys pressed.

Mousepose preferences
Mouseposé offers many preferences.

Mousepose attention direction
Mouseposé directs the viewer’s attention to the VoiceOver On radio button.

OmniDazzle options
OmniDazzle has different options, and offers many effects.

OmniDazzle attention direction
OmniDazzle draws attention to one part of the Universal Access preference pane.

5. Capture Content

a. Static Screenshots

Next, you need to capture the screen—as static screenshots, as movies, or a combination. Screenshot capability is built-in on Mac OS X, though it’s fairly rudimentary. You can simply use a set of keyboard commands, or use the Grab utility for more control. For the most control, though, Snapz Pro is best.

The Built-in Capture

Look at System Preferences -> Keyboard & Mouse -> Keyboard Shortcuts -> Screen Shots to activate or deactivate several built-in options, and to choose shortcuts for them. While you’re there, also check what else is available, such as zooming the screen, changing contrast, and reversing to white on black. (These options can be turned on and off in System Preferences -> Universal Access.)

Mac options for screenshots
Mac OS X has half a dozen options for screenshots, zooming and contrast.

To grab a screenshot with the built-in features, call up the window to capture, press the keyboard shortcut you’ve assigned (the defaults are command-shift-3 for the whole screen, or command-shift-4 to make a selection), and a file is saved to your desktop.

The Grab Utility

Another possibility for capturing screenshots is the Grab utility. You’ll find it on your Mac in Applications -> Utilities. With the Grab application, you can capture the cursor, and have a choice of cursor styles to use in the screenshot. You can also capture a timed screen; the capture will be made ten seconds after you start the timer. This gives you the chance to call up a menu, for example.

Mac Grab utility
The Mac OS X Grab utility can capture a timed screen.

The computer provides a warning bing just before the capture takes place. A camera shutter sound lets you know when the screenshot is done. The picture opens in a separate window; you have the option to save (as a .tiff) or discard.

Snapz Pro X

For much greater power and configurability, look at Snapz Pro X. This software has been around for a long time and has established a well-deserved good reputation. For static screenshots, it has oodles of power. You can capture the entire screen, objects such as windows, or just a selection—all with or without the cursor, and in tons of formats.

You can create additional thumbnails as you go, reduce or enlarge the screenshot at capture time, and choose a destination for the images. One feature I love is that I can name images as I go.

Snapz Pro X
Snapz Pro X is extremely flexible…

Snapz Pro Configurations
...and configurable…

Snapz Pro Options
...with numerous options.

Sometimes, to make a still screenshot, you actually have to make a movie, and then extract a still image from the movie, using special software for that purpose. This problem comes up when you have special screenshots, such as ones in which you are trying to capture menus, dialog boxes, and certain screen changes. For example, to capture the above screenshots I had to make a movie of Snapz Pro capturing the screen, and then extract the still images via QuickTime Pro. Sometimes making screen movies and screenshots can be a complex process.

b. Screen movies

Snapz Pro X

If you upgrade Snapz Pro X to the with movies version, you can also make screen movies—again with many configurable options, including recording a microphone track. Set up your window to capture, press the keyboard shortcut, and select the appropriate settings from the Snapz Pro X configuration window. Press Return and choose a filename for the file to be saved. If you have the volume up on your Mac you’ll hear “Action!”, and you can work through your script.

Snapz Pro movie settings
Snapz Pro movie settings superimposed on the Universal Access system preference pane.

Once finished, press the keyboard shortcut again. You’ll hear “Cut!” and be presented with options for saving the movie. It’ll take a few moments, you’ll hear “That’s a wrap!” and then you can open your movie for further processing.

Snapz Pro Movie saving
Snapz Pro Movie saving settings.

Snapz Pro Movie info
Snapz Pro Movie info is available when saving.

In my unscientific tests, Snapz Pro X has been fairly slow in saving, and the save works the Mac’s fan very hard.

iShowU

Newcomer iShowU is a very strong competitor with Snapz Pro X when it comes to movies. I’ve found that I have more control with iShowU, being able to pause the capture, for example. It also comes with many presets for various types of movies. Again, you have the option to capture a microphone track, and choices for audio quality.

Open iShowU and you immediately see the various presets. You can also create custom presets and save them.

iShowU presets
iShowU has numerous presets: Low quality, small file size, high quality, HDTV are just a few.

It’s easy to choose and edit a recording area, with the option for the capture guides to be visible even when not recording. This could allow you to do a dry run, ensuring that you capture only and all of what’s actually necessary.

Including superfluous screen real estate creates unnecessarily large files, yet opening menus and dialog boxes all too often brings up items outside the bounds you had originally set. A dry run reveals that problem and allows you to deal with it.

Choose and edit presets to suit your needs, and also check preferences, where you can set keystrokes to start and stop a capture (and pause it or abort it). Then switch to the window to be recorded, and invoke the required keystroke to start the capture. Once finished, stop the capture with the appropriate keystroke. It’s also possible to control captures from the menu bar icon.

In my experiments, iShowU showed me the recorded movie the moment I stopped the capture, without the relatively long delay that Snapz Pro X introduced during the save process. This was true even when I set iShowU to capture in HDTV 720p (a 150mb movie file).

6. Process and assemble captured material

Many factors—such as the time and software you have available, and your purpose in creating a movie—determine how you process your screenshots, sound, and movie captures. For a very highly polished product, you may need to look at professional software packages, such as Final Cut Pro.

If your requirements aren’t so demanding, you may find that you can assemble and edit in QuickTime Pro or iMovie, perhaps with GarageBand handling additional audio tasks.

In this stage of the workflow, you need to play through your movie and add any extra content or trim out superfluous matter. You may wish to add title screens to introduce the content, insert stills, or even digital photos, or perhaps captions, to amplify points as the movie progresses. You may also want to add credits and copyright information at the end.

To see an example of a high quality, extremely useful, and inspirational screencast, go to Screencastsonline.com. Each week, Don McAllister produces a videocast for Mac users. He blends together screenshots, screen movies, captions, and a soundtrack.

To capture the screencast, he uses iShowU with Omnidazzle for the occasional screen highlighting. In post-processing, he uses Final Cut Pro, adding inserts and transitions, and doing all the tweaking and tidying that transform a raw capture into a polished product. These are very professional tutorial movies.

The little movie I made for my accessibility article didn’t merit a massive treatment, but the screenshots were actually created from two movies, two static screenshots, and a digital photo of my computer screen (to capture a shot I could achieve no other way). Screen captures can be a tricky business.

Software resources

Backdrop, version: 1.4
License: Freeware (donations welcome). Author/Publisher: John Haney. Requires: Mac OS X 10.1 or higher. Universal Binary (native support for PowerPC and Intel Macs).
Boinx Mouseposé, version: 2.5.1
License: US$14.95. Author/Publisher: Boinx. Requires: Mac OS X 10.4 ‘Tiger’, Graphics Card with Quartz Extreme support. Universal Binary (native support for PowerPC and Intel Macs).
OmniDazzle, version: 1.0.1
License: US$14.95. Author/Publisher: The Omni Group. Requires: Mac OS X 10.4.6 or later, a Core Image capable video card. Universal Binary (native support for PowerPC and Intel Macs).
Snapz Pro X, version: 2.0.3
License: US$29 (still images), US$69 (movies). Author/Publisher: Ambrosia Software. Requires: MacOS X 10.2 or later, is Intel compatible. QuickTime for movie capture.
iShowU, version: 1.31
License: US$20. Author/Publisher: shinywhitebox. Requires: OS X 10.4 (Tiger), also compatible with Mac OS X 10.5 (Leopard). Recording of sound from the system requires Soundflower (free). Universal Binary (native support for PowerPC and Intel Macs).
QuickTime Pro, version: 7.1.3
License: US$29.99. Author/Publisher: Apple. Requires: 400 MHz Power PC G3 or faster Macintosh computer, at least 128MB of RAM, Mac OS X v10.3.9 or later, QuickTime 7 (free).
Got something to say?

Share your comments  with other professionals (14 comments)

Related Topics: E-Learning, Convergence, Technology

 

Miraz Jordan lives in Wellington, New Zealand, with her partner,three cats and two dogs. She spends her time writing blog posts, Tips and tutorials, articles, web copy, sometimes books, such as WordPress 2: Visual QuickStart Guide (with Maria Langer), and helping to organise Webstock. In spare moments she takes photos or looks at the stars. Her fictional heroes include Xena and Kathryn Janeway.

Media Temple

via Ad Packs