Everybody! This is important. In a few days, these forums will be moving over to using the totally sweet Discourse platform. To ensure this migration happens smoothly with no loss of content, these forums are currently in a read-only mode. I do apologize for the inconvenience.

There is never a good time to turn the forums off for an extended period of time, but I promise the new forums will be a billion times better. I'm pretty sure of it.

See you all on the other side in a few days, and if you have any (non-technical) questions, please e-mail me at kirupa@kirupa.com. For technical questions, try to find a tutorial that corresponds to what you are looking for and post in the comments section of that page.

Cheers,
Kirupa

Page 1 of 2 12 LastLast
Results 1 to 15 of 16

Thread: TIP: Tweening Functions

Hybrid View

  1. #1

    TIP: Tweening Functions

    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.
    Code:
    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.
    Code:
    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] } );
    Last edited by IQAndreas; August 13th, 2009 at 02:27 PM.

  2. #2
    fun.. like a Tween-based motion blur...)
    Too many letters, I cant understand you.. :vodka::bears:
    If i make grammatical mistakes plz correct me. $)

  3. #3
    Quote Originally Posted by nOobCrafter View Post
    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!

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

  5. #5
    Quote Originally Posted by werehunt View Post
    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.

    Code:
    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:
    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:
    Code:
    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?

    Last edited by IQAndreas; August 13th, 2009 at 02:44 PM.

  6. #6
    Quote Originally Posted by IqAndreas View Post

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



    i dont think so

  7. #7
    Quote Originally Posted by werehunt View Post
    i dont think so
    That makes 5 errors... Ugh.

    This one I actually tested!

    Enjoy:
    Code:
    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...

  8. #8
    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.

    Code:
    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

  9. #9
    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.
    Blog article of the month: Why My One Line 'if' Statements Are Unusual
    Twitter: @IQAndreas
    GitHub: IQAndreas

  10. #10
    Quote Originally Posted by IqAndreas View Post
    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.

  11. #11
    here is an FLA example of what I am talking about.
    Attached Files Attached Files

  12. #12
    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.

  13. #13
    Quote Originally Posted by dail View Post
    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)

    Code:
    //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.
    Blog article of the month: Why My One Line 'if' Statements Are Unusual
    Twitter: @IQAndreas
    GitHub: IQAndreas

  14. #14
    Quote Originally Posted by IqAndreas View Post
    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.

  15. #15
    Quote Originally Posted by halcyon42 View Post
    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?
    Blog article of the month: Why My One Line 'if' Statements Are Unusual
    Twitter: @IQAndreas
    GitHub: IQAndreas

Page 1 of 2 12 LastLast

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Home About kirupa.com Meet the Moderators Advertise

 Link to Us

 Credits

Copyright 1999 - 2012