SilverStripe

Making free tutorials and demos with Wink

Posted by Sigurd on 16 July 2007

In response to being asked how we created the animated Flash demonstrations showing some off the work done by our Google Summer of Code projects (e.g. Usability work and Google Maps), we thought we'd pass on the knowledge to everyone reading the SilverStripe blog. They've been made using a free program called Wink. It takes lots of screenshots a second then lets you edit the footage, including adding sound and text boxes.

10 tips on using Wink

1. Think through--story card--the basic idea of what you want to do. Keep it simple... if you're trying to convey how cool/flexible/simple something is then every decision and frame in the animation should emphasise that.
2. Capture a rough bash first, review it, then capture your final one. Just like watching a rehersal of yourself doing a presentation, you'll instantly notice where you paused too long, went too quick, missed a step, etc. While you can insert, delete, speed up and slow down the work quite flexibly in Wink, you save a lot of time by having the footage you edit roughly right.
3. Wink lets you delete frames. Delete everything and anything that's a distraction from what you want to convey.
4. Capture a small window.
   1. For "fullscreen", keep it around 800-1000 pixels wide, so that it fits when embedded into webpages, or is legible for projector presentations (reading text of a full-screen screenshot is often hard unless its an intimate crowd). It also keeps the movie full of action.
   2. If you are focused only a certain toolbar or element of an application, chances are you just crop the rest of the application right out, unless it prevents you understand the context of what you're doing. Just keep thinking: simplicity!
5. When capturing work done inside a webbrowser, include the whole window, not just the webpage, so it feels like you're really browsing. This will disclose the address you are visiting, so ensure you don't disclose anything secret through this!
6. The choice of webbrowser and operating system that is shown inside the presentation (e.g. Firefox, Safari, Opera, Internet Explorer, and Windows vs Mac) is important to certain audiences. You may find it hard to impress web developers by using Internet Explorer!
7. If you have lots of frames that are the same (e.g. where you stop to have the person read a message), set a delay on the first one, and delete the rest. This reduces the animation's file size.
8. Save work often!
9. Save smaller copies off, for your webpages by using  "Project -> Resize". This resizes the  whole project to a small resolution. You can reduce a "full screen" image to almost 50% of the original and still make perfect sense. (Example)
10. By default, Wink captures at 4 frames a second, and plays back at 20. If this is too quick for your viewers to follow what you're doing, reduce the play rate in Project -> Settings.

Watch for a preview of how Wink works and what the results can be...

Thanks Elijah for building this! 

0 Comments. Add Yours Tags: tutorial