Creating CustomButton skin

Report · Oct 18, 2010

I am tyring to create a custom button skin and having some problem. Here are the steps I followed for creating custom button skin.

1. Created the graphic for my button in illustrator and exported it as fxg.

2. Opened the fxg in flash catalyst and went to the code mode copied the code

3. Created custom skin from flash builder and pasted the code

4. And then in the application referred to it using the skinClass.

Everything seems working fine but the problem is the button does not resize when the label has more characters or does not shrink if the label has less characters. What I see is it’s just fixed width button, but I want it to be resizable as original flex button does, I tried all possible ways like removing groups setting the constraints but could not make it working.

Can any one please help me out with this situation.

Here is the code snippet of my customButtonskin

Main Application.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
               >
    <fx:Declarations>
        
    </fx:Declarations>
    <s:Button label="Test" verticalCenter="0" horizontalCenter="0" skinClass="skins.CustomButton"/>
</s:Application>

CustomButton.mxml

<?xml version="1.0" encoding="utf-8"?>

<!--

    ADOBE SYSTEMS INCORPORATED
    Copyright 2008 Adobe Systems Incorporated
    All Rights Reserved.

NOTICE: Adobe permits you to use, modify, and distribute this file
in accordance with the terms of the license agreement accompanying it.

-->

<!--- The default skin class for the Spark Button component.

@SEE spark.components.Button

      @langversion 3.0
      @playerversion Flash 10
      @playerversion AIR 1.5
      @productversion Flex 4
-->
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
             xmlns:d="http://ns.adobe.com/fxg/2008/dt"
             xmlns:fb="http://ns.adobe.com/flashbuilder/2009" minWidth="21" minHeight="21" alpha.disabled="0.5">

    
    <fx:Metadata>
        <![CDATA[
        /**
         * @copy spark.skins.spark.ApplicationSkin#hostComponent
         */
        [HostComponent("spark.components.Button")]
        ]]>
    </fx:Metadata>

    
    <s:states>
        <s:State name="up" />
        <s:State name="over" />
        <s:State name="down" />
        <s:State name="disabled" />
    </s:states>

    <s:Group x="0" y="0">
        <s:Group d:id="3" x="0" y="0">
            <s:Path data="M 131.25 0 L 18.75 0 C 8.395 0 0 8.394 0 18.749 C 0 29.105 8.395 37.5 18.75 37.5 L 131.25 37.5 C 141.604 37.5 150 29.105 150 18.749 C 150 8.394 141.604 0 131.25 0 Z" winding="nonZero" x="0.678" y="0.5">
                <s:fill>
                    <s:LinearGradient rotation="-90" scaleX="37.4995" x="75.001" y="37.5">
                        <s:GradientEntry color="#0a0f0b" ratio="0.499"/>
                        <s:GradientEntry color="#3b423f" ratio="0.500124"/>
                        <s:GradientEntry color="#6d7673" ratio="0.501"/>
                    </s:LinearGradient>
                </s:fill>
            </s:Path>
        </s:Group>
        <s:Group d:id="4" x="3" y="3">
            <s:Ellipse height="32" width="33" x="0" y="0">
                <s:fill>
                    <s:RadialGradient scaleX="32.2323" scaleY="32.2333" x="16.1156" y="16.1159">
                        <s:GradientEntry color="#f2df4c" ratio="0.351648"/>
                        <s:GradientEntry color="#797026" ratio="0.857143"/>
                        <s:GradientEntry ratio="1"/>
                    </s:RadialGradient>
                </s:fill>
            </s:Ellipse>
        </s:Group>
        <s:Ellipse height="27" width="27" x="6" y="6">
            <s:fill>
                <s:SolidColor/>
            </s:fill>
        </s:Ellipse>
        <s:Group d:id="5" x="9" y="7">
            <s:Ellipse height="17" width="21" x="0" y="0">
                <s:fill>
                    <s:LinearGradient rotation="-90" scaleX="17.1816" x="10.3086" y="17.1821">
                        <s:GradientEntry color="#1c1c1c" ratio="0"/>
                        <s:GradientEntry color="#363636" ratio="0.291209"/>
                        <s:GradientEntry color="#808080" ratio="0.59235"/>
                        <s:GradientEntry color="#c9c9c9" ratio="0.813187"/>
                        <s:GradientEntry color="#ebebeb" ratio="1"/>
                    </s:LinearGradient>
                </s:fill>
            </s:Ellipse>
        </s:Group>
        <s:Group d:id="6" x="9" y="7">
            <s:Ellipse height="17" width="21" x="0" y="0">
                <s:fill>
                    <s:LinearGradient rotation="-90" scaleX="17.1816" x="10.3086" y="17.1821">
                        <s:GradientEntry color="#1c1c1c" ratio="0"/>
                        <s:GradientEntry color="#363636" ratio="0.291209"/>
                        <s:GradientEntry color="#808080" ratio="0.59235"/>
                        <s:GradientEntry color="#c9c9c9" ratio="0.813187"/>
                        <s:GradientEntry color="#ebebeb" ratio="1"/>
                    </s:LinearGradient>
                </s:fill>
            </s:Ellipse>
        </s:Group>
    </s:Group>

    
    <s:Label id="labelDisplay"
             textAlign="center"
             verticalAlign="middle"
             maxDisplayedLines="1"
             horizontalCenter="0" verticalCenter="1"
             left="70" right="10" top="2" bottom="2" color="white" fontWeight="bold">
    </s:Label>

</s:SparkSkin>

Report · Oct 22, 2010

Hi Paleti,

