Balancing Act: Keeping Your Screen Movies Small and Beautiful

Screen recordings are a valuable tool for enhancing training, tutorials, manuals and websites. Companies use this technique to produce streaming and downloadable content. The recording tools are readily available and affordable.

In this article, we explore some techniques, tips and tricks for recording sound, mouse movement and happenings from your screen to an AVI file.

File Size vs. Movie Quality

One key to successful screen movies is keeping the files small. Larger files mean longer processing times for you and longer download times for your users. Especially large screen movies may not play at all for some users with outmoded PCs. Also, large files do not stream well over the Internet.

Unfortunately, larger files result in better quality movies. More colors, smoother action, and higher quality sound are all benefits of larger file sizes. Therefore, your most important - and most difficult -- decisions will balance file size against quality. This article presents technique for keeping file sizes small while retaining the quality you need in your screen movies.

Tip 1: Select Your Color Settings

Before you record a screen movie, you need to configure your display for color depth. We recommend setting your color depth to 256 colors, or 8 bits. In Windows, you do this by selecting Start | Settings | Control Panel and then double-clicking the Display icon.

Today, many computers work in True Color. True Color uses 24 or 32 bits per pixel, and can render millions of colors. Let's assume you're capturing an area that is 320 by 240 pixels. That's 76,800 pixels for every complete frame captured. How much storage space would each complete frame in this movie occupy?

Bit Depth	Colors	Storage Space per Complete Frame (320 by 240 pixels)
8	256	76,800 Bytes (76.8kB)
16	64K	153,600 Bytes (153.6kB)
24	16.7 million	230,400 Bytes (230.4kB)

As you can see from the table above, each frame in True color mode contains a lot of information to capture from the screen memory. This information must then be compressed and written to the AVI file. That process requires a lot of time, processor power, and disk space.

In many cases, the programs that you capture will look as good in 8 bit color mode as in True Color. The capture programs optimize the color map to make the best use of them, so you do not lose much quality unless your subject demands higher color depth. In 8-bit color mode the amount of information to capture and compress is a fraction of that in the other modes. These pictures compress the fastest, and produce the smallest AVI files.

If you must record in higher than 256 color mode, consider using 16 bits, and use Intel Indeo codec, configured to the "Quick Compress" option. If you don't have Indeo installed on your machine, you can download it for free from Intel's web site, http://developer.intel.com/ial/indeo/. On HyperCam, for example, this will compress about 10-20% faster than with the default codec of MS Video 1.

A final word of advice on setting colors: You may be tempted to record in True Color and then convert the file to 8 bit color depth. There are two reasons to avoid this. First, the software you are recording will probably do a better job of picking which 256 colors it displays best in, than the screen recording software. So, set your display to 256 colors and let the application you are recording pick its palette. Second, saving and processing a file in True Color takes more time than in 256-color mode. This extra time is wasted if you're just going to convert to 256 colors.

Tip 2: Select a Frame Rate. How Low Can You Go?

The frame rate is the number of frames per second that you record and play back. Television uses about 30 frames per second, and movies about 60 frames per second. This results in very smooth action. However, frame rates this high create very large computer files.

The frame rate needed for smooth motion depends on how fast objects move across the screen, and on the size of the objects. Small, fast moving objects tend to blink as they move. This occurs when the image of a moving object is present in one frame, but not in the next. For example, a cursor moving quickly across the screen will tend to blink. If your screen movie must include such objects, you'll need a high frame rate: 15 to 60 frames per second. If you keep the action on the screen slow, you can obtain good results with a frame rate as low as 2 to 5 frames per second.

Use these recommendations as a guideline, and experiment with a few settings to see how low you can go with the frame rate. The only way to determine how low you can go while maintaining quality is to record and play back a few samples.

HyperCam, like most screen recording software, enables you to select the frame rate for your recording.

Tip 3: Set Key Frames

Your screen capture software does not store information for every single pixel in a frame. Instead, it stores the information for which pixels have changed since the previous frame. For example, assume two frames are identical except that the cursor has changed position. The capture software will store information for only the pixels that have changed because of the cursor's movement. The majority of the screen stayed the same from the first frame to the second. Therefore, there is no need to repeat this information in the second frame. This storage method saves a lot of disk space and results in faster playback.

However, the longer a movie plays, the greater the errors introduced by this storage method. To correct any errors, your recording software inserts key frames. A key frame is a completely recorded frame, with all of its information intact. Then, beginning with the key frame, the software once again records only the changes from frame to frame. When it hits another key frame, it records the entire frame, begins recording only the changes... and so on, again and again.

Because key frames take more storage space than normal frames, the more key frames in your screen movie the larger the file. In our example of recording a 320 by 240 movie at 256 colors, each key frame occupies 76.8kB.

Most programs will automatically choose every tenth frame as a key frame. Most will also enable you to choose how often to insert a key frame.

