15th Aug 2008

Hold on a Second

You can find a lot of tween libraries for AS2 and AS3. Many of these include some sort of mechanism for delaying the start of a tween. A while back I took my own shot at this based off of another class that I found and came up with:

import mx.transitions.Tween;
class com.vfd.animation.tweens.DelayedTween extends Tween{

private var intervalID:Number
private var delay:Number = 0;

public function DelayedTween(object, property, easingFunction, start, end, duration, useSeconds, delay) {

super(object, property, easingFunction, start, end, duration, useSeconds);
this.delay = Math.abs(delay*1000);
this.setDelay();

}
private function start() {

}

private function setDelay() {
if (this.delay > 0) {
this.intervalID = setInterval(this, “startAnimation”, this.delay);
}else {
this.startAnimation();
}
}

private function startAnimation() {
clearInterval(this.intervalID);
super.start();
}

}

This was more or less a simple copy of the class I had found. I got a chance to look at this again today and realized I could simplify it a bit. I ended up with:

/**
* @author Jeremy Wischusen
* This class allows for a delay before starting the animation.
*/
import mx.transitions.Tween;
import mx.utils.Delegate;
class com.vfd.animation.tweens.DelayedTween extends Tween {
/*
Holds the number of seconds to wait before starting the animation.
*/
private var _delay:Number = 0;
/*
Instance variable holding a reference to the start function of the Tween class.
This is needed due to scoping issues when using setTimeout.
*/
private var superStart:Function;
public function DelayedTween(object, property, easingFunction, start, end, duration, useSeconds, delay) {
this.delay = delay;
/*Use the Delegate class to create a reference back to the tween start funciton
that can be used with setTimeout. */
this.superStart = Delegate.create(super, super.start);
super(object,property,easingFunction,start,end,duration,useSeconds);
}
/*Override the default start function so that the delay can be applied.*/
public function start() {
if (this._delay>0) {
_global.setTimeout(this.superStart,this._delay);
} else {
super.start();
}
}
/*Setter function for delay attribute*/
public function set delay(seconds:Number){
this._delay = Math.abs(seconds*1000);
}
}

As you can see, I reduced the number of functions, used the simpler setTimeOut and rely more on inheritance and overriding than in the previous version. I also decided to make and AS3 version.

package com.vfd.animation.tweens{
import fl.transitions.Tween;
import flash.utils.setTimeout;
/**
* @author Jeremy Wischusen
* This class allows for a delay before starting the animation.
*/
public class DelayedTween extends Tween {
/*
Holds the number of seconds to wait before starting the animation.
*/
private var _delay:Number = 0;
public function DelayedTween(object, property, easingFunction, start, end, duration, useSeconds, delay) {
this.delay = delay ;
super(object,property,easingFunction,start,end,duration,useSeconds);
}
/*Override the default start function so that the delay can be applied.*/
public override function start():void {
if (this._delay>0) {
setTimeout(super.start,this._delay);
} else {
super.start();
}
}
/*Setter function for delay attribute*/
public function set delay(seconds:Number):void {
this._delay = Math.abs(seconds*1000);
}
}
}

I have noticed that occasionally the compiler spits out:
The superconstructor must be called first in the constructor body.

If you place the super constructor before the delay variable is set, the tween just starts immediately since the variable has a default value of 0. This is what caused the need for the additional functions in the first version. While the compiler may occasionally complain (sometimes it shows the message and other times it does not), it still compiles and works.

Will be committing these to the repository on Google code sometime today.

Comments are closed.