4 ms·
Ask HN: How to create animated iPhone UI demos?
Some teams go straight from design to development.
With my app, I'd like to go from design to 'animated demo' and THEN to development.
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).
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.
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?
Any tips or suggestions are appreciated.
- mrschwabe 16y agoA 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 http://github.com/atebits/SimFinger