The "How to Create a Tutorial" Tutorial
Computing Resources >> Tutorials >> Getting Started >> How to Create a Tutorial


The Outline

The Handout

The Website

The Video

Uploading Your Files

Evaluate this tutorial

PDF Handout


The Video

Not every tutorial requires a video. For some of the more abstract tutorials – for example, file/image management, or how to use your School of Information account – a video just might not work at all. Or you might only need a video for a few of the pages. Here are some things to think about when creating a video:

  • Plan it ahead of time. Write a script, if you need to. Make sure you know what’s going to happen. This will save you some embarrassing moments that will be caught on video for who knows how long. If you write a script and adhere to it, that can save you some time later on, when you create a transcript.
  • Don’t explain something in a video that is not also explained on the website. For instance, the Introduction to Dreamweaver video walks the user through how to set up a site in Dreamweaver. However, the corresponding web page only briefly mentions setting up a site in Dreamweaver, and directs the user to the video. The user should not have to watch the video if he or she does not want to in order to get all the relevant information.
  • That said, I should also stress that the video is for demonstrating a particular task, something that cannot easily be done through text alone. The video should complement the web site, but not replace it. Some things are not easily demonstrated. So be creative – come up with a task that the user can follow along with.
  • For complex software interfaces, a video can often orient the user much easier and faster than a complex text page full of screenshots and individual actions. Most people dread doing the video (and hearing their voice over and over again), but recording the video is actually a much less painful process than you would think, and can be quite fun.

