Spark Animated Filter example with Move tween


/ 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: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.