What You’ll Learn

In this tutorial, you’ll learn how to build TELEPORT, an app that teleports you to popular destinations around the world. Additional features of the app include information about your destination such as the weather, current time, and a list of tips left behind by fellow teleporters.

Specifically, you’ll learn how to:

• Wire together your screens
• Specify transitions and gestures between screens
• Set up TAP to compile your prototype
• View your prototype on a mobile device

Play with the live demo now:

• Access this link via iPhone http://bit.ly/teleportApp and save the app to your home screen.
  

What You‘ll Need

• Adobe Fireworks
• iPhone
• An online server that can execute PHP
  • Optional: If you don’t have a server, you can set one up on your local machine. There are advantages and disadvantages to doing this. With a server on your local machine, updating your files becomes a lot faster since you won’t have to wait for them to upload. The only problem is that you won’t be able to share your prototype on the web. What I usually do is create my prototype first on my local machine and then quickly test it. Once I’m happy with it, I upload it to a server online and send the prototype’s URL out to other teammates and/or clients. If you would like to set up a local server, download MAMP [Mac], else XAMPP [all others]. I’ll probably be creating a quick guide on how to do this some time in the near future.

Wiring Together Your Screens

If you’re playing along at home, you can download the Fireworks file here. I’ve also made the final file, which contains all the hotspots, transitions, and gestures, available and ready for exporting/compiling. Save the file onto your computer and crack it open in Fireworks.

Pages, Pages, Pages

Once you’ve opened up the file in Fireworks, you’ll notice that there are a total of 17 pages. For those that are new to Fireworks, the concept of pages is similar to that of InDesign. Each page represents a screen of the prototype with the exception of the first two pages, home-screen-icon and startup_image. We’ll be saving these two pages for later.

Below, I’ve laid out all the pages from the Pages panel (on the right). I’ve also indicated  how these pages are going to connect to each other.

Tip: When planning a flow, it’s perfectly fine that some of the sections aren’t mapped out in the prototype, e.g. the Explore section, Account Settings section. All we want to do for now is show the main flow.

You’ll also notice that each page has a page name, e.g. index, my-destinations, etc. Page names are important because they allow us to reference them when connecting one screen to another.

When deciding on page names:

• Keep page names short and clear. Longer names will be cut off when viewing the pages panel.
• Page names should never have spaces and/or special characters. This will cause your prototype to explode.

Wire ‘em Up

Let’s start on the page labeled “index.” You’ll notice that on all the pages including this one, there are blue markings. These blue markings help identify which parts of the prototype can be tapped or swiped on.

Using the pointer tool (the black arrow), select the My Destinations button (the button with the heart in mid teleportation). This button will link to the My Destinations page.

Tip: In Fireworks, hot keys are your best friend. They dramatically improve the speed at which you get stuff done. I’ll be include the hot key default where ever possible. So here’s your first one: pointer tool [V].

Right click the button, and select “Insert Hotspot.”

Tip: Hotspots follow the outline of an element, e.g. the outline of a button, as long as the element is an ungrouped, vector graphic. If the graphic is a flat image, a rectangular hotspot is created instead.

Tip: To hide/show hotspots, the hotkey is “2.”

Once a hotspot is created, a blue layer appears over the button. This is where users will be tapping in order to get to the next screen of your prototype. Select the hotspot with the pointer tool [V]. In the properties panel, click on the drop down button in the “Link” field and select “my-destinations.htm.”

Voila! You’ve successfully linked your first page, *high five*.

Specifying Your Transition to the Next Screen

Now that you have your page linked, we’re going to specify the transition that will occur when that hotspot is tapped on. We do this by entering a transition keyword in the “Alt” field.

Tip: The Alt field ALWAYS corresponds to what happens when a hotspot is tapped.

Oh, but wait. What transition keywords are available? Out of the box, the TAP platform offers the following transitions (viewable in Chrome and Safari):

• slidedown, slideup
• cubeleft, cuberight
• swapright, swapleft
• fadefast, fade (this is the default transition if the Alt field is left blank)
• flipleft, flipright
• popup, popdown
• slidetopup, slidetopdown
• pushup, pushdown
• slideleft, slideright

Tip: If you’re good with CSS3 and some scripting, you can create your own custom transitions and associate them to keywords.

Okay, back to selecting a transition. In the Alt field, enter in “slideup.” This will cause the My Destinations page (my-destinations) to slide up from the bottom when we tap on the hotspot. Capish?

Tip: To move through the pages, use this hot key combination, fn+cursor up or fn+cursor down.

On the My Destinations page, you’ll notice that I have two blue markings: a full circle and an outlined circle. The full circle is the primary hotspot that I want users to be tapping on. The outlined circle is a secondary hotspot that lets users go to the previous screen. If you hate circles, you can totally roll your own visual cues.