If your screen movie contains a lot of zooming, panning, and other movement, you'll need more key frames to keep the quality high (every tenth or even fifth frame). If changes from frame to frame are small, you can select fewer key frames and still retain high quality (every fifteenth to thirtieth frame).

As in choosing the frame rate, the only way to determine the minimum number of key frames for the quality you need is to take a few test recordings.

Tip 4: Select the Recording Region

Some screen recording software enables you to select a specific region or Window to record. You can usually select the recording region in three ways:

• Select an area of you display by dragging a selection rectangle. Everything inside the rectangle will be recorded.
• Select a specific window.
• Specify the X and Y coordinates of the recording area on your display.

The smaller the recording area, the smaller your file size.

The best method for determining the minimum size recording area is practice. Run through the sequence you need to record several times, and determine the minimum size window that the sequence requires.

Also, instead of choosing to record the entire window in which the program is running, consider selecting only the interior of the window. If the window's title bar, scroll bar, and status bar do not add useful information, do not record them.

Some programs enable you to move the recording area around the screen, so that you can pan from one area to another. The resulting movie is like watching a large screen through a small, moving window. This is a powerful technique for showing large areas with a small movie. However, it can be disorienting. Keep the action slow and use narration to clearly explain when and where you are panning.

Tip 5: Select the Right Audio Settings

Most of the space your screen movie occupies is comprised of video information. That is why we have focused on techniques for minimizing the size of the video information while still retaining quality. However, selecting the right audio settings can also minimize file size.

First, determine if your screen movie software enables you to select mono or stereo sound. Unless you have a compelling reason to record in stereo, select mono.

Second, select the proper number of bits rate for the quality of sound you want. Most software enables you to choose between 8 bit and 16 bit samples. Think of a sample as a pixel of sound. The more bits you use to store a screen pixel, the greater the number of colors that pixel can take. The more bits you use to store a sound sample, the greater the frequency response of the sample captured. Try your audio setting at 16 bits per sample, before going down to 8 bits. The difference in sound quality between 8 and 16 bits is usually very noticeable, so this is a good place to spend some file size.

Third, select the sampling rate. The sampling rate is how many times per second the capture software will record sound. For example, a sampling rate of 8000 means that the software is capturing 8000 slices of sound every second. For most screen movies with voice narration, a sampling rate of 11025 gives good quality with minimum file size. This combination of bits per sample and sampling rate is approximately equal in quality to an FM radio.

Screen recordings can be valuable tools for demos, tutorials, training videos and various technical applications. The latest commercial and open source tools provide this capability in easy-to-use and affordable packages - take advantage of this great technology!

Taking and Making Better Screenshots

If you’ve been a technical writer for more than 15 minutes, you’ve probably had to take a few screen shots while documenting software. Most tech writers have their favorite software for capturing and processing static screen shots. I won’t compare these applications or try to tell you how to use them. Instead, I’ll give you techniques that help you produce the best possible screen shots, no matter what application you choose.

This article assumes that you’ve taken screen shots before. It uses terms like “hot keys” and “time delay” and “capture cursor.” If you don’t know what these terms mean, look them up in the help for your screen capture software. They represent standard features that are found in most screen capture applications.

This article contains three sections. Each section contains three tips for improving your screen shots. You can print this list of techniques and keep it as a reminder when creating screenshots:

Before the Shot

• Reduce Colors on Your Display
• Decide Which Steps to Shoot
• Get Set to Capture the Action

While Taking the Shot

• Crop Out Extraneous Information
• Set a Time Delay
• Capture the Sequence of Windows

Processing the Shot

• Screen Size: 75% - 50% - 25%
• Edit to Compress
• For Odd Shapes Set Transparency

Before the Shot

A good screen shot starts before you take the picture. You can do several things to set up for a better screen shot:

• Reduce Colors on Your Display
• Decide Which Steps to Shoot
• Get Set to Capture the Action

Reduce Colors on Your Display

The fewer colors in a screen shot, the less disk space it takes up. That’s important for download speed, printing speed, and file storage.

Usually, the best way to reduce the number of colors in a screen shot is to take the shot on a display that’s using fewer colors. This usually gives better results than taking the shot on a display with more colors and then reducing the number of colors after the shot.

Below, the first screen shot on the left was taken at 16 million colors, converted to 256 colors, and then saved as a .png file. Notice the banding by the model’s right eye. The second shot was taken at 256 colors and saved as a .png file. The transitions between shades of grey are much smoother in this version.

Taken in True Color and Converted to 256 Colors

Taken with Screen Set to 256 Colors

Decide Which Steps to Shoot

Do you need to take a screen shot of every step? Probably not.

For example, in Step 1 below the sequence on the left shows the Save As dialog box before the user clicks the New Folder icon. The Save As dialog box is clearly labeled as such, making the screen shot in Step 1 unnecessary. Step 1’s screen shot would be necessary only if the new dialog box were difficult to identify or if you needed to point out special features before the user begins interacting with it.

