A Custom HorizontalSlider AS3 Class in Action: Applying Color Tints to a Photo

In the fla file, sliders.fla, corresponding to the applet, we chose to place the code on the MainTimeline rather than in a Document Class for the sake of simplicity. We leave it as a simple excercise for the reader to create a Document class that would replace the Timeline code.

The HorizontalSlider class is contained in a package (i.e., a nested sequence of folders) called: com -- flashandmath -- utilities. Thus, at the start of our Timeline code, we need the import statement:

import com.flashandmath.utilities.HorizontalSlider;

For Flash to be able to find the package, the nested sequence of folders, com -- flashandmath -- utilities has to be in the same directory as sliders.fla file.

The photo has been imported to the Library and linked to AS3 with the name 'Lilies'. The linked class 'Lilies' automatically becomes a subclass of the BitmapData class. We create an instance of it and store in the variable 'bdLilies'.

var bdLilies:BitmapData=new Lilies(260,195);

We pass the BitmapData object to the constructor class og the Bitmap class and create a Bitmap object, bmLilies. We add it as a child of the MainTimeline and position it on the Stage.

var bmLilies:Bitmap=new Bitmap(bdLilies);

this.addChild(bmLilies);

bmLilies.x=30;

bmLilies.y=80;

We will create three instances of our custom HorizontalSlider class, all of the length 250. (The choice the length is arbitrary. We need to represent values of the red, green and blue mulitpliers which are between 0 and 1. The longer the slider, the smaller change in multipliers between consecutive positions of the knob.)

var sliderLen:Number=250;

The constructor of the HorizontalSlider class takes two parameters: the length of the slider and the type of the knob. (Possible choices are 'triangle' or 'rectangle'. If another string is entered, the knob will not be drawn.) The size and the coloring of the knob and the slider track can be customized later using the methods of the class.

var hsSliderRed:HorizontalSlider=new HorizontalSlider(sliderLen,"triangle");

addChild(hsSliderRed);

hsSliderRed.x=350;

hsSliderRed.y=90;

We are using the methods of the HorizontalSlider class to customize the color of the knob and its initial position.

hsSliderRed.changeKnobColor(0xCC0000);

hsSliderRed.setKnobPos(sliderLen);

We create two other instances, hsSliderGreen and hsSliderBlue similarly.

.................

The values of red, green and blue multipliers corresponding to the initial positions of the knobs are set and displayed in the text boxes.

var curRed:Number=1;

var curGreen:Number=1;

var curBlue:Number=1;

redBox.text=String(Math.round(curRed*1000)/1000);

.................

The next function translates the position of each knob to a value of a multiplier.

function knobPosToVal(p:Number):Number {

return p/sliderLen;

}

The next function is called whenever the position of any of the sliders' knobs changes. The function updates the color of the photo by assigning a new ColorTransform object to the bmLilies.transform.colorTransform property. To apply a color tint, we adjust the values of the multipliers, red, green, and blue. We leave the alphaMultiplier equal to 1, and all of the offset values equal to 0. Recall, that to apply a solid color to an object, we do the opposite: we set the mulipliers to 0 and adjusted the offset values.

function updatePicture():void {

bmLilies.transform.colorTransform=new ColorTransform(curRed,curGreen,curBlue,1,0,0,0,0);

redBox.text=String(Math.round(curRed*1000)/1000);

greenBox.text=String(Math.round(curGreen*1000)/1000);

blueBox.text=String(Math.round(curBlue*1000)/1000);

}

Each instance of the HorizontalSlider dispatches a custom event 'HorizontalSlider.SLIDER_CHANGE' whenever the position of the knob changes. We add an event listener to each slider that listens to that event and updates the picture based on current positions of the knobs.

hsSliderRed.addEventListener(HorizontalSlider.SLIDER_CHANGE, redChange);

function redChange(e:Event):void {

var curPos:Number=hsSliderRed.getKnobPos();

curRed=knobPosToVal(curPos);

updatePicture();

}

We add analogous event listeners to the other two sliders and a self-explanatory listener to the Reset button.

Download