General Note

Things to know

“Note that every time you open the prototype by tapping the icon on the home screen, the pages first have to load before you can actually click through them. Also, the last page you see when leaving the prototype will be shown first, but disappears when the rest of the pages have been loaded. Because this prototype method does not support caching, you might have to keep these drawbacks in mind when sending the URL to your customers or using it with usability tests.

This method is tested for prototypes with up to 30 pages, but problems can occur if your prototype has many more pages. You might have to work a bit on the code or just split the app into two (just for testing purposes, of course)”.

Matthijs Collard

unitid.nl

Acknowledgements

Below states what parts belong to who:

Prototyping for the Apple iPhone using Fireworks

Matthijs Collard

unitid.nl

/*
* jQuery JavaScript Library v1.3.2
* http://jquery.com/
*
* Copyright (c) 2009 John Resig
* Dual licensed under the MIT and GPL licenses.
* http://docs.jquery.com/License
*
* Date: 2009-02-19 17:34:21 -0500 (Thu, 19 Feb 2009)
* Revision: 6246

*
* Sizzle CSS Selector Engine – v0.9.3
*  Copyright 2009, The Dojo Foundation
*  Released under the MIT, BSD, and GPL Licenses.
*  More information: http://sizzlejs.com/
*/

http://blog.metaspark.com/2009/02/fireworks-toolkit-for-creating-iphone-ui-mockups/

http://www.teehanlax.com/blog/2009/06/18/iphone-gui-psd-30/

Update on Application

As of this moment my application is near completion in the design phase. I will not be able to input a GIF  into the application prototype, i have tried many methods but it comes down to the code not letting me input a “State” into the exported fireworks file into a .lbi file. I will follow my original objective of having images for each exercise.

Once the designs are complete is when i will add the hotlinks to the application prototype, adding them before may not be a sensible thing to do because you have to name them pages, and if this changes i have to change the number on each page after.

I have tried a few different designs and uploaded them to my website.

Below is an example of my different design however i dod not think i will keep the colour scheme.

Input of GIF images

I’ve tried to input an animated GIF into my test application but i have found this to be more difficult then i first thought. The problem i have found is that the GIF does not animate when the application prototype runs.

I suspect i have to animate the GIF when i fireworks. I will look into this further.

Dimensions of test prototype

I have had issues with the dimensions of the prototype. At the moment the prtotype appears too small for the screen. I have been trying different sizings but i haven’t perfected it yet. This has just got to come down to trial and error.

Below is a screen capture of the dimension that are not correct.

UPDATE!

I have corrected the dimensions of the application, an image is below of this correction.

Test prototype uploaded

While designing my application prototype i have been looking into actually uploading my application to a server.

I used: http://www.000webhost.com/

The process of my test is as follows:

I have taken two pages from my design into a new png file in fireworks.

I then set-up hot links on each page linking them together, effectively hyperlinking them together.

I then export them as a an lbi file. Into the library directory.

Once this is saved i can open this up in dreamweaver.

I have set-up a website under the domain name

www.dccs52.comlu.com

This website allows php. As you can see from the image above there are many test files on my site already the one that works the way i want is named apptest8 (with GIF)

Once i uploaded the folder to the website it can be viewed on either an iphone or an internet browser. The additional code allows for the application prototype to detect what format the user is using.

If the user opens the prototype on an internet browser a skin of an iphone will be placed and a homescreen with logo will appear.

If the user opens the prototype on an iphone the user will be asked to add an app with the GymFit logo to the homescreen. Once they do they can access the application like a real iphone application.

I still have issues with the dimensions that appear on screen. This problem however i feel is a small issue which i am already close to correcting.

Design nearly complete

The design of my application is nearly complete. I am building up the design from a simple look to a sophisticated UI which is still simple to use. Something i hadn’t anticipated was deciding where to put certain buttons, this has made the design time line expand a little i plan to have the design finished by the middle of February by the latest.

I am just going to list my 5 objectives of my project, this is merely a reminder of them.

Objectives

