TAP- Fireworks touch prototype tool for iPhone, iPad – UNITiD

Before you continue, please note that we stopped working on our TAP project. There will be no updates anymore. Three reasons: 1. Fireworks is dying. 2. There are now many good prototyping alternatives 3. It costs an awful lot of time to maintain a tool like TAP.  If you like to make iOS prototypes quickly, please take a look at InVision (some of our thoughts on this tool) or Flinto.

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.

Other very useful tutorials can be found on Smashing Magazine, part 1, 2 and 3. For transitions, check out tapotype.com. If you need to prototype a Teleportation app, check out this manual.

It is recommended to read through this article to understand what TAP is and what it can do.

What is it

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

Technically, TAP is a library of files containing custom developed PHP and Javascript (JQtouch & JQuery) code that makes the prototype come to life.

What do you need

  • Adobe Fireworks. We work with CS5. But have used this method with CS3 and CS4 as well.
  • A place to put your prototype online. PHP must be installed, you must be able to set some rights on folders.
  • An iPhone, iPad or iOS simulator. Some of the features work on Android phones as well.

Building the prototype the first time

  1. Download the ZIP file for this article, it contains some folders with PHP and jQuery and jQTouch scripts.
  2. Create the screens with Fireworks as you would normally. Every application state should be made as an individual page.
  3. Link the pages together using hotspots. (you cannot use slices with this method). Test the mockup as you would normally do by exporting to HTML and images.
  4. If you are ready for a test run, export the file in Dreamweaver Library (.lbi) format to the empty Library folder found in the zip file (images in subfolder).
  5. Upload your complete set of TAP files to a server that can execute PHP. This can also be a local server on your PC or Mac!
  6. Set the file access properties (chmod) of this folder so you can create and change files in this folder (777 works for sure)
  7. Open the “/build” panel in your browser (Safari works best) by opening http://www.your­website.com/path_to_proto­type/foldername/build (example of a build panel)
  8. In the /build panel you can set up your prototype. You can also upload the homescreen icon and start-up screen from here.
  9. Save the settings and click “build prototype”. If you have made some mistakes, the page will tell you.
  10. Get your iPhone or iPad and go to the URL in Safari (http://www.your­website.com/path_to_proto­type/foldername/). Add the bookmark to you homescreen and run the app from there.
Export settings in Fireworks
Export settings in Fireworks

Rebuilding the prototype

  1. Make changes in your Fireworks document
  2. Export the file to Dreamweaver Libary items and replace the folder on the server
  3. Open the “/build” panel in your browser and click “build prototype”.
  4. Get your iPhone or iPad and start the prototype from your homescreen.

Devices

TAP currently works best for iPhone and iPad. In the /build panel you can select the device you are prototyping for. Keep in mind that all pages are loaded into a single website. Especially on the iPad, the prototype gets heavy and you might find errors because of this. We recommend to keep the prototype less than 6 MB. After building the prototype, you will see the total file size of the prototype. A quick way for reducing file size is exporting the images to a lower jpg resolution.

We are currently working on Android prototypes, more soon.

  • For iPhone 3, create pages with a resolution of 320*480. Remember the top 20 pixels will be taken by the iOS status bar. If you make pages longer than 480 or wider than 320, you get a scrolling page.
  • For iPhone 4, Retina display, create pages with a resolution of 640*960. The top 40 pixels will be taken by the iOS status bar
  • For iPad, create pages with 768 * 1024 pixels, again, top 20 pixels, remember that.

Transitions

To create a realistic prototype, you want to add page transitions. We used JQtouch to make this possible.

In Fireworks, enter the transition in the “alt” field. This transition will be translated to a class. This class will be interpreted by jQTouch.

Using the transitions
Using the transitions

You can use the following transitions (go to ipro.to/tap_iphone to see all transitions in practice)

  • slideleft, slideright: The most common iOS transition. Slides in the next screen.
  • slideup, slidedown: For messages that slide up from the bottom
  • slidetopdown, slidetopup: For sliding in a page from the top instead of the bottom
  • pushup, pushdown: Both current page and incoming page slide up or down. We use this for magazine navigation in vertical direction
  • popup, popdown: Pops up or down a new page
  • fade: Fades one page into the next
  • fadefast: Fast fade, default behavior
  • flipleft, flipright: Flips the page around.
  • dissolve: A sort of fade
  • swapleft, swapright: Swap to a different page like the transition in switching application with multitasking
  • cubeleft, cuberight: Cube transition. I actually haven’t seen this put into practive in any app, but still a nice effect
  • moveouttoright, moveinfromright: The content pages slides off to the right. Can be used for fly out menus (like Facebook)
  • moveouttoleft, moveinfromleft: The content page slides ofs to the left. Opposite transition of moveouttoright.

If you have a bit of CSS3 knowledge, you can easily add your own transitions.

Extra’s

  • back: If you use back without entering the “Link” field, the prototype will return to the previous page with the reversed transition. If you enter a different “Link”, than it will go to this link, but will still the transition

Gestures

Use the "Target" field for entering gestures
Use the “Target” field for entering gestures

Currently swipeleft, swiperight, swipeup and swipedown are supported. This is how it works:

  • Create a hotspot. This is the area that can trigger a swipe. If you swipe outside the area, it won’t work. If you make a hotspot the full page, the swipe will work everywhere.
  • You can add a link (in the link field) and a transition (in the Alt field) like you would normally do. This is the default behavior on tap/click. Careful, if you do not use a link on the hotspot, place a hashtag (#) in the link field, otherwise the gesture won’t work.
  • Now we use the “target” field to make the swipes work. An example: If you would enter: “swipeleft,page2,slideleft”, it will result in the following: If you swipe this area with you finger from right to left, page2 will appear with a slideleft transition.
  • If you also want to enable swiping another direction, simply continue adding the three parameters to the Target field. For example: “swipeleft,page2,slide­left,swiperight,page0,slide­right,swipeup,page3,pushup”. With these commands the user can swipe left, right and up and will find the pages page2, page0 and page3 respectively, with the most logical transitions.

Timers

Enter "timeout:1000" in the Target field for a timed transition of 1000 ms
Enter “timeout:1000″ in the Target field for a timed transition of 1000 ms

Sometimes you want to load a new page without interacting. For example, you want to show loader screen, to tell the user it is getting something from the internet. After a few seconds this screen should be replaced by a result page. You can set this up in Fireworks.

  • Create a hotspot on the page that you want to replace, for example “loading”. It is not really important where you place this hotspot, as it will be “triggered” automatically with the timer.
  • Enter the url of the target page, for example “results.htm”, in the “link” field.
  • If you want you can add a transition to the “alt” field. In the “target” field of your hotspot, simple write “timeout=1000″. This will trigger the new page including transition within 1000 milliseconds. Of course you can set the time to anything you like.

Change orientation

Simply use the portrait page name and extend with "_l" for the landscape version
Simply use the portrait page name and extend with “_l” for the landscape version

TAP supports device rotation. You can show another page when the device detects a different orientation, from landscape to portrait and vice versa. There are two scenarios.

1. You have a certain page that as an equivalent in the other orientation. Especially for iPad you should design a specific layout for both orientations.

  • Create a portrait page in Fireworks, and give it a name, for example “list”.
  • Create another page, but now in landscape (so the canvas size is landscape, you don’t need to design everything 90 degrees rotated), name this page “list_l”
  • The “_l” extension is enough to make the prototype switch between list for portrait and list_l for landscape.

2. You want to show a different page when rotating the device, which is not by default the equivalent. The “_l” method might not work in this case, as you have probably more than one page that need to trigger the landscape page when rotating.

  • Create a small hotspot and enter the Link and transition in the Alt field.This hotspot can be 1px * 1px, as you don’t expect anyone to click on it.
  • In the Target field, you write “landscape” or “portrait”. So, if you view this page in your prototype, and you would rotate it to the orientation you just entered in the Target field, it will show the page you entered in the Link field.

Transparent overlays

Enter "keep" in the Target field if you want this page not to turn invisible after clicking this area
Enter “keep” in the Target field if you want this page not to turn invisible after clicking this area

This is quite a cool feature, if you know how to use it. As you know by now, the prototype is just a bunch of images made in Fireworks that overlap each other. Also, you can make great transparent PNG’s in fireworks. So, in theory, you can stack several transparent pages in the prototype. Useful if you have a message that pops up over the current page. Why not make a page in Fireworks with just the message, and use this on different pages. This is how it works:

  • Create a hotspot on a page and enter the Link and the transition (in the alt field)
  • In the Target field, enter “keep”. This means, the current page will still be visible when the new page has appeared.
  • You don’t want the page to be visible forever, so if you make a hotspot with in the Target “clear”, all kept pages will be invisible again.

If you like to use “keep” or “clear” in combination with other behaviours in the “target” field – like a timeout – then enter “keep” as last item in the field. For example: “timeout=3000,keep”.

Set a memory

Now we are getting to some more advanced features, that we occasionally use in our prototypes, but you might not need at all. Sometimes, you get in a dialogue from a certain page. But this same dialogue (a set of pages) can be entered from different starting points. It gets really confusing for the users if they don’t return to the original page. We introduced a little memory system, where you can set an unlimited amount of memories in the prototype, where you can direct the page back to.

  • Create a hotspot on a page (say the page is called “list”) enter the link and transition and in the Target field, write “m1“. You can also use m2m3 etc. The page ID is now remembered in memory slot 1.
  • Create a hotspot on any other page and instead of entering a specific page in the Link field, just enter “#m1“. Clicking this hotspot will go to the page “list”.

Add ons

You can add HTML layers over any page in your prototype. For this feature you need a little bit of HTML knowledge. You can add HTML elements to the prototype like animated GIF’s, video and form elements.

  1. Write the HTML and save this as pagename.htm in the “addons” folder. You replace “pagename” by the name of the page you want the HTML element to appear. Make sure to add a high z-index to the css attribute, so the HTML you wrote is on top of the prototype.
  2. Upload the pagename.htm to the server
  3. Go to the /build panel and rebuild your prototype.

Two examples:

Adding an animated loader gif

<img src=”addons/loading.gif” style=”position: absolute; z-index: 2000; top:396px; left: 0px;” />

The image loading.gif will be placed in the bottom left corner of the iPhone app.

A video thumbnail

<div style=”position:absolute; left: 60px; top: 145px”>
<video src=”link_to_your_video.m4v”
controls height=”150″ width=”200″ poster=”addons/your­_poster_image_video.png”>
</video>
</div>

Icon and startup image

Use /build to upload the application icon and the startup image. Remember, the startup images have specific dimensions and will only work in portrait mode. (Don’t know why, can’t find a solution)

  • For iPhone: 320 by 460 pixels
  • For Retina: 640 by 920 pixels
  • For iPhone 4 inch: 640 by 1136 pixels
  • For iPad 768 by 1004 pixels
  • For iPad Retina 1536 by 2008 pixels

Caching

Caching is really useful for presenting the prototype or user testing without an internet connection. When you are still working on the prototype, we do not advice to cache the prototype.

  • Always open the prototype and make it load completely
  • To clear the cache on your iPhone/iPad, go to “settings > Safari > Clear Cache. This will delete all browser data from the cache
  • If you experience problems, always first clear the cache, open the prototype with a connection, turn on flight mode and try again.

Link to external things

Instead of putting a page name (for example next.htm) in the “link” field, you can also put complete web addresses, but also things like mailto:, tel: and javascript:(‘alert’);

 

Write other things in the "Link" field

Protect with password

Sometimes, you work on a highly confidential project. As TAP is just a website, accesible via the internet, you might want to restrict the access to unauthorized users. TAP can secure your prototype using .htaccess and .htpasswd. You can set this up in the /build panel. It is not possible to use this function offline, so even if you cached your prototype, you need to have connection to get authorized. If you get in trouble (not be able to log in)  remove the files config.php, .htaccess, .htpasswd on the server and build again.

Common problems

  • Problem: I only get a “page not found” message
    Solution: If you have uploaded all the files, then you probably have not “build” the page yet. In the address bar, add /build to the path of the prototype and follow instructions.
  • Problem: You don’t see your prototype in Firefox
    Solution: Try another browser, if you really need to use Firefox, turn on Firebug and refresh (weird error, something to do with console logs)
  • Problem: You don’t have permission to write files to the prototype folder.
    Solution: Set the file access properties (chmod) of this folder so you can create and change files in this folder (777 works for sure)
  • Problem: Server cannot execute PHP
    Solution: Well, install PHP, or find a different host. It does not work without it.
  • Problem: Prototype is black. nothing happens
    Solution: If you “build” the prototype using the /build panel, check the page names. You have to enter the correct page name in the /build panel. Also check your page names for special characters. These are not allowed.
  • Problem: Cache does not work
    Solution: Clear the cache on your device (Settings > Safarie > Clear Cache). Load the prototype completely and try again without a connection.
  • Problem: Gestures don’t work
    Solution: Be sure to fill in the link field with a “#” (or of course with a page like page.htm). If you leave the field empthy, the gestures won’t work.

Useful tips

  • If you are checking out your prototype on the desktop (or another browser) simply press the letter “b” to return to the build page
  • To test out landscape-portrait behavior in a browser, use the shortcut “shift-arrowleft” or “shift-arrowright”
  • I like to delete all the files in the Library folder before doing an export from Fireworks, save a lot of OK-ing messages