(2010-12-14) Udell Using Sparkcasts To Enhance Stepbystep Instructions

Jon Udell: Using sparkcasts to enhance step-by-step instructions. My earlier explanations didn’t use screencasts, they were just textual narrations with embedded static screenshots. That’s an appropriate way to explain step-by-step procedures. Screencasts can be overkill. (cf sparkline)

how this explanation works. The steps are all written as text. Each step comes with a Watch! link that opens a quick little inline screencast.

What I really wanted was for each sparkcast to play once when shown, then stop and offer a Replay link. If you view the source of this page, you’ll see the solution I came up with. It turns out that when you dynamically reload an animated GIF, you need to decorate its URL in a unique way; otherwise the browser won’t replay it

Once I figured out how to replay a play-once GIF, I had to make all the GIFs stop looping. I’m sure that PhotoShop and others of its ilk can do that, but I like Image Magick’s ability to automate repetitive tasks.

A movie-style screencast is a fairly heavy object, and it would be cumbersome to embed lots of these on a page. Animated GIFs are lighter. And it turns out that Camtasia can produce that format

I’ve been pointing to a series of how-to articles but it was time to make the instructions clearer and simpler. It was also time to revisit how to use screencasting to explain step-by-step procedures