Spark Animation and Easing classes usage


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

Here's some example of how to apply Spark easing classes using MXML


Copy this code and paste it in your HTML
  1. /*
  2.  
  3. Some code used in a project for scaling and moving an object around. Properties of the tweens are bound to properties of the class.
  4.  
  5. USAGE : In your actionscript you just need to refer to the class id like so shirtMoveToNoScale.play(); you can also use Actionscript to set listeners, handlers etc.
  6.  
  7. */
  8.  
  9. <fx:Declarations>
  10.  
  11. <s:Power id="powerEase" />
  12.  
  13. <s:Move
  14. id="shirtMoveToNoScale"
  15. target="{this}"
  16. duration="500"
  17. easer="{powerEase}"
  18. xTo="{moveToPointX}"
  19. yTo="{moveToPointY}"
  20. />
  21.  
  22. <s:Parallel
  23.  
  24. id="shirtMoveTo"
  25. target="{this}"
  26. effectEnd="autoZoomMoveEnd(event)"
  27. duration="500"
  28. >
  29. <s:Scale
  30.  
  31. easer="{powerEase}"
  32. scaleXTo="{Config.SHIRT_ZOOM_SCALE}"
  33. scaleYTo="{Config.SHIRT_ZOOM_SCALE}"
  34. />
  35. <s:Move
  36.  
  37. easer="{powerEase}"
  38. xTo="{moveToPointX}"
  39. yTo="{moveToPointY}"
  40. />
  41. </s:Parallel>
  42.  
  43. <s:Parallel
  44.  
  45. id="shirtScaleUp"
  46. target="{this}"
  47. effectEnd="resetShirtWidthHeight(event)"
  48. duration="500"
  49. >
  50. <s:Scale
  51.  
  52. easer="{powerEase}"
  53. scaleXTo="{Config.SHIRT_ZOOM_SCALE}"
  54. scaleYTo="{Config.SHIRT_ZOOM_SCALE}"
  55. />
  56. <s:Move
  57.  
  58. easer="{powerEase}"
  59. xTo="{Config.ZOOM_IN_X}"
  60. yTo="{Config.ZOOM_IN_Y}"
  61. />
  62. </s:Parallel>
  63.  
  64. <s:Parallel
  65.  
  66. id="shirtScaleDown"
  67. target="{this}"
  68. effectEnd="resetShirtWidthHeight(event)"
  69. duration="500"
  70. >
  71. <s:Scale
  72.  
  73. target="{this}"
  74. easer="{powerEase}"
  75. scaleXTo="{Config.SHIRT_START_SCALE}"
  76. scaleYTo="{Config.SHIRT_START_SCALE}"
  77. />
  78. <s:Move
  79.  
  80. easer="{powerEase}"
  81. xTo="{Config.ZOOM_OUT_X}"
  82. yTo="{Config.ZOOM_OUT_Y}"
  83. /
  84. </s:Parallel>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.