

Ask HN: How to create animated iPhone UI demos? - mrschwabe

Some teams go straight from design to development.<p>With my app, I'd like to go from design to 'animated demo' and THEN to development.<p>In other words, I'd like to take my single frame UI screens and animate them.  To create a realistic 'animated demo video' showing what the final product will look like; complete with iOS style effects (moving screens, button states, etc).<p>My plan is to get the UI setup in Flash CS5 and then use the timeline, motion tweens, and actionscript to animate a user case study example.<p>That said, this is my first time tackling an interface animation project like this - so I'm curious - is there a better, easier methodology?  Perhaps using other tools?<p>Any tips or suggestions are appreciated.
======
mrschwabe
A note for reference: I learned that the best way to create a 'sexy animated
demo' is to forget the Flash idea and simply create it in Xcode and Inteface
Builder.

For example, create a new Xcode project, ignore all business logic and data
access programming, and simply code / build an working interface that can
visualize a basic user case study example.

Then run the Iphone Simulator, take a screen capture video (using Snapz Pro or
Camtasia) and run your makeshift CheckOut build. Save it and voila - you have
an animated demo video that looks like the real thing.

In addition, I'd recommend SimFinger to beef up the Iphone Simulator with the
iPhone4 shell. It also adds a 'finger' and some other tricks to make the demo
video look better:

<http://github.com/atebits/SimFinger>

