CODEWITHSUNDEEP
actionscript-3animationdrag
Dan Hanly
Dan Hanly

Reputation: 7839

Click and Dragging through frames AS3

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?

Upvotes: 0

Views: 3029

Answers (2)

George Profenza
George Profenza

Reputation: 51847

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

Upvotes: 0

Kodiak
Kodiak

Reputation: 5978

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!

Upvotes: 2

Related Questions