Draggable slider that controls timeline position

[The Artworker]

I have a project that I original created in Flash CS5 (ActionScript2) to update and I'm completely stuck.

It shows a graph with a curved path and a slider that travels along this path which is linked to other events happening along the timeline.

In the original version this was non-interactive and as the movie played the slider simply moved along its curved path backwards and forwards, and other elements animated in sequence with it.

Now this needs to be revamped in HTML5 Canvas, and not only that but the client wants the animation to be interactive, so that as the user drags the slider the other move to their relevant positions in the timeline in synchronisation with the position of the slider. I hope that makes sense. The position of the slider links to the position of the playback head in the movie clip.

I hoped, since I already had the basic animations all linked together on the timeline, that I could have some way by which the position of the slider corresponds to the position of the movie timeline, so that when the slider is fully left the timeline is at frame 1 and fully right it is at the last frame. Also as the user drags the slider the other elements move in real time as the slider moves from frame to frame.

I had a look at the example in this discussion: Slider to control timelinebut there's no timeline in the movie clip and the slider is constrained to horizontal movement only, whereas mine needs to travel along a curved path.

What I was thinking was to have an invisible button over the top of my slider that can move along both the X and Y but only the X position is tracked and when it is released it automatically jumps to the correct X Y position of the visible slider, but I can see how to bind any of this to the timeline position within the movie clip. Is that the correct way to go or is there a simpler or more elegant solution? If so some pointers please.

Please bear in mind that last time I did anything serious like this I was using ActionScript2 in Flash CS5, so not only am I very rusty when it come to writing script, but now I need to use JavaScript for which I have very limited experience.

All help greatly appreciated.

[JoãoCésar]

Hi.

The correct answer in the thread you mentioned is about controlling a Movie Clip timeline.

Would you mind taking a second look?

Regards,

JC

[The Artworker]

Thank you JC.

I didn't spot that the bar itself was a movie with a timeline.

However I'm sure I'll be back with more questions when I can't make my movie work properly.

[The Artworker]

And here I am with questions. I have several but I think it's best to try and fix the problems one at a time.

I've used the code from the example and even used the same instance names and your slider and percentage text which is helping me see what is happening.

The first problem is the fact that if I drag beyond the right hand side of the movie clip it will go back to frame one. The slider that I am dragging stays where it is as it can't move beyond 100% but the elements inside the movie clip that is being controlled all go back to the first frame. If I drag back to the left, when the mouse pointer re-enters the right hand side of the movie clip the contents jump back to the last frame and I can drag back through the movie. This problem doesn't happen if I drag past the left hand bound of the movie clip.

Any ideas why this is happening?

[JoãoCésar · Accepted solution]

Yeah.

By that time, as the goal was to make the simplest slider possible, I didn't take responsive settings, drag offset, and other things into account.

Anyway, I've just updated the link.

Please see if it works now.

Regards,

JC

[The Artworker]

Many thanks for this improved version. I managed to get mine to work by changing:

(this.button.x - this.bar.x) to (this.button.x - this.bar.x - 1)

but I suspect this only works because the movie clip is so wide (1625 pixels) that removing 1 pixel from the calculation I could keep everything contained without it looking wrong.

Is there any way to get the slider to move freely along both the X and Y axis while only tracking the x position?

Thanks!