TIP: Tweening Functions

[IQAndreas]

This tip can also be read on my blog:
http://iqandreas.blogspot.com/2009/0...functions.html


I often get annoyed by the fact that most tweening engines do not allow the tweening of functions.

Here is how you work around that!

This example will be using TweenLite, but if anyone wants me to write similar code for other Tweening engines (such as GTween or Tweener), just ask.


Here I will be tweening the graphics.lineTo() function to draw a simple line from the top left corner of the stage down to the bottom right, straight through the center of the movie, but tweened!

The key is creating a new object, and then applying the needed properties of that object to the function you want to run.

import gs.TweenLite;

//This sprite is what we will draw the lines on, insead of drawing them directly onto the stage.
var lineSprite:Sprite = new Sprite();
this.addChild(lineSprite);

//The key is to create a new object, and put tweenable properties on it
var drawObj:Object = new Object();
drawObj.targetObject = lineSprite;
drawObj.x = 0;
drawObj.y = 0;
drawObj.endX = this.stage.stageWidth;
drawObj.endY = this.stage.stageHeight;

TweenLite.to(drawObj, 5, {    x:drawObj.endX, y:drawObj.endY,
                             onStart:startDraw, onStartParams:[drawObj],
                            onUpdate:updateDraw, onUpdateParams:[drawObj] } );

function startDraw(obj:Object):void
{
    obj.targetObject.graphics.lineStyle(5, 0x000000);
    obj.targetObject.graphics.moveTo(obj.x, obj.y);
}

function updateDraw(obj:Object):void
{
    //Here is where all the action happens.
    //This code is executed each and every time the tweening engine changes the value of x or y
    //Here is where you place the function you want to tween, and use whatever parameters are needed
    obj.targetObject.graphics.lineTo(obj.x, obj.y);
}

That code can also be abbreviated down a lot. This code is less clear to read, but will run faster. Also, instead of creating a new function that will call the function to be tweened, the lineTo() function will be called directly.

import gs.TweenLite;

//This sprite is what we will draw the lines on, insead of drawing them directly onto the stage.
var lineSprite:Sprite = new Sprite();
this.addChild(lineSprite);

//The key is to create a new object, and put tweenable properties on it
var drawObj:Object = {targetObject:lineSprite, x:0, y:0, endX:this.stage.stageWidth, endY:this.stage.stageHeight};

//Prepare the sprite for drawing
//This code was originally in a startDraw function
drawObj.targetObject.graphics.lineStyle(5, 0x000000);
drawObj.targetObject.graphics.moveTo(obj.x, obj.y);

TweenLite.to(drawObj, 5, { x:drawObj.endX, y:drawObj.endY,
                            onUpdate:obj.targetObject.graphics.lineTo,
                            onUpdateParams:[drawObj.x, drawObj.y] } );

[nOobCrafter]

fun.. like a Tween-based motion blur...)

[Glantucan]

fun.. like a Tween-based motion blur...)

Wow!
I knew about TweenLite and TweenMax, but never wondered that could be possible.
You gave me just another reason to enforce my "Read the documentation!!" TODO entry
Good tip, man!

[werehunt]

what is obj in you code?
or what do i need to add to run this?

[IQAndreas]

what is obj in you code?
or what do i need to add to run this?

Oops. That's supposed to be drawObj. FIXED.

Thanks for catching that.


What is up with me today? That's at least my third sloppy (public) typo of the day.


EDIT: Or did you mean what is the obj variable used for in the first example? You did catch a bug, but I'll explain the first obj variable as well.

function startDraw(obj:Object):void
{
    obj.targetObject.graphics.lineStyle(5, 0x000000);
    obj.targetObject.graphics.moveTo(obj.x, obj.y);
}

As you can see, obj is defined in the parameters for the startDraw (and I used the same name for the onUpdate function). This is passed in from the parameter passed into TweenLite "onUpdateParams:[drawObj]", so really, obj is the same value as drawObj.

The reason I did it this way instead of just using this code:

function startDraw():void
{
    drawObj.targetObject.graphics.lineStyle(5, 0x000000);
    drawObj.targetObject.graphics.moveTo(drawObj.x, drawObj.y);
}

Is because then you can only tween one object: drawObj. Instead, you can pass in any object, and tween it.

For example, this will make 3 different diagonal lines on the stage, all running at once:

import gs.TweenLite;

//This sprite is what we will draw the lines on, insead of drawing them directly onto the stage.
var lineSprite:Sprite = new Sprite();
this.addChild(lineSprite);

//The key is to create a new object, and put tweenable properties on it
var drawObj1:Object = {targetObject:lineSprite, x:0, y:100, endX:this.stage.stageWidth, endY:200};
var drawObj2:Object = {targetObject:lineSprite, x:0, y:200, endX:this.stage.stageWidth, endY:300};
var drawObj3:Object = {targetObject:lineSprite, x:0, y:300, endX:this.stage.stageWidth, endY:400};

