Animated Tutorials the Easy Way

Animation software has been around for a long time, out of recognition that the computer can efficiently and quickly take on many of the tedious and exacting functions that teams of graphic artists have performed since at least the 1920's. Nowadays, there are many computer-based technologies for creating animations, some of which are very accessible. For an example, take a look at the Low Threshold Application (LTA) Note offered on the TLTGroup Website.  This LTA gives step-by-step instructions for creating animated GIF images. On campus, the CSTL and several faculty members have experience constructing animations using Macromedia's Flash software.

Animated GIF images are easy, but very limited in scope. Flash animations can be extraordinarily rich with detail and professional polish, but the learning curve for Flash is steep. For many of us who want to produce sophisticated instructional animations without taking a long time to learn to use software, a tool that targets the middle of the GIF/Flash spectrum is needed. Enter Viewlets!

What is a Viewlet, and why should I want to use one?

A Viewlet is essentially an animated presentation of the activity visible on a computer's screen while software is running. Viewlets may include notes and other forms of annotation that are added during editing. The resulting animation/annotation environment thus allows you to show students how to perform procedures on the computer, including software installation and use. Viewlets are reusable in the same way that a Word document or PowerPoint presentation may be reused, so Viewlets can save you much time that would otherwise be spent showing students how to use the software required in your course.

Viewlets are produced by ViewletBuilder 4, a product of Qarbon, Inc. Current editions of the ViewletBuilder software produce animations as Flash animations, although early versions used a system based on JavaScript.

To get a sense of how Viewlets might be used to support teaching and learning, click the link: Example of a page that uses Viewlets.

How to Make a Viewlet

Of course you will need the software: click on ViewletBuilder 4 Trial version to download it.

The Viewlet linked here will show you how to install the software. After installation, click on your desktop's ViewletBuilder icon to launch the software. IMPORTANT: THE VERSION THAT YOU HAVE INSTALLED IS THE "TRIAL" VERSION. THIS MEANS THAT ANY VIEWLET THAT YOU MAKE WILL HAVE A QUITE DISTRACTING "WATERMARK" IN THE MIDDLE OF EACH SLIDE AND AN AD BEFORE AND AFTER THE VIEWLET. IF YOU PURCHASE THE SOFTWARE, QARBON WILL PROVIDE YOU WITH A SERIAL NUMBER THAT ELIMINATES THE WATERMARK FROM ALL NEW VIEWLETS AND THOSE YOU CREATED WITHIN 30 DAYS PRIOR TO PURCHASE. Rather than buying ViewletBuilder yourself, you may wish to make your Viewlets in the Trial version, take them to the CSTL, and open them on a CSTL computer which has ViewletBuilder installed. Saving the Viewlet on the CSTL computer will remove the ads and watermark.

Creating a Viewlet is easy, involving three basic steps, as the image at right shows (Click to see a full-size version):

1. Capture screenshots. Screenshots are recorded each time you press a pre-selected key (usually the "Pause" key, found in the upper right corner of your keyboard. Watch the Viewlet
    

2. Edit the Viewlet. After the slides are recorded, you may add notes, adjust the timing, and make other changes that add functionality and meaning to the Viewlet. Watch the Viewlet
    

3. Compile and Publish.  The completed Viewlet is saved in usable form, as a folder containing all the files needed to generate the Flash animation. You can save the folder to your Web, and link it to Web pages for use in your course. Qarbon also suggests that the Viewlet could be saved to a CD-ROM for distribution to your students. Watch the Viewlet

Prepare your students for Viewlets

Although millions of Viewlets exist, they are unfamiliar enough to students that you may need to tell them that the Viewlet only provides an animated picture of a computer desktop or software application: despite being very lifelike in appearance, the buttons, icons, and other functions within the Viewlet are only pictures; they are not under the student's control.

Robodemo: another product used to produce animated tutorials

The CSTL has licenses for Macromedia's RoboDemo, a competitor to ViewletBuilder. To get an idea of how others are using RoboDemo, click on the link: RoboDemo Examples. If you'd like to try Robodemo, contact the CSTL.