How to create a skin for fl.controls.Slider with custom height in actionscript only?

Question

I created a skin called customSliderTrack in the graphical editor of Adobe Flash CS5.5. This Slider is now in the "library" of the FLA file.

I can apply this skin with the following code:

var cls:Class = getDefinitionByName("CustomSliderTrack") as Class;
var tmpTrack:Sprite = new cls();
slider.setStyle("sliderTrackSkin",tmpTrack);

However due to the binary nature of the FLA file and lack of compatibility of different Versions of Adobe Flash I need to implement it all in Actionscript.

I understand that cls is a MovieClip object but I cant get the same results with new MovieClip(). I think this might be related to the dashed Lines in the graphical editor(I modified the default SliderTrack_skin). I havn't found out yet what they mean and how to replace them with Actionscript code.

Answer 1

setStyle automatically sets the track.height and track.width. In case of the track.height the slider.height attribute does not seem to have any effect. To work around this problem simply set the track.height to the best value.

To access the track extend the Slider class and override the configUI Function:

public class CustomSlider extends Slider
{
    override protected function configUI():void
    {
        // Call configUI of Slider
        super.configUI();
        // The sprite that will contain the track
        var t:Sprite = new Sprite();
        // Draw the content into the sprite
        t.graphics.beginFill(0x000000, 0.1);
        t.graphics.drawRect(0, -15, width, 30);
        t.graphics.endFill();
        // Set the Sprite to be the one used by the Slider
        this.setStyle("sliderTrackSkin",t);
        // Reset the height to the value that it should be
        track.height = 30;
    }
}