iOS Prototyping With Adobe Fireworks And TAP (Part 3)

Advertisement

In the previous parts of this tutorial (part 11 and part 22), we looked in detail at the building blocks of our design in Fireworks (pages, shared layers, symbols, styles), and we started to make a demo prototype in Fireworks.

The demo prototype had six pages, linked together by hotspots, and each hotspot was customized for use with TAP3. (Which page will the hotspot link to? Which gesture will initiate the hotspot link? Which transition will animate once the appropriate gesture is used?)

Now that the six-page Fireworks PNG file is ready, it’s time to prepare it to be exported as a click-through prototype and then converted (with the help of the TAP extension) to an animated, gesture-based prototype that we can use on an iOS device.

Export The Fireworks Project

Create the Project Folder

First, we create the project’s folder. This folder will contain and organize our Fireworks project, as well as the TAP assets needed to create the prototype:

  1. Create the project’s folder, and name it CookbookApp.
  2. In the folder, create another folder named Library.

When you export the project from Fireworks, you will export into the Library folder. TAP will always look for project files in the Library folder, and it will create and place your prototype files in the project’s folder. If you forget to create a Library folder, Fireworks will remind you when you export the project.

Export as LBI

After you have created the project folder and have finished customizing all of your pages and hotspots, the next step is to export your Fireworks PNG in a format that TAP can understand. Ultimately, your work will be an HTML prototype (i.e. a set of HTML files) that can be viewed full screen on an iOS device; but because you will be using TAP to create the prototype, you cannot directly export to HTML in Fireworks.

Instead, export the project as a Dreamweaver Library (.lbi file format). While this format cannot be read directly by a browser, TAP will convert the LBI into HTML through the use of custom-developed PHP and JavaScript (jQTouch and jQuery) code later on.

Here are the steps:

  1. Start with the menu File → Export.
  2. In the “Export” dialog box, use the following settings:
    1. In the “Save as” field, type cookbook (the file extension is automatically added).
    2. Navigate to the directory you wish to save your project to.
    3. The “Export” drop-down menu should be set to the Dreamweaver Library (LBI).
      Note: If a warning dialog box appears, click “OK” and continue with the export:
      Warning dialog box in Fireworks, when saving in LBI file format4
      Warning dialog box in Fireworks when saving for the first time in the LBI file format.
    4. Create a new folder and name it “Library,” and then click “Choose.”
    5. In the “Pages” drop-down menu, select “All Pages.”
    6. Enable the “Put Images in Subfolder” option.
    7. Finally, when ready, click the “Export” button.

The “Export” dialog box should look similar to the one below:

Export dialog5
Export your prototype as a Dreamweaver Library item (LBI) using the settings shown in the screenshot. The LBI file must be saved in a folder named “Library” in order for it to work properly.

Download TAP

At this point, you have completed most of the hard work required to make the prototype come to life. You are almost ready to export your work, but before doing so, download the TAP utility6. This is a ZIP file with some folders containing PHP, jQuery and jQTouch scripts. Unzip the file; note that one of these folders is named “Library,” into which you will eventually copy (or directly export) your prototype’s LBI files.

Convert The Prototype Into A Working iOS Prototype

Upload

Your project is now uploaded to a Web server. Make sure that your Web server has PHP installed, because the TAP installation process requires it. First, we need to upload the TAP folder that we downloaded earlier (which now also has our project exported to the Library subfolder!) to a server that can execute PHP7.

Set File Permissions

Next, to make TAP work correctly, we need to set the correct permissions (also known as CHMOD8) to access the files and folders we have uploaded. You can set the file access properties using an FTP transfer program. No matter what software you use, the process is roughly the same. I use Transmit9 on the Mac, but you can use FileZilla10 (if you are on Windows) or another FTP client of your choice.

In Transmit, CHMOD is accessed via the “Get info” command:

