var tween:GTween = new GTween(mySprite, 2, {x:200, y:200}, {completeListener:handleComplete, data:"joy"});

function handleComplete(evt:Event):void {
    trace("complete: "+evt.target.data);
}

Comments (36)

This is getting seriously cool. I'm definately going to try and evaluate your library in a real world project very soon instead of just jerking around. Good stuff, thanks!

I've been meaning to ask (since I haven't had the time to dwelve into the code for real). How accurate are the progress points? If I set one at 1.5 seconds into a 3 second tween and there is some serious frame dropping going on, will the event still be fired (at some point) or will the tweening engine figure that the three seconds are up already and we missed the halfway point?

Posted by: Marcus Stade at September 3, 2008 11:45 AM
URL: http://www.gimlet.se

---

Thanks Marcus. Actually you raise a good point. The current model will always trigger the last progress point passed, but does not currently queue them.

For example:
1s tween, progress point at 0.5s, massive CPU utilization to the point that update only occurs once, at the end of the tween.

In this case, the middle progress point would fire before the complete event, because gTween would evaluate it as the most recently passed progress point on the update before it evaluates for completion.

However, if you added another progress point at 0.4s, it would not be triggered, because gTween would only evaluate the last progress it passed when it updated (in this extreme example, only once at the end of the tween).

Queuing progress points should be easy to add - I'll look into it for beta 3.

Posted by: Grant Skinner at September 3, 2008 11:52 AM
URL: http://gskinner.com/blog/

---

Have I told you lately that I love you? I ask a question, on the blog no less, and get an excellent answer not even 10 minutes later! =)

Are you going to Flash On The Beach btw? If you are, I owe you a beer.

Posted by: Marcus Stade at September 3, 2008 12:07 PM
URL: http://www.gimlet.se

---

Do you happen to have this on google code to allow us to update easily from an SVN?

Posted by: corban baxter at September 3, 2008 01:14 PM
URL: http://blog.projectx4.com

---

Marcus - :) Yes, I will be at FotB. Hope to see you there.

Corban - Not yet. Once I get past beta 3 I will put it on google code. I want to closely control distribution and modifications until I think the API and codebase is reasonably stable.

Posted by: Grant Skinner at September 3, 2008 01:21 PM
URL: http://gskinner.com/blog/

---

Thanks, Grant, another spectacular contribution to the AS3 community.

Posted by: Troy Gilbert at September 3, 2008 06:21 PM
URL: http://troygilbert.com/

---

Hi everyone,
Sorry a bit off-topic...
Is there any Grant SVN for all these wonderful classes? (not only the tweener) Or at least, any way to browse what has been written and release here over the years? (even small classes).
Sorry for the interruption.
Romu

Posted by: Romu at September 4, 2008 02:55 AM
URL: http://www.soundstep.com/

---

I've been using GTween in a project I'm working on. After upgrading my code with the new beta there's been a very noticable speed increase. The tweens seem to be much smoother than before. Nice work :)

Posted by: Dark Vyper at September 4, 2008 07:21 AM
URL: http://blog.fatal-exception.co.uk

---

Hi Grant,

I am not sure if I am not stupid, but I've got a problem with transient calls. I'd like to have a simple delayed call, but something is broken. Sure I can handle it through Timer or setTimeout, but I am just curious why it's not working for me:

This is not working:
new GTween((new Object()), .05, null, {completeListener:function():void { /* do something */ }});
(even when I use {} instead of null in properties Object, just to be sure).