The reason why your button acts that way is because you have not given the skin, or rather the "skin background" (the path in this case) any size. Simply add width="100%" to your path and any group it's in and the button will scale. It will scale the entire path though so you will also have to add a scaleGrid to the group around your path. This will tell Flex to start scaling your button after x pixels from the top, right, bottom and left.

An easier way to achive the same result would be to use a rect instead of a path however (not sure if it's possible to do so automatically when using fxg though). So instead of path you could try this:

<s:Group d:id="3" x="0" y="0" width="100%" height="100%"> <s:Rect id="buttonFill" width="100%" height="100%" radiusX="{buttonFill.height/2}" x="0.678" y="0.5" minHeight="38"> <s:fill> <s:LinearGradient rotation="-90" scaleX="37.4995" x="75.001" y="37.5"> <s:GradientEntry color="#0a0f0b" ratio="0.499"/> <s:GradientEntry color="#3b423f" ratio="0.500124"/> <s:GradientEntry color="#6d7673" ratio="0.501"/> </s:LinearGradient> </s:fill> </s:Rect> </s:Group>

That should generate a button that looks about the same and that also scales the nice if you change the height of the button (the circle to the left will not be centered vertically though).

Here's the complete code (using the path method, not rect):

<?xml version="1.0" encoding="utf-8"?>   <s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:d="http://ns.adobe.com/fxg/2008/dt" xmlns:fb="http://ns.adobe.com/flashbuilder/2009" minWidth="21" minHeight="21" alpha.disabled="0.5">  <fx:Metadata> <![CDATA[ /** * @copy spark.skins.spark.ApplicationSkin#hostComponent */ [HostComponent("spark.components.Button")] ]]> </fx:Metadata>  <s:states> <s:State name="up" /> <s:State name="over" /> <s:State name="down" /> <s:State name="disabled" /> </s:states> <s:Group x="0" y="0" width="100%"> <s:Group d:id="3" x="0" y="0" width="100%" scaleGridLeft="20" scaleGridRight="120" scaleGridTop="1" scaleGridBottom="20"> <s:Path width="100%" minWidth="21" data="M 131.25 0 L 18.75 0 C 8.395 0 0 8.394 0 18.749 C 0 29.105 8.395 37.5 18.75 37.5 L 131.25 37.5 C 141.604 37.5 150 29.105 150 18.749 C 150 8.394 141.604 0 131.25 0 Z" winding="nonZero" x="0.678" y="0.5"> <s:fill> <s:LinearGradient rotation="-90" scaleX="37.4995" x="75.001" y="37.5"> <s:GradientEntry color="#0a0f0b" ratio="0.499"/> <s:GradientEntry color="#3b423f" ratio="0.500124"/> <s:GradientEntry color="#6d7673" ratio="0.501"/> </s:LinearGradient> </s:fill> </s:Path> </s:Group> <s:Group d:id="4" x="3" y="3"> <s:Ellipse height="32" width="33" x="0" y="0"> <s:fill> <s:RadialGradient scaleX="32.2323" scaleY="32.2333" x="16.1156" y="16.1159"> <s:GradientEntry color="#f2df4c" ratio="0.351648"/> <s:GradientEntry color="#797026" ratio="0.857143"/> <s:GradientEntry ratio="1"/> </s:RadialGradient> </s:fill> </s:Ellipse> </s:Group> <s:Ellipse height="27" width="27" x="6" y="6"> <s:fill> <s:SolidColor/> </s:fill> </s:Ellipse> <s:Group d:id="5" x="9" y="7"> <s:Ellipse height="17" width="21" x="0" y="0"> <s:fill> <s:LinearGradient rotation="-90" scaleX="17.1816" x="10.3086" y="17.1821"> <s:GradientEntry color="#1c1c1c" ratio="0"/> <s:GradientEntry color="#363636" ratio="0.291209"/> <s:GradientEntry color="#808080" ratio="0.59235"/> <s:GradientEntry color="#c9c9c9" ratio="0.813187"/> <s:GradientEntry color="#ebebeb" ratio="1"/> </s:LinearGradient> </s:fill> </s:Ellipse> </s:Group> <s:Group d:id="6" x="9" y="7"> <s:Ellipse height="17" width="21" x="0" y="0"> <s:fill> <s:LinearGradient rotation="-90" scaleX="17.1816" x="10.3086" y="17.1821"> <s:GradientEntry color="#1c1c1c" ratio="0"/> <s:GradientEntry color="#363636" ratio="0.291209"/> <s:GradientEntry color="#808080" ratio="0.59235"/> <s:GradientEntry color="#c9c9c9" ratio="0.813187"/> <s:GradientEntry color="#ebebeb" ratio="1"/> </s:LinearGradient> </s:fill> </s:Ellipse> </s:Group> </s:Group>  <s:Label id="labelDisplay" textAlign="center" verticalAlign="middle" maxDisplayedLines="1" horizontalCenter="0" verticalCenter="1" left="70" right="10" top="2" bottom="2" color="white" fontWeight="bold"> </s:Label> </s:SparkSkin>

Note that the button will not automatically scale to a smaller size if the label is too short however. I'm not sure why but my guess is that the path makes the button a certain width if not told otherwise. A solution to this could be to make the skin inside the fxg smaller. You can still set the size manually and the button scales (ie. <s:Button with="50" ...).

Also note that the scaleGrid values are kind of rough. They should work just fine but they might not really give you a clear indication of how they work. The idea is to tell from which pixels the graphic should scale. Left means the start, Right means the end so if your graphic is 100 pixels wide and should start scaling at 10 pixels and then stop scaling 10 pixels from the right side you would use; scaleGridLeft="10" scaleGridRight="90".

Report · Oct 22, 2010

Worked like a charm, Thank you very much.

Adobe Community

Creating CustomButton skin