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

[KeelyM]

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?

[KeelyM]

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?

[ClayUUID · Accepted solution]

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.

[TvDirector]

Working on a similar problem - can you say how you got the slideBoxes movieclip to move from the position of the scrollIcon?

[KeelyM]

It's been a while since I was working on this, but what I ended up doing was building the entire thing from scratch in Dreamweaver (with a LOT of help from forum users).

Building custom scrolling ended up being too advanced for my skills, so I used a JS library called Malihu Custom Scrollbar It has a lot of configuration options to easily customize your scrollbar and it works really well. I really liked the option it has to set focus on the current item, so when people go through the TOC with a keyboard, the scrollbar will automatically scroll to the item they are on.

I hope that is helpful!