Advanced Search

Spark Animated Filter example

/ 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:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
  3. 			   xmlns:s="library://ns.adobe.com/flex/spark" 
  4. 			   xmlns:mx="library://ns.adobe.com/flex/mx" 
  5. 			   minWidth="955" minHeight="600"
  6. 			   >
  7.  
  8.  
  9. 	<fx:Declarations>
  10.  
  11. 		<s:BlurFilter
  12.  
  13. 			id="blurFilter"
  14. 			blurY="0"
  15. 			/>
  16.  
  17. 		<fx:Vector
  18. 			id="motionPathVector"
  19. 			type="spark.effects.animation.MotionPath"
  20. 			>
  21. 			<s:SimpleMotionPath
  22.  
  23. 				id="blurXPath"
  24. 				property="blurX"
  25. 				valueFrom="0"
  26. 				valueTo="100"
  27. 				/>
  28. 		</fx:Vector>
  29.  
  30. 		<s:AnimateFilter
  31.  
  32. 			id="animFilter"
  33. 			target="{buttonGroup}"
  34. 			bitmapFilter="{blurFilter}"
  35. 			repeatBehavior="reverse"
  36. 			repeatCount="0"
  37. 			motionPaths="{motionPathVector}"
  38. 			/>
  39.  
  40.  
  41. 	</fx:Declarations>
  42.  
  43. 	<s:HGroup
  44.  
  45. 		id="buttonGroup"
  46. 		x="20"
  47. 		y="60"
  48. 		>
  49. 		<s:Button label="1" width="40" />
  50. 		<s:Button label="2" width="40" />
  51. 		<s:Button label="3" width="40" />
  52. 		<s:Button label="4" width="40" />
  53. 		<s:Button label="5" width="40" />
  54. 		<s:Button label="6" width="40" />
  55. 		<s:Button label="7" width="40" />
  56. 		<s:Button label="8" width="40" />
  57. 		<s:Button label="9" width="40" />
  58. 		<s:Button label="10" width="40" />
  59.  
  60. 	</s:HGroup>
  61.  
  62. 	<s:VGroup
  63.  
  64. 		x="20"
  65. 		y="120"
  66. 		>
  67.  
  68. 		<s:ToggleButton
  69.  
  70. 			id="goBtn"
  71. 			label="{goBtn.selected? 'STOP' : 'GO'}"
  72. 			click="{goBtn.selected? animFilter.play() : animFilter.stop()}"
  73. 			/>
  74.  
  75.  
  76. 	</s:VGroup>
  77.  
  78. </s:Application>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.