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.

  • Are we talking physical products? If so, a lot of CAD software allows for primitive animating.
    – DA01
    Commented Aug 11, 2011 at 21:58
  • both actually, it's an interface and the physical product in the context of use
    – bedienbar
    Commented Aug 13, 2011 at 8:52

8 Answers 8


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.


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

  • It might not be exactly what I am looking for but it definitely looks like something I will have a look at. Thanks for the recommendation.
    – bedienbar
    Commented Aug 15, 2011 at 8:44

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.


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.

  • That sounds like a good option and the price is reasonable, too. I am going to check it out, thank you!
    – bedienbar
    Commented Aug 17, 2011 at 13:54

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.

  • Talk through scenarios is great, I agree, but screen capture software is not was I was looking for, thank you.
    – bedienbar
    Commented Aug 15, 2011 at 8:54

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


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:


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

  • This looks more like a sophisticated wireframing tool to me. Like the other recommendation it just focuses on the on-screen action and does not add context. Thanks anyway.
    – bedienbar
    Commented Aug 15, 2011 at 8:53

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.

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.