Skip navigation
Currently Being Moderated

Making a scrub control for the animation using AS3

Feb 25, 2013 10:20 AM

Tags: #as3 #action_script_3 #flash_cs6

I'm really new at Flash AS stuff. Right now I'm trying to make a little control bar that has play/pause button and a scrub bar that will move along with the animation. I've created a little scrub bar/control with couple rectangles, but I'm lost on AS3 part.

My scrub bar has some AS3 used to control the boundaries and whatnot. But how do I connect it to the animation?

Could someone help me with the scripting part and where to put it? (scene 1 or go inside the scrub bar?)

Thank you!

  • Currently Being Moderated
    Feb 25, 2013 10:35 AM   in reply to EmKimothy

    Show the code you have so far and explain what the pieces are that relate to it and what it needs to control.

    Mark as:
  • Currently Being Moderated
    Feb 25, 2013 12:08 PM   in reply to EmKimothy

    In your startDragging function you can establish a MOUSE_MOVE event listener and use its event handler function to adjust the animation to the position of the sliderKnob.


    If your animation is frame-based, then you need to use the position of the knob relative to its total moveable distance and adjust the frame of the animation to be the same... that means if the slider is 25% of the way along its path, then the animation should be at the frame that represents 25% of the frames that comprise it... the relationship is along the lines of...


    knob.x / track.width = animation.currentFrame / animation.totalFrames;




    animation.currentFrame = animatio.totalFrames * knob.x / track.width;


    you'll just have to use some rounding to key the results as integer values for the frames.


    In your stopDragging function you remove the MOUSE_MOVE listener.

    Mark as:
  • Currently Being Moderated
    Feb 27, 2013 5:02 PM   in reply to EmKimothy

    Here is the code with the adjustments made to move the animation.  Since you say you understand the math behind the equation, I am leaving that part for you to work out...


    import flash.geom.Rectangle;


    var knobWidth:Number = sliderKnob.width;
    var trackWidth:Number = sliderTrack.width;
    var trackX:Number = sliderTrack.x;         
    var boundWidth = trackWidth - knobWidth;
    var boundsRect:Rectangle = new Rectangle(trackX, 0, boundWidth, 0);


    sliderKnob.addEventListener(MouseEvent.MOUSE_DOWN, startDragging);

    sliderKnob.addEventListener(MouseEvent.MOUSE_UP, stopDragging);

    sliderKnob.addEventListener(MouseEvent.MOUSE_OUT, stopDragging);


    // these are event handler functions...
    // the functions that get executed when an event occurs


    function startDragging(event:MouseEvent) {
       sliderKnob.startDrag(false, boundsRect);
       stage.addEventListener(MouseEvent.MOUSE_MOVE, moveAnimation);


    function stopDragging(event:MouseEvent) {

       stage.removeEventListener(MouseEvent.MOUSE_MOVE, moveAnimation);


    function moveAnimation(evt:MouseEvent):void {
       animation.gotoAndStop( you determine this );

    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points