TweenLite.to(drawObj1, 5, {x:drawObj1.endX, y:drawObj1.endY,
                           onStart:startDraw, onStartParams:[drawObj1],
                           onUpdate:updateDraw, onUpdateParams:[drawObj1] } );
TweenLite.to(drawObj2, 5, {x:drawObj2.endX, y:drawObj2.endY,
                           onStart:startDraw, onStartParams:[drawObj2],
                           onUpdate:updateDraw, onUpdateParams:[drawObj2] } );
TweenLite.to(drawObj3, 5, {x:drawObj3.endX, y:drawObj3.endY,
                           onStart:startDraw, onStartParams:[drawObj3],
                           onUpdate:updateDraw, onUpdateParams:[drawObj3] } );

function startDraw(obj:Object):void
{
    obj.targetObject.graphics.lineStyle(5, 0x000000);
    obj.targetObject.graphics.moveTo(obj.x, obj.y);
}

function updateDraw(obj:Object):void
{
    //Here is where all the action happens.
    //This code is executed each and every time the tweening engine changes the value of x or y
    //Here is where you place the function you want to tween, and use whatever parameters are needed
    obj.targetObject.graphics.lineTo(obj.x, obj.y);
}

Understand?

[werehunt]

For example, this will make 3 different diagonal lines on the stage, all running at once:

i dont think so

[IQAndreas]

i dont think so

That makes 5 errors... Ugh.

This one I actually tested!

Enjoy:

import gs.TweenLite;

//The key is to create a new object, and put tweenable properties on it
var drawObj1:Object = {targetObject:this.addChild(new Sprite()), x:0, y:100, endX:this.stage.stageWidth, endY:200};
var drawObj2:Object = {targetObject:this.addChild(new Sprite()), x:0, y:200, endX:this.stage.stageWidth, endY:300};
var drawObj3:Object = {targetObject:this.addChild(new Sprite()), x:0, y:300, endX:this.stage.stageWidth, endY:400};

TweenLite.to(drawObj1, 5, {x:drawObj1.endX, y:drawObj1.endY,
                           onStart:startDraw, onStartParams:[drawObj1],
                           onUpdate:updateDraw, onUpdateParams:[drawObj1] } );
TweenLite.to(drawObj2, 5, {x:drawObj2.endX, y:drawObj2.endY,
                           onStart:startDraw, onStartParams:[drawObj2],
                           onUpdate:updateDraw, onUpdateParams:[drawObj2] } );
TweenLite.to(drawObj3, 5, {x:drawObj3.endX, y:drawObj3.endY,
                           onStart:startDraw, onStartParams:[drawObj3],
                           onUpdate:updateDraw, onUpdateParams:[drawObj3] } );

function startDraw(obj:Object):void
{
    obj.targetObject.graphics.lineStyle(5, 0x000000);
    obj.targetObject.graphics.moveTo(obj.x, obj.y);
}

function updateDraw(obj:Object):void
{
    //Here is where all the action happens.
    //This code is executed each and every time the tweening engine changes the value of x or y
    //Here is where you place the function you want to tween, and use whatever parameters are needed
    obj.targetObject.graphics.lineTo(obj.x, obj.y);
}

Also note that I saved space by skipping creating the "lineSprite" sprite. Instead, I just created it and added it to the display list all in one chunk. Note that this is possible since "addChild()" returns that DisplayObject, so you can then use it by setting it to the drawObject's targetObject property.

Whew...

[halcyon42]

This is great, but how do you re-tween the end of the line to say a new .x.

As an example let say we set the object to tween from x:0, y:100, endX:400, endY:200. it tweens. great! Now lets say the user clicks a button to move the end point to a new endX:this.stage.stageWidth.

var drawObj1:Object;
function DrawObj():void {
//The key is to create a new object, and put tweenable properties on it
drawObj1 = {targetObject:this.addChild(new Sprite()), x:0, y:100, endX:400, endY:200};
drawObj1.targetObject.graphics.lineStyle(2, 0x000000);
// drawObj1.targetObject.graphics.moveTo(drawObj1.x, drawObj1.y);
TweenLite.to(drawObj1, 2, {x:drawObj1.endX, y:drawObj1.endY,
                           onStart:startDraw, onStartParams:[drawObj1],
                           onUpdate:updateDraw, onUpdateParams:[drawObj1] } );
}
testBtn.addEventListener(MouseEvent.CLICK, _CLICK);
function _CLICK(e:MouseEvent):void {
    drawObj1.endX = 1200;
    drawObj1.endY = 200;
    
TweenLite.to(drawObj1, 2, {x:drawObj1.endX, onUpdate:updateDraw, onUpdateParams:[drawObj1] } );
}

