Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Design > Adobe Creative Suite

Building A Tabbed Interface

  • Print
  • + Share This
Tabbed interfaces are a great way to pack content into a compact space. David Emberton guides you through the creation of a simple tabbed interface in Flash, using buttons, movie clips, and a smattering of script.
David Emberton is the co-author of Flash 5 Magic (New Riders, 2001), with Scott Hamlin.
Like this article? We recommend

Like this article? We recommend

Space, whether on a cave wall or a computer screen, has always been at a premium. As computer interfaces have evolved, more has needed to be crammed onto the screen at once. This has given rise to a number of novel solutions for displaying more objects in a still-usable way. The tabbed interface is one such solution to the space crunch.

Tabbed interfaces work by grouping objects into several pages and then stacking those pages on top of one another. By clicking the tab for a particular page, a user can bring that page to the front and access the objects on it. This method is commonly used for control panels and application preferences, but it's also a great way to present Web content.

Flash is especially useful for creating tabbed interfaces in the form of specialized scripted animations that mimic the traditional behaviors of those interfaces. In this tutorial, you'll be building such a tabbed widget called Sue's Best Buys, designed to display a book, video, and CD of the month. Click for a ZIP file (280k) here or an HQX file (392k) here to see what it looks like.

Inside the Start File

To get you on your way, I've prepared a start file that includes all the basic symbols and movie settings required. Here is the list of movie clips, graphics, and buttons as they appear in the Library:

  • Page 1, 2, and 3—The Page symbols will contain the various graphics, controls, and animations belonging to each tab. In this example, there are three.

  • Page Set—The Page Set symbol forms the remaining part of the interface, including the background, a logo, and the tabs (shown in their various positions.)

  • Supporting Graphics (Folder)—The Supporting Graphics folder contains several graphic symbols that are used elsewhere in the movie: Books, Music, Sue's Best Buys Logo, and Videos.

  • Tab button—This is the button that will trigger each tab to appear when clicked. It is a special kind of button called an "invisible button" because it contains only a hit state, no up, over, or down graphics. In the authoring environment, such buttons appear a semitranslucent blue so that they can be moved about.

  • The Movie properties—These should be set to the correct frame rate and stage size, with the four layers provided (see Figure 1).

  • Figure 1 The Movie properties.

The movie itself is set to 30 frames per second, with a stage size of 350 x 280 pixels.

  • + Share This
  • 🔖 Save To Your Account