And wow, this works:
new GTween((new Object()), .05, {x:1}, {completeListener:function():void { /* do something */ }});
(right, an Object with GTween applied is not a DisplayObject, that's just a test - but in this case it just works.

I tried to find the bug, but I was completely lost in your source code. Maybe this issue isn't really important to solve, as probably nobody will use GTween as setTimeout replacement, but maybe it's a trace of some other bug...

Have a good weekend,
Vaclav

Posted by: Vaclav Vancura at September 5, 2008 10:53 AM
URL: http://vaclav.vancura.org

---

Vaclav - gTween instances do not autoplay until a property is changed. Do you mind me asking why you're doing this? It looks as though you're just using gTween as a delay timer - is that the case?

If so, I think that if you specify paused:false in your tweenProperties parameter, that should work.

new GTween((new Object()), .05, null, {paused:false, completeListener:function():void { /* do something */ }});

Posted by: Grant Skinner at September 5, 2008 10:57 AM
URL: http://gskinner.com/blog/

---

Hi.

I got a feature request: what about timescaling? It's really helpful when you want to precisely fine tune animations. Tweener does it this way: http://hosted.zeh.com.br/tweener/docs/en-us/methods/Tweener_setTimeScale.html

Vaclav

Posted by: Vaclav Vancura at September 5, 2008 10:58 AM
URL: http://vaclav.vancura.org

---

Grant, thanks for the reply. It works now! I completely forgot about the paused flag.

Posted by: Vaclav Vancura at September 5, 2008 11:00 AM
URL: http://vaclav.vancura.org

---

Some code tips:
- variable ticker is defined two times (ln 192, 289), once as protected, once as static.
- function callProperty (ln 886) should be void - does not have a return statement
- import Shape is not used (ln 37)
- missing ending semicolon (ln 363,378,394,961,984)

Thanks for this great class!!!

Posted by: Matus Laco at September 8, 2008 03:52 AM
URL: http://www.yofla.com/

---

ooops, the shape import is used...

Posted by: Matus Laco at September 8, 2008 03:55 AM
URL: http://www.yofla.com/

---

Romu - no, but I recognize the need for one. One day, when I have some spare time, I'll try to set up a repository. Or perhaps I'll make an intern do it. :)

Matus - Thanks for the feedback! The ticker property is used in both locations, though I'll consider renaming one for clarity. Good catch on callProperty - that method should actually return the value from the apply call, I've fixed it locally. I've also added the missing semicolons. :)

Posted by: Grant Skinner at September 8, 2008 12:01 PM
URL: http://gskinner.com/blog/

---

Hi,

it would be nice to have an onprogress event on every frame or a progress point * that gets triggered every time the target gets moved/animated. I have a lot of situations where i need to update some other stuff during an animation this would just be very handy.

cheers and thanks for the nice Class

Posted by: Patrick Lauber at September 10, 2008 03:19 PM
URL: http://www.divio.ch

---

Patrick,

Beta 2 "added a CHANGE event that fires whenever tweened properties are updated)"

Does that meet your needs?

Posted by: Grant Skinner at September 10, 2008 03:21 PM
URL: http://gskinner.com/blog/

---

afraid i'm struggling with tweening filters (eg. BlurFilter). is there an easy way!?

Posted by: em at September 15, 2008 03:30 AM
URL:

---

Hi there,

Thought I'd check out this new GTween that peeps are talking about - very nice indeed...

I second the fact that I an struggling with tweening filters - I will make do with updating on the new 'CHANGE' event for now, but is there an easier way?

I am trying the following as a test... but no joy!

var glow:GlowFilter = new GlowFilter(0xff00ff,0.8,10,10,2,BitmapFilterQuality.HIGH,false,false);
var mf:Array = new Array();
mf.push(glow);

fooFilter.filters = mf;

var gtFilter:GTween = new GTween( GlowFilter(fooFilter.filters[0]), 3, { blurX:200, blurY:200 }, {ease:Circular.easeOut, delay:0} );

Any help would be much appreciated.

Cheers

Dan

Posted by: Dan at September 18, 2008 03:59 AM
URL:

---

i really think you should change "completeListener" to "onComplete". Several of the other motion frameworks use onComplete and I think it's a bit more intuitive. completeListener would prompt the use of a function a little more clearly.

