Skip to main content
U
unnurbraga
Inspiring
July 18, 2017
Answered

MouseOver movieclip going back and forth on timeline

  • July 18, 2017
  • 1 reply
  • 863 views

Hi, I have a 80 pictures showing an object in 360°. I want to be able to go back and forth on the timeline by moving the mouse to the left or to the right. How can I do that?

    This topic has been closed for replies.
    Correct answer unnurbraga

    ClayUUID's code in message 3 gets the stage width, so you wouldn't need to put in values. If you wanted to go through all of the images in the time it takes to mouse across the movieclip itself, you could add the mouse move listener to the movieclip, and then there is a local x value you can use. The code would be:

    myBla360.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);

    function mouseMoveHandler(evt:MouseEvent):void {

        var percent:Number = evt.localX / myBla360.width;

        percent = Math.max(0, Math.min(1, percent)); // clamp to 0 - 1 range

        myBla360.gotoAndStop(percent * myBla360.totalFrames);

    }


    Hi This is what I was looking for. And it works!

    myBla360.stop();

    myBla360.addEventListener(MouseEvent.MOUSE_OVER,mover);

    myBla360.addEventListener(MouseEvent.MOUSE_OUT,mout);

    function mover(e:MouseEvent):void {

        stopPlayReverse();

        myBla360.play();

    }

    function mout(e:MouseEvent):void {

        this.addEventListener(Event.ENTER_FRAME, playReverse, false, 0, true);

    }

    function playReverse(e:Event):void {

        if (myBla360.currentFrame == 1) {

            stopPlayReverse();

        } else {

            myBla360.prevFrame();

        }

    }

    function stopPlayReverse():void {

        if (this.hasEventListener(Event.ENTER_FRAME)) {

            this.removeEventListener(Event.ENTER_FRAME, playReverse);

        }

    }

    1 reply

    C
    ClayUUID
    Brainiac
    July 18, 2017

    First you tell us whether you're working in an AS3 or Canvas document.

    U
    unnurbragaAuthor
    Inspiring
    July 18, 2017

    I am working in AS3

    C
    ClayUUID
    Brainiac
    July 18, 2017

    Then you just add an event listener to the stage for mouse movement, get the mouse X coordinate in the event handler, then use the Power of Math to turn that coordinate into a frame number. Something like this:

    stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);

    function mouseMoveHandler(evt:MouseEvent):void {

        var percent:Number = evt.stageX / stage.stageWidth;

        percent = Math.max(0, Math.min(1, percent)); // clamp to 0 - 1 range

        myBla360.gotoAndStop(percent * 80);

    }

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