Using the Tween class for a panel sliding out

In this example we show a basic screen (the blue rectangle) with a panel that slides out when the button is pressed. Note that to simplify the presentation, in this example the sliding panel contains no controls. Neither does the area covered by the panel when it slides out. In general, both the panel and the area covered by it when the panel slides out can contain controls: buttons, components, etc. Controls covered by the panel will become inactive as they will be hidden under a display object.

Download

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

The Code

It is 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. Note that it exists on a layer below the main layer (which contains only the large blue square) so when mcPanel moves to the left, it goes beneath the large blue square on the main layer.

For all of our examples, we need the following two explicit import statements. These will allow us to create tweens in the script and have them use fancy easing functions for starting and/or stopping.

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 100 pixels to the right. This distance assures that the whole panel has moved completely beyond what is covered by main layer. 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 repeat this same idea but with a panel that opens inward instead of outward.

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.