| « Introduction to working with Java dates | New PWMinder 2.0 Screen Cast » |
Using Wink to create Screen Casts
Over the past few weeks I have been playing around with different software for creating screen casts, that can be used to demonstrate the features of PWMinder. While screen shot images are important to let the user see the general look of the UI, screen casts showcase how an application really works!
In my search for screen cast software, my requirements were that the software is free (or fairly inexpensive), allows the screen casts to be easily put on to a web page, and easy to learn and use.
After trying several applications I have settled on using Wink. What makes Wink different is that instead of recording user actions as a 'movie' it records it as individual screen shots. The screen shots are triggered by user actions such as mouse clicks and keyboard events. With this model, you don't have to worry about making typing mistakes, etc. while you are recording, because if you make a mistake you simple remove those screen shots. You also to have to worry about timing while recording (e.g. pausing too long in on place, or not waiting long enough at another), because Wink only capture a sreen shot in reponse to an input event. With wink, after you have recorded your series of screen shots, you go back and can specify how long each screen should be displayed for. This feature also makes the resulting video smaller; for example in a typical movie-type capture model, if you stay on the same screen for 5 seconds, it captures in the range of 150 images, while for Wink, it captures and stores the image just once and then on replay, displays it for 5 seconds.
Other useful features include the ability to add text and callouts to the screens to provide added information.
Once you are happy with your sequence, you render it to a .swf file. It also creates a javascript file and and .html file so you can integrate the flash into your website.
The way I integrated the videos into my website was to create a static image of the first video screen shot, resized it smaller, to act as a thumbnail, and saved it as an .png file.
On the page I want to launch the video from I added the following code:
<a href="AutoLogin.htm" target="Wink"
onclick="javascript:WinkPresentation('AutoLogin.htm');">
<img src="autologin_thumb.png" width="205" height="154" alt="Auto Login thumbnail image" title="Click to view screen cast" border="0"/>
</a>
where the href points to the .html file created by Wink and img src is the thumbnail. The .html created by wink looks something like:
<HTML>
<BODY>
<center><OBJECT CLASSID="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" WIDTH="1024" HEIGHT="788" CODEBASE="http://active.macromedia.com/flash5/cabs/swflash.cab#version=7,0,0,0">
<PARAM NAME=movie VALUE="AutoLogin.swf">
<PARAM NAME=play VALUE=true>
<PARAM NAME=loop VALUE=false>
<PARAM NAME=wmode VALUE=transparent>
<PARAM NAME=quality VALUE=low>
<EMBED SRC="AutoLogin.swf" WIDTH=1024 HEIGHT=788 quality=low loop=false wmode=transparent TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash">
</EMBED>
</OBJECT></center>
<SCRIPT src='AutoLogin.js'></script>
</BODY>
</HTML>
where the script src is the javascript file created by Wink.
Some tips:
- I recorded with my screen resolution set to 1024x768 so video would fit on most screens when viewing
- I set Cursor Movement setting about 10% of the way to Rough (i.e. closer to smooth). This seemed to give the most natural mouse movement.
To see some screen casts I created check out: http:/www.ewert-technologies.ca/products/pwminder/screen_casts.html
Trackback address for this post
Trackback URL (right click and copy shortcut/link location)
Comment feed for this post