Recently I started using Flash Develop 4, and it has been a change I'm glad I made. Not that Flash Develop is perfect, but it is so much better that it is worth the few quirks it has. There are several ways to use Flash Develop if you are coming from a Flash IDE environment. This article, Beginner's Guide to Flash Develop really helped me get started. The majority of the work I do is the building of custom applications, and so I always have a need for some combination of the Flash components - buttons, datagrids, comboboxes, etc. In order to continue using these components I created a swc file to hold the library and imported it into Flash Develop. This is an easy way to do it, and 99% of the time this works flawlessly, but I did start to notice that some things were not responding correctly. I would find myself missing a button skin for instance, and it was this small lack of consistency that led me to creating my own set of custom components. The XSlider is one of these.

When making my own components my goals were: 1) to create things that did not rely on imported graphics; 2) to add in the features that I wished the Flash component versions had, and 3) Make skinning the components easy once and for all.  This tutorial was developed in Flash Develop 4, but as they are pure AS3 classes you can use them in any environment. All the files that make up this demonstration are in the zip file - sliderDemo.zip, which contains a Flash Develop project, and in the src folder is also an fla file for use in Flash CS5. One of the classes, SliderBubble.as, uses the Caurina Tweener package, which I have included. If you use a different tweening engine you can just import the correct package and change the tweening code to match. To use these files do one of the following: If you have your own class library set up, drop the included folders into it; or place the ca and caurina folders and the Main.as file in the same place as your fla file. Download the zip file, and let's get going.

The Demo

Below is a demonstration of several versions of the XSlider in action. Number one, titled Default Settings, is straight out of the box with no options applied, other than the slider bubble. Number 2, titled Custom Scale, uses an array of objects to create a custom scale. Number 3, titled No Scale, custom Min / Max values, constant update, does not show us a scale, uses custom min and max values, and also uses the constant update feature. Number 4, titled Custom colors, track length, divisions, min / max values, uses custom colors for the slider track and the triangle icon, a custom number of divisions, and a custom set of min and max values. We'll look at these in a bit more detail when we get into the document class, Main.as.


The Main.as Class

