In a previous example, “Changing a slider control’s thumb skin”, we saw how you could customize a slider control (HSlider or VSlider) and use your own custom embedded image instead of the default triangle thumb skin.
The following example shows how you can create a custom thumb skin on an MX HSlider control in Flex 4 by setting the thumbSkin style.
The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://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-thumb-skin-on-an-mx-hslider-control-in-flex-4/ --> <s:Application name="MX_HSlider_thumbSkin_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"> <mx:HSlider id="hSl" thumbSkin="skins.CustomSliderThumbSkin" showTrackHighlight="true" horizontalCenter="0" verticalCenter="0" /> </s:Application>
The default Spark skins for the MX/Halo controls/containers can be found in the Flex SDK at:
%Flex SDK%\frameworks\projects\sparkskins\src\mx\skins\spark\*.
And the custom MX HSlider control thumb skin, skins/CustomSliderThumbSkin.mxml, is as follows:
<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2010/04/13/creating-a-custom-thumb-skin-on-an-mx-hslider-control-in-flex-4/ --> <s:SparkSkin name="CustomSliderThumbSkin" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" alpha.disabled="0.5"> <!-- states --> <s:states> <s:State name="up" /> <s:State name="over" /> <s:State name="down" /> <s:State name="disabled" /> </s:states> <fx:Script> <![CDATA[ override protected function initializationComplete():void { useChromeColor = true; super.initializationComplete(); } ]]> </fx:Script> <s:BitmapImage source="@Embed('skins/accept.png')" /> </s:SparkSkin>
View source is enabled in the following example.
Icons copyright of famfamfam.com.
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.