File Permissions (CHMOD)
Set up the file permissions so that everyone can read, write and execute them (known as “777” in the octal numeral system) to ensure that the prototype runs correctly.

Set the access to “777,” either by typing 777 in the “Octal” field or by checking all of the boxes for “Read,” “Write” and “Execute.”

Note that for the purpose of this article, these file permissions are for use on the remote server on which you will be hosting the prototype, not for use on a local server (although you could, of course, run TAP on a local server, as long as you have Apache and PHP running on your Mac or Windows machine).

Convert to iOS Prototype

The next step is to open up the dashboard where all of the settings are available to convert your project into a real HTML website (i.e. HTML prototype).

First, load the “Build” panel in Safari on your iOS device by opening http://www.yourwebsite.com/path_to_prototype/foldername/build (see an example of a build panel11).

This step can also be done by loading the Build panel on a desktop machine, but it is still recommended that you use the Safari browser.

TAP Build Panel12
TAP’s Build panel (Larger version13)

In the Build panel, you can configure the settings for the prototype. You can also upload the home-screen icon and the startup screen from here. To save your settings, click “Build prototype.” If you have made any mistakes in the previous steps of this tutorial, the page will notify you with a warning at this point.

If there are no errors, click the “Go there” link, which serves as a shortcut to the prototype.

Note: You can also manually go to the website by typing in the following address: http://www.yourwebsite.com/path_to_prototype/foldername/. This is useful for when you are using the Build panel on a desktop to set up the prototype.

You will see a black screen and maybe a brief flash of your website appear for a second, which is normal; this page is not yet your prototype. One final step is needed, although the step you take will depend on the browser you are using to view the prototype:

  • Safari
    To actually see your prototype, you must add a bookmark for this page and add the bookmark to the home screen.
  • iCab Mobile
    I have found that iCab Mobile is a better browser to showcase a prototype, because you can view it in full screen with no chrome, and also view it offline. (Details on using the browser will be shared later on.)

Note: While iCab provides a more robust and sophisticated environment to work with your prototype, as of the time of writing, the newest version of iCab can’t directly build the prototype. However, there is a workaround that allows you to use iCab. To use iCab, first open and run the Build panel in Safari. Once the “Build prototype” button has been pressed in Safari and the black screen appears with a brief flash of your prototype (as described earlier), you will be able to copy the URL into the address bar and then paste it into iCab Mobile.

Icon and Startup Image

Use the Build panel to upload the application’s icon and the startup image (you can do this only in the Safari browser on a PC or Mac, not on an iOS device). It does not matter how these files are named. Putting them in the add-ons folder is recommended.

Note that startup images do not load reliably for some reason. Sometimes they show up as the prototype is loading, and other times the startup image is skipped and the first page of the prototype is loaded instead. I am not sure why this happens, but whatever happens, your prototype will still load correctly.

Remember that the startup images have certain dimensions. For example:

  • iPhone 3
    320 × 460 pixels
  • iPhone 4 and 4s (Retina)
    640 × 920 pixels
  • iPhone 5 (Retina)
    640 × 1136 pixels
  • iPad 2
    768 × 1024 pixels
  • iPad 3 (Retina)
    1536 × 2048 pixels

(The newest version of TAP, 0.47, officially supports all Retina display resolutions.)

App Icon
An example of an app icon that can be used when your HTML prototype is launched from the iOS home screen, to make it feel more like a real app.

Updating the Prototype When Changes Occur

Here are the steps for updating the prototype if needed:

  1. Make the changes in your Fireworks PNG document.
  2. Export the file again to the Dreamweaver Library format (LBI), and replace the folder on the server. (To be on the safe side, delete the folder on the server first and then upload the new folder.)
  3. Open the Build panel in your browser, and click “Build prototype.”
  4. Add the prototype to the home screen of your iOS device.
  5. Launch the prototype from the home screen. Done!

