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

How to make a scrollbar?

Contributor ,
Dec 22, 2018 Dec 22, 2018

I want to make a scrollbar in html5 canvas (with Animate CC).  Any suggestions?

See reference image below.  Download source file here.

scrollbar.png

352
Translate
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 ,
Dec 23, 2018 Dec 23, 2018
LATEST

1. you should rounded numbers for your buttons, scroller, mask and content height and y properties.

2. you'll need to hard code the mask height and y (eg, mask_mcH and mask_mcY, resp.).

3. use linear interpolation to determine the content's y when the scroller is dragged:

4. in the loop you start when dragging of the scroller starts, use content.y=m*scroller.y+b;

5. in your button listeners, adjust your content's y property and check if its extremes have been exceeded.

interpolateF(this.upbutton.y+this.upbutton.nominalBounds.height,mask_mcY,this.downbutton.y-this.slider.nominalBounds.height,mask_mcY+mask_mcH);

var m,b;

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

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

b = y1-m*x1;

}

Translate
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