SparkSkin with animated filter


/ Published in: MXML
Save to your folder(s)



Copy this code and paste it in your HTML
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <s:SparkSkin
  3.  
  4. xmlns:s="library://ns.adobe.com/flex/spark"
  5. xmlns:fx="http://ns.adobe.com/mxml/2009"
  6. xmlns:d="http://ns.adobe.com/fxg/2008/dt"
  7. xmlns:ai="http://ns.adobe.com/ai/2008"
  8.  
  9. horizontalCenter="{width/2}"
  10. verticalCenter="{height/2}"
  11. >
  12.  
  13. <fx:Metadata>[HostComponent("spark.components.Button")]</fx:Metadata>
  14.  
  15. <fx:Declarations>
  16.  
  17. <fx:Vector
  18. id="alphaInVector"
  19. type="spark.effects.animation.MotionPath"
  20. >
  21. <s:SimpleMotionPath
  22.  
  23. property="alpha"
  24. valueFrom="0"
  25. valueTo="1"
  26. />
  27. </fx:Vector>
  28.  
  29. <s:GlowFilter
  30.  
  31. id="glowFilter"
  32. inner="true"
  33.  
  34. strength.up="0"
  35. strength.over="2"
  36. strength.down="2"
  37.  
  38. blurX="{width/4}"
  39. blurY="{height/4}"
  40.  
  41. color="0x009900"
  42. />
  43.  
  44. </fx:Declarations>
  45.  
  46. <s:transitions>
  47. <s:Transition fromState="*" toState="*">
  48. <s:AnimateFilter
  49.  
  50. bitmapFilter="{glowFilter}"
  51. target="{circle}"
  52. motionPaths="{alphaInVector}"
  53. repeatBehavior="reverse"
  54. repeatCount="0"
  55. />
  56. </s:Transition>
  57. </s:transitions>
  58.  
  59. <s:states>
  60. <s:State name="up"/>
  61. <s:State name="over"/>
  62. <s:State name="down"/>
  63. <s:State name="disabled"/>
  64. </s:states>
  65.  
  66. <s:Ellipse
  67.  
  68. id="circle"
  69. left="0" right="0" top="0" bottom="0"
  70. >
  71. <s:fill>
  72. <s:SolidColor color="{getStyle('color')}" alpha="{getStyle('backgroundAlpha')}"/>
  73. </s:fill>
  74. </s:Ellipse>
  75.  
  76. <s:Label
  77.  
  78. text="{hostComponent.label}"
  79. fontFamily="Arial"
  80. fontSize="14"
  81. color="0xffffff"
  82. color.disabled="888888"
  83. horizontalCenter="0"
  84. verticalCenter="0"
  85. left="2"
  86. right="2"
  87. top="4"
  88. bottom="2"
  89. textAlign="center"
  90. verticalAlign="middle"
  91. />
  92.  
  93. </s:SparkSkin>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.