Hands-on introduction

In this hands-on tutorial you create a mobile-compatible version of a Restaurant Finder. This Restaurant Finder was originally created as a Flash application for a website. It was aimed purely for desktop computer users. Now your customers want to make this Restaurant Finder compatible with mobile devices.

View the desktop Restaurant Finder web page

When you have access to the internet and visit the above web page, the map data is downloaded from Google Maps. However, if you access this page from your computer's hard drive, Flash displays the message depicted in the figure below. In order to stop this message from appearing select Settings... and implement the settings depicted in the following figures:

Restaurant Finder is a simple widget for finding restaurants in Monaco, shows their contact details and location on a map. You can use the widget to search by either food type, view a map of the whole of Monaco or view the whole directory of restaurants. Clicking a restaurant's details in the directory shows it's location on the map.

Since the Flash application has been published as a standard Flash 8 application using ActionScript 2.0, mobile devices using the latest version of Flash Lite 3.0 can display and run Flash 8 applications.

The following issues occur with the desktop version when viewed on a mobile:

• The content appears too large for most displays, forcing the user to zoom out or pan around.
• Map takes a long time to download and lacks a loading sign informing the user about the downloading progress.
• The user may want to download the Flash to their mobile device and keep it for future use, but the map does not display when loading Flash from the device's memory card.
• Issues for devices not supporting touch:
  • Mouse movement is slow over mouse-over areas.
  • TUsers must click Flash content to activate it and select Cancel softkey to regain access to the rest of the web page (issue known as a mouse trap).
• Issues for devices supporting touch:
  • Hover (mouse-over) states work only when the user clicks or drags over.
  • When the interactive list covers the whole screen it is not possible to drag and move away from the list.
  • Dragging over the list sometimes causes more than one item to be highlighted.

In this hands-on you resolve all these issues. Additionally, you add several mobile-specific features, such as location awareness and automatic dialling of restaurant numbers.