CODEWITHSUNDEEP
flashapache-flexbuttonadobeskin
Volter
Volter

Reputation: 173

flex 4.5 rounded side buttons

I am new at flex and i have discovered spark method of button skin changing. I have not solve the problem of button corners. I just want that left and right side of buttons to be rounded like a half ellipse. Also I want that when I change the size of button the style of the button stayed as it is (left and right side of buttons are rounded like a circle at any size). Can you help me?

Upvotes: 1

Views: 3222

Answers (3)

Michael Tarimo
Michael Tarimo

Reputation: 1415

I have tried to make one for my app. Looks like the label is not quite aligned.

<?xml version="1.0" encoding="utf-8"?>
<s:SparkButtonSkin xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark">
    <!-- host component -->
    <fx:Metadata>
        [HostComponent("spark.components.Button")]
    </fx:Metadata>

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

    <s:Group height="100%" width="100%" verticalCenter="0">
        <s:Ellipse height="100%" width="100%" >
            <s:fill>
                <s:LinearGradient rotation="90" scaleX.disabled="-65">
                    <s:GradientEntry color="0x999999" color.up="0x666666" color.disabled="0xFFFFFF" ratio.disabled="0"/>
                    <s:GradientEntry color="0x828282" color.up="0x333333" color.disabled="0x828282" ratio.disabled="1"/>
                    <s:GradientEntry color="0x999999" color.up="0x666666" color.disabled="0xFFFFFF" ratio.disabled="0"/>
                </s:LinearGradient>
            </s:fill>
            <s:stroke>
                <s:SolidColorStroke weight="5" caps="none" joints="miter" miterLimit="10" color="#FFFFFF"/>
            </s:stroke>
            <s:filters>
                <s:DropShadowFilter distance="1" angle="90" blurX="6" blurY="6" alpha="0.75"/>
            </s:filters>
        </s:Ellipse>

        <s:Label id="labelDisplay" verticalCenter="0" color="#FFFFFF" horizontalCenter="0" width="70%" textAlign="center">
        </s:Label>      
    </s:Group>
</s:SparkButtonSkin>

Upvotes: 2

Bron Davies
Bron Davies

Reputation: 6004

Use this as the parent element of your button skin. It will appear as a flat gray borderless rectangle. Anything you add inside of it will appear as part of the button with rounded corners. Adjust the cornerRadius to suit the size/height of the button.

<s:BorderContainer height="100%" width="100%" 
   backgroundColor="#DDDDDD" borderColor="#DDDDDD" 
   cornerRadius="10"
   >
   <s:layout><s:BasicLayout /></s:layout>
</s:BorderContainer>

Upvotes: 1

Jonathan Rowny
Jonathan Rowny

Reputation: 7588

You actually don't need to override the skin for that. You can just use the "cornerRadius" property like so:

<s:Button cornerRadius="{funButton.height/2}" id="funButton" label="SO Round!"/>

Upvotes: 4

Related Questions