Open up the Main.as class from the zip file you downloaded. This class is the Document class that runs the whole show.
package {
    import flash.display.Sprite;
    import flash.events.*;
    import flash.text.*;
    import ca.xty.components.XSlider;
    import ca.xty.components.ShapeFactoryComp;


First we import all the classes we need. We need the Sprite class from the flash.display package. Then we grab all the events classes. We do this by using an asterisk, which is saying, "Get me all the classes in the flash.events package". We do the same for the flash.text classes. Then we import two classes from the ca.xty.components package, XSlider - which builds and runs our slider component, and the ShapeFactoryComp class which handles the drawing of the various graphics we use here.

public class Main extends Sprite {
       
    private var redBox:Sprite;
    private var redBoxMin:Sprite;
    private var redBoxMax:Sprite;
    private var sf:ShapeFactoryComp = new ShapeFactoryComp();
       
    private var xs1:XSlider;
    private var xs2:XSlider;
    private var xs3:XSlider;
    private var xs4:XSlider;
       
    private var sArray:Array = [{Txt:"0", data:0}, {Txt:"100", data:100}, {Txt:"1K", data:1000}, {Txt:"10K", data:10000}, {Txt:"100K", data:100000}, {Txt:"1M", data:1000000}];
       
    private var t1:TextField;
    private var t2:TextField;
    private var t3:TextField;
    private var t4:TextField;
    private var t5:TextField;
    private var t6:TextField;
    private var t7:TextField;
   
    private var it1:TextField;
    private var it2:TextField;
    private var it3:TextField;
       
    private var tf:TextFormat;
    private var tfc:TextFormat;
       
    private var xPos:int;
    private var yPos:int;


Next up we declare the variables we will be using. These are all set to private as they will only be used inside the Main class. Make note of the sArray. This is an array of Objects that will create a custom scale for our slider. Each Object, denoted by the curly braces, gives us two properties. The first property, Txt, is the string that will sit above the lines, and the second property, data, is the integer equivalent of the Txt property. In this example, {Txt:"1K", data:1000}, we use the string "1K" to represent the integer value of 1000. We do this because we have limited space for the text.

public function Main():void {
           
    tf = new TextFormat();
    tf.size = 12;
    tf.color = 0x000000;
    tf.font = "Verdana";
    tf.align = "left";
           
    tfc = new TextFormat();
    tfc.size = 12;
    tfc.color = 0x000000;
    tfc.font = "Verdana";
    tfc.align = "center";
           
    xPos = 30;
    yPos = 20;
           
    t1 = new TextField();
    t1.x = xPos;
    t1.y = yPos;
    t1.width = 200;
    t1.height = 20;
    t1.text = "1) Default Settings";
    t1.setTextFormat(tf);
    addChild(t1);
           
    xPos += 20;
    yPos += 60;


After the constructor, we set the properties for our two TextFormats, tf and tfc. The only difference between these two is the align property, which in the case of the tfc format is declared as "center". Then we establish our starting x and y values by declaring the xPos and yPos variables. These will look familiar if you have read any of my other tutorials. Basically they are an easy way to change your mind. By using these variables I can lower the entire set up by 10 pixels if I want by simply changing the initial yPos value from 20 to 30. Doing it this way I don't have to visit every TextField, etc and change their y properties individually.

Now let's look at the first slider.

xs1 = new XSlider();
xs1.x = xPos;
xs1.y = yPos;
xs1.useSliderBubble = true;
xs1.addEventListener(XSlider.SLIDER_READY, getSlider1Num);
addChild(xs1);


This the basic slider using all the default settings except the useSliderBubble. By setting this property to true, we will make use of this feature. Notice that the event listener uses a custom event SLIDER_READY.

Example 2

xs2 = new XSlider();
xs2.x = xPos;
xs2.y = yPos;
xs2.useSliderBubble = true;
xs2.scaleMarker = sArray;
xs2.addEventListener(XSlider.SLIDER_READY, getSlider2Num);
addChild(xs2);


In this example we are defining the property scaleMarker and populating it with our custom array, sArray. This will force the slider to use this for the scaling graphics and for all the calculations.

Example 3

redBoxMin = sf.createSprite(0xff0000, 10, 10);
redBoxMin.x = xPos;
redBoxMin.y = yPos;
addChild(redBoxMin);
           
xPos += 25;
yPos += 10;
           
xs3 = new XSlider();
xs3.x = xPos;
xs3.y = yPos;
xs3.useSliderBubble = true;
xs3.useScale = false;
xs3.minNum = 1;
xs3.maxNum = 2;
xs3.constantUpdate = true;
xs3.addEventListener(XSlider.SLIDER_READY, scaleBox);
addChild(xs3);
           
xPos += 105;
yPos -= 20;
           
redBoxMax = sf.createSprite(0xff0000, 20, 20);
redBoxMax.x = xPos;
redBoxMax.y = yPos;
addChild(redBoxMax);

xPos += 150;
           
redBox = sf.createScalableRect(0xff0000, 50, 50);
redBox.x = xPos;
redBox.y = yPos;
addChild(redBox);


This example makes different use of the slider. Instead of determining a picked number we are using the slider to scale the redBox Sprite. The other two red boxes, one on either side of the slider, graphically represent the scale. To create the slider xs3 we set the useScale property to false, set the minNum to 1 and the maxNum to 2, and set the constantUpdate property to true. Our min and max values mean that we can double the size of the large red box. A scale of 1 is the normal state for the red box, and the max value of 2 allows us to increase the scale by double. The property constantUpdate dispatches the event every time the the triangle icon is moved. We don't need a scale in this case because we are setting the desired size of the box visually. We have the useSliderBubble property set to true, but normally I would set it to false. I turned it on here to demonstrate the the toFixed() function. You can see that the number reported in the bubble never has more than two digits after the decimal point.

Example 4

xs4 = new XSlider();
xs4.x = xPos;
xs4.y = yPos;
xs4.useSliderBubble = true;
xs4.minNum = 0;
xs4.maxNum = 500;
xs4.trackWidth = 200;
xs4.numDivisions = 10;
xs4.trackColor = [0xfabab8, 0xff0000];
xs4.iconColor = [0xb8fad3, 0x02d120];
xs4.addEventListener(XSlider.SLIDER_READY, getSlider4Num);
addChild(xs4);


Our last example shows off a few of the other properties available for customizing the XSlider component. We have set the min and max values to give us a range between 0 - 500. The trackWidth property is set to 200, the numDivisions is set to 10, and the trackColor and iconColor have been assigned a red gradient and a green gradient.

Functions
private function getSlider1Num(e:Event):void {
    var sNum:Number = xs1.passNum;
    it1.text = String(sNum);
}
       
private function getSlider2Num(e:Event):void {
    var sNum2:Number = xs2.passNum;
    it2.text = String(sNum2);
}
       
private function scaleBox(e:Event):void {
    var sNum3:Number = xs3.passNum;
    redBox.scaleX = sNum3;
    redBox.scaleY = sNum3;
}
       
private function getSlider4Num(e:Event):void {
    var sNum4:Number = xs4.passNum;
    it3.text = String(sNum4);
}


These four functions handle the SLIDER_READY events fired by the XSlider class. Numbers 1, 2, and 4 work the same, by taking the public variable passNum from the XSlider class, turning it into a String and then displaying it in the appropriate TextField. Function number 3 works slightly different. The slider xs3 has the constantUpdate property set to true and so it is firing the event constantly. Here we take the passNum value and apply it to the redBox's scaleX and scaleY properties to expand and contract the redBox's size.

Now that we've seen our slider at work, let's take a look at the XSlider class itself.