Using the Tween class for a panel sliding in

In this example we show a basic screen (the blue rectangle) with a panel that slides in when the button is pressed. Note that to simplify the presentation, in this example the sliding panel contains no controls.

Download

Download the well-commented fla file for the swf displayed above.

The Code

It is once again important to notice how the stage is set up in the fla file before reading the code. Within the Flash authoring environment we constructed on the stage a movieclip by drawing a rectangle, converting it to movieclip symbol, and giving it the instance name mcPanel. The stage has been given a size to exactly match the dimensions of the main (large blue) rectangle, and mcPanel is initially placed to the right of the stage so that it is naturally masked by the stage. This effect also can be accomplished by explicitly adding a masking layer that keeps the sliding panel hidden until it is told to slide into view.

These import statements allow us to create and control tweens in the script.

import fl.transitions.Tween;

import fl.transitions.easing.*;

Designate the home position of the sliding panel. This is the location on the stage when the panel is closed.

var ptPanelHome:Point = new Point(400, 1);

Initially set the label and rotation of the button to reflect that the panel is closed.

txtButtonLabel.text = "CLICK TO OPEN";

btnSlidePanel.rotation = 180;

Put the panel in its starting closed position.

mcPanel.x = ptPanelHome.x;

mcPanel.y = ptPanelHome.y;

Add listener to the button so a mouse click will slide the panel

btnSlidePanel.addEventListener(MouseEvent.CLICK, slidePanel);

In the function below, we declare a variable for the tween, and then address two cases. If the panel is closed (indicated by the direction of the button), we rotate the button, change the button label, and then construct a tween that moves the panel from its starting point to a point 102 px the left. This distance assures that the whole panel has moved to completely within the stage area. If the panel is open, we essentially reverse these actions. See the help files for the fl.motion.easing package for other choices of an easing function.

function slidePanel(mevt:MouseEvent):void {

var twSlide:Tween;

if (btnSlidePanel.rotation == 180) {

btnSlidePanel.rotation = 0;

txtButtonLabel.text = "CLICK TO CLOSE";

twSlide = new Tween(mcPanel, "x", Back.easeOut, ptPanelHome.x, ptPanelHome.x - 102, 10);

}

else {

btnSlidePanel.rotation = 180;

txtButtonLabel.text = "CLICK TO OPEN";

twSlide = new Tween(mcPanel, "x", Back.easeIn, ptPanelHome.x - 102, ptPanelHome.x, 10);

}

}

On the next page, we return to the example where the panel opens outward, but we add to the panel some basic controls for interacting with an object on the main screen.

Back to Basic Tutorials              Back to Flash and Math Home

We welcome your comments, suggestions, and contributions. Click the Contact Us link below and email one of us.

Adobe®, Flash®, ActionScript®, Flex® are registered trademarks of Adobe Systems Incorporated.