function startDraw(obj:Object):void{
   // obj.targetObject.graphics.lineStyle(2, 0x000000);
    obj.targetObject.graphics.moveTo(obj.x, obj.y);
}

function updateDraw(obj:Object):void{
    //Here is where all the action happens.
    //This code is executed each and every time the tweening engine changes the value of x or y
    //Here is where you place the function you want to tween, and use whatever parameters are needed
    obj.targetObject.graphics.lineTo(obj.x, obj.y);
}

DrawObj();

Unfortunately this seems to redraw the line from its current end point to its new end point. What I would like it to do is move the current line's end point to a new end point without redrawing the line, similar to dragging the end point of a bezier curve to a new X.

I hope this makes sense. its kind of hard to describe :-)

Thanks
Scott

[IQAndreas]

I think I understand what you mean.

So, instead of drawing the line slowly over time, it will instead move over from it's current end to the new end (where it was clicked) tweening this motion? Sort of like a worm tied down in one end turns it's head to a new direction?

Otherwise you might have to explain a bit more what you are wanting to do, a quick sketch would help if you are able to describe it better that way.

[halcyon42]

I think I understand what you mean.

So, instead of drawing the line slowly over time, it will instead move over from it's current end to the new end (where it was clicked) tweening this motion? Sort of like a worm tied down in one end turns it's head to a new direction?

Otherwise you might have to explain a bit more what you are wanting to do, a quick sketch would help if you are able to describe it better that way.

IqAndreas, that is idea I'm going for...

Cool,

You can do the same with the built in Adobe Tween engine as well, simply 'tweening' the props of an object and using them as a param in a function. I've used the approach to tween the colour matrix filter on the odd occasion.

I'll dig that out and post it up.

Thanks dail that would help move me along. I will then see if I can build it out with TweenLite.

[halcyon42]

here is an FLA example of what I am talking about.

[dail]

Cool,

You can do the same with the built in Adobe Tween engine as well, simply 'tweening' the props of an object and using them as a param in a function. I've used the approach to tween the colour matrix filter on the odd occasion.

I'll dig that out and post it up.

[IQAndreas]

You can do the same with the built in Adobe Tween engine as well, simply 'tweening' the props of an object and using them as a param in a function.

How many times do I need to make this clear to people? Forget the bultin tween engine! It's inefficient, and a real hog, along with being difficult to use. But, yes, it is still possible to achieve the same effect with most tween engines.


Is this the effect you were looking for? Note that I tween the "endX" and "endY" values, rather than having x and y values anymore. If it's not really the effect you were seeking, just ask again, elaborating a bit more on how you want it to look (perhaps explaining how it will be used in the project you have in mind)

//The key is to create a new object, and put tweenable properties on it
var drawObj1:Object = {targetObject:this.addChild(new Sprite()), startX:stage.stageHeight / 2, startY:stage.stageWidth / 2, endX:0, endY:200};

TweenLite.to(drawObj1, 3, {endX:Math.random() * stage.stageWidth, endY:Math.random() * stage.stageHeight,
    onStart:startDraw, onStartParams:[drawObj1],
    onUpdate:updateDraw, onUpdateParams:[drawObj1] } );

function startDraw(obj:Object):void
{
    //No longer needed
    //obj.targetObject.graphics.lineStyle(5, 0x000000);
}

function updateDraw(obj:Object):void
{
    //Here is where all the action happens.
    //This code is executed each and every time the tweening engine changes the value of x or y
    //Here is where you place the function you want to tween, and use whatever parameters are needed
    obj.targetObject.graphics.clear();
    obj.targetObject.graphics.lineStyle(5, 0x000000);
    obj.targetObject.graphics.moveTo(obj.startX, obj.startY);
    obj.targetObject.graphics.lineTo(obj.endX,   obj.endY);
}

stage.addEventListener(MouseEvent.CLICK, updateEnd);
function updateEnd(ev:MouseEvent):void
{
    TweenLite.to(drawObj1, 5, {endX:stage.mouseX, endY:stage.mouseY,
        onStart:startDraw, onStartParams:[drawObj1],
        onUpdate:updateDraw, onUpdateParams:[drawObj1] } );
}

If you want me to explain or elaborate on any part of the code, just say so.

[dail]

How many times do I need to make this clear to people? Forget the bultin tween engine! It's inefficient, and a real hog, along with being difficult to use. [SIZE=1]But, yes, it is still possible to achieve the same effect with most tween engines.

Its simple to use, and is fine for simple operations. Its also good if you want to distribute code that does not rely on external libraries. I agree it does not comare to tweenlite etc, but it has its place.

[IQAndreas]

here is an FLA example of what I am talking about.

Sadly I am unable to open FLA files at the moment.

Do you think you could post the resulting SWF instead?