How do I detect mouse direction and change frame?

[Guest]

Hi there,

I'm building a simple 360 degree image rotation effect using single frames and forward and back buttons. I'm new to AS3 and have managed to create functioning buttons... (so my code may be a bit odd!)

But now I also want to advance frames by clicking and dragging on the image itself (or on an invisible button sat on top of the image).

Although there are some threads here which have asked the same thing, I don't understand how they were answered. My code is below, and the file I am practising with is on:

https://download.yousendit.com/MVNjeFlWSWh6NE4zZUE9PQ

At the moment if you click on the image area it will advance but as there is no code detecting mouse direction, it just goes forward. Can anyone help me understand how to implement a simple direction detection and then use this to decided whether to advance or go backwards....thank you!!

stop();

// advance 1 frame on click

function forward(e:MouseEvent):void {

if (currentFrame ==15) {

gotoAndStop(1);

}else{

gotoAndStop(currentFrame + 1);

}

}

// go back 1 frame on click

function back(e:MouseEvent):void {

if (currentFrame ==1) {

gotoAndStop(15);

}else{

gotoAndStop(currentFrame - 1);

}

}

btn_fwd.addEventListener(MouseEvent.CLICK, forward);

btn_bck.addEventListener(MouseEvent.CLICK, back);

// change frame on mouse direction???

function MouseMove(event:MouseEvent):void {

{

if(event.buttonDown==true)

if (currentFrame ==15) {

gotoAndStop(1);

}else{

gotoAndStop(currentFrame + 1);

}

}

}

stage_btn.addEventListener(MouseEvent.MOUSE_MOVE, MouseMove);

[kglad]

1.  usually, you would detect which 1/2 of the image the mouse is over and advance or move back a frame.

2.  you can use nextFrame() instead of gotoAndStop(currentFrame + 1);

3.  you can use prevFrame() to move back one frame.

[Guest]

There are several ways you can do this but here's the simplest one I can think of if you are using the "click and drag" method that you've mentioned. You don't actually need to use mouseMove at all with this method.

1) Record the current mouse position when you mouseDown.

2) The user drags to the left or right.

3) The user releases the mouse.

4) Record the "new" current mouse position when you mouseUP.

If(mouseDownPosition > mouseUPposition)

go right

else

go left

You can look up the API library on mouse positioning in AS3  (mouseX, mouseY)

http://www.adobe.com/livedocs/flash/9.0/ActionScriptLangRefV3/

Hope this helps~

[Guest]

Thank you both... I think I'm nearly there and have cleaned up my original code. I'm trying the click and drag method.

Here's some of my updated code... but I don't understand how to refer back to the recorded positions in order to direct the frame progression. I'm guessing that the bit in bold is where the code is wrong:

stage_btn.addEventListener(MouseEvent.CLICK, traceCoordinates);

function traceCoordinates(event:MouseEvent):void {

    trace(stage_btn.mouseX, stage_btn.mouseY);

{

if(event. mouseX > ???) {

nextFrame();

}else{

prevFrame();

}

}

}

[kglad]

with ihelpu's suggestion you're only going to be resizing when the mouse is released which probably not going to give a satisfactory result.  you can use dragging to determine resizing but, you'll still need a loop to repeatedly resize based on mouse position.

[Guest]

Ah, ok - I don't want to resize, only to move forward or back on the timeline. Am I looking at the wrong method?

[kglad]

that should read:

with ihelpu's suggestion you're only going to be changing frames when the mouse is released which probably not going to give a satisfactory result.  you can use dragging to determine frame changes but, you'll still need a loop to repeatedly change frame based on mouse position.

[Guest]

ah...

...well, I can't get it to change frame at all at the mo!

[kglad · Accepted solution]

here's an almost identical thread i've answered:  http://forums.adobe.com/thread/570903?tstart=0

[Guest]

Great, thank you  - that's almost what I need!

That first bit of code makes the sequence run, but it continues through to the end of the timeline on release, which is not quite right for me. I'll have a good look at it though and see if I can adjust so that it stops on release.

Thanks.

[kglad]

you're welcome.  if you have a problem, post the code you're using and the problem.

[Guest]

ok... well here's my new code. It's slightly different than your amended code on the other thread message.

I've changed it so that a Right click+drag advances through the frames, and a Left click+drag returns backwards on the timeline (the other code seemed to do this in reverse?).

Is there a way with AS to move along the timeline after a difference of mouseX + 5 for example? That way I can slow the movement down without having to put keyframes at every 5th frame on the timeline (which is probably a really basic way of slowing down the movement)?

// Code to run through frames on Click + Drag Stage

stage.addEventListener(MouseEvent.MOUSE_DOWN, mDown);

stage.addEventListener(MouseEvent.MOUSE_UP, mUp);

var prevMouseX:int;

function mDown(event:MouseEvent):void {

prevMouseX = stage.mouseX;

    this.addEventListener(Event.ENTER_FRAME,mMove);

}

function mUp(event:MouseEvent):void {

    this.removeEventListener(Event.ENTER_FRAME,mMove);

}

function mMove(event:Event):void {

        var activeMouseX = stage.mouseX;

        if (activeMouseX < prevMouseX){

            if(currentFrame == 1){

                gotoAndStop(totalFrames);

            } else {

                prevFrame()

                prevMouseX = stage.mouseX;

}

        }

        if (activeMouseX > prevMouseX){

            if(currentFrame == totalFrames) {

                gotoAndStop(1);

            } else {

                nextFrame()

                prevMouseX = stage.mouseX;

            }

        }

}

[kglad]

you can but a better way to slow the response to the mouse is to slow the loop speed.  adjust responseRate to suit your needs.  nothing else needs to be edited.

var responseRate:uint = 200;  // the greater this number, the slower the response rate
var timerLoop:Timer=new Timer(responseRate,0);
timerLoop.addEventListener(TimerEvent.TIMER,mMove);

// Code to run through frames on Click + Drag Stage

stage.addEventListener(MouseEvent.MOUSE_DOWN, mDown);

stage.addEventListener(MouseEvent.MOUSE_UP, mUp);

var prevMouseX:int;

function mDown(event:MouseEvent):void {

prevMouseX = stage.mouseX;

mMove(null);

   timerLoop.start();

}

function mUp(event:MouseEvent):void {

  timerLoop.stop();

}

function mMove(event:TimerEvent):void {

        var activeMouseX = stage.mouseX;

        if (activeMouseX < prevMouseX){

            if(currentFrame == 1){

                gotoAndStop(totalFrames);

            } else {

                prevFrame()

                prevMouseX = stage.mouseX;

}

        }

        if (activeMouseX > prevMouseX){

            if(currentFrame == totalFrames) {

                gotoAndStop(1);

            } else {

                nextFrame()

                prevMouseX = stage.mouseX;

            }

        }

}

p.s.  i don't see anything about right-click.

[Guest]

That slows down everything nicely. Thank you.

Only, once the timeline has looped from the last frame back to the beginning, the mouse continues to trigger the event even when the button has been released. And vice versa. The mMove function then remains indefinitely.

Do I need this line of code back somewhere?

    this.removeEventListener(Event.ENTER_FRAME,mMove);

...I wasn't going to use a right-click for anything... should I have one/is there something in my code which hints at that?

[kglad]

that code should only execute once.  use a boolean to prevent it from re-executing:

var executedOnce:Boolean;

if(!executedOnce){

executedOnce=true;

// that code

.

.

.}

[Guest]

Works perfectly – thank you!

[kglad]

you're welcome.