My role in the group has been to put together all the elements to make up the final flash interface.

To begin with we discussed what features we thought would be most useful to include. I then did some research into some possible ways of navigating a map using actionscript. I did some preliminary experimenting by mocking up simple interfaces in flash using what scripting knowledge I already had. I then took these to the group and we discussed what worked best and any further features. After this session I searched the internet for examples of online maps and researched into how they were made. Below is and example of one of my simple try outs.

When I had an idea how to make each component work I took the interface design that kev made and converted the graphics into components that would eventually control the maps.

The first task was to get the zoom bar working. I did this by constraining the scroll ball to a horizontal line. I then scripted the map's width and height to be set by the balls x position, using actionscripts _x and _y scale. I came across a problem in that the zoom function would just control one map and it needed to control 10, but only the one that was selected by the user. At this point it was then a case of making an ‘engine’ that would perform actions to whatever map the user selected. So I created a 'mapChosen' variable. So when a button is pressed, it tells the zoom bar which map has been selected and therefore which one to apply the zoom too.

As a group we decided that we wouldn't need a search bar, and that the buttons to change the map should be on screen all the times for easier navigation. So kev designed the symbols for the map selection buttons and I put them into the interface.

The interface looked like this.

We then simplified the interface even more. Instead of having a 'map options' button, which would take the user to a different menu, we decided to have all of the buttons on the interface at the same time. So we moved the map selection buttons to the right hand side. Kev designed symbols for the historical maps and we placed them on the bottom of the interface.

My next task was to create a way of moving around the map once it had been selected. I first used the 'drag' function. So the user could move to an area of the map with their finger or mouse.  I used the 'mapChosen' variable. Although this worked, it became clear upon testing that it wasn't the easiest or quickest way to get around the map. Also for some reason it conflicted with the zoom component and made the maps jumpy and would often take you to a place you hadn't chosen.

So I decided to create buttons that would control the maps movements. I created a compass like controller based on the emblem kev had made in the original design.

I placed it in the middle of the interface as I thought this would be the place for best usuability.  I created four controller movie clips, one for each direction. These were placed off stage and would add or subtract the 'moveSpeed' variable from the corresponding x or y position of the map. The buttons of the compass then play these movie clips when pressed.

The next stage was to include the information boxes kev had designed.

I did this using the _visible function. So I placed all the info boxes on the stage, gave them instance names and set them to default _visible = false;.  I then imported the 'bubble style' place holders to each map and wrote each a script so that when they were clicked, the corresponding information box becomes visible. I created a further button and added it to each information box, this was a 'close' button that made the info box invisible again when clicked.

Next was the help button. I thought that to make this most helpful the page should appear directly over the map screen, keeping all other navigation buttons visible. So I created a simple black help screen that appears slightly transparent so the user can still see the map underneath. I did this again by using the _visible function.

After a group discussion we decided the interface needed more colour. So we came up with the idea of the interface appearing to be made from Bath Stone. Kev took pictures of a wall and we used it to texturise the interface. We experimented with using a Bevel filter on the buttons so they look like they are being pushed into the stone. I applied a further drop shadow to the 'down' state of the button to emphasise this further.

I then applied the texture to the borders of the interface using the 'mask' function.

The interface currently looks like this and can be tested here.

Ths picture above is  a very basic version of map as it is now, but since this version I have completed the following.

Used a better quality picture for the border to stop the pixelation.

Added sounds, and in turn a sound on/off button.

Created the Help page.

Created a phone button and the SMS ans Bluetooth interface pages.

Inserted the complete vector map and some jpegs of the historical maps.

Labelled all the buttons and finally created a preloader.

After the useability test I was pleased to find that the buttons were the right size for the touch screen and the most users intuitively navigated the interface and could quite easily perform the tasks given to them. Even though it proved a little sluggish the majority of the users we tested were impressed with the design and enjoyed using it. We were told that it looked good, was easy to navigate, intuitive and even fun to use.

Issues that arose from the test were that the majority of users struggled with the zoom slider, unfortunately due to lack of time I haven't managed to change the design but all that needs changing is the size of the button.

The  complete interface is now online and can be found HERE