Posted by: micah at September 19, 2008 12:03 PM
URL: http://liftinteractive.com

---

re-examining it, i do understand why you've chosen "completeListener", but maybe theres a more intuitive way to do this?

Posted by: micah at September 19, 2008 12:24 PM
URL: http://liftinteractive.com

---

Hey,

I have been meaning to try out this class, and finally got around to putting into a project. However, there is some weird behavior that has been frustrating.

Here is the code I am using:

private function showSegment (index:uint):void {

for (var i:uint = 0; i
if (i != index) {

new GTween (content[i], 1, { alpha: 0 }, { ease: Equations.easeOutExpo });

} else {

new GTween (content[i], 1, { alpha: 100 }, { ease: Equations.easeOutExpo });

}

}

}

Using Tweener, this kind of code would cause a clean fade between my selected segment and any segments which are still visible.

Using GTween, the selected segment appears instantly without any tweening. Previous segments appear to tween properly, but have a delay of around one second before they disappear.

What is causing this? Have I overlooked something, or is GTween not designed to be used this way?

Thank you!

Posted by: Joshua at September 19, 2008 09:05 PM
URL: http://eclecticdesignstudio.com

---

Oh, wow. I really have been missing too much sleep lately.

I changed "alpha: 100" to "alpha: 1" and it worked just like expected.

Posted by: Joshua at September 19, 2008 09:11 PM
URL: http://eclecticdesignstudio.com

---

I like the structure of gTween when it comes to creating and using event handlers, but I miss Tweener's ability to overwrite previous tweens when you create new ones.

For example, if I begin tweening an object to an alpha of zero, yet create a new tween for that same object to an alpha of one, I want to be able to overwrite the original tween so that the behavior doesn't get strange.

Is there a simple way to handle this (other than saving a reference to each tween I create, which I would rather not do) or would this require the creation of some kind of "gTweenManager" to leverage some of the global features Tweener has?

Thanks :o)

Posted by: Joshua at September 19, 2008 10:17 PM
URL: http://eclecticdesignstudio.com

---

Joshua,

I simply maintain a reference to the tween. In your example I would just instantiate all of the tweens when I set things up and save them to an array, then access them when I need to make an update. You can then just either use setProperty or the proxy property to change the value:
contentTweens[i].proxy.alpha = (i==index) ? 1 : 0;

I have been considering exposing a method to look up whether there is an active tween on an object, however this requires that I maintain that reference, and has a bit of an impact on garbage collection. It also becomes quite complicated in that there are often occasions that I would want multiple tweens on a single target. I'm interested to hear thoughts on this one.

Cheers.

Posted by: Grant Skinner at September 19, 2008 11:07 PM
URL: http://gskinner.com/blog/

---

Thanks for sharing GTween; I'm a happy user. Two remarks
- I've got the following use case:
parentTween.duration = 5
childTween.duration = 1
parentTween.addChild(childTween, false)

When it plays forward, childTween starts at the beginning. But when I run parentTween.reverse(), childTween also plays right at the beginning even though I expect it to play after 4 seconds. Is this a feature or a bug?

- Maybe you are willing to share your opinion about coding style in an other blog. For instance, are there any performance benefits that you squeeze two assignments on one line? e.g.
positionOffset = ticker.position-(_position = _duration-_position);
I think there are none. So if it's only for compact code in terms of characters, why do have any ending semicolon?

Posted by: Marc at September 20, 2008 03:25 AM
URL: http://faindu.wordpress.com/

---

At its simplest, it would be great to be able to clear any tweens that are affecting a certain object.

Perhaps tweens can register themselves with some kind of global class instance that keeps track of tweens by object. Tweens could probably unregister themselves when their delay is over and they have already played. In this way, one could keep tabs on all the tweens which affect one object. If these tweens could be returned, by object, in an array, then a developer could understand for themselves which tweens they want to remove or proxy.

