1 Correct answer
// UPDATE (10/26/2018): improved version that takes into account responsive settings, drag offset and frame to position precision.
The download link is the same.
...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));
this.setPropo
55
Replies
I am using primarily Adobe Captivate and this is where I use a few bits of JS.
However, I want to be able to import some more interesting features as OAM in the Captivate output.
This is where Animate comes into play. I have used Flash many years back and have lets say "decent" understanding of how timeline, objects, symbols etc. work.
I just don't want to ask for too much stuff in the forums. Everyone's time is precious. This is why I appreciate your taking time.
Just to visualize it, here is a slider I am working on. When the user clicks on the button Play the white markers move left or right. This is done with a classic tween.
My ultimate goal is to make it so that the user would be able to drag the white markers left and right and the percentage variable (in white) would change in the dynamic text field.
Where do you suggest I start with? Output should be OAM.
Do I see how it works first in ActionScript 3.0 file?
Thanks
Thank you for that. Would you please give me a hand with the script.
Have a look at the image. I have 5 frames. You can see on the image the coordinates and instance name.
Where do I start?
Thanks again
// UPDATE (10/26/2018): improved version that takes into account responsive settings, drag offset and frame to position precision.
The download link is the same.
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));
this.setProportion = function()
{
var prop = (this.button.x - this.bar.x) / this.bar.nominalBounds.width;
this.txt.x = this.button.x;
this.txt.text = Math.round(prop * 100) + "%";
this.bar.gotoAndStop(Math.floor(this.bar.timeline.duration * prop));
}.bind(this);
this.clamp = function(value, min, max)
{
if (value < min)
return min;
else if (value > max)
return max;
else
return value;
}
setTimeout(this.setProportion, 0);
// UPDATE END
Hi.
This is the simplest slider I can think of. Please notice two things:
- The highlight is a timeline animation so it won't necessarlity match the position of the slider button. But the frames are set proportionally as expected.
- I used setTimeout to call the proportion function in the beginning to make sure the bar timeline will be ready when needed.
Preview:
JavaScript code:
this.button.on("pressmove", function(e)
{
e.target.x = this.clamp(e.stageX, this.bar.x, this.bar.x + this.bar.nominalBounds.width);
this.setProportion();
}.bind(this));
this.setProportion = function()
{
var prop = (this.button.x - this.bar.x) / this.bar.nominalBounds.width;
this.txt.x = this.button.x;
this.txt.text = Math.round(prop * 100) + "%";
this.bar.gotoAndStop(Math.floor(this.bar.timeline.duration * prop));
}.bind(this);
this.clamp = function(value, min, max)
{
if (value < min)
return min;
else if (value > max)
return max;
else
return value;
}
setTimeout(this.setProportion, 0);
FLA download:
animate_cc_html5_simple_slider.zip - Google Drive
I hope it helps.
Regards,
JC
Wow, that is really impressive. Thank you so much.
I will try my best to understand as much as I can but a lot of that is beyond my knowledge.
I can see where you reference the button and the dynamic text, but the rest ... 
Would you have a link to where I can learn a bit more about the expressions you used?
Thank you once again.
Excellent! I'm sure you're gonna understand all of this very fast. 
You can take at look at CreateJS's official docs and especially in this mouse interactions tutorials:
EaselJS Tutorial: Mouse Interaction
And you can also look for general JavaScript tutorials on Lynda.com and YouTube, for example.
AdChoices