Tweener Tips
I've been using Tweener for almost an year now, and I thought I'd share a few quick and useful tips.
Delayed Function call, or a Poor man's timer
AS3 has the Timer class which is handy, but sometimes you just need a quick "call this function in x seconds". No need to instantiate an object, keep its reference, add event listeners, a function and clear up the timer. This is so simple (and great):
1 | Tweener.addTween(this, {time:0.3, onComplete: myFunction});
|
1 2 3 4 | Tweener.addTween(this, {time:0.3, onComplete: function():void{
// do something here!
trace("hello");
});
|
Using "base" as a template for Tweens
Some animations / visual effects are used many times over in the same project. Using the base property you can create a "template" of a tween and specialize it later (like adding an onComplete callback for some runs of the effect). Suppose you have a recurring tween that scale items and does a fade. You can say:
1 2 3 4 5 6 7 8 9 10 11 | // creates a "template" to be used more than once:
var scaleFadeIn : Object = {
alpha:1,
_scale:1,
time:0.5,
transition: "linear"
}
// later in you code you can say:
Tweener.addTween(myMovieClip, {base:scaleFadeIn});
// or you can "enhance it", for example with an onComplete callback:
Tweener.addTween(myMovieClip, {base:scaleFadeIn, onComplete: callHome});
|
The great thing about this is easier maintenance. If you later on decide that you want to try another transition or time, you only change the template, the "base" for those Tweens.
Note that base is very flexible, as they can be nested:
1 2 3 4 | var scaleAndColorFadeIn : Object = {
base: scaleFadeIn,
_color: 0xFF0000
}
|
Using setTimeScale to speed up testing
This is a real life saver. Tweener uses a sort of internal clock, a value by which all time operations are measured, called timeScale. Sometimes you are coding some section of the website, but to get there you have to see the loading animations, menu transitions and so on. Because you are seeing this over and over again, those precious seconds until you get to the part that really interests you is very boring, so you can "fast forward" them. At the beginning of your website you can just say:
1
2 | // this will run everything 3 times as fast
Tweener.timeScale(3);
|
1
2 | // this will set the speed back to normal
Tweener.setTimeScale( 1);
|
getting a third opinion
Hi Arthur!
Thanks for that! I think there's a mistake though, i.e. setTimeScale(0.5) will slow down the animation twice and setTimeScale(2) will speed it up two times.
For Delayed Function call I often use addCaller method instead, that allows to call the function more than one time, ie.
Tweener.addCaller(this, {onUpdate:myFunction, delay: 2, count: 1});
Cheers!
@og2t: oops! You are correct, setting the time scale to 0.5 will run twice as slow, but I can't find a reference to setTimeScale(0.5) ?! Yup, addCaller is great, it's just that sometimes all you want is one execution. For multiple calls with easing addCaller really saves the day.
@Gabriel Surviving the heat?
@Adam:
The Timer class is preferred instead of the setTimeout, but it's still there in AS3: adobe's doc.
Howdy Arthur,
I really love the fact that I can pause and resume tweens within the Tweener class...so when the time came to implement a pause and resume timer within a project I am developing I immediately thought of using Tweener...then I stumbled across your blog and realized it could actually be done.
Unfortunately when I tried your delayed function call or as you call it the "Poor Man's Timer"...I keep getting the following error:
ReferenceError: Error #1069: Property count not found on gameClasses.GameTimer and there is no default value.
I was under the impression that I didn't have to supply a property for the tweener in order to get the "Poor Man's Timer" to work.
Is there something I am missing? Do I need to supply at least one property for the tween to occur?
cheers,
devin M. arnold
at caurina.transitions::Tweener$/caurina.transitions:Tweener::getPropertyValue()[D:SOFTWARE_DEVELOPMENTMGC_DEVELOPcaurinatransitionsTweener.as:881] at caurina.transitions::Tweener$/caurina.transitions:Tweener::updateTweenByIndex()[D:SOFTWARE_DEVELOPMENTMGC_DEVELOPcaurinatransitionsTweener.as:707] at caurina.transitions::Tweener$/caurina.transitions:Tweener::updateTweens()[D:SOFTWARE_DEVELOPMENTMGC_DEVELOPcaurinatransitionsTweener.as:572] at caurina.transitions::Tweener$/onEnterFrame()[D:SOFTWARE_DEVELOPMENTMGC_DEVELOPcaurinatransitionsTweener.as:921]
Arthur,
Sorry i forgot to post the constructor of my class in the other message, here it is:
public function GameTimer(delay:Number, repeatCount:Number)
{
Tweener.addTween(this, {time:delay, count:repeatCount, onComplete: onTimerComplete, onUpdate:onIntervalComplete});
}
As you can see, I pass in a couple of values to pass into the addTween method of the tweener class. Could that be causing the problem with properties in the Tweener.as class?
Since this class does nothing on the timeline with sprites or movieclips is there a property i could use to satisfy this problem without causing any internal problems with Tweener.as?
thanks,
devin M. arnold
great post, thanks for these tips Arthur!
@devin M. arnold: do a trace on "this" in your constructor function first and see if it has a value other than "undefined"! your class might not already be properly instantiated at this time!
like so: public function GameTimer(delay:Number, repeatCount:Number) { trace("GameTimer() :: this => " + this); Tweener.addTween(this, {time:delay, count:repeatCount, onComplete: onTimerComplete, onUpdate:onIntervalComplete}); }
Hi Folks.
Apologies for not responding. I've just found out that the comments feed for the website had a bug in it, and I didn't get notified o new comments (damn writing you own blogging engine!)
As a general note, Tweener has a discussion list that's absolutely great for getting questions about tweener answered. I've never seen a question go unanswered over there.
@Chris: Thanks for helping out.
@josh: Yup, pauseTweens on that object should work as well, see this thread .
cheers
@Wistonian:
The Tweener mailing list is the place to check out for this:
@sam:
If I understand you correctly, no , not without some ugly hacking. The reason for this is that tweener is time based, and for that to work you'd have to alter the time started for that particular tween. Again the mailing list is the best place to ask around.
@Mr Hichem:
Thanks for the pointers.
Hi There.
Tweener has a great mailing list which is a better place to get help than this blog entry.
Cheers Arthur
Awesome! The third one is the best. I'll definitely start using this.