Step 1’s screen shot could be eliminated with very little loss of usability. This is especially true for screens and dialog boxes that are common (like Save As and Open), and that conform to Windows standards.

The sequence on the right shows the Save As dialog box only after the user begins performing actions inside it. The instructions take less room and are just as clear.

Screen Shot for Every Step	Screen Shot for Selected Step
1. This brings up the Save As dialog box: 2. Create a new folder by clicking the New Folder icon:	1. This brings up the Save As dialog box. 2. Create a new folder by clicking the New Folder icon:

Focus on the Action

If a screen shot illustrates an instruction, then use color or shading to focus on the action. This tip is especially useful for selecting menu items.

For example, let’s use the instruction “From the File menu, select Save.” Below, the shot on the left just shows the File menu pulled down. The reader must search for the Save command. The shot on the right shows the screen while the user performs the instruction. The user immediately sees what must be done in this instruction.

Before the Action

During the Action

Including the cursor in a screen shot is usually a good idea, because it’s an easy way to direct the user’s eye to the action.

While Taking the Shot

While taking the actual screen shot, you can do several things to improve the result:

• Crop Out Extraneous Information
• Set a Time Delay
• Capture the Sequence of Windows

Crop Out Extraneous Information

If the user is interacting with only a small portion of a screen, and that portion is easy to find and easily distinguishable from other portions of the screen, then show only that portion. In the example below, there is only one OK button on the screen that the user could possibly click on. The screen shot on the left shows the button’s position in relation to the rest of the screen, but in a screen this small that doesn’t add much value.

Too Much Screen Click the OK button:

Enough Screen Click

Set a Time Delay

Most screen capture software enables you to capture menus while they are pulled down. You do this by setting the software to capture the cursor. This works with most applications. Some applications, however, will fold up their menus when you press the hotkeys on your screen capture software.

Usually, you then make sure that the hot keys for your screen capture are not interfering with the application. For example, you would make sure that the hot key for your screen capture software is not [Ctrl]-[S], which in most applications is the Save command. Trying to take a picture of a menu pulled down with this hot key would cause most applications to collapse the menu and begin the save process.

When changing the hotkeys fails to solve the problem, frustration ensues. You may even give up on capturing the menu in action. Try this:

1. Set your screen shot software to a time delay of a few seconds.
2. Hit the hotkeys to take the shot.
3. During the delay, choose the menu items you need to set up the shot.
4. Hold still…
5. The screen shot software takes the shot. Success!

Capture the Sequence of Windows

If the user does something to spawn a new window, you may want to show the relationship between the original and new window. Or, you may want to show how information carries over from the original to the new window. In these cases, consider taking a shot of the new, spawned window overlapping the original window.

In the example below, the active window is the result of double-clicking on the appointment in the Calendar window. The Subject and Location data carries over from what is displayed in the Calendar window. This shot clearly displays the relationship between the two windows.

Processing the Shot

These techniques may help you while processing your screen shots:

• Screen Size: 75% - 50% - 25%
• Edit to Compress
• For Odd Shapes Set Transparency

Screen Size: 75% - 50% - 25%

Most paper documentation is read at 75% of the distance to a computer screen. This means you can make screen shots 75% of their actual size and most users will see on paper exactly what is on screen. Use this size screen shot when all of the detail in the screen shot must be clear and all text in the shot must be legible.

If the user needs to read only the large text in a screen, you can usually make the screen shot 50% of actual size. This works for most screens where the display font is 11 or 12 points.

If the user needs to locate the major objects in a screen, but not read text, 25% of actual size is adequate.

Edit to Compress

Sometimes, resizing a screen shot so that it fits a page results in a shot that is unreadable. This usually happens when the elements of a screen have a lot of empty space between them. For example, this screen shot from the home page of the CIA is 641 pixels wide:

Let’s assume you need to resize this so that it fits your page’s margins. Here’s the result:

Notice that the links have gotten difficult to read.

An alternative to resizing is editing to compress. In the example below, I used the marquee tool to select the links on the right and drag them to the left. Then, I cropped off the excess from the right side. Here’s the result:

You may have ethical concerns about editing a screen like this. If so, consider adding a notation that the screen shot has been “edited for size.”

For Odd Shapes Set Transparency

In the example below, a screen shot was taken of two overlapping windows and pasted into an electronic slide. Notice that the lower left corner consists of extraneous information. It also obscures the company logo:

To correct this, the screen shot was processed in a graphics program as follows:

1. The area to be transparent was filled with a color that is not used anywhere else in the graphic. In this case, bright green:
   
   
2. The transparency for the graphic was set to the fill color (bright green):
   
   
   
3. The graphic was saved as a .gif file.
4. Finally, the graphic was imported into the slide:
   
   
   Technically, the graphic still overlaps the company logo, but because the overlapping part of the graphic is transparent the logo shows through.