Skip to main content
Inspiring
September 7, 2018
Answered

How to move Y value of one movieclip based off of Y value of other? (Scrollbar)

  • September 7, 2018
  • 1 reply
  • 858 views

Hey there, I'm working in Animate CC HTML5 canvas and trying to build a custom table of contents to be exported and used in an Adobe Captivate file.

I've got the base of my TOC built out - but there will be more slides to navigate to than can fit within the screen, so I'm trying to build a custom scrollbar to move my movieclip with the slide tabs up and down. This is how it looks so far -

I've successfully masked out my slide tabs movieclip (named slideBoxes) using AlphaMaskFilter. So that all the overflowing slide tabs don't show up.

var box = new createjs.Shape();

box.graphics.beginFill("#000000")

box.graphics.drawRect(0, 0, 320, 1080);

box.cache(0, 0, 320, 855);

//stage.addChild(box);

slideBoxes.filters = [

new createjs.AlphaMaskFilter(box.cacheCanvas)

];

slideBoxes.cache(0,0,300, 1080);

So when it's published it looks more like this:

And I've got my scroll icon (a movieclip named scrollIcon) to move up and down within an invisible bounding box:

var scrollIconHeight = 31;

var bounds = {x:273, y:17, width: 38, height: 851};

var sliderBoundary = new createjs.Shape();

sliderBoundary.graphics.beginStroke("#999")

.setStrokeStyle(2)

.drawRect(bounds.x, bounds.y, bounds.width, bounds.height);

this.stage.addChild(sliderBoundary);

function moveScroll(evt){

var p = this.globalToLocal(evt.stageX, evt.stageY);

evt.currentTarget.y = Math.max(bounds.y + scrollIconHeight, Math.min(bounds.y + bounds.height - scrollIconHeight, p.y));

}

Now I'm stuck trying to figure out how to "scroll" my slideBoxes movieclip while the scroll icon is being "scrolled" down. And how to make sure it doesn't go past it's height in either direction. I tried adding this line into my moveScroll function:

slideBoxes.position = (slideBoxes.offsetTop - evt.stageY);

but it's doing nothing. I'm still very fresh with javascript and not good at all with maths or equations.

Any help would be much appreciated! I'm finding a lot of stuff online for creating scrollbars with different js libraries, but I'm not sure if it'd be worth loading in an external library, when I can probably do it with just vanilla javascript?

This topic has been closed for replies.
Correct answer ClayUUID

CreateJS filters don't automatically update, because calculating them is extremely resource-intensive (filters are not natively supported by the browser). You should be using a plain old mask layer for your masking.

1 reply

KeelyMAuthor
Inspiring
September 7, 2018

Running into a new issue - have got the slideBoxes movieclip moving now (not the way I want it to, but moving nonetheless), but noticing that the AlphaMaskFilter is moving along with. I'd like the mask filter to stay in the same place, while the movieclip moves independtly, only showing what the mask is revealing. Any ideas on this issue?

ClayUUIDCorrect answer
Legend
September 7, 2018

CreateJS filters don't automatically update, because calculating them is extremely resource-intensive (filters are not natively supported by the browser). You should be using a plain old mask layer for your masking.