Deliverables: Animated Movies - what to do when a clickable wireframe is not enough?

Question

Since I started working for a think tank I am often confronted with the problem that my standard set of deliverables are not sufficient to describe a vision. I often need to highlight the context where users interact with the devices. Ideally I should be able to take my wireframes and show them in an animated style with a bit of context where they are used. Like adding a stage or a scenario. Now I am not an animator and I will not become a movie, 3D or animation genius in a short amount of time. But I was wondering if you know of any tools that enables you to take graphic files and turn them into simple animated movies. I am familiar with Adobe CS and Premiere but not Flash.

EDIT: thanks for all the suggestions so far but screen capture software is not what I am looking for since it does only focus on what happens on the screen and not the context in which the user is using the device. The Hype recommendation looks like an interesting option which I am going to check out.

Answer 1

In lieu of an animated movie, you may want to try Hype instead. It's a $30 application for mac which creates animated HTML5 websites and it's very easy to create animations. They have quick video tutorials to accompany this and you can probably learn this quickly if you have minimal web experience.

http://www.tumultco.com/hype/

They also offer a two week free trial if you want to try it out to see if it's right for you.

Answer 2

If you want to bring interaction into your wireframes, then Fireworks would be a simple tool for you to learn. You're already familiar with Photoshop, so the learning curve is minimal. You can just add as many hotspots as you need for your pages and then link the pages together. You can export it as an html file, clickable PDF or just keep the PNG file.

Then you could use Jing to record you demoing your prototype. Jing's a great free tool. The fact that Jing limits you to a 5 minute demo is helpful to keep your demos short and succinct.

Answer 3

You should take a harder look at Camtasia, because it's more than just screen capture.

It has simple-but-powerful editing and some animation abilities of it's own. Here's how you could use it:

1. Make a capture of an interaction you're interested in (be it lo-fi prototype, clickable HTML, whatever)
2. Draw up the "scene" that the interaction takes place in - say, a person sitting on a park bench, using a tablet - and spit out the graphic as a bitmap.
3. Import the illustrated scene into Camtasia and drop it on the Camtasia stage
4. Drag your screen capture right onto the tablet screen from your illustration
5. Voila, you have your screen interaction described in context

I'd recommend you do two shots - start with a wide shot showing the landscape and the person in it, then cut (or zoom in) to a tight shot where you can only see the device and the person's hands (or whatever makes sense), but you can see the screen interaction clearly.

You can also add annotations (word bubbles, arrows, free text, etc) right in Camtasia. It's essentially a stripped down iMovie with screen capture.

Answer 4

I would recommend looking at simple screen capture software. I will often take my interactive prototypes (generated in Axure RP), and click through different scenarios while narrating the expected use cases. Then, I simply post the resulting video to our web server and send a link to it to my stakeholder. The result is, essentially, an asynchronous walkthough of the concept.

My screen capture tool of choice is Jing (It's free and easy, but limits you to a 5-minute recording time), but if you need more flexibility, Camtasia is another great option.

For me, nothing beats the ability to be able to talk through the scenarios.

Answer 5

Jing is a great tool. If the movies are REALLY simple, you can always use animate in Photoshop CS5 and make a .gif

Answer 6

iRise is a tool created exactly for this purpose. It is expensive, but worth it if your company has money to invest in the product. You can download a trial version from a link on this page:

http://www.irise.com/products/irise_pe

Adobe Fireworks is another good option, and will be a lot faster than prototyping with Flash or some other animation program.

Answer 7

I've found the Keynote is surprisingly good for illustrating and explaining user flows or building demos.

• It's easy to drag in Wireframes or Design assets from other applications, it has great graphics handling and typography.
• Has the concept of a Master slide so it's easy to re-use elements across multiple slides.
• There's enough variation of the Builds/Animations/Transitions so you can quickly show how an animation or transition will work.
• Animations can be triggered either via Keypress, mouse or on a timer.
• Can be exported to QuickTime so presentations can be delivered without the Keynote Application.
• A growing number of 3rd party libraries for rapidly building demos e.g. keynotopia.com, keynotekungfu.com etc
• Anyone can use Keynote. Designers, Developers, Stakeholders, Project Managers. Not just a tool for a developer or UX pro.

Answer 8

It looks like Animated Banner Maker from PCWinSoft might interest you. It is the modern alternative to old Flash and now Adobe Animate. Note that it is designed for banner so short storyboards, but even so you get old Flash power on visual output to animated GIF and WebP to use on your website today. The program is key-frame layer-by-layer vetorial animation of images, text, and polygons which can change position, size, transparency, rotation, and colors along a timeline. If you used Flash you will fit right in. You can create visually rich and impressive banners.