During a recent project, our design called for a custom animation that was tricky to explain via static screens and description. Storyboarding was an option, but we’re big fans of getting ideas on a device as much as we can – quickly.
It worked out great.
The process was pretty straightforward and quick. Jumping into Animate felt familiar to Flash Pro, with a timeline, the ability to add objects and tween them. That’s all we needed.
We drew out our interface, which at this point was in a wireframe state, and imported some other graphics. Once the starting part of the animation was composed, we tweened those elements to illustrate moving into a different state of the app and triggered the animation using actions, like “click”.
The process was pretty straightforward and quick.
Along the way we were able to preview the animation in a desktop browser and on an iPhone using Adobe Edge Inspect. For an added bonus, and before we shared the animation prototype with the client, we added some meta data and images to fit the prototype to the device, this allowed for fullscreen and bookmarking to the iPhone’s Home Screen with a custom icon.
Tip: If you want to make your web app run at full screen on an iPhone 5 with a splash screen, we found this handy post.
The results of this quick experiment were great! The client immediately understood the animation and interactions associated with it. For those who were unable to test the animation prototype on a device, we made a quick video that could be watched at a convenient time.
We can’t share the animation we created for our client, so here is another example you can preview and try adding to your Home Screen on an iPhone.
View the Example
Download the Edge Animate Project
Download Published Source