If adding this sort of global management takes a toll on performance, I might consider breaking it out into a seperate management class. Many users may not expect this sort of global control, and would gladly trade it for a performance boost. Other users, like those which are familiar with Tweener, may welcome the extra control and care little about a slight performance loss.

Posted by: Joshua at September 20, 2008 03:41 PM
URL: http://eclecticdesignstudio.com

---

Grant,

I am have trouble with tweening to alpha 0 then tweening back to 1 as in the case of roll-over fade-in; roll-out fade-out. If I set the fade out value to 0 then it never fades back in. If I set the fade out value to 0.01 then it fades back in as expected. Really like the proxy functionality. So clean!

Posted by: Randy Troppmann at October 16, 2008 08:36 PM
URL: http://www.randytroppmann.com

---

Randy,

Sounds like there's an issue with the autoHide functionality. Try setting autoHide=false for now. I'll take a look at it in the next day or two.

Posted by: Grant Skinner at October 16, 2008 09:46 PM
URL: http://gskinner.com/blog/

---

Hi, I trying to do a tweener with no success. The problem is that I am trying to do a tween from the value true to false. What is wrong?

Posted by: Olandim at October 17, 2008 08:33 AM
URL:

---

Olandim,

You can't tween boolean (true/false) values - there are no values between true and false to tween to (ie. there are no "kind of true" values). You can only tween numeric values.

Posted by: Grant Skinner at October 17, 2008 08:44 AM
URL: http://gskinner.com/blog/

---

Hey,

Great class, finding it really useful.

Just found something that may/may not be a bug:

{completeListener:handleComplete, data:"joy"}

If I leave out the data property completely then the handleComplete function doesn't appear to get called.

It's not an issue really, I can leave data as empty but just thought i'd mention it.

Thanks again!

Toby

Posted by: Toby Skinner at October 21, 2008 06:05 AM
URL: http://blog.tobyskinner.co.uk

---

Toby,

I'm unable to reproduce that issue. The following code fires the complete event as expected:

gTween = new GTween(foo,1,{y:200},{completeListener:handleComplete});

function handleComplete(evt:Event):void {
trace("complete");
}

Posted by: Grant Skinner at October 21, 2008 09:57 AM
URL: http://gskinner.com/blog/

---

Heya,

Yeah I can see that's doing what is expected now, thanks, actually I have no idea why that wasn't working since i can't replicate the issue now either and all afternoon it was broken, or maybe I was broken, never can tell.

Anyway, thanks again.

Toby

Posted by: Toby Skinner at October 21, 2008 11:01 AM
URL: http://blog.tobyskinner.co.uk

---

Hi, I've used GTween heavily on a recent project (http://toki-woki.net/p/FFFFOUND-Desktop/) and I thought that being able to specify a default tween ease function would be awesome, via a static property or such... This way if your project uses the same tween function for all its tweens, everyhthing would be much simpler!

GTween.defaultEaseFunction=myEaseFunc;

What do you think?

Posted by: Quentin at October 24, 2008 04:05 AM
URL: http://toki-woki.net

---

Hi Grant.

Wanted to recommend a change to your code based on a RTE I encountered. Inside your protected updateProperties function you have made the assumption that if the target object has a "setSize" method then it probably takes only two parameters. Though this may be the norm in 99% of cases, you aren't accounting for data objects that might represent a visual assets which can take on more than two "size" properties. Case in point are isometric objects. I would defer to the normalized logic using:

_target[n] = initProperties[n]+(destProperties[n]-initProperties[n])*value;

Just an FYI. Thanks again for your contribution. It is an awesome project.

J

Posted by: jwopitz at October 28, 2008 12:33 PM
URL: http://jwopitz.wordpress.com

---

Post a comment

Javascript must be enabled to post comments. Spam will be deleted immediately!
Author URLs are not linked. All link tags are automatically removed.

Name:


Email Address:


URL:

Remember personal info?
Yes No
Comments: