Advanced Search

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

Expand | Embed | Plain Text

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.