Using the class Tween and TweenExtended

The ActionScript offers ways to develop extremely powerful dynamic animations without using timeline. It has diverse classrooms of the proper Flash and others developed by third.
O Action Script oferece meios de desenvolver animações dinâmicas extremamente poderosas sem usar a timeline. Há diversas classes do próprio Flash e outras desenvolvidas por terceiros. Amongst that more I use this the Tween and the TweenExtended. It sees as to utlizar the Tween class in this article in the site Kirupa.

Class TweenExtended
Before initiating make the download the last version of the TweenExtended class in the site
http://www.sqcircle.com/downloads/ and installs for Macromedia Extension Manager. After the installation must appear a new option in help of the Flash.
The syntax of the class is the following one:

ActionScript

  1. import mx.transitions.easing.*;
  2. import mx.transitions.TweenExtended;
  3. var _tween = new TweenExtended(target, props, easeFunc, strt, end, dur, useSecs, bezierPoint1, bezierPoint2);
  4. /*
  5. constructor for Tween Exdended class
  6. target: reference - the object which the Tween targets
  7. props: array - names of the properties (in obj) that will be affected
  8. easeFunc: function - the type of easing equation to be used [import easing equations: import mx.transitions.easing.*;]
  9. strt: array - the starting value of props
  10. begin: array - the ending value of props
  11. dur: number - the length of time of the motion; set to infinity if negative or omitted
  12. useSecs: boolean - a flag specifying whether to use seconds instead of frames
  13.  
  14. *optional bezier parameters*
  15. To use the Bezier tween both parameters must be entered and must be used in conjunction with mx.transitions.easing.Bezier;
  16. has three easing methods: tweenQuadBez, tweenQuadBezThru, tweenCubicBez
  17.  
  18. bezierPoint1: number - numerical x position value
  19. bezierPoint2: number - numerical y position value
  20. */

We go to see some examples:
It creates a new archive in the Flash, later creates one movieclip (a ball for example) giving the name of instance of “ball_mc”. Example with metodo TweenExtended.continueTo ():

ActionScript

  1. import mx.transitions.easing.*; // optional: import all easing equations,
  2. //                                 or choose from:  Back, Bounce, Elastic, Regular, Strong, None
  3. import mx.transitions.TweenExtended;
  4. var _tween:TweenExtended = new TweenExtended(ball_mc, ["_x","_y","_alpha"], Regular.easeInOut, [ball_mc._x, ball_mc._y, ball_mc._alpha], [50, 350, 50], 5, true);
  5. // 
  6. _tween.onMotionFinished = function(obj) {
  7.     _tween.continueTo([150, 50, 90],5);
  8. }

It sees the example working.

Example with method TweenExtended.yoyo():

ActionScript

  1. import mx.transitions.easing.*; // optional: import all easing equations,
  2. //                                 or choose from:  Back, Bounce, Elastic, Regular, Strong, None
  3. import mx.transitions.TweenExtended;
  4. var _tween:TweenExtended = new TweenExtended(ball_mc, ["_x","_y","_alpha"], Regular.easeInOut, [ball_mc._x, ball_mc._y, ball_mc._alpha], [50, 350, 50], 5, true);
  5. // 
  6. _tween.onMotionFinished = function(obj) {
  7.     _tween.yoyo();
  8. }

It sees the example working

Example with method TweenExtended.addListener():

ActionScript

  1. import mx.transitions.easing.*;
  2. // optional: import all easing equations,
  3. // or choose from:  Back, Bounce, Elastic, Regular, Strong, None
  4. import mx.transitions.TweenExtended;
  5. //
  6. // EventListener Object:   
  7. var eventListener:Object = new Object();
  8. eventListener.onMotionStarted = function(obj) {
  9.     trace(obj.obj+" - onMotionStarted - eventListener");
  10. };
  11. eventListener.onMotionFinished = function(obj) {
  12.     trace(obj.obj+" - onMotionFinished - eventListener");
  13. };
  14. //
  15. //
  16. var _tween:TweenExtended = new TweenExtended(ball_mc, ["_x", "_y", "_alpha"], Regular.easeInOut, [ball_mc._x, ball_mc._y, ball_mc._alpha], [50, 350, 50], 5, true);
  17. //
  18. // register the listener:
  19. _tween.addListener(eventListener);

It sees the example working

Example with method TweenExtended.loop:

ActionScript

  1. import mx.transitions.easing.*;
  2. // optional: import all easing equations,
  3. // or choose from:  Back, Bounce, Elastic, Regular, Strong, None
  4. import mx.transitions.TweenExtended;
  5. var _tween:TweenExtended = new TweenExtended(ball_mc, ["_x", "_y", "_alpha"], Regular.easeInOut, [ball_mc._x, ball_mc._y, ball_mc._alpha], [50, 350, 50], 5, true);
  6. //
  7. _tween.loop = true;
  8. // 
  9. _tween.onMotionLooped = function(obj) {
  10.     trace(obj.obj+" - onMotionLooped");
  11. };

It sees the example working.

Another sufficiently interesting class is the TransitionManager of the proper Flash. With it we can create transistions saw ActionScript and with effect that a certain time would take to make for timeline. We go to see an example of as to use the TransitionManager class the same using movieclip “ball_mc” used in the examples above:

ActionScript

  1. mx.transitions.TransitionManager.start(ball_mc, {type:mx.transitions.Zoom, direction:mx.transitions.Transition.IN, duration:1, easing:mx.transitions.easing.Bounce.easeOut});

It sees the example working.

Documentation of classe TransitionManager
http://livedocs.macromedia.com/flash/8/main/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Parts&file=00004085.html

Classe Tween
http://www.kirupa.com/developer/actionscript/tween.htm

Classe Tween Extended
http://www.sqcircle.com/downloads/

Using the Tween and Transition Classes in Flash MX 2004
http://www.macromedia.com/devnet/flash/articles/tweening.html

Was this article helpful? feel free to make a donation and help keep the blog in the air
Flash

Leave a Reply