a slidebar in AS3 without the components flash fl.slider

i was developping a video player lately , and i found out there was quite a few problems with the flash Slider component... The problems i met was when i tried to place a second slider on my player , and evetually tried to change its appearance ... Even if you can skin the player at your wishes, i didn't manage to skin two sliders differently .
Normally, the setStyle function should do the job, but even though i managed to skin the thumb differently ( ThumbUp, ThumbDown , ThumbOver ) through the use of the setStyle function , i never managed to change the trackSkin appearance.

I ended up building up my own slider class. This article is quite a good tutorial for someone who wants to get familiar with event listeners programming .
I had to create as well an Event , in order to pass that extra value from the Slider to the player . The main advantage of that programming through event Listeners is that all objects become really independant , and you don't have to code all kind of public functions, just add your listener on the main class

To retrieve the return value from the Player (here, a level between 0 and 100 that could be use for instance to set the volume of a video , or the position of the video ) , you can't use the usual Events or MouseEvents, that's why i created a Slider Event that extends the class events , and where an additionnal public, accessible variable is sent along within the event.

The slider :

//  class AS3 of a vertical Slider
//
// @author Benjamin PETIT
// december 2009

package com.sensue {
    import flash.display.Sprite ;
    import flash.events.MouseEvent ;
    import flash.geom.Rectangle ;
    import fl.transitions.*;
    import fl.transitions.easing.*;
    import fl.transitions.Tween;    

    
    import com.sensue.events.SliderEvent ;
    
    public class Slider extends Sprite {
        
        
        // Public Properties:

        // Private Properties:
        // You need 2 MovieClip/graphics on your scene to have this slider working :
        // 1 . the "track" for the knob
        // 2 . the knob
        // For easier manipulation of  movieclip, i always place them on x=0 and y=0
        // make them exportable trough Flash and give them the right name class aka Knob and TrackSkin
    
        private var _track:TrackSkin = new TrackSkin();
        private var _knob:Knob = new Knob();
        
        // Initialization:
        public function Slider () {
            
            addChild(_track);
            addChild(_knob);
            
            // knob initial position
            var initPos:int = 80 ;
            // vertical bar
            _knob.buttonMode = true ;
            _knob.y = (_track.height * (100-initPos))/ 100 ;
            // center the knob clip : all clips set to 0 , the formula :
            _knob.x = _track.x + _track.width/2 - _knob.width/2 ;
            _knob.addEventListener(MouseEvent.MOUSE_DOWN,beginDragVol);
            _knob.addEventListener(MouseEvent.MOUSE_UP,endDragVol);    
            // the additionnal Mouse up is necessary when still MOUSE_DOWN but not actually anymore on the knob
            _knob.addEventListener(MouseEvent.MOUSE_OUT,endDragVol);        

        }
    
        // Public Methods: set the slider to a position
        public function resetSlider(vol:Number):void{
                _knob.y = (_track.height * (100 - vol))/ 100 ;
                dispatchEvent(new SliderEvent('SliderEvent.VALUE_CHANGED',  vol ));            
        }
        
        // Protected Methods:
        private function beginDragVol(e:MouseEvent):void{
            // limit the startdrag on a 'rectangle' along the track height
             e.currentTarget.startDrag(false, new Rectangle( _knob.x, _track.y,0 ,_track.height-_knob.height)) ;
            _knob.addEventListener(MouseEvent.MOUSE_MOVE,addListenerMove);
        }
        private function addListenerMove(e:MouseEvent):void{
                //calculate the new position compared to the track height
                var newratio:Number = Math.abs ((e.currentTarget.y*100)/_track.height) ;
                var vol:Number = Math.round((100*newratio)/(_track.height-_knob.height))  ;                
                dispatchEvent(new SliderEvent('SliderEvent.VALUE_CHANGED',  vol ));
            
        }
        
        private function endDragVol(e:MouseEvent):void{        
            e.currentTarget.stopDrag();
            _knob.removeEventListener(MouseEvent.MOUSE_MOVE,addListenerMove);
        }
                
        
    }
    
}

the class SliderEvent :

package com.sensue.events {
    import flash.events.Event ;
    public class SliderEvent extends Event{
        
        // Constants:
        // Public Properties:
        public static const VALUE_CHANGED:String = 'valueChanged' ;
        public var newValue:Number ;
        
        // Private Properties:
    
        // Initialization:
        public function SliderEvent(type:String,newVal:Number) {
                //bubbles and cancellable set to true
                newValue = newVal ;
                super(type, true, true);
                        
        }
        override public function clone() : Event
        {        
                return new SliderEvent(this.type, this.newValue);
        }
        
    
    }
    
}

The player (it contains the slider, the listener to the qspecial event and a textfield )

package {

    import flash.display.MovieClip;
    import flash.text.TextField;
    import flash.text.TextFormat;    
    import com.sensue.events.SliderEvent ;    
    import com.sensue.Slider;    
    public class Player extends MovieClip {
        // UI elements
        private var _slider:Slider ;
        private var _tf:TextField ;         
        private var _tformat:TextFormat = new TextFormat();
        // Constructor
        public function Player():void {    
            _slider = new Slider() ;  
            _tf = new TextField() ;

            _tformat.color = 0x999999;
            _tformat.font = "Verdana"
            _tformat.size = 13;
            addChild(_slider) ;
            addChild(_tf) ;
            _tf.width = 200 ;
            _tf.y = 150 ;
            _slider.y = 40 ;
            _slider.x = 40;

            addEventListener('SliderEvent.VALUE_CHANGED',doSomething) ;
            return ;
            
            
        }
        private function doSomething(e:SliderEvent){
            // potentially , you change the volume Here    with the value             
            _tf.text = "capture : "+e.newValue ;
            _tf.setTextFormat(_tformat);
            

        }
    }
}