The video consists of several parts (and this is subject to change, without notice, at any time):

  • dial-up videos for each page for Windows Media, Real Player, and QuickTime;
  • broadband videos for each page for Windows Media, Real Player, and QuickTime;
  • dial-up videos for the entire tutorial for Windows Media, Real Player, and QuickTime;
  • broadband videos for the entire tutorial for Windows Media, Real Player, and QuickTime;
  • a Flash version for each page;
  • a Flash version for the entire tutorial (with navigation);
  • captions for the tutorial (we're currently experimenting with a program called Glifos to caption our videos, but this might not be available for each version of the video at this time); and
  • an html version of the transcript.

We use a program called Camtasia Studio by TechSmith, which records both audio (your voice) and the computer screen (what you're demonstrating). Quinn's directions for recording your video using Camtasia Studio are below.

Using Camtasia Studio (by Quinn Stewart - revised 1/07/2005)

VERY VERY IMPORTANT!!!!- Try to start your tutorials with a solid background, Windows Media will not encode a complex background for modem connections.

  • Start > Camtasia Studio 2. Close the Wizard if it opens. Select “Record the Screen” from the Task List on the left hand side of the screen. Close the Wizard again. Capture> Fixed Region >785x420 is maximum size for 800x600 resolution (leaving a 30 pixel region for captioning). Deselect the “Fixed starting point” box, this will allow you to drop the capture window where you need it. Please see Quinn if you need to use a larger or smaller video size. Click OK.
  • Effects > Cursor > Highlight Clicks
  • Effects > Audio > Record Audio
  • Tools > Options > Hotkeys > The Record/Pause Hotkey is your best friend! I usually set mine to F1. If you need to capture something that is outside of your capture region, pause recording, move the window, and hit pause again to keep going. This is much better than panning across the window.
  • Tools > Options > AVI tab > Video Setup > Auto-configure should be checked. Make sure the Description says “Techsmith Screen Capture Codec.” Audio options > make sure that “Interleave audio every 1 seconds” is checked. Click “Audio Setup” and make sure that Format is PCM, and the settings are 44.100 kHz, 16 bit, mono at 86 kb/sec. Click OK.
  • Tools > Options > Capture tab - select “Pause before starting capture” and “Capture layered windows”. Under “Performance Options” select “Disable display acceleration during capture”.
  • Tools > Options > Program tab - I like to select the “Play video with Camtasia Player” and “After save, play the video” checkboxes. Click OK.
  • Note - There are lots of other settings and things to play with. Feel free to play with them, but refrain from using them unless you can justify a need to. While zooming, panning, and sound effects can be neat, they often don’t encode well, and can annoy the user.
  • PLEASE create yourself a folder in My Documents. It REALLY helps to use a sequential numbering system for your files, as well as logical name pertaining to what you are doing.
  • Test, TEST, TEST! All of your settings need to be tested. Make sure you are capturing at least 10 to 15 frames per second of video, and make sure your audio is nice and loud without distortion. Once you are done capturing your clips, you will use Camtasia Studio to edit and produce them.

Helpful Hints

  • ALWAYS test your audio before you begin capturing.
  • Please open all applications from the Start Menu. However, you do NOT need to capture the task bar at the bottom of the screen unless it is necessary to show something, this can save valuable screen real estate. You can also eliminate unneeded browser toolbars to save room.
  • The F1 key allows you to start – pause recording (which saves you from recording the mouse going off in all directions).
  • The F1 key allows you to NEVER DRAG A WINDOW! If the application you are capturing opens a window outside of the capture region, DON”T DRAG IT! Simply pause, move the window, and resume capturing. Dragging windows causes smeared video on modem settings.
  • Have a script in mind, if not written down. Another option is to simply go through the tutorial until you make a mistake, stop, and start over just before you made the mistake with another capture. You can then cut off each end of the clip in Camtasia Studio.
  • Use the F1 key to start and stop recording when you need to pause and think (or cough, or sneeze…). BE CAREFUL with the F1 key it likes to “bounce”, so verify that you are actually paused or recording. AVOID dead air! Make sure something is happening or being said, otherwise pause recording.
  • Double check the Camtasia window to be sure you’re paused when you think you’re paused, and recording when you think you’re recording. Sometimes hitting F1 too hard causes Camtasia to “bounce” back to its original action (effectively double-tapping the F1 button).
  • BEWARE of breathing into the microphone. The mike may pick up the sound, and this is not an obscene phone call. It can help to elevate the microphone above your nose, and check the volume level there.
  • When you PRODUCE your movie, be sure to set the Info on the “Production Options” to reflect your information (rather than the information of the last person to use the program).

Camtasia Studio - Editing and Producing your tutorial

  1. You should now have several clips, hopefully named in a numerical order, in the Clip Bin. You can now drag these to the timeline and edit them if necessary. This handout does NOT cover editing in Camtasia Studio. Once you have clips on the timeline, please save your Camtasia Studio project file in your folder with your clips. The filename will have a .camproj extension. This file is very important, it contains all the metadata about edits and whatnot to your original avi files. Please keep up with all of your raw files, and back them up to the staff external drive.
  2. Once you have saved your project, go to Produce > Batch production. Select “Add Files/Projects”. Find your .camproj file, and add it in at least twice. Click Next.
  3. Select “Use a different profile for each file/project” and click Next.
  4. You should see at least two instances of your project now. In the Profile Name column, make sure that iSchool Real Tutorial broadband is selected for the first item. Click on the second item, and change it to iSchool Real Tutorial modem.
  5. Now you need to modify your tutorial metadata. You do that here by clicking on “Profile Manager”, and clicking “Edit”. You will then click “Next” three times, until you see “Video info”. Click Options, enter your metadata, and click OK. Now click “Finish”
  6. You will return to the “Manage Production Profiles” window. You will now change to the iSchool Tutorial Modem setting, and repeat the above step to insert the proper metadata for your files. Once you are done, click “Close”, then “Next”.
  7. Now you will select a folder for your output files. Please put your encoded files into a separate folder called “encoded”, located in the same folder as the raw files and .camproj files.
  8. Now click “Finish”, and Camtasia Studio will batch process your files. Once they are complete, review the modem files for clarity, and let somebody else review them for you.

Outputting with RealPlayer, Windows Media Player, QuickTime, and Flash Versions using Camtasia

Remember to use the same file names you've linked to when creating the website.

Uploading Video Files to Cobra (the Streaming Server)


Where to Save Flash Files

Flash files will need to be saved in a folder called "swf", located on the same hierarchy as your images and Template folders.

Creating .qtl Files

When you created your webpage, you created links to .qtl files, which direct the browser to the actual QuickTime video. Now, you need to create these .qtl files. Using a text editor, open a new document and paste in the following code:

<?xml version="1.0"?>
<?quicktime type="application/x-quicktime-media-link"?>
autoplay ="true" />

The bolded text will need to be changed. Change "dwmx2004" to the name of your tutorial. "dwmx2004-0" will need to be changed to the name of your tutorial, plus the number of the video file (with "bb" if it's the broadband version). Save the file with the same name of the video link. Example: dwmx2004-0.qtl.
You will need one .qtl file for each QuickTime video file that you have, both the individual videos and the entire tutorial videos. In each instance, the name of the code that you change should match the name of the file. These QuickTime files will need to be saved in a folder called "qtl", on the same hierarchy as your images and Template folders.

Using Glifos to Transcribe Your Video


Creating a Text Transcript

Once your transcript has been created, you will need to break it up into separate files. Use a text-editing program such as BBEdit (don't forget to wrap the text) to create a separate text file for each video segment. Follow the naming conventions listed on the previous page for the html transcript (01_transcript.txt, etc.), so that the links you created in your website will work.

Creating an Animated Gif

An animated gif is used to draw attention to our video files. Tired of the rote technical writing? Well, this is the part where you can have some fun. For inspiration, check out Holly Robertson's animated gif of a Mozilla Mail icon eating an Outlook icon. Or Dave Wilson's gif of the Mozilla dinosaur stalking downtown Manhattan. To create an animated gif, we use Adobe ImageReady. First, create your image in Photoshop, with each element of your image a different layer. Then, choose "File --> Edit in ImageReady." Open the Animation and the Layers toolbars. Animation is achieved by turning layers on and off (in the Layers toolbar), and adding frames (in the Animation toolbar). To add a new frame, click the Duplicate Animation Frame button at the bottom of the Animation toolbar. You can adjust the time each frame is displayed at the bottom of each specific frame (no delay, 0.1 seconds, all the way up to 10 seconds), as well as "tween" frames, which automatically adds frames by adjusting layers. Set the animation to only animate once. Why? If anyone spends more than a minute or two on your site, a recurring animated gif will slowly drive him or her crazy (I'm speaking from personal experience). When you are finished with your animation, first save it as a psd file. Then, optimize the animation for the web, and save it as a gif.

The Review Process:
Your video should be reviewed by a labstaff member. Ask someone to review your video BEFORE editing it; believe me, if you need to redo it, you don't want to spend a lot of time on the initial draft. For the reviewer, check on these things:

  • Is the sound quality adequate?
  • Is the video quality adequate?
  • Can you see all the windows in the Camtasia capture screen?
  • Does the video follow the website (I know it's impossible for the video to replicate everything on the website, but it should cover all of the main points, and, most importantly, not contain information that is not also on the website)?
  • Is there video to go along with all of the audio? Sometimes, especially in the beginning of the video, there's a lot to say, and not a lot to do. Consider adding some callouts in Camtasia Studio, to emphasize a point you may be trying to make.

© 2005 Sara Fuchs | iSchool | UT Austin | webmaster