Skip to main content
E
Ervin Petrisevac
Participant
December 17, 2016
Question

Key frames and mouse movement

  • December 17, 2016
  • 1 reply
  • 328 views

Hi everyone, this is my first time seeking help, this is my last resort

I am a designer by vocation, but i have some tasks from time to time to animate something, and my dev skills are not so good and i am fairly average at Animate (i have some Flash and Edge experience) but mostly at simple animations.

Now, i have a assignment to emulate object rotation, it consists of 72 still images that create rotational effect. I made it rotate (animating was no issue no issue, i arranged all key frames on same layer) but when a person comes with mouse over the animation it needs to emulate the rotation of the object from frame 1 to frame 72 depends if mouse goes left or right. I hope i wasn't confusing.

Thank you in advance !

    This topic has been closed for replies.

    1 reply

    C
    ClayUUID
    Legend
    December 18, 2016

    It would be helpful if you specified whether this is an AS3 or Canvas project.

    E
    Ervin PetrisevacAuthor
    Participant
    December 18, 2016

    Sorry my bad, it is a Canvas project.

    kglad
    Community Expert
    kgladCommunity Expert
    Community Expert
    December 18, 2016

    use the api here, EaselJS v0.8.2 API Documentation : EaselJS

    but this will get you started. place a stage colored movieclip named cover over your stage and assign it an alpha of 1 and enable multiframe bounds

    var tl = this;

    tl.stop();

    stage.enableMouseOver(10);

    tl.cover.addEventListener('mouseover',moveF);

    stage.addEventListener('mouseleave',stopF);

    interpolateF(tl,20,1,stage.getBounds().width-20,72);

    function stopF(e){

        createjs.Ticker.removeEventListener("tick", tickF);

    }

    function moveF(e){

        createjs.Ticker.addEventListener("tick", tickF);

    }

    function tickF(){

        tl.gotoAndStop(Math.round(tl.m*stage.mouseX+tl.b));

    }

    function interpolateF(obj,x1,y1,x2,y2){

        obj.m = (y1-y2)/(x1-x2);

        obj.b = y1-obj.m*x1;

    }

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices