1. Examining the mobile movie application
  2. This section examines a mobile movie application that I recently created. As I built this project, I designed the prototype template in Fireworks so that the design elements could be repurposed for use in Flash to develop the final product.

    The screenshots highlight the main features of the mobile movie application. Users can watch trailers of new releases (with normal display or full screen), get detailed information about each film, and buy tickets to see the show. I also created a built-in help system to make it easy for users to navigate through the application. This may be a small application, but it fills the needs of the average film buff while also marketing new films in theaters.

    Here's the application's feature list:

    • Watch movie trailers (normal display)
    • Watch movie trailers in optional full-screen mode
    • Get detailed information about movies
    • Buy tickets
    • Control video playback: play, pause, rewind, and fast-forward
    • Adjust audio levels with the built-in equalizer
    • Set the volume
    • Get instructions on how to use the application in the help system

    In order to make it easy for users to navigate through the list of movies, I created a simple interface using the right and left arrow keys (see Figure 1).

    Mobile Device

    Figure 1: Jumping between movies by pressing the right and left arrow keys in the main application screen

    A large "Info" button allows user to access more information quickly about the current movie title they are viewing (see Figure 2).

    Mobile Device

    Figure 2: Movie information page displaying additional details

    When users visit the information page for a movie, they are presented with a "Play" button. This offers the ability to view the movie's trailer. The "Tickets" link makes it easy for users to purchase tickets to see a specific show (see Figure 3).

    Mobile Device

    Figure 3: Ticket screen displaying showtimes and ratings, along with a "Buy Tickets" button

    This interface allows users to scan quickly through the featured movie selections, get more information about their favorites, watch a movie trailer, and purchase tickets to go see it, all in a very natural and intuitive manner.

    Since the show times and theaters are listed right where the users purchase their tickets, they are able to select their desired location and time without ever leaving the interface. In fact, during trailer playback, users can purchase tickets and return to the movie's information page.

    Full-screen mode allows users to see a better quality version of the trailer (see Figure 4). Pressing the asterisk ("*") key does this; otherwise the trailer plays in normal mode.

    Mobile Device

    Figure 4: Watching a trailer in full-screen mode

    The movie application offers the ability to increase or decrease the volume of the trailer's audio. It made the most sense to me to use the up and down soft keys to accomplish this (see Figure 5). And if you like to watch trailor again you can just click the rewind button.

    Mobile Device

    Figure 5: Pressing the left or right soft keys during playback to decrease or increase the volume

    While the movie trailer is playing, it's important to provide users with a quick way to stop the movie since they may encounter situations requiring them to focus their attention elsewhere. The built-in help system offers quick tips for navigating through the application (see Figure 6). This quick reference tool makes it easy for people to find out which keys do what in the application.

    Mobile Device

    Figure 6: Help system providing instructions on using the application interface

    In the next section, I describe some of the guidelines and considerations I followed when building the mobile movie application.

Become an author

  • Submit your tutorials and articles. Anyone can send in a contribution.
  • Learn More

Amazon Shop

Products

Wallpapers