Using WINK to create custom animated tutorials

A great way for students and faculty alike to learn how to use new software is to see it demonstrated and to reinforce the lesson by reviewing the demonstration. Animated tutorials (movies) are the way to go! This handout will walk you through the process of using Debugmodes WINK - a free, open source screen capture software package that you may use to create movies about any software package your school uses. WINK may be downloaded from the following website: http://www.debugmode.com/wink/ The installation is simple and takes only minutes to perform.

Designing the tutorial and getting started WINK may be used to create a tutorial of any length; however, I tend to break the tutorials down into simple tasks that take 2 3 minutes to demonstrate. This way, viewers do not waste time viewing steps they already know and can quickly access the information pertinent to their situation by selecting the relevant tutorial. For example, visit my list of FrontPage tutorials found at: http://hh.harpethhall.org/faculty/mwert_faculty/web%20design/resources/tutorials.htm WINK captures screen shots of your computers desktop as you perform operations in any given software package. When played back, the collection of screen shots forms a movie that shows your cursors movements, keyboard inputs, menu selections, etc. There are several options within WINK for capturing the screen shots: you may capture the open window, a selection of the screen that you specify (in pixel dimensions), a custom rectangle, or any of a number of rectangles already specified by WINK. I prefer capturing the open window, which means I must already have the software package open and the window set to a desirable size before I begin using WINK. Once I have the software I am creating the tutorial for open and its window properly sized on my desktop, I open WINK and start a new project.

Using WINK To start a new project, open WINK and go to File > New.

The New Project Wizard opens. There are several options in Step 1 of the New Project Wizard which must be specified.
Check the boxes by Start by capturing screenshots and Hide Wink Window. Select Window from the drop down menu. Click Choose and click the titlebar of the open window of your demo software. Timed capture rate is set to 4 frames/sec. Check both boxes for InputDriven Capture At: Mouse Click and Key Press.

You will see green markers outlining the corners of the open window everything within the region bounded by those markers will be captured by WINK during the recording process. 2

Click OK to proceed to Step 2 of the New Project Wizard. If you prefer, you may specify a particular region on your screen by selecting Screen from the drop down menu and entering the region in the Region: boxes. A good size to specify for playing movies back on the web is 800 x 600 (see box below).

In Step 2 of the New Project Wizard, you specify how you want WINK to start and stop recording. There are three options: Screen shots (hit the Pause key) Timed captures (hit Shift-Pause keys to begin) Input-driven captures (hit Alt Shift Pause keys to begin) The window below simply reminds you of the keyboard commands you must use to start the recording process. Keep them handy! Click Minimize to Tray to get the WINK window out of the way. Nothing is being recorded yet you must tell WINK what to do.

I typically take a screen shot of the opening screen of my demo software (by hitting the Pause key) and then begin recording input-driven captures by hitting the Alt Shift Pause keys. Once you begin recording, simply perform the task you hope to teach with the tutorial. Every time you click your mouse or press a key on your keyboard, WINK captures an image of the open window. WINK also records the movement of your cursor between mouse clicks. When you have finished the task, hit the Alt Shift Pause keys again to stop recording. If you make a mistake during recording, dont stop and start again. You are able to remove unnecessary frames from your tutorial during the editing process. Right click the WINK icon in the system tray and select Finish Capture to end the recording process and enter the editing phase.

The WINK window now displays all of the captured screen shots for your tutorial, shown as numbered thumbnails at the bottom of the screen. The highlighted thumbnail is shown as a larger version in the editing window. To the right is a task pane where you may edit the properties of each thumbnail. It is a good idea at this point to SAVE YOUR WORK! Go to File > Save As and save your work with an appropriate filename to your hard drive. I always create a folder ahead of time that is named after the topic of the tutorial. You will see why this is handy later. Save frequently as you progress through the editing phase.

There are several properties you may specify for each screen capture: You may add a textbox containing instructions relevant to that screen. Click the Textbox option. Click the Choose callout icon. This opens a dialog box offering several textboxes already designed by WINK (see below). Select the textbox you want and click OK. A blank textbox appears in the editable region of the WINK window. Double click the textbox to edit the font and to enter the desired text. You may use your cursor to resize the textbox and/or to move it within the captured screen.

You may add Next and/or Previous buttons to each screen so that the viewer may proceed when ready. Do not include these buttons if you want the movie to Autoplay. You may set a time (in milliseconds) for that particular screen shot to remain visible before moving on to the next screen (this option is not available if you use Next and/or Previous buttons). Make sure the screen stays visible long enough for instructions (if you put any on that screen) to be read and comprehended or for cursor movements to sink in. A time between 2000 and 5000 milliseconds is usually good. If there are screen shots that you do not want to include in your tutorial, simply click on the thumbnail of the unneeded shot and hit your Delete key. When you have completed adding textboxes, navigation buttons, and other finishing touches, you must convert the tutorial to a movie format other people (who do not have WINK) may view. Remember to save your project before converting.

Go to Project > Settings

Browse to select the folder you created earlier that contains the project file for this tutorial. Select Macromedia Flash as the Output File Type. Set the Frame Rate to 20 and Cursor Movement to Smooth. Click OK. Go to Project > Render. The conversion process takes place. If you have a large project, rendering may take several minutes. Next, you will want to view your rendered output to make sure all is well with the tutorial. If necessary, go back to the project file, make corrections, and render again. To view the rendered output, go to Project > View rendered output. This will play the tutorial in a new window. The final step is posting the tutorial you will notice that your rendered output consists of a Macromedia Flash file (*.swf) and an html document. You may link to the html document from a website; however, make certain that it resides inside the same folder as the *.swf movie file.

Debugmode has a good User Forum to help with questions about WINK. A common request of users has been for the developer to add audio capabilities. The goal was to release a new version in Jan 2006 with audio; however, I have not seen it yet. There is a plug-in you may use to add audio to your tutorial, but I found it cumbersome and decided to stick with visual and verbal instructions only at this point. Melissa J. Wert Technology Integration Specialist The Harpeth Hall School mwert@harpethhall.org (615) 346-0088 skype: scoutwert