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!
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!
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.
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?
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 );
}
North America
Europe, Middle East and Africa
Asia Pacific