Create a simple user interface
Provide screenshots of all exercises
Use either the SDK or Adobe Creative Suite 4 to develop the application
Use PHP and jQuery to complete my application
For the user to be able to interact with the application to a certain extent

To show you the progress of my design here are some screen shots below.

Aftre having a discussion with my lecturer i decided to create a male only version of my application due to my knowledge would be better equipped aiming towards men rather than women. Also i have chosen to give the user an option of using a picture of a human body or a list for all the body areas they would like to target. I chose to do this due to the fact that not all application users will know where a body part is unless they see it on  a diagram, this also has worked well on other successful fitness application so i thought it best to be a t least equivalent and then better the idea and functionality this way.

Since posting my last designs you will be able to see the bottom list of links have appeared. These are hotlinks which appear continuously throughout the application. I felt this necessary becuase there are some paths the user takes within the application which take the user quite deep within it so this allows the user access to the main menu without having to press a lot of previous buttons which makes the user experience a pain.

Application Structure with photos

Here i have included images of my application structure. The images are split into three becuase the map was too big to have as one and i wanted to show the detail in the map.

This is the basic layout for my prototype.

Creating GIFS

I have created a test GIF  in order to add this to my application. Instead of using still images i will create GIFS for my demonstration images. Below is the tutorial i followed.

Interested in Adobe Creative Suite? This is a weekly newsletter for creative professionals who use Macs (but Windows users are welcome too). If you’re new here, you may want to subscribe via RSS or Email or Twitter for a mix of new tips each week. Thanks for visiting!

If you’ve ever wondered how to create animated GIFs in Photoshop, we’ve created a simple tutorial with some example files you can download and try out.

We use a lot of animated GIF files in our weekly tips. They are fun to build, and better for our email subscribers because Flash animations are not supported in most email readers.

A Simple Example

For a quick hands-on tutorial on creating animated GIFs in Adobe Photoshop, we’ll walk you through creating the following animation:

This simple animation combines the two most common animation techniques in Photoshop: Turning layers off and on, and using the Tween command to animate the movement of an object on a layer.

Step 1: Set up your layers.

The first step in creating any animation in Photoshop is to build a layered Photoshop file with all the elements you plan to animate. Our example document has 7 layers containing the text for our countdown, and layers for the rocket and flame.

You can download our example Photoshop file here:

ExampleAnimation.psd

Step 2: Create Animation Frames with Layer Visibility.

Chose Windows > Animation to show Photoshop’s animation palette.

On the first frame, turn off visibility for all layers you do not want visible at the start of your animation. Then add one frame at a time, and turn on the layers you want visible for each step in the animation.

Changing layer visibility one frame at a time is a classic Photoshop animation technique that covers a wide variety of needs.

In our example, continue this pattern to reveal the countdown and the flame at the bottom of our rocket.

Step 3: Create Animation Frames using Tween.

Now that the countdown is complete, we need to create the illusion that our rocket ship is taking off. Add one more frame, and this time select the group called “Rocket” in layers and move your rocket off the top of your image window.

Then choose “Tween…” from the Animation palette’s pop-out menu.

Set how many frames to add, and Photoshop spreads the movement of your layer across those extra frames.

Step 4: Adjust your Timing.

Finally, go back through and adjust the delay for each frame of your animation. That time is shown in seconds below each frame.

Tip: You can hold down the Shift-key to select a range of frames (such as the 9 frames we added for the rocket’s takeoff) and change them together.

Step 5: Export the Animated GIF.

Finally, to export your animated GIF choose:

In Photoshop CS3: File > Save For Web & Devices…

In Earlier Photoshops: File > Save For Web…

Make sure the image type is set to GIF, feel free to experiment with some of the other options, and save your file.

To test your resulting animated GIF, drag the file onto you web browser.

As a final reference, you can download our finished Photoshop file here:

ExampleAnimation-Final.psd

Here is my GIF i made.

Designs

Below are some screenshots of my rough designs of the application, At the moment there is only text as of this moment but there will be images added later on.