3 ways to use the TweenFPS

Author: Sebastien Jouhans

original thread : http://groups.google.co.uk/group/lowra/browse_thread/thread/91106a6e3120db07

As Cedric Nehemie describes, they are 3 ways to use the TweenFPS. You can use it with properties, setter/getter (method starting with set and get) or just with methods.

Confused? Ok let me explain.

  • With a property (x, y, alpha…), there's no problems as they have read/write access.
var _mySpriteTween:TweenFPS
var _mySprite:Sprite;
_mySprite = new Sprite();
_mySpriteTween = new TweenFPS( _mySprite , "x" , 1000 , 200 , NaN , com.robertpenner.easing.Quad.easeInOut );
_mySpriteTween.start();
  • With virtual a property. In that case you need to define a setter and a getter using set and get. This method is very useful as it will allow you to tween things such as blur and drop shadow values or even draw shape using the drawing the flash API, and a lot more. Notice the 1st argument of the TweenFPS method is “this”. In this case “this” is the instance of the class of where the set/get methods are located.
var _mySpriteTween:TweenFPS
var _tweenVal:Number;
var _oLine:Sprite = new Sprite();

_mySpriteTween = new TweenFPS( this , "myTweenMethod" , 1000 , 200 , NaN , com.robertpenner.easing.Quad.easeInOut );
_mySpriteTween.start();

public function set myTweenMethod( v:Number ):void
{
   _tweenVal = v
   _oLine.graphics.lineStyle( 1 , 0xCFCFCF , 1 );
   _oLine.graphics.moveTo( 28 , 563 );
   _oLine.graphics.lineTo( tweenVal , 563  );
}

public function get myTweenMethod():Number
{
 return tweenVal;
}
  • With methods. This case is very similar to the previous one however what's interesting to note is that you can use private methods instead of public ones (since set/get have to be public). This means that you can encapsulate everything in you class which is a key rule in OOP. All you have to do to achieve this little “miracle” is to pass a 7th argument to the TweenFPS method. This parameter is the getter method which will allow you to retrieve the tweened value.

Again similar to the previous scenario (virtual property) the 1st argument of the TweenFPS method is “this” and is the instance of the class of where the setter and getter methods are located.

 var _mySpriteTween:TweenFPS
 var _tweenVal:Number;
 var _oLine:Sprite = new Sprite();
 
 _mySpriteTween = new TweenFPS( this , "setMyTweenMethod" , 1000 , 200 , NaN , com.robertpenner.easing.Quad.easeInOut , "getMyTweenMethod" );
 _mySpriteTween.start();
 
 private function setMyTweenMethod( v:Number ):void
 {
    _tweenVal = v
    _oLine.graphics.lineStyle( 1 , 0xCFCFCF , 1 );
    _oLine.graphics.moveTo( 28 , 563 );
    _oLine.graphics.lineTo( tweenVal , 563  );
 }
 
 private function getMyTweenMethod():Number
 {
    return _tweenVal;
 }

Broken animation when using TweenFPS and MultiTweenFPS

Author: Sebastien Jouhans

original thread: http://groups.google.com/group/lowra/browse_thread/thread/73d3cc5715e21449

Again thanks to Cedric Nehemie for all the information given which allowed me to put this article together.

All animations done through TweenFPS and MultuTweenFPS need to have their instances stored in variables, otherwise the animation might every so often stop and appear broken for no apparent reason.

Why?

The TweenFPS and MultiTweenFPS both work along with the beacon events. When you use the start method the tween register itself as a listener to the beacon event. Therefore if the tween instance isn't stored it could be garbage collected while the animation is playing and the beacon event would lose it reference which would result of having the animation to stop.

Stop and Start TweenFPS & MultiTweenFPS

Author: Sebastien Jouhans

original Thread: http://groups.google.co.uk/group/lowra/browse_thread/thread/85681464028f8273

A tween instance can at any moment be stopped and the at a later stage restarted. During the time the tween is stopped you could also alter some of its original values i.e. startValue or easing equation…
Anyhow in order to restart a tween you will need to invoke the reset method before calling the start one.

The following example illustrate how to use the same tween instance with a different start value depending on whether the user is rolling over or out on a button.

 var _oOverStateTween:TweenFPS = new TweenFPS( mySprite , "alpha" , 1 , _nAnimSpeedOverState , NaN , com.robertpenner.easing.Expo.easeOut );
 
 //on the rollover event this code is invoked
 if( _oOverStateTween && _oOverStateTween.isRunning() )
 _oOverStateTween.stop();
 _oOverStateTween.setStartValue( 0 );
 _oOverStateTween.setEndValue( 1 );
 _oOverStateTween.reset()
 _oOverStateTween.start();
 
 //on the rollout event this code is invoked
 if( _oOverStateTween && _oOverStateTween.isRunning() )
 _oOverStateTween.stop();
 _oOverStateTween.setStartValue( 1 );
 _oOverStateTween.setEndValue( 0 );
 _oOverStateTween.reset();
 _oOverStateTween.start(); 

There's something important to remember here which is that you have to specify the start value through the setStartValue method otherwise your animation will go crazy.

Discussion

Enter your comment
 
 
projects/lowra/faq/tweenfps.txt · Last modified: 2008/03/02 17:19 (external edit)
 
Recent changes RSS feed Donate Powered by PHP Valid XHTML 1.0 Valid CSS Driven by DokuWiki