Some Tips

  • When you are ready to export the new LBI files, delete all of the files in the “Library” folder before exporting from Fireworks. This will save you from having to OK a lot of messages later on.
  • If you’ve fixed technical bugs in the prototype in Fireworks but don’t see them updated in the browser, try clearing the browser’s cache (the browser may be loading older cached files).
  • Remember to rebuild new exports before testing changes in the browser.

Using the Prototype

Recommended Browsers

View the prototype that you export to your iOS device in the iCab Mobile browser, because it allows for full-screen viewing and offline Web caching. This makes for a reliable and more realistic experience when showing the work to clients.

To view and test the prototype on a desktop computer, Apple’s Safari browser (available for both Mac and Windows) is recommended.

Keep in mind that, from time to time, the browser on a desktop computer might render things slightly different than on an iOS device (in one case, my computer’s browser displayed a slide-in transition, whereas on the iPad a fade was displayed). In such instances, trust iOS’ rendering because that is what TAP was designed for.

Setting Up iCab Mobile’s Full-Screen Mode

Download iCab Mobile14 from the Appstore, and launch it.

iCab Mobile Icon

Below is an example of a full-screen set-up. To get there, tap the settings button (i.e. the gear icon in the upper-right corner).

iCab Settings Icon
iCab settings

iCab Full Sceen IconSetup
Configure the full-screen heads-up display (HUD) settings to match this screenshot, so that you can exit full screen without being distracted by extraneous buttons. You can experiment on the placement of the button to exit full screen if it is often accidentally pressed when users are testing the design.

Then, tap the button for the full-screen icon. Remove all buttons except for “Exit” (which returns the user to non-full-screen mode). To do this, click on the icon slot that you wish to change, and select none (represented by a -/- ) from the list of options to make that icon blank. Also, turn transparency all the way down to make this control as unobtrusive as possible.

Set Up Offline Viewing

If you want a bulletproof plan to show your prototype regardless of whether there is Wi-Fi or 3G access, then set up the HTML iOS prototype for offline viewing by saving it in iCab Mobile’s cache.

First, click the settings icon (the gear icon in the upper-right corner).

iCab Settings Icon

“General Settings” will automatically be selected. In the right pane, scroll down to the last section, and set the “Disk Cache” to 100 MB. This should be enough space for even the largest of prototypes (if this is the first time you are using iCab, click “Delete Disk Cache”).

iCab Offline Settings
To set up iCab to for offline viewing, turn offline mode to “On,” and set the disk cache to the highest amount, which is 100 MB.

Now that the cache has been set up, you’ll need to create an offline bookmark to save the iOS prototype to the cache. Enter the URL of the page that you would like to bookmark, and then click on the “Send to” icon (i.e. the box with an arrow coming out of it). Next, select “Add to bookmarks,” and turn on “Offline bookmarks” in the pop-over.

iCab - create offline bookmark
To create an offline bookmark, turn on the “Offline bookmark” option.

Finally, click “Save.”

Viewing Your Bookmarks Offline

By turning on offline mode, iCab Mobile will look for the cached offline bookmark, instead of going to the original online URL of your prototype. You need to explicitly switch on offline mode in the browser only when an active Internet connection is available but you still want to load the Web page offline from the cache. However, if no Internet connection is available (for instance, if airplane mode is on or no Wi-Fi or cellular connection is available), then iCab will automatically use offline mode, so you do not need to explicitly switch it on.

Open an Offline Bookmark

Tap the bookmarks icon to open the bookmarks pop-over. Then, click the “Offline” button next to the link that you want to browse offline. (Don’t click the title of the bookmark, because that would instruct the browser to open it from an online connection, not from the cache.)

iCab - load offline page
Tapping the title of the bookmark will send you to the online version of the bookmark. Tapping the “Offline” button will send you to the saved offline version of your website via the cache.

When using offline mode, remember to set the cache to a larger size in the settings (bigger is better). If you add an offline bookmark, it will be saved to the cache; so, if you make changes or bug fixes to your website, remember to delete the cache and add the offline bookmark again so that the updated version will be loaded!

