Tuesday, 9 March 2010

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.