Building A Tabbed Interface
- Inside the Start File
- Putting Together the Pieces
- Scripting the Interface
- Mission Accomplished
- Customizing Your Own Version
Like this article? We recommend
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).
){kind=link}
Figure 1 The Movie properties.
The movie itself is set to 30 frames per second, with a stage size of 350 x 280 pixels.