Conclusion

There are many ways to create wireframes, click-throughs and prototypes. In the end, what matters is that the process of creation is fast and accurate and that the output is of a high enough fidelity to generate the appropriate level of feedback.

Having tried many programs to design iOS prototypes, I have found that using Adobe Fireworks in conjunction with TAP is the most efficient and effective method available. In Fireworks, I can quickly and easily draw whatever I’ve dreamed up, and the pages, shared layers, symbols and styles ensure that my prototype works as a cohesive system that can be easily updated when needed.

Then, using TAP, I can bring my wireframes to life on an iOS device, using animated transitions initiated by gestures.

If you haven’t yet, try Adobe Fireworks15 together with TAP16. The process of using Fireworks and TAP is so simple and fast that you will find you get feedback earlier in the design process and iterate with less effort than ever before, resulting in stronger and more refined designs.

Further Resources

The following articles, tutorials and video tutorials will help you get started with Adobe Fireworks.

General articles about Adobe Fireworks:

How Adobe Fireworks is used at Cooper (my place of work):

Articles about Fireworks layers, pages and objects:

Articles about Fireworks symbols and styles:

Articles about prototyping and wireframing with Fireworks:

Questions?

I know this has been a lengthy read, but hopefully fun, too.

Still, it’s possible that I’ve missed some things, so I’d love to answer any questions you may have or hear your feedback about this technique of prototyping with Fireworks and TAP for iOS.

Further Reading

(mb) (al)

Footnotes

  1. 1 http://www.smashingmagazine.com/?p=112574
  2. 2 http://www.smashingmagazine.com/?p=113769
  3. 3 http://unitid.nl/2011/03/touch-application-prototypes-tap-for-iphone-and-ipad-using-adobe-fireworks/
  4. 4 http://fireworks.smashingmagazine.com/wp-content/uploads/2012/04/13-libarywarning1.500.png
  5. 5 http://fireworks.smashingmagazine.com/wp-content/uploads/2012/05/14-savetolibrary1.png
  6. 6 http://unitid.nl/category/tools/
  7. 7 https://en.wikipedia.org/wiki/PHP
  8. 8 https://en.wikipedia.org/wiki/Chmod
  9. 9 http://panic.com/transmit/
  10. 10 http://filezilla-project.org/
  11. 11 http://ipro.to/tap_ipad/build
  12. 12 http://fireworks.smashingmagazine.com/wp-content/uploads/2012/04/TAPbuildPanel-large.png
  13. 13 http://fireworks.smashingmagazine.com/wp-content/uploads/2012/04/TAPbuildPanel-large.png
  14. 14 http://itunes.apple.com/us/app/icab-mobile-web-browser/id308111628?mt=8
  15. 15 http://www.adobe.com/products/fireworks.html
  16. 16 http://unitid.nl/2011/03/touch-application-prototypes-tap-for-iphone-and-ipad-using-adobe-fireworks/
  17. 17 http://medialoot.com/blog/fireworks-for-beginners/
  18. 18 http://tv.adobe.com/watch/learn-fireworks-cs4/getting-started-01-understanding-fireworks/
  19. 19 http://www.pixelyzed.com/pixelforge/whychoosefireworks/
  20. 20 http://layersmagazine.com/fireworks-101.html
  21. 21 http://layersmagazine.com/fireworks-101-part-2.html
  22. 22 http://tv.adobe.com/watch/fireworks-tips-and-tricks/rapid-prototyping-with-fireworks-cs3/
  23. 23 http://www.senocular.com/fireworks/tutorials/mighthavemissed/
  24. 24 http://fireworks.smashingmagazine.com/2012/06/11/developing-a-design-workflow-in-adobe-fireworks/
  25. 25 http://fireworks.smashingmagazine.com/2012/10/12/adobe-fireworks-enterprise/
  26. 26 http://fireworks.smashingmagazine.com/2012/10/12/adobe-fireworks-enterprise/
  27. 27 http://www.adobe.com/devnet/fireworks/articles/cooper_interactive.html
  28. 28 http://tv.adobe.com/watch/fireworks-tips-and-tricks/cooper/
  29. 29 http://www.adobe.com/devnet/fireworks/articles/cooper_prototyping.html
  30. 30 http://layersmagazine.com/fireworks-cs4-pages.html
  31. 31 http://help.adobe.com/en_US/fireworks/cs/using/WS4c25cfbb1410b0021e63e3d1152b00d169-7ffc.html
  32. 32 http://help.adobe.com/en_US/fireworks/cs/using/WS4c25cfbb1410b0021e63e3d1152b00db4b-7fcd.html
  33. 33 http://help.adobe.com/en_US/fireworks/cs/using/WS4c25cfbb1410b0021e63e3d1152b00db4b-7fd4.html
  34. 34 http://tv.adobe.com/watch/learn-fireworks-cs4/understanding-styles-and-symbols/
  35. 35 http://help.adobe.com/en_US/fireworks/cs/using/WS4c25cfbb1410b0021e63e3d1152b00db4b-7f7e.html
  36. 36 http://www.komodomedia.com/blog/2010/04/the-power-of-symbols-in-adobe-fireworks/
  37. 37 http://unitid.nl/2011/03/touch-application-prototypes-tap-for-iphone-and-ipad-using-adobe-fireworks/
  38. 38 http://fireworks.smashingmagazine.com/2012/06/25/create-interactive-prototypes-with-adobe-fireworks/
  39. 39 http://fireworks.smashingmagazine.com/2012/07/03/interactive-prototypes-timesavers-adobe-fireworks/
  40. 40 http://www.adobe.com/devnet/fireworks/articles/atv_fw_interaction_design.html
  41. 41 http://www.adobe.com/devnet/fireworks/articles/rapid_interactive_prototyping.html
  42. 42 http://www.adobe.com/devnet/fireworks/articles/fireworks_web_design_css.html
  43. 43 http://www.smashingmagazine.com/2009/08/11/how-to-create-your-first-iphone-application/
  44. 44 http://www.smashingmagazine.com/2012/08/02/get-started-writing-ios-apps-with-rubymotion/
  45. 45 http://fireworks.smashingmagazine.com/2012/07/03/interactive-prototypes-timesavers-adobe-fireworks/

