AS3 How to and Tips > How to Add Interactivity with the Slider Component in AS3

This "how-to" takes the form of "before and after" examples. The lesson here is to take an example that would normally have a complicated user interface, and simplify things with a Slider component. The "before" example will be one from a recent "how-to" article, Tricks for Drawing and Filling Partial Circles, which uses two buttons and keyboard listeners to get a desired effect. In the "after" example, we demonstrate how quickly this can be changed to use a Slider component to manage all of the user interactivity. To read about using the Slider component alone, refer to the recent "how-to" article, How to Use Slider and NumericStepper Components.

Before

In its original form, the angle of the circular sector can be changed through mouse clicks or by holding down the left of right arrow key on the keyboard:

After

After the quick changes we discuss below, the new applet uses only a Slider object for the user interface:

Download

Download the complete, commented FlashCS3 file for the final application: FilledCircleSlider.fla

Changing the stage

The difference between the "before" stage and the "after" stage is best seen by referring to the fla file from the original application, FilledCircle.fla. To prepare the "after" example, we simply delete buttons btnMore and btnLess, add a Slider object (dragged from the Components panel) with instance name slAngle, and make some cosmetic rearrangements to achieve something like the "after" example above. All other changes are made in the code.

Changing the code

While the complete code for the final application is given below, we wish to emphasize the changes to were made to the original. Hence, in the code listing below, we point out where existing code is deleted and then write the much shortee replacement code using a green color so it is easy to spot.

The script starts with several numerical settings that a programmer might want to adjust, placed for convenience at the beginning of the code.

var degree:Number = 0; // Initial angle

var degChange:Number = 1; // Amount angle will change on each click

var circleR:Number = 100; // Circle radius (in pixels)

var circleX:Number = 180; // Screen coordinates of center of circle

var circleY:Number = 180;

var angleR:Number = circleR/4; // Radius of circular arc that illustrates the angle

We make a Sprite called spBoard on which to place the other elements. This way, changing the x and y properties of spBoard will reposition it along with all of its children.

var spBoard:Sprite = new Sprite();

spBoard.x = circleX;

spBoard.y = circleY;

addChild(spBoard);

We create all of the Shapes that we will use, we draw in them, and then we add them as children to spBoard in the order we want them layered. The shCircle Shape is self-explanatory (the perimeter of a circle), the Shape shFill will eventually be our circular sector, and shAngle will be the circular arc that sweeps out the angle. Like spBoard, the Shape object shArrow (the little cursor that looks like an arrowhead) is only drawn once. By drawing the arrow relative to the (0,0) point on spBoard, we will be able to accomplish the desired rotation effect via simple change of the shArrow.rotation property.

var shCircle:Shape = new Shape();

shCircle.graphics.lineStyle(2,0x000000);

shCircle.graphics.drawCircle(0,0,circleR);

shCircle.x = 0;

shCircle.y = 0;

 

var shFill:Shape = new Shape();

shFill.graphics.lineStyle(1,0x000000);

shFill.graphics.moveTo(0,0);

shFill.graphics.lineTo(circleR,0);

shFill.x = 0;

shFill.y = 0;

 

var shAngle:Shape = new Shape();

 

var shArrow:Shape = new Shape();

shArrow.graphics.lineStyle();

shArrow.graphics.beginFill(0x000000);

shArrow.graphics.moveTo(angleR,1);

shArrow.graphics.lineTo(angleR-5,8);

shArrow.graphics.lineTo(angleR+5,8);

shArrow.graphics.lineTo(angleR,1);

shArrow.graphics.endFill();

 

spBoard.addChild(shFill);

spBoard.addChild(shAngle);

spBoard.addChild(shArrow);

spBoard.addChild(shCircle);

The heart of the program is the function updatePicture to do more than just rotate the radial line. At each step we clear all the graphics from shFill and then redraw an entirely new picture composed of an appropriate number of sides of a 360-sided polygon inscribed in our circle. This will give the appearance of filling the circular region. Similarly, we draw the "circular" arc shAngle as part of a smaller 360-sided polygon.

function updatePicture(t:Number):void {

var radianAngle:Number = t*Math.PI/180.0;

var i:int;

shFill.graphics.clear();

shAngle.graphics.clear();

shFill.graphics.lineStyle(1,0x000000);

shAngle.graphics.lineStyle(1,0x000000);

shFill.graphics.moveTo(0,0);

shAngle.graphics.moveTo(angleR,0);

shFill.graphics.beginFill(0xFF00FF,0.7);

 

// The loop draws tiny lines between points on the circle one

// separated from each other by one degree.

for (i=0; i<=t; i++) {

shFill.graphics.lineTo(circleR*Math.cos(i*Math.PI/180), -circleR*Math.sin(i*Math.PI/180) );

shAngle.graphics.lineTo(angleR*Math.cos(i*Math.PI/180), -angleR*Math.sin(i*Math.PI/180));

}

 

//The final lineTo outside of the loop takes the "pen" back to its starting point.

shFill.graphics.lineTo(0,0);

 

//Since the drawing is between beginFill and endFill, we get the filled shape.

shFill.graphics.endFill();

 

//We rotate the arrow head appropriately -- this is much easier than doing

//the trig to figure out how to redraw it dynamically.

shArrow.rotation = -t;

 

//The remaining lines position the txtCoords textbox, create a string

//showing the coordinates to two decimal places to put this

//into this textbox, and put the current radian value of t and

//the area of the shaded region into the appropriate textboxes.

txtCoords.x = circleX + (40+circleR)*Math.cos(radianAngle)-40;

txtCoords.y = circleY - (20+circleR)*Math.sin(radianAngle)-10;

txtCoords.text = "(" + Math.cos(radianAngle).toFixed(2) + ", " + Math.sin(radianAngle).toFixed(2) + ")";

txtDegrees.text = radianAngle.toFixed(2);

txtArea.text = (radianAngle/2).toFixed(4);

}

At this point in the original code, there are over 30 lines of code to handle the user clicking on either of the buttons and the user pressing the left or right arrow keys on the keyboard. In the new example with the Slider object slAngle, hese 30+ lines of code are replaced by the following:

slAngle.minimum = 0;

slAngle.maximum = 360;

slAngle.value = 0;

slAngle.liveDragging = true;

 

slAngle.addEventListener(Event.CHANGE,sliderChanged);

function sliderChanged(evt:Event):void {

degree = slAngle.value;

updatePicture(degree);

}

Finally, as in the original example, we call the updatePicture function initially by placing the following line at the end of our script. This will ensure that all graphics objects are drawn, the txtCoords textbox is placed in the correct position, and other textboxes initially contain correct information.

updatePicture(degree);

Back to AS3 How To and Tips              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.