Touch Application Prototypes (TAP). For iPhone and iPad, using Adobe Fireworks

Datum: 20 maart 2011 | Door: Matthijs | Categorie: Blog, Tools | 103 reacties

tap_prototyping_iphone

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

Try out one of the demo’s:

http://ipro.to/tap_ipad (Enter this URL in mobile Safari on you iPhone.)
http://ipro.to/tap_iphone
http://ipro.to/tap_iphone_retina

Or download now

Download version 0.46 of TAP

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

Download the ZIP file for this article, it contains some folders with PHP and jQuery and jQTouch scripts.
Create the screens with Fireworks as you would normally. Every application state should be made as an individual page.
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.
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).
Upload your complete set of TAP files to a server that can execute PHP.
Set the file access properties (chmod) of this folder so you can create and change files in this folder (777 works for sure)
Open the “/build” panel in your browser (Safari works best) by opening http://www.yourwebsite.com/path_to_prototype/foldername/build (example of a build panel)
In the /build panel you can set up your prototype. You can also upload the homescreen icon and start-up screen from here.
Save the settings and click “build prototype”. If you have made some mistakes, the page will tell you.
Get your iPhone or iPad and go to the URL in Safari (http://www.yourwebsite.com/path_to_prototype/foldername/). Add the bookmark to you homescreen and run the app from there.

Export settings in Fireworks

Rebuilding the prototype

Make changes in your Fireworks document
Export the file to Dreamweaver Libary items and replace the folder on the server
Open the “/build” panel in your browser and click “build prototype”.
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

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
fadein, fadeout: 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

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

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,slideleft,swiperight,page0,slideright,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

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

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

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.

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 m2, m3 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.

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.
Upload the pagename.htm to the server
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

For iPhone: 320 by 460 pixels.
For Retina: 640 by 920 pixels
For iPad 768 by 1004 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 op 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 in Safari (or another browser) simple 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

103 reacties

103 Reacties op “Touch Application Prototypes (TAP). For iPhone and iPad, using Adobe Fireworks”

pojitonov zei om 19:15 op 19 oktober 2010:

Works perfectly thanks!
Ask Ullerup zei om 10:55 op 20 oktober 2010:

Hi.
I am trying to make i prototype for Iphone 4. I create a prototype in fireworks with dimensions 960 * 640 but the iphone does not use the retina effect. Is it possible to use retina or should i just make the prototype 480 * 320?
Matthijs zei om 14:28 op 20 oktober 2010:

@Ask I will look into it as soon as I can. Clearly we should test this a bit further. If you are in a hurry, I suggest you stick with the 480 * 320 for now. Greetings from Anders btw.
Ask Ullerup zei om 15:27 op 20 oktober 2010:

@Matthijs Ok, that sounds just perfect. I will play around with 480 * 320. I also have a 3G iphone for testing so no worries. Say hi to Anders and hope you have a nice time on Iceland.
Matthijs zei om 16:43 op 20 oktober 2010:

@Ask. I think we fixed it. I uploaded a new zip with the updated files.
Ask zei om 13:27 op 22 oktober 2010:

Hi
Works like a charm now. Thank you very much for so speedy update on the solution.
Gordon zei om 21:19 op 26 oktober 2010:

Thanks for this great tool. This has been extremely helpful for testing out the user flows before we get into development.

I’d also like to share it with team members using Android – is there a version that works with that?
Per zei om 10:52 op 1 november 2010:

Thanks for a great way to make quick and usable prototypes!

Just a quick question.. is there an easy way to get rid of the status bar at the top, the one with time/battery/operator etc?

Thanks!
Matthijs zei om 20:40 op 1 november 2010:

@Gordon,
We are still working on the Android version. This is a bit harder as we are trying to make the hard keys (menu and back) work as well

@Per,
I am afraid this is not possible as it is a web application. Apple does not allow to hide this bar in web apps.
Rob zei om 01:15 op 12 november 2010:

Great tool!
How would you recommend creating a popup? For both the “alert” type and the “slide-from-the-bottom” type?
Zanoza zei om 01:06 op 13 november 2010:

It’s a wonderful tool! THANK YOU!
Eventually I figured out my problem with build panel. I accidentally exported libraries in Dreamweaver twice under different names, wreaking havoc. Deleting all local and server files and (carefully!) starting from scratch worked very well, and Build page started working.

Now I am struggling again, this time with including an animated .gif. The only difference I can find between your NordiChi2010 and my page is that quotation marks in mine turn into â€.

Yours:

Mine:

Any suggestions on how to fix this?
Matthijs zei om 15:40 op 16 november 2010:

@Rob Just design a page in Fireworks with that alert. Than use the “pop” transition to show it. For the “slide-from-the-bottom” use the “slideup” transition. Use the “back” function to close the popup and return to the previous screen. All transitions and the back command should be entered in the “alt” field of the hotspot.
Nina zei om 14:51 op 16 januari 2011:

This is a really nifty prototyping tool… keep up the great work!

One thing I was wondering… the page transitions work well, but are there any plans to support modal transitions? E.g. if I want to prototype a thumbnail which pops out into a modal window (the transition would not originate from the centre of the screen, but from the thumbnail itself).
Matthijs zei om 10:19 op 28 januari 2011:

@nina If you dive into the code, you will find out that every transition is based on CSS3 webkit animations. This means you can make many custom animations, including the animation you describe.
Leslie Carter zei om 13:07 op 16 maart 2011:

This is a great tool.

Do you have any samples for an iPad? I’m not sure how big to make the image for the outline of the iPad, that is a file used the same way as your iphone.pgn.

Is there a typo in the document describing how to use this method concerning the size of the iphone startup image? The document says it should be 320 by 460, but all the images in your earlier “iprototype” sample were 320 by 480?
Leslie zei om 16:05 op 18 maart 2011:

I made an iPad prototype using the dimensions given here, 768 by 1004 pixels, but it turned out way to big for viewing on a iPad, about four times to big. Anyone else have this issue?
Matthijs zei om 19:02 op 20 maart 2011:

@Leslie Carter, I added some iPad examples including source files. I specified the resolution of the iPad canvas in the post now.
@Leslie I have never seen this issue, did you try it out with TAP 0.43?
Michel zei om 11:17 op 21 maart 2011:

Always nice to see someone pushing Fireworks to its limits!

Keep up the good work — I think you should perhaps try to “sell” your great prototyping app to Adobe Fw Team…
Iain zei om 11:47 op 22 maart 2011:

Hi, this looks to have a lot of potential especially if you develop a version for Android too. The problem is I can’t get the iPhone version to work… I get these 2 errors –

Warning: Wrong parameter count for sha1() in /nfs/c02/h10/mnt/43098/…/build/index.php on line 80

Fatal error: Call to undefined function: str_ireplace() in /nfs/c02/h10/mnt/43098/domains/…/build/includes/functions.php on line 303

Any thoughts?
Matthijs zei om 19:51 op 22 maart 2011:

Hi Iain. I think this is because your server does not support PHP5. I have send you a version of TAP where I took out the PHP5 specific functions. With this version it is not possible to password protect you prototypes.
manu zei om 14:41 op 1 april 2011:

Hi TAP team!

This is really sweet. We’ve been playing with it a lot, and it really works nicely.

But we still have a problem we can’t solve:
when we make a transition between a 480p long image to a 1480p for instance (just to say a much longer one, therefore heavier, around 650kB) there always is a glitch.

Do you have any idea of how to solve it, or have we reached the limits of web app memory?

Thks for your help and keep up the good work!
Matthijs Collard zei om 20:28 op 1 april 2011:

Hi Manu, there is indeed a memory limit, but it mostly the problem occurs if the total size of you prototype exceeds 6MB. It is not really dependent of the length of your page. You can however try to set your images to a very low jpg quality to make them smaller, see if it solves the problem. (use the “optimize” panel in Fireworks.
Uelsimon zei om 01:43 op 3 april 2011:

Is there a way to track google analytics on a TAP?

I dont know where that info would go? in the lbi?…

thanks
-€
Marius zei om 13:22 op 5 april 2011:

I’ve been using your technique for prototyping for iOS devices for a year now, and with TAP you’ve really upped it. You guys are my Heroes.
Matthijs zei om 20:04 op 7 april 2011:

@Uelsimon, You can add the analytics script to indextemplate.shtml. It will not give you page by page statistics, but it will tell you how many users opened the prototype (or where they are from etc).
Alejandro zei om 02:53 op 11 april 2011:

Hi Mat
I have a Problem doing that. I have done everything according to the example, I upload all files and subfolder in to the Library folder but when I click on BUILD this is the answer:

No image found for page “page3″. Check if you exported images to the “images subfolder” when exporting from Fireworks
No image found for page “index”. Check if you exported images to the “images subfolder” when exporting from Fireworks
No image found for page “page2″. Check if you exported images to the “images subfolder” when exporting from Fireworks

what I’m doing bad wich is my mistake?
thanks.
Sergio zei om 15:45 op 11 april 2011:

Hi guys. I’m becoming a huge fan of TAP and I have a suggestion:
On the iPad i’m trying to get horizontal swapping not for the whole screen but only for one region, I mean:
I can tap (or swap) the screen top part, and the button part will still remain in the same position. To achieve this I’m using:

-A transparent png with the new screen region that I want to show.
-The Target field = keep
-The slideleft transition.

But with this transition, the current screen also moves to the left and then re-appears. What I did is remove the lines jqtouch.css:211-213 with the animation: .slideleft.out

In this way, the current screen doesn’t move and the rectangle with new one enters from the right.

Maybe you can include this slightly different animation by default in the future

I hope you got what I said, otherwise just ask me

Rgds
Matthijs zei om 16:43 op 12 april 2011:

@Alejandro. It seams like you did not check the box “put images in subfolder” or that you have changed the name of the image folder. Check if the “images” is on the server and if the images are in there. You can send me a link if you like so I can check it out.
Matthijs zei om 16:46 op 12 april 2011:

@Sergio. Good suggestion! We can add an extra style for this transition. Removing the .slideleft.out will have an effect on the regular slideleft functionality. So we have to come up with a different name for this class. Any suggestions? slideleftkeep?
Brian zei om 04:45 op 13 april 2011:

This is awesome. I’m excited to see what’s next.
Thank you for sharing!!
Ben zei om 00:32 op 15 april 2011:

This is hands down the best prototyping framework for mobile devices.
The added ability to incorporate HTML and create my own CSS transitions is brilliant.

I am trying to use those custom HTML inputs to simulate input without having to mock up all the iPhone keyboards, but whenever I input the letter “B”, it drops me to the build screen. Is there a way to disable this for mobile Safari?

Thanks,
Ben
Ben zei om 01:41 op 15 april 2011:

Ahh… got it, just commented out those line. Good documentation, thanks!
Alejandro zei om 21:08 op 19 april 2011:

Thanks a lot Matt for your help.
For the rest of you my mistake was when I selected the images subfolder fireworks call the subfolder “img” and I was changing the name to “images” in the server, so make sure that the subfolder name is images.
Chris zei om 22:15 op 20 april 2011:

This is some great work you’ve done here. Thanks!
Javier zei om 09:28 op 21 april 2011:

Hi TAP team!
Just to say it’s amazing. Congratulations!
Will it be possible than, in the next versions, the TAP could identify the mobile device so it could resize automatically (even if it means I do the different version sizes of the same prototype)?
Thanks a lot!
Howard zei om 16:05 op 29 april 2011:

Does this tool have swiping capabilities that go to a specific page rather than just the next slide? Ideally, I’m looking for swiping capability with hyperlinks.
Matthijs zei om 07:41 op 3 mei 2011:

@Howard. You can swipe to any page you like
Julie Stanford zei om 17:29 op 5 mei 2011:

I am super excited about this tool and have gotten everything set up in Fireworks but when I go to the Build screen and hit Build in the upper right corner and nothing happens. I’ve checked the permissions and it looks like everything is a go there, but literally hitting Build does nothing. Also, your instructional text refers to Saving but I didn’t see a way to do that…so am I missing something? I have tried it in all browsers on a PC and on a Mac. I’m happy to send you the URL of the build screen directly if you want to take a look yourself.
JingLing zei om 14:12 op 6 mei 2011:

Hi, When I try to run it after uploading and changing the permission, it returns Internal Server Error. I can access build/includes/indextemplate.shtml file but /build/index.php always return this 500 internal server error. Do you have any idea to fix this? Does this mean the php on the server is not good?
JingLing zei om 14:36 op 6 mei 2011:

Sorry for the last post. It got fixed… it was server end problem…
Angelica zei om 14:08 op 9 mei 2011:

Hi
I’m trying to create a global nav-bar at the bottom of the iphone screen while still being able to scroll and swipe to different pages. I think that Sergios previous post about splitting the screen up and swipe just a part of it will help but I can’t get it working, and Im not sure it will solve the scrolling issue.

Any ideas?

Thanks
Brian zei om 20:20 op 14 mei 2011:

Is there any way to cancel a timer when the users clicks a link?

I have this timed sequence, all based on the same template with the same nav:
Page A1 (1500ms timer) -> page A2 (1500ms timer) -> page A3

If I click a hotspot in A1 (which links to B1), it shows the correct page (B1) for a moment and then redirects to A2 since the redirect timer was already started when A1loaded.

is there any way to cancel the timer if a link is clicked?

Again. Fantastic prototyping tool. Thanks!
Matthijs zei om 19:27 op 18 mei 2011:

@Angelica We are working on this feature, but is not supported yet.
@Brian I am aware of the problem. I should change the code so a timeout is stopped when the user interacts with the screen. It is not possible with the latest build yet
GB zei om 23:00 op 23 mei 2011:

Is it okay to use iPhone 3 sizing/resolution on iPhone 4 for a lower-res lower weight experience?
JC zei om 03:39 op 24 mei 2011:

Matthijs,

TAP is excellent! It is easy to setup and works really well. I have two questions:

1. How can I get the device frame to show up online? I selected iPhone 3 in the build page, but it doesn’t show up in my browser.

2. Is there any way to change the cursor from an arrow to a clear/white disc?

Thanks.
JC zei om 15:28 op 24 mei 2011:

Ignore my previous post. When I turned off caching, I could see the device frame. And the cursor isn’t a big deal, so no worries.

Thanks again for a fantastic framework!!
Rens zei om 12:29 op 25 mei 2011:

He matthijs, het werkt allemaal super! ziet er heel professioneel uit! dank daarvoor! om mijn protoytpe naar een hoger niveau te tillen zou ik graag een video’s en een .swf. toevoegen deze dienen ook gecashed te worden. is dit mogelijk, en hoe krijg ik het voor elkaar? ik haal dat niet uit de beschrijving
Rens zei om 13:05 op 25 mei 2011:

Hi Matthijs, another thing, is there a way to ‘fix’ the app to the screen so that it will not move when draged up and down?

And yet one more thing;
i’ve created 2 swipe hotspots, they work super but they also preform an action when tapped (they go back to the previous screen with a ‘fade transition and i don’t want that.
gk zei om 01:04 op 26 mei 2011:

I am trying out the TAP but when I try to build, nothing happens. It seems the Build functionality is not working. I downloaded the 0.44 version.
Lisa Rose zei om 19:13 op 26 mei 2011:

Hey, yeah, I am having trouble. I have checked my PHP5 settings in my cpanel on server, i have changed permissions to 777 and i keep getting 500 error. Looked at the error log but don’t know what any of that means.

advice? really looking forward to trying this…

thank you!!

Lisa Rose
Matthijs zei om 11:18 op 27 mei 2011:

@rens. It is not possible to cache videos to iOS from a webapplication. I have searched for a solution for hours, cannot be done as far as I know. And swf? Isn’t that Flash , on an iPhone?

@rens 2. It s nt possible at the moment to fix elements on the screen. We are working on it in version 0.45.

@rens 3. This must mean you also entered something in the “link” and the “alt” field. Just use “#” in the link field and it will not respond to a tap.

@gk and @lisa, can you send me the URL so I can check it out? matthijs@unitid.nl
gk zei om 13:41 op 27 mei 2011:

Matthijs, I could fix the build issue – it was on my end. The build works now – thanks.

@lisa I also got the error when I changed the permissions to 777, but permissions of 755 works just fine.
Rens zei om 15:03 op 28 mei 2011:

@Matthijs!
thanks for your reply, they ll make sense!
I was just wondering, since you have the ‘back’ option, it would be great if there would be a ‘next’ button. it would save a lot of hassle in fireworks! something like:
swipeleft,next,flipleft,swiperight,back,flipright
Hudson zei om 21:06 op 30 mei 2011:

I’m just guessing here but can’t you hide the status bar if you load the web app in an alternate browser from the app store; one that has that option that is. Would that be a problem, though, as the web app may not have content caching? I’m planning a demo that really needs to hide the status bar. Thoughts?
yan zei om 11:03 op 2 juni 2011:

Just wanted to say thanks. This is a wonderful prototyping tool for me Works great !!
Matthijs zei om 14:10 op 5 juni 2011:

@rens That means we should be able to detect the page order in Fireworks. This could be achieved by keeping the alphabet in mind when naming your pages. I have been thinking about a method like we do with orientation (using the “_l” in a pagename. Maybe use something like _s1, _s2 and _s3 in page names to create a set of sliding pages.

@hudson That could be a good idea. I don’t know if there is an app that does this, but if you find (or make) one, let me know!

@yan thanks!
bob zei om 17:56 op 6 juni 2011:

What’s the right approach when you need to make changes to an existing prototype? Should you start fresh, or go to build screen and build again?
Matthijs zei om 18:54 op 6 juni 2011:

@bob Just upload the new exported files (lbi and image folder) and hit build
Andy zei om 19:16 op 7 juni 2011:

Bug in version 0.45 of TAP.

—
Line 473 in build/index.php
…
alert(“Try “)
…
have a critical error.

I comment this alert for correct work.

Thanks
Andy zei om 19:18 op 7 juni 2011:

Also, I using error_reporting(0) in “build/index.php” script for hide php-notices.
Andy zei om 19:22 op 7 juni 2011:

Oooh, I forgot to say thanks. You’re the best! ))
Dan zei om 22:18 op 9 juni 2011:

Fantastic work guys – much appreciated!

Is anyone else getting the following issue:

Whenever I use the transparent overlay, the overlay itself loads fine but the screen flashes for a split second after the transition plays. Almost as if the image that has been kept from the previous screen is reloading itself. Is there any way to avoid this?

Trying this on the iPad. Thanks!
Mark zei om 00:49 op 11 juni 2011:

how can i create a loaded bar?
Lee zei om 15:08 op 12 juni 2011:

Nice job! Thanks for a bunch of smart stuffs to learn!
gk zei om 00:15 op 16 juni 2011:

Matthijs/TAP team – any word on when the Android version is going to be released?
Ola zei om 13:26 op 17 juni 2011:

Is there a way to run the prototype in mobile safari without hiding the browser bar and bottom browser navigation? I would like to simulate the mobile safari browsing experience instead of as an App. Sorry if this has been covered somewhere else
Ola zei om 13:48 op 17 juni 2011:

Never mind found the answer in the example build file screenshot. Thanks
Paul zei om 20:14 op 20 juni 2011:

I have the same issue as both stated below, build has no action or save features

app is at 28b.mobi works fine but cannot update icon

I assume 28b.mobi/build seems to run my build panel but no action at all please please please help.

gk zei om 01:04 op 26 mei 2011:
I am trying out the TAP but when I try to build, nothing happens. It seems the Build functionality is not working. I downloaded the 0.44 version.

Julie Stanford zei om 17:29 op 5 mei 2011:
I am super excited about this tool and have gotten everything set up in Fireworks but when I go to the Build screen and hit Build in the upper right corner and nothing happens. I’ve checked the permissions and it looks like everything is a go there, but literally hitting Build does nothing. Also, your instructional text refers to Saving but I didn’t see a way to do that…so am I missing something? I have tried it in all browsers on a PC and on a Mac. I’m happy to send you the URL of the build screen directly if you want to take a look yourself.
Ty zei om 14:36 op 7 juli 2011:

Matthijs, This is indeed a great tool. I’m not exactly an HTML guru so I have some questions about creating the pages for the transparencies… would you be able to send me the .htm files for startup and the video page so I can reference them? When I create pages I am getting my demo off center and my images are not loading.

Regards,
Ty
tyrohne@gmail.com
Michel Nugteren zei om 16:10 op 7 juli 2011:

It looks like there’s a problem using $_SERVER['SCRIPT_NAME'] on a server running PHP as CGI instead of mod_PHP. This will corrupt the mail link. I fixed this using

$_SERVER['SCRIPT_NAME'] = $_SERVER['REQUEST_URI'];

But what I have not managed to fix is this line:

foreach(new RecursiveIteratorIterator(new RecursiveDirectoryIterator(“../Library/”)) as $file){

This will simply stop the build script on our server and only display a blank page. I’ve disabled the entire block of code for now, since it is only a size check, but I’ll let you know if I find a solution for it.
Michel zei om 13:34 op 8 juli 2011:

Ah. I took another look. RecursiveIteratorIterator and RecursiveDirectoryIterator only work in PHP 5, our server is running PHP 4.4.9 :-/
Mo G zei om 03:23 op 13 juli 2011:

I have followed your directions and haven’t been able to get links to work on the iPad even though they work when I export HTML on my computer.

Also, can you post or send me the fireworks png that you based your demo on? I’d like to see how you have that file set up.
Matthijs Collard zei om 06:58 op 13 juli 2011:

@gk, hard to predict when we have something for Android as we working on it between projects, and we have a lot of projects at the moment
@Michel, yes, 5.0 works much better
@Mo G, the source files can be found on the right side of this blog.
Vincent zei om 08:19 op 15 juli 2011:

Hey guys, wat een geweldige tool !
ik ondervind alleen problemen in iOs 5 het prototype wordt niet getoond als ik het probeer te runnen. is dit bij jullie bekend ?

al vast bedankt,

Vince
Vincent zei om 08:24 op 20 juli 2011:

Hi guys, al wat testjes gedaan onder iOS 5? Mijn prototype komt helaas niet te voorschijn onder de laatste dev build van iOS5

Ik hoor het heel graag !

Vince
Matthijs zei om 20:23 op 23 juli 2011:

@Vincent. We did notice some weird behaviour on iOS5. We are working on a new version!
leo zei om 11:27 op 26 juli 2011:

Hi unitid team,

I am not a php expert, how can i test that my TAP installation is properly working?
I have Apache/2.2.19 (Win32) PHP/5.3.6 installed, phpinfo is working, your build page loads (I had to modify the “error_reporting = E_ALL & ~E_NOTICE | E_STRICT” in php.ini not to see variable declaration warnings).
But when I click the “build” button, nothing happens.
What is the “build” expected behaviour? Which files are created , in which directory?
thanks you very much.
leo
leo zei om 18:03 op 26 juli 2011:

Solved.
A collegue of mine found it was a problem of “short_open_tag = on” in the php.ini file, because the build/index.php source code has both short and full php tags.

Thank you for this nice piece of software: it combines ease of use with the need for speed I have in most of my graphic user interface engagements.
Gene zei om 15:15 op 8 augustus 2011:

I’m having trouble trying to make a KEEP page that includes a layer at a high z-index so that other pages that come into view don’t hover over it. Thanks!
Marcin zei om 15:41 op 8 augustus 2011:

Hi
I have been looking for this solution for a while.
Looks great!
But when I decided to test it, it seems not working.
I was able to display Build screen. Enter data into form but when I clicked on Build nothing happened no validation, no messages.
Can you help with that ? I do not code
Please.
Gene zei om 16:08 op 8 augustus 2011:

Actually got it to work, I think. I went into jqtouch.css and changed the keep class’ z-index from -1 to 9999. Thanks!
Matthijs Collard zei om 11:11 op 13 augustus 2011:

@Gene, great, I will see if I can fix this is version 0.46, thanks
@Marcin, I found a javascript but that prevents the page to build. Just a very minor change, try downloading this build: http://www.unitid.nl/tap/tapv0.45.zip
Tanja zei om 15:03 op 18 augustus 2011:

is it possible to give multiple targets in the target field?
I mean, I want “keep” and “m1″ on the same hotspot. Is that possible?

Thanks in advance and thanks for the great TAP tool!!!
Chad Bontrager zei om 03:26 op 25 augustus 2011:

Hi Matthijs,

I cannot get the video to load. I have created the .htm file and named it the same name as the page I want it to overlay. For example page “video” and in the addons folder I created video.htm (with the code snippet you provided). When I run the prototype it goes to the Fireworks page video, but nothing overlays on top (the video). I put in the Z index to go on top of the page. I am seriously stumped. Is there a sample .htm file I can use as a template?

Thank you

Chad
Jaak Parik zei om 07:04 op 31 augustus 2011:

Supernice!
Wish it would support buttons down states somehow

best,
Jaak
Carlo zei om 12:52 op 12 oktober 2011:

Hi Mat!

Just came across your website. Really great tool for prototyping! I tried the message alert and it works fine except that the msg box doesn’t go to the center? How make it pop-up to the center?

Thanks!
Matthijs zei om 11:52 op 14 oktober 2011:

@Tanja, I am afraid that is not possible at the moment. We need this feature as well, so we try to incorporate it in the next version

@Chad It is hard to see what the error is. You can check the prototype HTML source code if the addon is added to the page. Is the video running by itself in the browser?

@Jaak. We haven’t found out how to effect the downstate of a image map area. I don’t think it is possible, but it would be a nice feature

@Carlo Mmm, haven’t seen that before. Are you using iOS5? We still have to get TAP ready for iOS5
Gene zei om 01:29 op 17 november 2011:

Guys, is it possible to set the “background color” attribute within the BUILD section as transparent?

Keep up the good work!
Brian zei om 04:25 op 30 november 2011:

Everything was going just fine until I clicked the “Build” button. The browser screen turns to white and nothing else happens. I have permissions set to 777.

Anyone else experience this issue?

thanks!
Danilo zei om 17:16 op 16 december 2011:

Hey Brian, I think I have a solution.
As Leo stated earlier, the problem is with the “short_open_tag = off” on the server’s php.ini. Just set it to “on” and u’re good to go.

If you’re don’t have access to the server, a workaround is replacing every “<?" with "<?php" in "build/index.php"

Hope it works for you too.

Btw, AMAZING tool you got there, folks!
Matthijs zei om 23:09 op 20 december 2011:

@gene: The background color you set is the background of the body tag. So there is not much behind the body tag to show. What do you want to accomplish?

@Brian: We overlooked the issue as we did not get that problem. I will use
Gene zei om 17:56 op 24 december 2011:

Hey Matthijs, what I’m trying to do is have a portion of the screen stay fixed when transitioning to another page. For example, in the Facebook app, when you swipe up and down, the top navigation bar (with the three icons) stays fixed. Is there already a workaround to this? If not, do u see this being included in TAP’s future?
Gene zei om 18:06 op 24 december 2011:

Another example of what I’m trying to accomplish is the side swiping in the Twitter app. Side swiping a tweet from a list of tweets reveals additional options, e.g. forward tweet, favorite, etc. Ideally, through the lens of TAP, the panel that slides to the right would be one page whereas the panel that is revealed is another.

I’m trying to push TAP into our prototyping process at work and this was one of the minor obstacles/questions/whatever that came up.
Matthijs zei om 16:42 op 27 december 2011:

We are still working on the fixed areas. It is not as easy as you might think . What you can do in the case of the second example, is using the “transparent overlay” function. Create a transparent page with only the state of the bar after the swipe. Then use “keep” to show the underlying page.
Marcin zei om 17:23 op 27 januari 2012:

Hi,
Is it possible to use Axure RR software instead of Adobe Fireworks?
Can action be integrated with Axure RP custom field in Widget properties in annotations field?
Matthijs zei om 21:58 op 2 februari 2012:

@Marcin. I don’t know, we do not use Axure for mobile prototyping. If you find a way to make a link with TAP, be my guest
Jason zei om 09:36 op 12 februari 2012:

I am having difficultings with DIV positioning. For example when I pin a DIV to the top of a page (position:fixed;) using the “addons” method, it still scrolls witht the page. Is there any way around this… ?

Many thanks!
Matthew Warner zei om 22:23 op 16 februari 2012:

Is there currently any way to float an object above the others so the entire screen does not move? I have a UI at the bottom of the screen and only want a section of the mockup to scroll. Is this currently possible? Thanks in advance and thanks for the great mockup utility.
Ian zei om 21:06 op 18 februari 2012:

Check out Fluid UI http://www.fluidui.com. A new iPhone and Android prototyping web app for designing mobile interfaces. It’s got iPhone and Android widget sets, image uploads, fully linked prototypes, touch gestures, animated transitions and on-device testing is a click away.

Cheers,
Ian
Vincent zei om 16:39 op 19 februari 2012:

Hey guys,

Still using this great tool !, Nothing else out there is beating this.
The fact that it is integrated in to a Fireworks Design Workflow is awesome.

I do have one question, we were doing some user testing a new App we’re working on and what people tend to miss is scrollable areas. Would this be hard to integrate ? That would require slicing an not just hotspots right ?

Cheers

Vince
Brian zei om 14:58 op 22 februari 2012:

How come when I add a div with overflow set to auto, it flattens everything when building the prototype. Impossible to scroll content within a div for some reason.

A little help?
Matthijs zei om 23:05 op 23 februari 2012:

@Jason, @ Matthew and @ Brian. You all talk about our most requested feature and yes, this is quite hard to accomplish as we use hotspots to navigate through the pages and not slices. We are still working on it, but do not have a lot of time at the moment, so if you figure out how to get it to work we love to hear it.
Ben zei om 19:51 op 16 maart 2012:

TAP has really saved the day for me, and I now have a great prototype. I have one problem with addon video though. I get the video to play fine, but when I go page to the previous page, the video keeps playing Is there a way to kill the video/addon html page??

UNITiD | Interaction Design & Usability

Interaction Designers