MouseOver movieclip going back and forth on timeline

[unnurbraga]

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?

[ClayUUID]

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

[unnurbraga]

I am working in AS3

[ClayUUID]

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);

}

[unnurbraga]

Hi I do´nt want to move in 360°, it is all pictures taken one by one, 80 off them.

[ClayUUID]

Okay...?

[Colin Holgate]

The myBla360 is a movieclip that has 80 frames in it. You would have imported your 80 images into that movieclip. One thing that could be changed is the 80:

myBla360.gotoAndStop(percent * myBla360.totalFrames);

then you could have any number of images.

[unnurbraga]

Hi this is not working. I am not english speaking, but I thought I made my self understandable, but I clearly did not.

[ClayUUID]

We understand you just fine. You're not understanding us.

[unnurbraga]

Ok, I will try again.

I want to play the movieclip myBla360 to the next frame or the previous frame depending on where the mouse is on the movieclip. If I move the mouse to the right the movieclip plays forward, if I move the mouse to the left it plays backwards.

[Colin Holgate]

You wouldn't want it to play, it just needs to go to the frame frame. The gotoAndStop() line will do that for you.

[unnurbraga]

How can you program each frame to stop at next frame or previous frame?

[ClayUUID]

Ummm.... nextFrame() and prevFrame().

[unnurbraga]

Am I so misunderstood? I am talking about moving the mouse!!!!!!

I would have thought it had something to do with the xmouse and ymouse.

[ClayUUID]

The word "mouse" was not in your previous post.

[unnurbraga]

"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?"

[Colin Holgate]

If you look at these two lines:

stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);

function mouseMoveHandler(evt:MouseEvent):void {

the first line adds a listener to call the function every time the mouse is moved. Then in the function the variable 'evt' gets all the information about the event. One of the properties it gets is stageX, which is the x position of the cursor's position on the stage. This line:

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

uses that value to calculate how far across the stage you are at the time.

[unnurbraga]

Thank you! Can you show me an example how to put the values in? The stage is 1200x600 and the movieclip is 550x400 aligned to the left side in the middle.

[Colin Holgate]

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);

}

[unnurbraga]

Hi I still do not understand where I put the value

[unnurbraga · Accepted solution]

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);

    }

}

[ClayUUID]

So what you actually wanted was to play a movieclip forward and reverse in response to the mouse moving over one of two different movie clips. Which is not at all what you said in the first place.

[unnurbraga]

Well, this was the original question, and I thought you understood it.

"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?"

[unnurbraga]

There is only one movieclip