Copy link to clipboard
Copied
I am creating a linear animation that I would like the user to be able to control with a slider (i.e. a control that allows them to advance (or rewind) frames by sliding a symbol back and forth along a horizontal line). Thank you
If it's not too late and if you don't mind, I'd like to leave a suggestion.
Preview:
FLA download:
animate_cc_html5_frame_slider.zip - Google Drive
Code:
...var that = this;
this.button = this.slider.button;
this.bar = this.slider.bar;
this.buttonWidth = this.button.nominalBounds.width;
this.barWidth = this.bar.nominalBounds.width;
this.speedX = 0;
this.friction = 0.95;
this.isDragging = false;
this.bar.on("mousedown", function(evt)
{
that.anim.stop();
that.clickedX = stage.mouseX - that.slider.x;
th
Copy link to clipboard
Copied
google an as3 one. the code will be almost the same except for obvious (if you understand basic createjs/javascript) changes.
Copy link to clipboard
Copied
Thanks kglad. You've helped me before I think. But my understanding of createjs/javascript is zero so I'm looking for basically step by step details.
Copy link to clipboard
Copied
google that. it's your best chance to get the code without paying anyone.
you can get help here for free but doing all your work for you is more than i do for free. if you want to hire me, send me a private email.
you can also wait. someone else me see this and do this for you.
Copy link to clipboard
Copied
ok and thanks again!
Copy link to clipboard
Copied
you're welcome.
Copy link to clipboard
Copied
If it's not too late and if you don't mind, I'd like to leave a suggestion.
Preview:
FLA download:
animate_cc_html5_frame_slider.zip - Google Drive
Code:
var that = this;
this.button = this.slider.button;
this.bar = this.slider.bar;
this.buttonWidth = this.button.nominalBounds.width;
this.barWidth = this.bar.nominalBounds.width;
this.speedX = 0;
this.friction = 0.95;
this.isDragging = false;
this.bar.on("mousedown", function(evt)
{
that.anim.stop();
that.clickedX = stage.mouseX - that.slider.x;
that.button.x = that.clickedX;
that.isDragging = true;
});
stage.on("stagemouseup", function(e)
{
that.isDragging = false;
that.anim.play();
});
createjs.Ticker.on("tick", function(e)
{
if (that.isDragging)
{
that.speedX = (stage.mouseX - that.slider.x) - that.clickedX;
that.dragSlide();
}
else
that.autoSlide();
that.speedX *= that.friction;
that.button.x += that.speedX;
that.button.x = that.clamp(that.button.x, that.bar.x + that.buttonWidth * 0.5, that.barWidth - that.buttonWidth * 0.5);
that.clickedX = stage.mouseX - that.slider.x;
});
this.dragSlide = function()
{
that.anim.gotoAndStop(Math.floor(that.anim.timeline.duration * that.button.x / that.barWidth));
};
this.autoSlide = function()
{
that.button.x = (that.barWidth * that.anim.timeline.position) / that.anim.timeline.duration;
};
this.clamp = function(value, min, max)
{
if (value < min)
return min;
else if (value > max)
return max;
else
return value;
};
I hope it helps.
Regards,
JC
Copy link to clipboard
Copied
Hey man thanks - this sample is exactly what I'm looking for! I'm going to take a look at the file and the code, but with my limited skill set it's going to take me a bit to digest. I really appreciate it. Going to mark this as correct based on the sample and assuming the code is correct. Thank you!!!
Copy link to clipboard
Copied
Excellent!
You're welcome!
Copy link to clipboard
Copied
some months ago i had the same need!
so i created one slider >> please visit:
http://www.fotobetyar.hu/fejlesztesek-2017-proba/ http://www.fotobetyar.hu/fejlesztesek-2017-proba/?et_fb=1
here you can see a vertical slider!
i can send fla any time if any one wish
Advantages:
it is simple and you can move the slider in the canvas (in the fla file) and dont have to recalibrate the numbers/positions
Disadvantages:
didnt work on android (iphone?!)
if you go to full screen, and the canvas is responsive >> the slider size changes and start to behave weird!
I have to test JoĆ£oCĆ©sar solution (thanks btw)
keep goin! JoaoCesarā
Copy link to clipboard
Copied
okay i tested Joao sample fla
i have some problems >> if i dont put "this.stop();" script on every frame of the animation >> after i drag the slider it wont stop after i let go the mouse button... it plays.
i did not test on android yet
but this version have the same problem as mine: if you go to full screen it going nuts!
hold on i upload my version, it is more simple, more easy to re use!
Copy link to clipboard
Copied
Hi, photogyulai!
You got some pretty cool graphics in your app. Congrats!
The code is intentionally set to play when the mouse is up. The idea is to get the slider behaving like a video player would.
And, yeah, this is just a simple demonstration to give the OP some direction. I didn't consider responsive scaling and anything else more advanced.
Copy link to clipboard
Copied
hey thanks!
i guess the effort is the point š
I will try to develop a slider witch is free from disadvantages mentioned above!
Copy link to clipboard
Copied
thank you!
Copy link to clipboard
Copied
Okay here is my slider version... it is just a few line... a commented the script to help re use
https://drive.google.com/file/d/1U5VJaSvZvM6L_U6xdeudMYCHffCMCd2M/view?usp=sharinghttp://
Copy link to clipboard
Copied
Thank you!
Please keep it up!