This tutorial shows you how to use our method to make your Fireworks prototype work for the Apple iPhone and iPad. We call the method TAP. It is an updated version of our earlier work, found on our website, or at the Adobe Developers Connection. We added quite a lot of features. The most important being able to use page transitions, swipes (by using the jQTouch jQuery plugin) and caching of the application.
It is recommended to read through this article to understand what TAP is and what it can do
TAP falls into the category of “Smoke-and-Mirrors”, where technology is used to create the illusion of a working product. With TAP we use the iOS web browser to display what is essentially a mini website with clickable images of the application interface. Having a click-through prototype is not so special in itself. But what makes this tool interesting for designers, is that without any coding, they can make a prototype that:
Runs full screen without the default Safari browsers navigation at the top and bottom of the screen.
Animates transitions between screens with effects like slide cube, dissolve, flip, pop, slide-up and swap.
Supports gestures like swipe left, right, up and down and change orientation of the device.
Caches the prototype on the device, so it loads instantly and responds as snappy as a native application.
Allows the designer to lay out the whole interface in Adobe Fireworks, a program likely familiar to many designers and to set the rest up through a simple web interface. No coding required.
Video playback and animated images can be integrated. A little bit of coding required
I'm a multi-disciplinary designer-strategist at HP. My passion is whole product design: the seamless integration of HW+SW+Web to deliver compelling experiences to users. I'm currently swimming upstream to bring Web 2.0-style community participation to HP's consumer printing business.