In the zip file, sliders.zip, that you can download below, you will find HorizontalSlider.as - the exhaustively commented source file for the HorizontalSlider class. Below we discuss only a few aspects of the code. In order to keep the flow of the code intact, we inserted our comments as code comments enclosed by /*...*/. Note that unlike in several other tutorials in Bridging the Gap Section, this time our classes are contained in a package (other than the generic 'package'). A package is simply a sequence of nested folders, in our example: com -- flashandmath -- utilities. Packages help you keep your classes organized.
package com.flashandmath.utilities {
/*
We import the built-in AS3 classes that the HorizontalSlider class needs and
then declare the class. The class extends the Sprite class.
Hence, it will inherit all properties and methods
of the Sprite class. In other words, every instance of HorizontalSlider will be a Sprite.
*/
import flash.display.Sprite;
import flash.display.Shape;
import flash.events.*;
import flash.geom.Rectangle;
public class HorizontalSlider extends Sprite {
/*
The Sprite class is a subclass of the EventDispatcher class. Thus,
every Sprite can dispatch events. Our HorizontalSlider will dispatch
a custom event, HorizontalSlider.SLIDER_CHANGE (or "sliderChange")
when the position of the knob changes as the user drags it.
To create a custom event, we begin by declaring a public static
(common to all instances) constant holding the name of the event.
*/
public static const SLIDER_CHANGE:String = "sliderChange";
/*
In this class, we use the access modifier 'protected' rather than 'private'.
This means that all variables and methods will be accessible to a developer
who wishes to extend the class. Most of the variables below hold information about
the appearnce of an instance of HorizontalSlider.
*/
protected var nLength:Number;
protected var shTrack:Shape;
protected var spKnob:Sprite;
protected var nKnobColor:Number;
protected var nKnobOpacity:Number;
protected var nKnobSize:Number;
protected var nKnobRightLine:Number;
protected var nKnobLeftLine:Number;
protected var nTrackOutColor:Number;
protected var nTrackInColor:Number;
protected var sStyle:String;
protected var rBounds:Rectangle;
protected var _isPressed:Boolean;
protected var prevX:Number;
/*
The constructor takes two parameters: the length of an instance and the type of the knob.
Two types are available in this version of the class: 'rectangle' and 'triangle'.
If a different type is entered, the knob will not be drawn. The constructor
initializes most of the variables, calls the functions that draw and activate the slider,
and sets the initial position of the knob at 0.
*/
public function HorizontalSlider(len:Number,style:String){
this.nLength=len;
this._isPressed=false;
this.nKnobColor=0x666666;
this.nKnobOpacity=1.0;
this.nKnobSize=8;
this.nKnobRightLine=0x000000;
this.nKnobLeftLine=0xFFFFFF;
this.nTrackOutColor=0x333333;
this.nTrackInColor=0xFFFFFF;
this.sStyle=style;
rBounds=new Rectangle(0,0,nLength,0);
shTrack=new Shape();
this.addChild(shTrack);
spKnob=new Sprite();
this.addChild(spKnob);
drawSlider();
activateSlider();
setKnobPos(0);
}
protected function drawSlider():void {
//The function draws the slider with a rectangular or a triangular knob.
.................
}
/*
The protected function 'activateSlider' adds event listeners to the knob
that will start and stop dragging. Note that in 'downKnob' listener,
we add a listener to 'stage' that listens to the MOUSE_UP event.
The listener will prevent dragging to continue if the mouse
is pressed over the knob but relased outside the knob.
We do not want to use ROLL_OUT event to stop dragging when the mouse
pointer leaves the knob as that would make dragging a small
knob difficult for the user.
We also add to 'stage' a listener that listens to MOUSE_MOVE.
This listener will trigger the custom event SLIDER_CHANGE
as the postion of the knob changes while being dragged.
It will also makes dragging smoother as with MOUSE_MOVE event we can use
'updateAfterEvent' method.
*/
protected function activateSlider(): void {
spKnob.addEventListener(MouseEvent.MOUSE_DOWN,downKnob);
spKnob.addEventListener(MouseEvent.MOUSE_UP,upKnob);
}
protected function downKnob(e:MouseEvent): void {
spKnob.startDrag(false,rBounds);
stage.addEventListener(MouseEvent.MOUSE_UP,upOutsideKnob);
stage.addEventListener(MouseEvent.MOUSE_MOVE,handleMove);
prevX=spKnob.x;
_isPressed=true;
}
protected function handleMove(e:MouseEvent):void {
var curX=spKnob.x;
if(_isPressed){
if(Math.abs(curX-prevX)>0){
prevX=curX;
//Our custom event is being dispatched. Note the syntax.
dispatchEvent(new Event(HorizontalSlider.SLIDER_CHANGE));
e.updateAfterEvent();
}
}
}
protected function upOutsideKnob(e:MouseEvent): void {
spKnob.stopDrag();
stage.removeEventListener(MouseEvent.MOUSE_UP,upOutsideKnob);
stage.removeEventListener(MouseEvent.MOUSE_MOVE,handleMove);
_isPressed=false;
}
protected function upKnob(e:MouseEvent): void {
spKnob.stopDrag();
stage.removeEventListener(MouseEvent.MOUSE_UP,upOutsideKnob);
stage.removeEventListener(MouseEvent.MOUSE_MOVE,handleMove);
_isPressed=false;
}
/*
We create a getter for the protected '_isPressed' property without creating a setter.
That will make 'isPressed' behave like a public, read-only property.
*/
public function get isPressed():Boolean {
return _isPressed;
}
/*
Next come public customization methods presented on the previous page.
Each of them sets the value of the corresponding variable, say nKnobColor,
and redraws the slider. If you open the HorizontalSlider.as file, you will find the
code self-explanatory.
*/
.................
Download
- Download 'fla' and 'as' files corresponding to this tutorial: sliders.zip
