How to scrub through Frames with decelerating "gotoAndStop" function?

[SilencedAnger]

Hello everyone!

I'm currently trying to achieve a MovieClip in which I can scrub through the frames by clicking and then dragging the mouse to the right or to the left and it actually works pretty fine as you can see in this simplified version.

Though I'm not completely satisfied with the result, as my "animation" ends very abruptly. I actually want it to be more smooth like in this linked example. Here you can see that if you click and drag the mouse for example to the right really fast and then stop, the animation slowly decelerates before it comes to a complete stop.

Here's the Actionscript 3.0 code I've used in my example which is linked above:

import flash.events.MouseEvent;

mc.stop();

var xStart:Number;

var xDistance:Number;

var frameStart:Number;

var currentTravelDistance:Number;

stage.addEventListener(MouseEvent.MOUSE_DOWN, onMousePress);

stage.addEventListener(MouseEvent.MOUSE_UP, onMouseRelease);

function onMousePress(e:MouseEvent):void

{

xStart = stage.mouseX;

trace("xStart: " + xStart);

frameStart = mc.currentFrame;

stage.addEventListener(MouseEvent.MOUSE_MOVE, moveHandler);

}

function moveHandler(e:MouseEvent😞void

{

xDistance = Math.round((stage.mouseX - xStart) / 20);

trace("xDistance: " + xDistance);

currentTravelDistance = frameStart + xDistance;

trace("currentTravelDistance: " + currentTravelDistance);

if (currentTravelDistance > mc.totalFrames)

{

mc.gotoAndStop(currentTravelDistance % mc.totalFrames)

}

else if (currentTravelDistance < 1)

{

mc.gotoAndStop(mc.totalFrames + (currentTravelDistance % mc.totalFrames));

}

else

{

mc.gotoAndStop(currentTravelDistance);

}

stage.addEventListener(Event.ENTER_FRAME, EnterFrame);

}

function EnterFrame(e:Event😞void

{

//Don't know exactly what I should put here...

}

function onMouseRelease(e:MouseEvent😞void

{

stage.removeEventListener(MouseEvent.MOUSE_MOVE, moveHandler);

}

I've added trace-functions to get some information to the Output and as you can see in the file, "currentTravelDistance" is normally equivalent to the frame that is currently displayed. I think that I have to use the "ENTER_FRAME" Event with a value (e.g. ValueX) in it, that somewhat increases until it reaches the "currentTravelDistance".

And then I probably have to do something like this:

if (ValueX >= currentTravelDistance)

{

mc.gotoAndStop(currentTravelDistance);

}

I could be absolutely wrong though and there could be a completely different way to achieve this effect because I can't get it to work properly.

Hopefully you understand my problem, I really appreciate your time and thank you very much already

[JoãoCésar · Accepted solution]

Hi.

Here is a solution.

It's not so different from scrolling a container or moving a game sprite. We have to get the clicked position and calculate the number of pixels the mouse moved in each frame. Then we multiply it by a friction value. The difference here is that we have to take into consideration that we are changing frames and that frames are integers and that they have a min and a max value.

import flash.events.MouseEvent;
import flash.events.Event;
function setMC():void
{
    mc.stop();
    mc.mouseChildren = false;
    mc.mouseSpeedX = 0;
    mc.mouseFrictionX = 0.85;
    mc.frameAttenuation = 0.5;
    mc.mouseClickedX = 0;
    mc.mouseDraggingX = false;
    mc.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
}
function mouseDownHandler(e:MouseEvent):void
{
    mc.mouseClickedX = mouseX;
    mc.mouseDraggingX = true;
}
function mouseUpHandler(e:MouseEvent):void
{
    mc.mouseDraggingX = false;
}
function enterFrameHandler(e:Event):void
{
    var frame:int;
    if (mc.mouseDraggingX)
        mc.mouseSpeedX = (stage.mouseX - mc.mouseClickedX) * mc.frameAttenuation;
    mc.mouseSpeedX *= mc.mouseFrictionX;
    frame = mc.currentFrame + int(mc.mouseSpeedX);
    if (frame > mc.totalFrames)
        frame -= mc.totalFrames;
    else if (frame < 1)
        frame += mc.totalFrames;    
    mc.gotoAndStop(frame);    
    mc.mouseClickedX = stage.mouseX;
}
setMC();
stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
stage.addEventListener(Event.ENTER_FRAME, enterFrameHandler);

You can download the files here: frame_drag.

Preview:

I hope it helps.

Regards,

JC

[SilencedAnger]

That's exactly what I was looking for! Thank you so so much

[JoãoCésar]

Super!

You're welcome!