Advanced Search

SparkSkin with animated filter

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

Expand | Embed | Plain Text

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.