Creating a custom bar skin on an MX ProgressBar control in Flex 4

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/04/13/creating-a-custom-bar-skin-on-an-mx-progressbar-control-in-flex-4/ -->
<s:Application name="MX_ProgressBar_barSkin_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">
    <s:layout>
        <s:VerticalLayout horizontalAlign="center" verticalAlign="middle" />
    </s:layout>
    <s:controlBarContent>
        <s:HSlider id="sldr"
                minimum="0" maximum="100"
                value="0"
                change="pBar.setProgress(sldr.value, sldr.maximum);" />
    </s:controlBarContent>
 
    <mx:ProgressBar id="pBar"
            barSkin="skins.CustomProgressBarSkin"
            labelPlacement="center"
            mode="manual" />
 
</s:Application>

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/04/13/creating-a-custom-bar-skin-on-an-mx-progressbar-control-in-flex-4/ -->
<s:SparkSkin name="CustomProgressBarSkin"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark" >
 
    <fx:Script>
        <![CDATA[
            override protected function initializationComplete():void {
                useChromeColor = true;
                super.initializationComplete();
            }
        ]]>
    </fx:Script>
 
    <!-- layer 1: fill -->
    <s:Rect left="2" right="2" top="2" bottom="2" >
        <s:fill>
            <s:BitmapFill source="@Embed('assets/pattern_143.gif')" fillMode="repeat" />
        </s:fill>
    </s:Rect>
 
    <!-- layer 2: border -->
    <s:Rect left="2" right="2" top="2" bottom="2" >
        <s:stroke>
            <s:LinearGradientStroke rotation="90">
                <s:GradientEntry color="0xFFFFFF" alpha="0.9" />
                <s:GradientEntry color="0xFFFFFF" alpha="0.5" />
            </s:LinearGradientStroke>
        </s:stroke>
    </s:Rect>
 
    <!-- layer 3: right edge -->
    <s:Rect right="1" top="2" bottom="2" width="1" >
        <s:fill>
            <s:SolidColor color="0x000000" alpha="0.55" />
        </s:fill>
    </s:Rect>
 
</s:SparkSkin>