Spark Animated Filter example


/ 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="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.