Advanced Search

Spark Animated Filter example with Move tween

/ 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="motionPathVectorIn"
  19. 			type="spark.effects.animation.MotionPath"
  20. 			>
  21. 			<s:SimpleMotionPath
  22.  
  23. 				property="blurX"
  24. 				valueFrom="0"
  25. 				valueTo="100"
  26. 				/>
  27. 		</fx:Vector>
  28.  
  29. 		<fx:Vector
  30. 			id="motionPathVectorOut"
  31. 			type="spark.effects.animation.MotionPath"
  32. 			>
  33. 			<s:SimpleMotionPath
  34.  
  35. 				property="blurX"
  36. 				valueFrom="100"
  37. 				valueTo="0"
  38. 				/>
  39. 		</fx:Vector>
  40.  
  41.  
  42. 		<s:Power
  43.  
  44. 			id="powerEase"
  45. 			easeInFraction=".5"
  46. 			exponent="2"
  47. 			/>
  48.  
  49. 		<s:Parallel
  50.  
  51. 			id="moveAndBlurAnimForward"
  52. 			target="{buttonGroup}"
  53. 			duration="2000"
  54. 			>
  55.  
  56. 			<s:Sequence>
  57. 				<s:AnimateFilter
  58.  
  59. 					bitmapFilter="{blurFilter}"
  60. 					motionPaths="{motionPathVectorIn}"
  61. 					duration="1000"
  62. 					/>
  63. 				<s:AnimateFilter
  64.  
  65. 					bitmapFilter="{blurFilter}"
  66. 					motionPaths="{motionPathVectorOut}"
  67. 					duration="1000"
  68. 					/>
  69. 			</s:Sequence>
  70.  
  71. 			<s:Move
  72.  
  73. 				xFrom="{buttonGroup.x}"
  74. 				xTo="{buttonGroup.x+buttonGroup.width}"
  75. 				easer="{powerEase}"
  76. 				/>
  77.  
  78. 		</s:Parallel>
  79.  
  80. 		<s:Parallel
  81.  
  82. 			id="moveAndBlurAnimBack"
  83. 			target="{buttonGroup}"
  84. 			duration="2000"
  85. 			>
  86.  
  87. 			<s:Sequence>
  88. 				<s:AnimateFilter
  89.  
  90. 					bitmapFilter="{blurFilter}"
  91. 					motionPaths="{motionPathVectorIn}"
  92. 					duration="1000"
  93. 					/>
  94. 				<s:AnimateFilter
  95.  
  96. 					bitmapFilter="{blurFilter}"
  97. 					motionPaths="{motionPathVectorOut}"
  98. 					duration="1000"
  99. 					/>
  100. 			</s:Sequence>
  101.  
  102. 			<s:Move
  103.  
  104. 				xFrom="{buttonGroup.x}"
  105. 				xTo="{20}"
  106. 				easer="{powerEase}"
  107. 				/>
  108.  
  109. 		</s:Parallel>
  110.  
  111.  
  112. 	</fx:Declarations>
  113.  
  114. 	<s:HGroup
  115.  
  116. 		id="buttonGroup"
  117. 		x="20"
  118. 		y="60"
  119. 		>
  120. 		<s:Button label="1" width="40" />
  121. 		<s:Button label="2" width="40" />
  122. 		<s:Button label="3" width="40" />
  123. 		<s:Button label="4" width="40" />
  124. 		<s:Button label="5" width="40" />
  125. 		<s:Button label="6" width="40" />
  126. 		<s:Button label="7" width="40" />
  127. 		<s:Button label="8" width="40" />
  128. 		<s:Button label="9" width="40" />
  129. 		<s:Button label="10" width="40" />
  130.  
  131. 	</s:HGroup>
  132.  
  133. 	<s:VGroup
  134.  
  135. 		x="20"
  136. 		y="120"
  137. 		>
  138.  
  139. 		<s:ToggleButton
  140.  
  141. 			id="goBtn"
  142. 			label="{goBtn.selected? 'BACK' : 'GO'}"
  143. 			click="{goBtn.selected? moveAndBlurAnimForward.play() : moveAndBlurAnimBack.play()}"
  144. 			/>
  145.  
  146. 	</s:VGroup>
  147.  
  148. </s:Application>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.