Click and Dragging through frames AS3 - actionscript-3

Question

I have a frame-by-frame animation. I want to be able to click and drag on the stage back and forth and traverse through the animation. I.e. I want to click and drag from left to right to make the animation go forwards and right to left to make the animation go backwards.
How would I achieve this?
I am making an assumption that there will be some maths involved in calculating mouse position and traversing to the correct frame, but how would I do this?

Answer 1

Here you are (edited version)
import flash.events.MouseEvent;
import flash.display.MovieClip;
import flash.display.Sprite;
var clickedMouseX:int;
var clickedFrame:uint;
var backgroundClip:Sprite = getChildByName("background") as Sprite;
var clip:MovieClip = getChildByName("animation") as MovieClip;
clip.stop();
clip.mouseEnabled = false;
backgroundClip.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);
backgroundClip.addEventListener(MouseEvent.MOUSE_UP, onMouseUp);
function onMouseDown(event:MouseEvent):void
{
backgroundClip.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);
clickedMouseX = backgroundClip.mouseX;
clickedFrame = clip.currentFrame;
}
function onMouseUp(event:MouseEvent):void
{
backgroundClip.removeEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);
}
function onMouseMove(event:MouseEvent):void
{
var delta:int = backgroundClip.mouseX - clickedMouseX;
var wantedFrame:uint = (clickedFrame + delta * clip.totalFrames / backgroundClip.width) % clip.totalFrames;
while (wantedFrame < 1)
{
wantedFrame += clip.totalFrames;
}
clip.gotoAndStop(wantedFrame);
}
Cheers!

Answer 2

It should be a matter of mapping the length of your drag area to the length of the timeline:
stage.addEventListener(MouseEvent.MOUSE_MOVE, updateAnimation);
function updateAnimation(event:MouseEvent):void {
animation.gotoAndStop(Math.floor(mouseX/stage.stageWidth * animation.totalFrames));
}
Here's a commented version:
stage.addEventListener(MouseEvent.MOUSE_MOVE, updateAnimation);
function updateAnimation(event:MouseEvent):void {
//take the ratio between the mouse position and stage width -> //a number from 0.0 to 1.0
var mouseRatio:Number = mouseX/stage.stageWidth;
//'scale'/multiply that number to fit the animation frames -> from a maximum of 1.0 to animation's total frames
//also, we 'round down' because we need an integer for the frame number, not a fractional number
var frame:int = Math.floor(mouseRatio * animation.totalFrames);
animation.gotoAndStop(frame);
}
Also, not that MOUSE_MOVE gets triggered several frames per second. You could update on ENTER_FRAME and since you mentioned dragging, you could also have a variable to keep track if the mouse is pressed or released:
var mousePressed:Boolean;
stage.addEventListener(MouseEvent.MOUSE_DOWN, togglePressed);
stage.addEventListener(MouseEvent.MOUSE_UP, togglePressed);
stage.addEventListener(Event.ENTER_FRAME, update);
function togglePressed(event:MouseEvent):void {
mousePressed = event.type == MouseEvent.MOUSE_DOWN;
}
function update(event:Event):void {
if(mousePressed) animation.gotoAndStop(Math.floor(mouseX/stage.stageWidth * animation.totalFrames));
}
HTH