Slider to control timeline

[Bobby Jourdan]

Hi there,

I have checked a few posts about controlling the timeline with a slider but I am afraid they may be a bit too advanced for me.

Would anyone recommend a post or a resource which explains the simplest way to have a slider that controls the timeline.

Just the simplest case.

Thank you in advance

B

[Richard23737656m79x]

Thank you for this very nice slider example! It's works fine, straight out of the box.

I tried dropping it into an application I am building but I'm running into some issues getting the slider library components to get picked ip. I am getting the following error in the console:

Uncaught TypeError: lib.SliderMarker is not a constructor

 Any ideas where I might be going wrong? I appreciate your input. Thanks!

[Richard23737656m79x]

Actually - I figured it out. I was missing the SliderMarker linkage. 

[JoãoCésar]

Hi.

I'm glad you figured it out.

Please let us know if you need anything else.

Regards,

JC

[Richard23737656m79x]

Hey! I'll be honest and say I'm not entirely sure that I understand the need for the linkage name? What is it's purpose?

[JoãoCésar]

You need linkage names to create instances of symbols at runtime.

It's similar to the approach used in AS3 documents. It's possible to access symbols in the Library without linkage names in HTML5 Canvas documents in a more hacky way, but I think there's no need for it.

Another reason for using a linkage name is when the symbol you want to create isn't being used anywhere in the stage but we have to tell Animate that we need to use it at runtime anyway. For example: particles, bullets, and so on.

[Richard23737656m79x]

Interesting. I'm using HTML Canvas / JS and I am trying to get a sense of the best way to refernence you slider from another layer that hosts another JS routine to process the slider data. If it's on the stage, I think I can just write something like: 

let variable_name = this.slider.value;

Is there any reason not to take this approach? I'm assuming it's accesible because it's on the 'stage' (I'm new to Animate but I've been coding for a while.

Thanks!

[kglad]

you can put code in different layers, but it's recommended you name your layers so it's easy to find the relevant code.

also, timing may be an issue, esp if you have code spread across different frames and/or different timelines.

[Richard23737656m79x]

I'm just using a single frame for the moment as I design stuff out. Timing is the issue I am running into. I want to recompute a function every time the slider is moved. Ideally, I'd like to replay my single frame when the slider is moved, if that makes sense? I'm guessing my options are somewhere between using setInterval() and requestAnimationFrame() that I'm reading about?

[kglad]

use the pressmove event for a slider.

[Richard23737656m79x]

Right, but what's the best practice for using a pressmove event to recall a specific function that exists in another layer? Seems to me that I would compare the last slider value against the current and then use requestAnimationFrame() to schedule the callback, yes? 

[kglad]

in the pressmove listener function save a reference to the current value.  check to see if that needs to be updated because the slider position has changed, and if it's changed, call whatever function to do whatever you want done.

layers are irrelevant in this discussion (so far).

[jeezihavenfi]

Any chance you can reupload this file? It'd be amazing. 

[JoãoCésar]

Hi.

I have a couple of sliders in my GitHub repo:

https://github.com/joao-cesar/adobe/tree/master/animate%20cc/html5_canvas/simple_slider

https://github.com/joao-cesar/adobe/tree/master/animate%20cc/html5_canvas/simple_timeline_slider

https://github.com/joao-cesar/adobe/tree/master/animate%20cc/html5_canvas/timeline_slider

https://github.com/joao-cesar/adobe/tree/master/animate%20cc/html5_canvas/frame_slider

https://github.com/joao-cesar/adobe/tree/master/animate%20cc/html5_canvas/labels_slider

https://github.com/joao-cesar/adobe/tree/master/animate%20cc/html5_canvas/timeline_based_volume_slid...

I hope at least one of them can be useful to you.

Regards,

JC

[jeezihavenfi]

Legend. Thanks mate. 

[Jaapnauta]

Thank you. I wonder why there is no scripting reference in Adobe Animate for using javascript in Animate. I know there is a good online documentation on createJS but to use that in Animate is for a designer that now and then likes to ad some code not clear at all. A mousedrag functionality like this slider example shouldn't be that difficult to figure out even in to make it responsive in a hierarchy. Animate is generating javascript but I cant figure out how to deal with that proces within the code-editor of Animate. This code makes it clearer how to use JS in Animate. Thank again!

[berzins]

This slider is built excellent - I have not found anything better. All my compliments.
I duplicated it, cause I needed two sliders in one frame and I got two numbers, generated by sliders (I removed % from text field). Given names are txt1 and txt2 ("txt" in the original script).
I'm stuck to use those numbers now to make some calculations using them. Can anyone give a hint?

[berzins]

OK ... I figured out it by myself, how to link those numbers to make calculations.

What  is still not solved is the Range of the sliders and numbers.
They are now percents. How to make them "from1 to30", for example?

[Jack5E2F]

Any ideas for how I could use this slider to make a more advanced master controller plugin for Animate which can frame pick and refer to instances on the timeline in graphic symbols? Say for example if I wanted to rig up a 360 head turn using drawn keyframes and morphed shapes that the slider could control on an xyz grid which selects the instances and frames within the symbol?

[sssas27209452f1d2]

Maybe you should go to the help of the website to download the as Help manual

[Richard23620971p1yo]

What a useless response.

[kglad]

@Richard23620971p1yo,

try to refrain from responding to trolls. it leads no where beneficial.

do you have a questions about your original or subsequent posts?

[Peter25066516vwuz]

Dear all

Thank you for your time

Is there a way of turning the horizontal slider into a vertical slider? I have checked everywhere  but cant seem to find out how to do it. I loaded down files and try to change the x refences to y in various ways result either the button goes to the top left corner or in other cases it nothing at all. I have been working on this for a little while trying to learn what all the code means but cant figure out how I can acomplish what I need..

Best Regards All

[kglad]

there's not going to be any significant different.  you just associate the slider's vertical position (ie, y property with your movieclip's timeline):

paramA = paramF(slider_y_min,slider_y_max,movieclip_frame_min,movieclip_frame_max);

function paramF(x1,x2,y1,y2){

var m=(y1-y2)/(x1-x2);

var b = y1-m*x1;

return [m,b];

}

}

then to find the desire movieclip frame use

interpolateF(your_movieclip,paramA,y);

function interpolate(mc,a,y){

mc.gotoAndStop(Math.round(a[0]*y+a[1]));

}

[Peter2659561313g1]

Dear kglad

Thank you for your reply, the code i am tring to change is below

this.button.on("mousedown", function(e)

{

     e.target.offsetX = (e.stageX / stage.scaleX) - e.target.x;

}.bind(this));

this.button.on("pressmove", function(e)

{

     e.target.x = this.clamp((e.stageX / stage.scaleX) - e.target.offsetX, this.bar.x, this.bar.x + this.bar.nominalBounds.width);

     this.setProportion();

}.bind(this));

When I change the functions "mouse down" to "y" and "press move" to "y"  when I try to move the button it goes straight to the top left hand corner and stays there, will not move.
I am not sure how I refer to the code you suggested to make the code work for the vertical direction. Sorry still struggling with Javascript in Adobe animate.
Best Regards Peter

[kglad]

you posted to a forum about a slider controlling a movieclip and that's what i answered.  your code looks like code to (possibly) control a slider (not a movieclip).

so, just what are you trying to do?