Skip to main content
Inspiring
March 26, 2021
Question

Motion tween via code not timeline

  • March 26, 2021
  • 2 replies
  • 621 views

Using createjs

Hi, I know how to create a motion tween via the timeline but I would like to do it via code. It would be a whole lot neater as I have to tween various objects and I hate long timelines. 

I was thinking of creating an empty movieclip - well transparent just as a way of helping with position. Then I would tween the mc to the transparent mc. I seem to remember it was possible via a tween engine but I'm not sure. Googled but came up short.

    This topic has been closed for replies.

    2 replies

    Legend
    March 27, 2021

    Literally the first Google search result for "createjs tween":

    https://createjs.com/docs/tweenjs/classes/Tween.html

     

    Inspiring
    March 28, 2021

    Yep, I didn't search for createjs tween but rather adobe animate tween.

    Thanks

    I have set up a simple tween and I get no errors in the console but my circle doesn't move.

    var Circle = new lib.circle();
    
    var clickHandler = tween.bind(this);
    this.btn.addEventListener("click", clickHandler);
       
    function tween()
    { 
       createjs.Tween.get(Circle)
        //.wait(500)
    	//.to({alpha:0, visible:false}, 1000)
    	//.to({x:400}, 1000)
        //.call(handleComplete);
    	console.log("tween() was called")
    	
    	//use he override parameter so we don't have to remove the eventlistener. Note that the parameter goes with the object called
    	createjs.Tween.get(Circle, {override:true})
    	.call(handleComplete)
    	.to({x:100});
    }
    
    function handleComplete()
    { 
    	console.log("handle complete called")
    }

     

    Inspiring
    March 26, 2021

    Excuse me, I have just found tutorial on the Tween Class.

    https://code.tutsplus.com/tutorials/an-introduction-to-tweening-with-actionscript-30--active-2022

     

    By the way, this forum won't let me edit or erase my post - when I press ...more - it's empty.

    Inspiring
    March 26, 2021

    Oh dear - it's for AS3 not createjs.

     

    //import necesarry classes
    import fl.transitions.Tween;
    import fl.transitions.easing.*;
     
    //create our timer
    var timer:Timer = new Timer(3000);
     
    //start the timer
    timer.start();
     
    //create our tween
    var tween:Tween = new Tween(square, "x", Strong.easeInOut, square.x, 300, 2, true);
     
    //prevent tween from immediately tweening
    tween.stop();
     
    //add an event listener to timer
    timer.addEventListener(TimerEvent.TIMER, startTween);
     
    //create the function startTween
    function startTween(event:TimerEvent):void {
        //make tween start
        tween.start();
    }