Question

I have a problem in applying the styles for scroll bar skins through actionscript.

In css we specify as
thumbOverSkin: Embed(source=”assets/thumb_over.png”,scaleGridLeft=”4″,scaleGridTop=”4″, scaleGridRight=”5″, scaleGridBottom=”5″);

In actionscript we specify as
setStyle(“thumbOverSkin”, someImageClass);

How can we specify scaleGrid properties in the above statement?

Thanks for the help in advance.

Answer 1

If you’re using Flex 3, that someImageClass, if it’s just an image, could just be assigned to a variable. Try this out, it shows two ways of setting simple skins on Flex 3 components:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Style>
        Button
        {
            overSkin: Embed("assets/over_button.png");
        }
    </mx:Style>

    <mx:Script>
        <![CDATA[

            [Embed(source="assets/up_button.png", scaleGridLeft="15",scaleGridTop="15", scaleGridRight="25", scaleGridBottom="25")]
            public static const UP_SKIN:Class;

        ]]>
    </mx:Script>

    <mx:Button id="button" click="button.setStyle('upSkin', UP_SKIN)"/>

    <mx:HSlider id="sizer"
        minimum="100" maximum="1000"
        liveDragging="true"
        change="{button.width = sizer.value;button.height = sizer.value/2}"/>

</mx:Application>

(the up_button.png was a simple red square shrunken to 40×40 for testing).

If you’re using Flex 4, the Group, which extends Skin, has full 9-slice scaling baked in and you can do a lot more with them.

Hope that helps,
Lance