Gradient background container with button as icon with states

 

<s:Group width=”170″ height=”20″>
<s:Rect left=”0″ top=”0″ right=”0″ bottom=”0″>
<s:stroke>
<s:SolidColorStroke color=”#e9e9e9″ />
</s:stroke>
<s:fill>
<s:LinearGradient rotation=”-90″>
<s:GradientEntry color=”#cccccc” ratio=”.4″ />
<s:GradientEntry color=”#eeeeee” />
</s:LinearGradient>
</s:fill>
</s:Rect>
<s:Label left=”5″ right=”5″ top=”2″ bottom=”2″
text=”title” fontSize=”10″
verticalAlign=”middle” />
<s:Button width=”10″ height=”10″ right=”8″ top=”3″
buttonMode=”true” click=”clickHandler(event)”
skinClass=”ButtonIconSkin”/>
</s:Group>

 

ButtonIconSkin.mxml

<?xml version=”1.0″ encoding=”utf-8″?>
<s:Skin xmlns:fx=”http://ns.adobe.com/mxml/2009&#8243;
xmlns:s=”library://ns.adobe.com/flex/spark”
xmlns:mx=”library://ns.adobe.com/flex/mx”>
<!– host component –>
<fx:Metadata>
[HostComponent(“spark.components.Button”)]
</fx:Metadata>

<!– states –>
<s:states>
<s:State name=”disabled” />
<s:State name=”down” stateGroups=”stateUp” />
<s:State name=”over” />
<s:State name=”up” stateGroups=”stateUp” />
</s:states>

<s:Group visible.stateUp=”false” visible=”true” buttonMode=”true”>
<s:BitmapImage source=”@Embed(‘../images/icon_maximize_up.png’)” />
</s:Group>
<s:Group visible.stateUp=”true” visible=”false” buttonMode=”true”>
<s:BitmapImage source=”@Embed(‘../images/icon_maximize_normal.png’)” />
</s:Group>
</s:Skin>

 

Advertisements

, ,

  1. Leave a comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: