Advanced Search

Spark Button skin with scaling transition

/ Published in: MXML
Save to your folder(s)
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.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <?xml version="1.0" encoding="utf-8"?>
  2.  
  3. <!--
  5.     ADOBE SYSTEMS INCORPORATED
  6.     Copyright 2008 Adobe Systems Incorporated
  7.     All Rights Reserved.
  9.     NOTICE: Adobe permits you to use, modify, and distribute this file
  10.     in accordance with the terms of the license agreement accompanying it.
  12. -->
  13.  
  14. <!--- The default skin class for the Spark Button component.  
  16.        @see spark.components.Button
  17.         
  18.       @langversion 3.0
  19.       @playerversion Flash 10
  20.       @playerversion AIR 1.5
  21.       @productversion Flex 4
  22. -->
  23. <s:SparkSkin 
  24.  
  25. 	xmlns:fx="http://ns.adobe.com/mxml/2009" 
  26. 	xmlns:s="library://ns.adobe.com/flex/spark" 
  27.     xmlns:fb="http://ns.adobe.com/flashbuilder/2009" 
  28.  
  29. 	minWidth="21" minHeight="21" 
  30. 	alpha.disabled="0.5"
  31.  
  32. 	transformX="{width/2}"
  33. 	transformY="{height/2}"
  34. 	>
  35.  
  36.     <!-- host component -->
  37.     <fx:Metadata>
  38.         <![CDATA[ 
  39.         [HostComponent("spark.components.Button")]
  40.         ]]>
  41.     </fx:Metadata>
  42.  
  43.     <!-- states -->
  44.     <s:states>
  45.         <s:State name="up" />
  46.         <s:State name="over" />
  47.         <s:State name="down" />
  48.         <s:State name="disabled" />
  49.     </s:states>
  50.  
  51. 	<fx:Declarations>
  52. 		<s:Elastic id="elasticEaser" />
  53. 	</fx:Declarations>
  54.  
  55. 	<s:transitions>
  56. 		<s:Transition fromState="*" toState="over">
  57. 			<s:Scale target="{this}" scaleXTo="1.1" scaleYTo="1.1" easer="{elasticEaser}" />
  58. 		</s:Transition>
  59. 		<s:Transition fromState="*" toState="up">
  60. 			<s:Scale target="{this}" scaleXTo="1" scaleYTo="1" easer="{elasticEaser}" />
  61. 		</s:Transition>
  62. 	</s:transitions>
  63.  
  64. 	<s:Ellipse
  65.  
  66. 		top="0" bottom="0"
  67. 		left="0" right="0"
  68. 		>
  69. 		<s:fill>
  70. 			<s:LinearGradient rotation="270" scaleX="34.5308" x="17.2656" y="34.5312">
  71. 				<s:GradientEntry color="#BAD5D8" ratio="0"/>
  72. 				<s:GradientEntry color="#E7F1F2" ratio="0.604915"/>
  73. 				<s:GradientEntry color="#FFFFFF" ratio="1"/>
  74. 			</s:LinearGradient>
  75. 		</s:fill>
  76. 	</s:Ellipse>
  77.  
  78. 	<s:VGroup 
  79. 		horizontalAlign="center"
  80. 		verticalCenter="0"
  81. 		left="5" right="5" top="5"
  82. 		gap="1"
  83. 		>
  84. 		<s:Group
  85. 			verticalCenter="0"
  86. 			horizontalCenter="0"
  87. 			>
  88. 			<s:Rect height="11" width="3" x="4" y="0">
  89. 				<s:fill>
  90. 					<s:SolidColor color="#644C24"/>
  91. 				</s:fill>
  92. 			</s:Rect>
  93. 			<s:Rect height="3" width="11" x="0" y="4">
  94. 				<s:fill>
  95. 					<s:SolidColor color="#644C24"/>
  96. 				</s:fill>
  97. 			</s:Rect>
  98. 		</s:Group>
  99.  
  100. 		<s:Label
  101.  
  102. 			color="#644C24"
  103. 			fontSize="5"
  104. 			textAlign="center"
  105. 			width="100%"
  106. 			text="{hostComponent.label}"
  107. 			/>
  108. 	</s:VGroup>
  109.  
  110. </s:SparkSkin>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.