Revision: 30499
Initial Code
Initial URL
Initial Description
Initial Title
Initial Tags
Initial Language
at August 16, 2010 01:56 by LeeProbert
Initial Code
<?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:fb="http://ns.adobe.com/flashbuilder/2009" minWidth="21" minHeight="21" alpha.disabled="0.5" transformX="{width/2}" transformY="{height/2}" > <!-- host component --> <fx:Metadata> <![CDATA[ [HostComponent("spark.components.Button")] ]]> </fx:Metadata> <!-- states --> <s:states> <s:State name="up" /> <s:State name="over" /> <s:State name="down" /> <s:State name="disabled" /> </s:states> <fx:Declarations> <s:Elastic id="elasticEaser" /> </fx:Declarations> <s:transitions> <s:Transition fromState="*" toState="over"> <s:Scale target="{this}" scaleXTo="1.1" scaleYTo="1.1" easer="{elasticEaser}" /> </s:Transition> <s:Transition fromState="*" toState="up"> <s:Scale target="{this}" scaleXTo="1" scaleYTo="1" easer="{elasticEaser}" /> </s:Transition> </s:transitions> <s:Ellipse top="0" bottom="0" left="0" right="0" > <s:fill> <s:LinearGradient rotation="270" scaleX="34.5308" x="17.2656" y="34.5312"> <s:GradientEntry color="#BAD5D8" ratio="0"/> <s:GradientEntry color="#E7F1F2" ratio="0.604915"/> <s:GradientEntry color="#FFFFFF" ratio="1"/> </s:LinearGradient> </s:fill> </s:Ellipse> <s:VGroup horizontalAlign="center" verticalCenter="0" left="5" right="5" top="5" gap="1" > <s:Group verticalCenter="0" horizontalCenter="0" > <s:Rect height="11" width="3" x="4" y="0"> <s:fill> <s:SolidColor color="#644C24"/> </s:fill> </s:Rect> <s:Rect height="3" width="11" x="0" y="4"> <s:fill> <s:SolidColor color="#644C24"/> </s:fill> </s:Rect> </s:Group> <s:Label color="#644C24" fontSize="5" textAlign="center" width="100%" text="{hostComponent.label}" /> </s:VGroup> </s:SparkSkin>
Initial URL
Initial Description
Here's a simple Button skin that will scale up and down on roll over and out. The important thing to note is that the skin is a simple ellipse with a label so the scale effect needs to happen from the centre point of the skin. To do this you need to set the transformX and transformY properties of the skin to half the width and height of the skin. In this example the skin is an ellipse with a simple plus icon and a label.
Initial Title
Spark Button skin with scaling transition
Initial Tags
Initial Language
MXML