CO6013 - Designing a Mobile Application

For my work I was asked to work through and complete a working mobile application which would be used on a PDA.
I chose Alton towers due to the pure amount of information and images which would be available to me from so many different sources!

I would be designing this project on Adobe Flash Cs4 using Flash 7 with actionscript 2.0.

It will be designed mainly to work on an Ipaq PDA, so obvious compatability issues such as text, images and sounds would all have to be taken into account.

1. Choosing my graphics

One of the first tasks were to select a range of logos such as the Background, main alton towers logo, buttons, home icon and information icon and of course a good universal font, which I chose as Tahoma.
These were some of the main graphics I was going to use within my application, some of them I have edited slightly with photoshop or added slight transparency to within Macromedia Flash itself.
I also had a look on the internet for Free clickable sound effects and found a very effective .Wav file which will later become the clickable noises to my buttons.

2. Designing the basic Menu System

This was the first and most important step in designing my application. I knew that that menu had to be logical and very simple to use but yet be effective and visually appealing.
I achieved this by using all the buttons and images previously mentioned and using tweens to the best of my ability to make items fade/slide in upon execution.
This menu was to the the basis for the entire application and therefore I felt it necessary to provide a little bit of information for the user on how to effectively use this application, which could be accessed simply by clicking the information logo in the top right.
When linking the buttons to scenes I used a simple piece of code:

on(release)
{gotoAndPlay("Home", 1);
}

This would take the user directly to the Homepage on the first scene. I have used this piece of code throughout. Originally I had put:

on(release)
{gotoAndPlay(1);
}

To navigate to the first frame on that scene, this would sometimes cause me problems such as buttons not working. Adding the scene description fixed this.
Next, I added a sound to all the buttons, it was a small .Wav file which would operate upon hit, by adding a keyframe to the button and applying the sound to it.

3. Working through the Rides section...

The next part of my project consisted of designing a Rides Menu and then providing some photos and information about each ride.
I chose to simply focus upon the four main rides in alton towers rather than a massive range as I felt this was more effective to read about.
For the rides menu i used tweens so that four icons would float in and then be clickable so that once clicked it would take the user directly to the information on that ride.
I also provided a 1 and 2 button, this allows the user to cycle between two photographs. I did this simple by accessing the timeline and selecting what frame I wanted it to jump to once the button was pressed.

on(release)
{gotoAndPlay("Rides Oblivion", 11);
}

Although quite a simple piece of code, it is very effective and logical to understand, it simply selects the scene and then jumps to the frame you choose.

4. Prices Section Completed!

Next on the menu section to complete was the prices section. I knew this was a very important section and all prices had to be reliable for the user.
The text itself is based inside a textbox which I eventually had gotten to work alongside the Information section scrollboxes!
The scene itself is only very basic with minimal information, but not a lot more is required from this section other than what is provided. I continue to make good use of the Home icon in the bottom left of the screen to return the user to the homepage.

5. Working through Information Scenes

Next, was the information section. I have therefore designed an infomation Homepage with 4 different sections.
For example, if you were to click Food and Drink it will take you to the food and drink section (this can be seen right) and also, some additional information if provided about Off location restaurants on a separate page.
I ensured all these pages could easily and logically lead back to this page to ensure ease of use.
When making this page I encountered some problems with the scroll bar not appearing, but this was fixed once I realised what i was doing wrong (the scroll box must contact the text box directly).

6. Preparation for the Map

Now that I had finished the bulk of the design of my project some extras had to be added such as points on the map, so therefore I came up with the idea that I would have 7 different clickable points on my map.
Each point would lead to a different screen (as shown to the right) and provide a way back to the map.
I felt this was a very informative and simple to follow method for the user to follow.
I therefore created 7 of these scenes, with relevant names such as Map 1, Map 2 etc. Ready for when the buttons on the map were working so they could be linked up right away.

7. Added a new introduction

My project seemed a little plain at present, so I decided to add a new introduction section which would play everytime my application was started.
I made it using some basic tweens to make the logo fade in and make the Alton towers text in slide in from the left and right.
I then made a red button appear which would allow access to the main project.
I got the idea from this when watching a DVD film at home, I felt this would give my project a more overall professional finish to it.

8. Map Troubles

I have now begun work on the map, however I am quickly discovering that Alton towers has a big shortage on good usable maps for PDAs!
This example shown to the right is the best map I can locate, but due to the complexity of it, it may be overwhelming for some users.
The size of the map also causes problems with the PDA as it is too big to display a good sized version.
I'm also having trouble getting code to work which will make it scroll around the screen using X and Y axis. I may have to search for a new image if I cant get this to work.

9. Map is working!

I was able to find code which would allow me to add boundries and the map to scroll effectively. Also, I have changed the map to one which is a lot more easy to follow and more visually effective.
Since I am unable to figure out how to add buttons to the map (Due to much frustration) I have instead decided to add a legend to the side of the map which can be minimised or maxamised.
This legend can therefore be used to correspond with the points on the map and is clickable, so it takes the user to another area where information on this location can be viewed. This is a very good alternative as it still allows all the functionality that I require from the map.


To get this map working I used this small piece of code:

on(press){
startDrag(this,false,357,270,-110,50);
}
on(release) {stopDrag();
}
on(releaseOutside){stopDrag();
}

This would allow dragging of the map, but also provide the boundries required!
I simply applied this to the map which I set as a Movie clip as opposed to a button which cause me endless problems.

10. Final Checks

The final check to the project was then to carry out obvious tasks such as checking back through the project to look for really obvious mistakes such as: Spelling, incorrectly linked buttons, making sure all items had relevant instance names and everything appeared as expected.
Very few errors were encountered, however there were many times some tweens had not been given correct names and therefore had to be correctly named.

You can view the online version of the app here: http://www.swfcabin.com/open/1268142002