2

I have a slider that controls a movie clip by dragging it through the frames to animate and this works great when dragging from left to right, But i want the slider to start in the middle and drag through the movie clip from a center point being able to go 350 to the right and 350 to the left.

Is this possible?

Heres my code so far and as you can see it drags 350 to the right through dialSpin_mc.

Is there a way to make the slider start at a certain frame and go backwards and forwards?

  dialSpin_mc.stop();

    slider_mc.knob_mc.buttonMode = true;

    slider_mc.knob_mc.addEventListener(MouseEvent.MOUSE_DOWN, onDragKnob);
    stage.addEventListener(MouseEvent.MOUSE_UP, onReleaseKnob)

    slider_mc.knob_mc.buttonMode = true;

    function onDragKnob(myEvent:Event):void
    {
        slider_mc.knob_mc.startDrag(false, new Rectangle(0,0,350,0));
        slider_mc.knob_mc.addEventListener(Event.ENTER_FRAME, onScrubMovie);
    }

    function onReleaseKnob(myEvent:Event):void
    {
        slider_mc.knob_mc.stopDrag();
slider_mc.knob_mc.removeEventListener(Event.ENTER_FRAME, onScrubMovie);
    }

    function onScrubMovie(myEvent:Event):void {
        var playHead:int=Math.round((slider_mc.knob_mc.x/350*8)+1);
        dialSpin_mc.gotoAndStop(playHead);    
    }  
Danielle
  • 53
  • 7
  • Does dialSpin_mc have 700 frames in total? – Simon McArdle Apr 10 '13 at 15:40
  • No it has 9 - *8)+1); – Danielle Apr 10 '13 at 15:42
  • Ah of course, sorry slow afternoon! The way you've coded it looks fine to me, base the current frame of `dialSpin_mc` on the normalized `x` position of the slider, what exactly is the problem at the moment? (Note: You're currently creating a new `ENTER_FRAME` listener every time you begin dragging but you are not removing any of them, remove the event listener in your `MOUSE_UP` event function). – Simon McArdle Apr 10 '13 at 15:45
  • I want the slider to start in a center postion, so it slides left through frames 4-1 and right through frames 5-9? If that makes sense? – Danielle Apr 10 '13 at 15:48
  • So basically the slider starts its postion at frame 5? – Danielle Apr 10 '13 at 15:49
  • Im not great at the math side of things so cant get my head around this? – Danielle Apr 10 '13 at 15:54
  • I see what you mean, I'm just playing around in Flash now to see what I can come up with. I have an idea that doesn't use `startDrag()` and `stopDrag()` if you'd be interested? – Simon McArdle Apr 10 '13 at 15:56
  • Yes, im a newbie so im limited in my knowledge! – Danielle Apr 10 '13 at 15:57

1 Answers1

1

As discussed in comments this is how you could code the slider functionality without using the startDrag() and stopDrag() functions.

The idea is that when you press the mouse button down over the slider, an ENTER_FRAME listener is created. Every frame the sliders X position will be updated to match the mouseX position, and to make sure it can only travel 175 pixels either way we also check the sliders new position.

After making sure the sliders position is valid, you can use the same code to set the dialSpin_mc frame.

Once the mouse button is released, the enter frame listener is removed.

The sliderOrigin declared at the top of the code will need to be changed to whatever is appropriate for your project (whatever the sliders xposition is when you move it to the middle of the slide area rather than the very left).

var sliderOrigin:int = 150; // The x position the slider is in when in the center of the slide bar
slider_mc.x = sliderOrigin;

slider_mc.addEventListener(MouseEvent.MOUSE_DOWN, mDown);
slider_mc.addEventListener(MouseEvent.MOUSE_UP, mUp);

function mDown(e:MouseEvent):void
{
    addEventListener(Event.ENTER_FRAME, UpdateDrag);
}

function mUp(e:MouseEvent):void
{
    removeEventListener(Event.ENTER_FRAME, UpdateDrag);
}

function UpdateDrag(e:Event):void
{
    slider_mc.x = mouseX;

    // Check if the slider is 'out of bounds' and change its position if it is
    if(slider_mc.x < sliderOrigin - 175)
        slider_mc.x = sliderOrigin - 175;
    else if(slider_mc.x > sliderOrigin + 175)
        slider_mc.x = sliderOrigin + 175

    var playHead:int = Math.round((slider_mc.x/350*8)+1);
    dialSpin_mc.gotoAndStop(playHead);
}

Depending on the start position of the slider the range of playHead will change (so if the slider starts at x pos 200 the range would be between 2 and 10, at x pos 400 the range is between 6 and 14 - simple fix by changing the offset from +1 to whatever is necassary).

Simon McArdle
  • 893
  • 6
  • 21
  • The slider sits central now and slides left and right but it does not control the movieclip? – Danielle Apr 10 '13 at 16:18
  • add a trace under the `dialSpin_mc.gotoAndStop(..)` line (`trace(playHead)`) and watch the output to see what you're trying to set the dials frame to. It might be trying to set it to frames 10-18 (which it doesnt have, so it won't do anything). – Simon McArdle Apr 10 '13 at 16:20
  • It repeats the number 1? when i changed it to +2 it moved one frame..im slightly confused? lol – Danielle Apr 10 '13 at 16:33
  • Ah I've not copied your movie clip structure properly, have updated my answer, change `playHead:int =` to `Math.round((slider_mc.x/350*8)+1)`. – Simon McArdle Apr 10 '13 at 16:37
  • The problem there is you were dragging `knob_mc` and using it's x position relative to `slider_mc`, in the example above we are moving `slider_mc` and must use it's x position rather than `knob_mc`'s. – Simon McArdle Apr 10 '13 at 16:39
  • Ok still being slightly thick here so say if my slidersOrigin is -130, I change the slider origin and what else? – Danielle Apr 11 '13 at 08:29
  • Only `sliderOrigin` should ever need changing, as long as the range you want it to slide along is 350 in total (175 each way) the rest of the code should always stay the same. What happens when you set the origin to -130? – Simon McArdle Apr 11 '13 at 09:22
  • It didnt play movie clip but when I added Math.round(slider_mc.x/350*8)+8) it works...? Have no idea why? but its works! – Danielle Apr 11 '13 at 12:23