3k views

Animation effects with ActionScript 3, Flex 4 and Spark

Flex 4 introduced the Spark component, which is now recommended by Adobe instead of older libraries. In the new spark.effects package there are a lot of different effects, but all of them are quite similar. I will use the AnimateColor effect to explain how to create animations with Spark.

First of all, you need to import the appropriate class:

ActionScript 3
  1. import spark.effects.AnimateColor;
  2.  

­

Then, you define the attributes of the animation:

ActionScript 3
  1. var animation:AnimateColor = new AnimateColor(this);
  2. animation.duration = 400; // milliseconds
  3. animation.colorFrom = 0xFFCC00;
  4. animation.colorTo = 0xaaff00;
  5. animation.colorPropertyName = "color";
  6.  

­

Finally, you use the play function when you want your effect to begin. It is recommended to call stop() before play() to stop it in case it was playing before.

ActionScript 3
  1. animation.stop();
  2. animation.play();
  3.  

­

Remember to check the spark.effects package documentation to discover all possibilities.

Tags: ActionScript 3.0 flex spark animation

Submitted by miguelSantirso about 1 year ago — last modified less than a minute ago

Embed: