Flex Examples
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.
Peter deHaan
Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.
Share
Hi,
I want to show a triangular thumb for mx:VSlider in flex 4. The skin class which i written for mx:HSlider is showing fine, but the skin class written for mx:VSlider is not showing properly triangular button is not aligning propely.
Can you please help me.
Code:
Skin component:
[HostComponent("spark.components.Button")]
In style sheet:
mx|VSlider
{
accentColor:#08A5E1;
thumbSkin: ClassReference(“com.skins.VSliderThumbSkin”);
}
VSliderThumbSkin.mxml
[HostComponent("spark.components.Button")]