Again with the pointer tool [V], select the Shibuya button, right click it and select Insert Hotspot. Once the hotspot has been set, select it again and click on the drop down menu in the Link field. Select shibuya-map.htm and enter in “slidedown” in the Alt field.

So can you guess what happens when you tap on the Shibuya button? Once tapped, the My Destinations page slides back down revealing an updated map, shibuya-map.htm.

Oh, and let’s not forget about the “Close” button in the upper right corner. Select the close button with the pointer tool [V], right click it, and select Insert Hotspot. In the Link field, you are going to select index.htm from the drop down menu, since you want to go back to the previous screen. In the Alt field, we’re going to use transition “slidedown.”

Once we’ve selected Shibuya from the My Destinations page, we are directed back to the map with Shibuya front and center [shibuya-map].

To teleport to a designated spot, the user will have to tap into the Shibuya detail page. With shibuya-map selected within the Pages panel, select the circular button next to “Shibuya, Japan” on the map and insert a hotspot. In the Link field, select shibuya-details.htm from the drop down. In the Alt field, enter in the transition “slideleft.” When the user taps on this button, the current screen will slide left off the screen while the new screen (shibuya-details.htm) slides left into view.

For the “Current location” button in the lower left corner, insert a hotspot and link it back to index.htm with a slide transition of “fade.”

On the Shibuya detail page (shibuya-details), we have two areas to insert hotspots: the “Map” button in the upper left and the “Slide to Teleport” slider at the bottom. Let’s wire up the “Map” button first. Again, select the button, insert hotspot, set the destination link to shibuya-map.htm and set the transition in the Alt field to “slideright.”

Tip: When transitioning to the next page, it’s usually a good idea to use the opposite transition when transitioning back to the previous page, e.g. slideleft, slideright.

Specifying a Gesture to the Next Screen

Since you’re now an expert at inserting hotspots and setting transitions triggered by taps, we’re going to now set up gestures, which are triggered by swiping.

Setting up a gesture is sort of similar to what we’ve done already. First, we select the area that we want the swipe to happen on, which is the rectangle that contains the arrow and the “Slide to Transport” label. Like before, we right click it and select insert hotspot.

After creating the hotspot, click on the drop down menu in the Link field and select our next page, 9.htm. 9.htm is the beginning of the countdown sequence to teleportation.

With our newfound instincts, we’re tempted to specify a transition in the Alt field. As mentioned earlier in the tutorial, the Alt field is associated to tap states only, so we’re going to leave it blank for now.

Tip: Even though we left the Alt field blank (defaults to fade transition when left blank), the slider will still be tappable in the prototype. It might not make sense for a swipeable area to also have a tap trigger, but this will help ensure that our prototype can be useable whether it’s being viewed on desktop or on a mobile device.

Since we’re inserting a gestural state, we’re going to be working with the “Target” field, which is right under the Alt field. Unlike the Alt field, the Target field requires a different set of parameters.

Target Field Parameters for a Single Gesture: gesture,page name,transition

Just like how transitions had keywords, gestures also have their own set of keywords.

• swipeup, swipedown
• swipeleft, swiperight

So in the Target field, we’re going to enter in “swiperight,9,fade.” What this basically means is when we swipe right on the hotspot, we will be directed to the page labeled “9″ with a transition of “fade.”

For other sliders that have multidirectional swipes, e.g. a toggle, you can specify up to 4 gestures in the Target field.

Target Field Parameters for Multiple Gestures: gesture1,page name,transition,gesture2,page name,transition,gesture3,page name,transition,gesture4,page name,transition

Oh hey, lookatchoo! You just set up your first gesture. W00t w00t!

Setting Up Timers for the Final Countdown!

Phew, we’re at the last stretch of screens to wire together. As mentioned before, after swiping right on the “Slide to Teleport” area, the prototype will move into the countdown sequence, beginning with 9.htm. If you check out the countdown pages (pages 9 to 0) in the Pages panel, you’ll notice that they all have a “Pause Countdown” button, just in case your mom calls while you’re preparing to teleport. For simplicity sake, this button will only be “live” on page 7.

Since the countdown doesn’t require the user to tap on anything, we’re going to create a timer on each page so that after a certain amount of time, the prototype will automatically process to the next page.

Select page “9″ from the Pages panel and create a hotspot on the page. To create a manual hotspot, go to your tools and under Web, select Rectangle Hotspot tool [J]. Now, click and drag out a relatively small hotspot anywhere on the page as long as it doesn’t overlap any existing hotspots.

We’re now going to attach a timer behavior to this hotspot using the same steps as we did when we were setting up our transitions. The only difference is that in the Target field, we will be specifying the amount of time we would like the page to hold before proceeding to the next page in the countdown sequence.

Parameters for the hotspot on page “9″
Link: 8.htm
Alt: fade
Target: timeout=800