↑ Back to topShare on Twitter

Shlomo "Mo" Goltz is an Interaction Designer and User Researcher at Hearsay Social. There he crafts experiences that enables those in the financial sector to develop, maintain, and enrich relationships with customers via social media. Shlomo combines qualitative and quantitative research-based methodologies to inform his design process, with a focus on creating enterprise software that feels as delightful to use as consumer products.

Advertising

Note: Our rating-system has caused errors, so it's disabled at the moment. It will be back the moment the problem has been resolved. We're very sorry. Happy Holidays!

  1. 1

    Awesome. We look forward to trying this out soon.

    I wanted to point out something regarding iOS screen sizes. You mentioned:

    “iPhone 3
    320 × 460 pixels
    iPhone 4 and 4s (Retina)
    640 × 920 pixels
    iPhone 5 (Retina)
    640 × 1136 pixels”

    For iPhone 3, 4 and 4s you are leaving out the dimensions that the status bar takes up at the top, but for iPhone 5 you are including it. I do believe it should be 640×1096.

  2. 3

    This is a very complicated way to so something which should be quite easy if using the right tools.
    Wrap this up in an easy to use package, then it may be a win…

    • 4

      It may seem complicated at first, but if you are using Fireworks as your primary tool (which I would recommend in many cases), this can become second nature pretty easily. Its not the simplest workflow in the world, true – but I don’t think it slows me down after having done it many times. I’d recommend giving it a go, as it is advantageous to do the design and prototyping work in the same program. I understand if its not for everyone though.

    • 5

      It looks complicated, but it isn’t, believe me. After setting up everything on server side, updating the prototype it is just a few clicks. And the performance of animations is the best I’ve seen, almost like in native apps.

  3. 6

    Thanks for all the Fireworks articles, they are great!

  4. 8

    Thanks for all the articles. I was able to prototype quickly using Fireworks/TAP and isn’t complicated at all. After the initial setup the performance is almost like in native apps. It took me a while to wrap my head around the popups integration. I wish I can do some logic using forms input/select fields in my prototypes…(click an input filed > keyboard slide in > type > submit). Overall this is one of the best Fw-iOS proto tools.

  5. 9

    Hi, cool article! I really like Fireworks. I wonder if any of you tried prototype with Indigo Studio? I came across this app the other day and I just want to know what do you think about it. It is free and looks quite impressive…

    • 10

      I had a go with Indigo studio the other day. I was impressed. It seems very well made, and the usability is clearly well-honed. But from what I can see there are two things that make this Fireworks + TAP method preferable:

      1) Wireframes & visual design in one program
      2) Indigo provides no way to present the prototype on a mobile device because the prototype uses Silverlight

      2) Is being addressed at the moment and HTML5 output is in development but they don’t know how long it will take

    • 11

      Indigo Studio is quite nice, but its very early in development and not as robust to use for daily work, yet… I’m keeping tabs on Indigo though, as it looks very promising.

  6. 12

    Dragiša Rebrinović

    February 24, 2013 10:48 am

    Interesting article.

  7. 13

    Fireworks is an awesome tool for prototyping iOS apps. I have been using it with the iOS templates from http://guitoolkits.com and I am quite productive with it.

    I haven’t tried TAP yet, but will definitely give it a spin :)

    Thanks for the tutorial!

  8. 14

    Thanks so much for the tutorial! I’m going to use this for my prototype!
    A question for you:
    My app has the main navigation as icons docked at the bottom of the screen. Is there a way to prototype this so they stay docked when the page is scrolled up and down?

  9. 16

    andrew McMillan

    March 18, 2013 8:40 pm

    This looks really cool. I am trying to test it out for my year 10 ICT students, we are creating some designs/prototypes for IPads. When I click on the index file in the build folder using safari, all I get is a page of text. Not the nice TAP build page that you refer to earlier in the article. If I open it in chrome I get the build page but also a heap of text. The build button doesnt seem to do anything, the text tells me that the page is read only. I have all of the write permissions.
    Can anyone tell me if I am doing something ridiculously silly please.

  10. 18

    You should check out ProtoTouch (prototouchapp.com), a prototyping tool for mobile apps. Really easy to use: 1. You add your screenshots or wireframes from DropBox, your iPhone Library o Camera, you can even add your prototype icon, 2. link the images and add transitions, 3. upload an share, 4. You can either see your prototype online or install it on any iOS device as a real app!

  11. 19

    I realize that no one may respond to this, but with the flickering hope someone does, I ask this question. When I am trying to export the Cookbook file to an lbi, Fireworks says “an internal error occurred.” Then it says it cannot complete my request. I really want to finish this tutorial, but this error is a total roadblock. Anybody have any solutions to this?

    • 20

      try to export to something else (image…) then save the file, and try to export to lib again. it works for me.

  12. 21

    I don’t seem to be able to access the Build Panel. In the browser I’m keying in:

    http://www.sayhello.com.au/path_to_prototype/iprototype/build

    is this correct? (my domain is correct)

    The result I’m getting is:

    404 Not Found
    The resource requested could not be found on this server! Powered By LiteSpeed Web Server
    LiteSpeed Technologies is not responsible for administration and contents of this web site!

    When I browse to http://www.sayhello.com.au/iprototype and save it to my home screen then open it, I just get a black screen.

  13. 22

    On icab mobile, how do I switch the status bar to show in full screen mode?
    Hope to help get an answer here, thanks!

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top