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

In a previous example, “Creating a custom track skin on an MX ProgressBar control in Flex 4”, we saw how you could create a custom track skin on an MX ProgressBar control in Flex 4 by setting the trackSkin style.

The following example shows how you can create a custom bar skin on an MX ProgressBar control in Flex 4 by setting the barSkin style.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.

For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?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>

[HaloSparkSkins]

<?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>

[GoogleAdsWide]

View source is enabled in the following example.

[Squidfingers]

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.

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

  1. Hi, this looks interesting for my school project.
    But I was wondering if there is a way to let the progress bar fill itself up ?
    Thanks in advance

Comments are closed.