• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Can anyone point me in the direction of a tutorial on creating a user controlled playhead slider in an HTML5 canvas document?

Community Beginner ,
Feb 04, 2018 Feb 04, 2018

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 

Views

806

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Community Expert , Feb 06, 2018 Feb 06, 2018

If it's not too late and if you don't mind, I'd like to leave a suggestion.

Preview:

animate_cc_html5_frame_slider.gif

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

...

Votes

Translate

Translate
Community Expert ,
Feb 04, 2018 Feb 04, 2018

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Feb 06, 2018 Feb 06, 2018

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. 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 06, 2018 Feb 06, 2018

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Feb 06, 2018 Feb 06, 2018

Copy link to clipboard

Copied

ok and thanks again!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 06, 2018 Feb 06, 2018

Copy link to clipboard

Copied

you're welcome.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 06, 2018 Feb 06, 2018

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:

animate_cc_html5_frame_slider.gif

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Feb 06, 2018 Feb 06, 2018

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!!!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 06, 2018 Feb 06, 2018

Copy link to clipboard

Copied

Excellent!

You're welcome!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Feb 06, 2018 Feb 06, 2018

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​

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Feb 06, 2018 Feb 06, 2018

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!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 06, 2018 Feb 06, 2018

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Feb 06, 2018 Feb 06, 2018

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!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Feb 06, 2018 Feb 06, 2018

Copy link to clipboard

Copied

thank you!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Feb 06, 2018 Feb 06, 2018

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://

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 06, 2018 Feb 06, 2018

Copy link to clipboard

Copied

LATEST

Thank you!

Please keep it up!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines