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.


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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.