6 Replies Latest reply: Mar 3, 2013 9:16 PM by EmKimothy RSS

    Making a scrub control for the animation using AS3

    EmKimothy Community Member

      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!

        • 1. Re: Making a scrub control for the animation using AS3
          Ned Murphy MVP

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

          • 2. Re: Making a scrub control for the animation using AS3
            EmKimothy Community Member

            This is the code I used for the scrub bar, and it's inside the scrub bar symbol. The instance names I've used are sliderKnob (the rectangle you'd click to drag) and sliderTrack (the actual bar that the knob is on).

             

            import flash.geom.Rectangle;

            import flash.events.MouseEvent;

             

             

            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);

             

            //enable drag

            sliderKnob.addEventListener(MouseEvent.MOUSE_DOWN, startDragging);

            function startDragging(event:MouseEvent) {

                      sliderKnob.startDrag(false, boundsRect);

            }

             

            //stop drag

            sliderKnob.addEventListener(MouseEvent.MOUSE_UP, stopDragging);

            sliderKnob.addEventListener(MouseEvent.MOUSE_OUT, stopDragging);

            function stopDragging(event:MouseEvent) {

                      sliderKnob.stopDrag();

            }

             

             

             

             

            I want the user to be able to scrub through the animation using the scrub bar, not just play/pause.

            Thank you!

            • 3. Re: Making a scrub control for the animation using AS3
              Ned Murphy MVP

              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;

               

              or....

               

              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.

              • 4. Re: Making a scrub control for the animation using AS3
                EmKimothy Community Member

                Ned Murphy,

                I really appreciate your explanations, how quick you replied, and even writing out the equations I could use. But I really don't know much about coding and it'd really help me understand best if you could write the code so I can see how you changed it. I know this sounds so lame, but right now I don't even know the already-made variables within AS3 or how to properly declare new variables. (like "knob.x", "animation.currentFrame") I don't understand where to "establish a MOUSE_MOVE event listener" and I don't know what an event handler function is. I understand the math behind the equation, though. And my animation is frame-based. Could you still help me?

                • 5. Re: Making a scrub control for the animation using AS3
                  Ned Murphy MVP

                  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;
                  import flash.events.MouseEvent;

                   

                  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) {
                     sliderKnob.stopDrag();

                     stage.removeEventListener(MouseEvent.MOUSE_MOVE, moveAnimation);
                  }

                   

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

                  • 6. Re: Making a scrub control for the animation using AS3
                    EmKimothy Community Member

                    Ned Murphy, for some reason when I added "move animation" functions, it messed up the play/pause buttons I had made. Do you know why?

                    And do I put this code in the main scene's AS3 or inside (i.e. double click the scrub bar I made) the scrub bar's AS3?