So what these parameters are basically saying is “After 800 milliseconds, go to 8.htm using the fade transition.” We’re going to repeat this same process for pages 8 through 0.

Parameters for the hotspot on page “8″
Link: 7.htm
Alt: fade
Target: timeout=800

Parameters for the hotspot on page “7″
Link: 6.htm
Alt: fade
Target: timeout=800

Parameters for the hotspot on page “6″
Link: 5.htm
Alt: fade
Target: timeout=800

Parameters for the hotspot on page “5″
Link: 4.htm
Alt: fade
Target: timeout=800

Parameters for the hotspot on page “4″
Link: 3.htm
Alt: fade
Target: timeout=800

Parameters for the hotspot on page “3″
Link: 2.htm
Alt: fade
Target: timeout=800

Parameters for the hotspot on page “2″
Link: 1.htm
Alt: fade
Target: timeout=800

Parameters for the hotspot on page “1″
Link: 0.htm
Alt: fade
Target: timeout=800

… and last, but not least, page 0, which has a link destination sending us back to the start of the prototype.

Parameters for the hotspot on page “0″
Link: index.htm
Alt: fade
Target: timeout=800

Oh, wait, what about page “7″ with the “live” pause button? Ok, select page 7 from the Pages panel and then select the button (there are no obvious borders to this button) behind “Pause Countdown.” As usual, right click and select Insert Hotspot.

Parameters for Pause Countdown hotspot
Link: 7-pause.htm
Alt: fade

Now let’s also wire up the buttons on page “7-pause.”

Note: This page doesn’t have the timer hotspot on it since it’s a paused state.

We’re going to create two hotspots on this page: one for the resume button (top) and one for the end button.

Parameters for Resume Button Hotspot
Link: 7.htm
Alt:  fade

Parameters for End Button Hotspot
Link: shibuya-details.htm
Alt:  fade

Quick Recap on Wiring Stuff Together

So that’s it for the wiring part. I’ll admit, that took up quite a chunk of the tutorial, but hopefully you learned how to do the following:

• Inserting hotspots both automatically and manually
• Setting transitions
• Specifying gestures
• Creating timeout states

Now, the moment we’ve been waiting for, compiling and checking out our prototypes on our mobile devices!

Export, Compile, and Share

First, we’re going to download the TAP files from here (courtesy of the wonderful folks at UNITiD!). Once you’ve done that, unzip the file and you’ll end up with the following:

• tapv0.47

• addons – You can layer custom HTML files on top of your pages, which goes into this folder, but we’ll save this for the next tutorial.
• build – This folder has all the code that’ll make your prototype come alive. It’s also the folder that contains the settings page.
• library - This is where you’ll be exporting your Fireworks files to.

Next, rename “tapv0.47″ to “teleport-prototype.” Once you’ve done that, let’s go back to your Fireworks file and export it as a .lbi file. When exporting, make sure you’re exporting to the Library folder under teleport-prototype. As for settings, they should be as follows:

• Export: .lbi
• HTML: Don’t have to set this
• Slices: None
• Pages: All Pages
• Checkbox: Put Images in Subfolder (this will come in handy especially when creating the documentation for your prototype in InDesign – linked files FTW!)

Once that’s done, upload the teleport-prototype folder onto your server.

In order to view your prototype, you have to compile it. To compile it, first go to the Build folder on your server, e.g. http://yourWebsite.com/teleport-prototype/build.  The build page is the settings page for your prototype. There are a bunch of settings that we can play around with, but the ones that apply to us right now are:

• Device Type: iPhone4 & 4s (unless you’re using some other device to test it on)
• Show “add to homescreen” message: Checked
• App name: Teleport (since it can only hold 10 characters)
• Start Page: index (this is the page label of the first screen that we’ll see in the prototype after the startup image.)
• Background: #FFFFFF (personal preference really)
• Home Screen Icon: home-screen-icon.png (this can be found in the Library folder under the subfolder “images”)
• Startup Image: startup-image.png (this too can be found in the images folder)

Once you have all of this set, click on “Build” in the upper right corner. If the build is successful, the build page will refresh with a link to the prototype, which can be shared with others. You can also access the prototype with the QR code *insert joke here* and/or send the link to the prototype via email.

When accessing the link via your mobile device, an alert will pop up informing you to add the link to your home screen. Once added,  tap on the newly added “Teleport” icon on your home screen to access the prototype.

And one more thing!

As you iterate through your prototype, i.e. making adjustments to the screens, make sure to delete all the files in the Library folder before you re-export your Fireworks files into there. After you re-export, go back to the build page again and click on the build button. Your prototype will then refresh with the new build. Oh, and you also won’t have to access the prototype link again because you already have the icon on your home screen.

And that’s it!

Hit me up with any questions in the comments section below. Happy prototyping!

Next Steps

Check out Lesson 2: Keep/Clear Tutorial. This will blow your mind.