- 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
Scripting the Interface
The scripts that drive the tabbed interface are broken up into three parts. There's some script in the pages themselves, on the buttons, and on the main timeline.
Scripting the Pages
In this example, the content of the three page symbols is static. But the pages all need the capability to remember where their initial position is so that when they are swapped in and out of view, the whole operation is simplified. Two functions, ShowMe() and HideMe(), are added to each page so that they're self-moving.
Select Page1 and choose Edit Selected from the Edit menu.
-
Select the first frame of the ActionScript layer, open the Actions panel, and paste in this script (see Figure 5):
Return to the main timeline, and repeat the preceding two steps for both Page 2 and Page 3. The scripts are identical for each page.
){kind=link}
XOrigin = _x;
YOrigin = _y;
function HideMe() {
_x = XOrigin;
_y = YOrigin;
}
function ShowMe() {
_x = _root.PageX;
_y = _root.PageY;
}
Because this script exists on the first frame of the symbol and plays automatically, XOrigin and YOrigin are set to whatever the coordinates of the symbol are at that time. The HideMe() function uses the XOrigin and YOrigin variables to reposition the symbol back to its original coordinates. ShowMe() positions the page over the Page Set, using variable set in the main timeline.
Figure 5 Add the page script.
Code is added to automate the positioning of the Page 1 symbol.
Scripting the Main Timeline
Because all the pages need to be initialized off-stage (so that they have a place to go back to when not in view), it's necessary to script the main timeline so that Page 1 is shown by default.
Select the second frame of the ActionScript layer (on the main timeline). Open the Actions panel and paste in this script:
stop();
PageX = 175;
PageY = 155;
CurrentPage = Page1;
Show(Page1);
function Show(PageObject) {
CurrentPage.HideMe();
CurrentPage = PageObject;
CurrentPage.ShowMe();
PageSet.gotoAndStop(CurrentPage._name);
}
First up, a stop() action is used to cease playback and prevent looping. In a single-frame movie, this wouldn't be strictly be necessary, but in the two-frame setup that we need in this example the stop() is important.
Next, the PageX, PageY, and CurrentPage variables are set. PageX and PageY are used by the ShowMe() functions in each page, and the CurrentPage variable simply indicates which page is currently being viewed.
The Show() function takes whatever object it is passed (as the PageObject argument) and invokes its ShowMe() method, while hiding the current page. So, essentially the old and new current pages are swapped around. Then the PageSet object is told to go to the frame that corresponds with the current page, with the gotoAndStop() method.
NOTE
If you open up the Page Set symbol, you'll see that it contains three labeled keyframes, each showing a particular tab as "active" while the others are "inactive." Those keyframe labels are the same as the instance names of the three Page symbols, hence the use of the _name attribute in the gotoAndStop() action in the Show() function.
Scripting the Tab Buttons
The script is almost complete. The final section uses an onClipEvent(enterFrame) handler and, therefore, runs multiple times every second in accordance with the movie's frame rate. By triggering a set of instructions on each frame tick, a smooth animation effect is created.
Select the button that corresponds to the Books tab, open the Actions panel, and paste in the following script:
Repeat the process for the Video and Music buttons, changing the page number to read 2 and 3. For instance, the Video button's script would be as follows:
on (press) {
Show(Page1);
}
What's happening here is that a mouse-click event handler is being used to call the Show() function. A reference to the object Page1 is passed as an argument so that the function knows which page to show.
on (press) {
Show(Page2);
}It's important that the buttons be scripted to show the correct page object; otherwise, the tab being displayed as "active" will not match the actual content shown.