Adding controls to the sliding panel

In this example we will enhance the "panel sliding out" example from this tutorial by adding controls to the sliding panel to interact with an object on the main screen. The exact same changes could be made to the example with the "panel sliding in." Additionally, controls can be placed in the areas covered by sliding panels. When covered by a panel, they become inactive.

Download

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

The Code

For this example we constructed on the stage a movieclip by drawing a rectangle, converting it to movieclip symbol, and giving it the instance name mcPanel. It exists on a layer below the main layer so when it moves to the left it goes beneath the large blue rectangle. We added (by double clicking the mcPanel movieclip to access its timeline) the colorpicker and numericalstepper components to mcPanel giving them appropriate instance names. From the main timeline we must reference these components as mcPanel.numWidth and mcPanel.colorSquare.

The first two import statements will allow us to create and control tweens in the script. The second two import statements are needed for using the color picker component.

import fl.transitions.Tween;

import fl.transitions.easing.*;

import fl.controls.ColorPicker;

import fl.events.ColorPickerEvent;

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;

Create the colored square on the stage that will be manipulated by controls on the sliding panel.

var square:Shape = new Shape();

square.x = 50;

square.y = 50;

addChild(square);

Set the initial values of the variables controlling the width and color of the little square on stage.

var currentWidth:Number = 50;

var currentColor:uint = 0xCC0000;

Add a 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);

}

}

The following helper function changes the graphics property of the square shape to match the width and color parameters passed to it.

function drawSquare(w:Number, c:uint):void {

square.graphics.clear();

square.graphics.lineStyle(2,0);

square.graphics.beginFill(c);

square.graphics.drawRect(0,0,w,w);

square.graphics.endFill();

}

We add listeners for the two controls on mcPanel, and write the appropriate functions to make them affect the little square on the main layer.

mcPanel.numWidth.addEventListener(Event.CHANGE, widthChanged);

 

function widthChanged(evt:Event):void {

currentWidth = mcPanel.numWidth.value;

drawSquare(currentWidth, currentColor);

}

 

mcPanel.colorSquare.addEventListener(ColorPickerEvent.CHANGE, colorChanged);

 

function colorChanged(cpevt:ColorPickerEvent):void {

currentColor = cpevt.color;

drawSquare(currentWidth, currentColor);

}

Set the initial states of the controls and draw the square intitially with these parameters.

mcPanel.numWidth.value = currentWidth;

mcPanel.colorSquare.selectedColor = currentColor;

 

drawSquare(currentWidth, currentColor);

On the next page, we show how the Tween class can enhance a simple drag and drop interaction.

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.