- 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
Putting Together the Pieces
The first step in creating the tabbed interface is to lay out all the various component symbols. Movie clips needing to be controlled by ActionScript will also be given instance names.
Page Set
The Page Set symbol contains the decorative graphics that frame the actual content. In this case, the page set looks literally like a set of tabs, but the graphical look is totally configurable. Here's how to lay it out.
Select the Page Set layer, and move the frame selector to frame 2.
Open the Library and drag an instance of Page Set onto the stage. Use the Info panel to position it at X: 20.8, Y: 17.9.
Use the Instance panel to name the instance PageSet.
NOTE
Everything in this movie is placed on the second frame, except for the pages themselves. This is because they will include positioning scripts that need to run before the interface can be initialized. The pages themselves will be placed off the stage and swapped in and out with script.
Where's the Content?
You may have noticed that the Page Set doesn't include the actual content (see Figure 2). Instead, the content for each page will be placed in a separate symbol and placed off-stage while not in use. Page Set could hold the content, but when Flash switches from one frame to another, it doesn't preserve the state of those frames. So, if the user made changes to the content on page 1 and then went to page 2, those changes would be lost. Separating the pages and keeping them active preserves their state even when they're positioned out of view.
){kind=link}
Figure 2 Name and position the Page Set.
An instance of Page Set is created and named PageSet.
The Tab Buttons
While Page Set is just a graphical representation of the interface, the Tab buttons are responsible for handling mouse input and triggering changes in the interface. As mentioned previously, the Tab button symbol is an "invisible button," with a hit state but no graphics of its own. This allows for the Page Set symbol to show through.
Select the Tab Buttons layer, and move to the second frame.
Drag an instance of the Tab Button symbol onto the stage.
-
Copy and paste the button so that there are a total of three, one for each tab. Position them over the "tabs" shown in the Page Set, at the following coordinates: X: 127.0 Y: 35.0, X: 194.0 Y: 35.0, X: 261.0 Y: 35.0 (see Figure 3).
){kind=link}
Figure 3 Position the buttons.
Three buttons are laid out over the corresponding Page Set graphics.
Pages 1 Through 3
Now that the Page Set and Tab buttons are all set up and ready to roll, it's time to position the three pages themselves. Pages 1–3 will be scripted to remember their initial positions (wherever that is) and return to that position when they're not being viewed. So, let's lay them out.
Select the Pages layer, and move to frame 1.
-
Create an instance of Page 1, Page 2, and Page 3, and drag them off-stage. (If you want to be exact, the positions in Figure 4 are X: –289.5 Y: 136.5, X: –289.5 Y: 52.5, and X: -289.5 Y: 241.4, respectively.)
Name the instances (in descending order) Page1, Page2, and Page3.
){kind=link}
Figure 4 Position the page symbols.
The three pages are instanced and then positioned off the stage.
Now that all the symbols are in place, it's time to add the scripts that make it all work.