Scrollbar

[peor]

Can someone here help me make a slider in Animate with from this code https://zimjs.com/bits/scrollbar.html and take SECOND EXAMPLE.. I don't know how I shall to do it.

[kglad]

did you follow the comments?  they look pretty complete.

[peor]

I don't know how to implicate the code with movieclip or graphics in Animate CC. I need to use mask can you give me a .fla file so I can do it

[Dr Abstract]

That example was how to use a Slider to make something move in a masked "window".  ZIM now actually has a Window().   So this is the code you can use:

this.stop(); // otherwise, Animate puts MovieClip back on timeline

// my MovieClip is on the stage called circle as an instance name
// I moved the transformation point to the top left
// use the transform tool (Q)and move that little circle to top left
const circle = zimify(this.circle);

// by default, you drag the objects in the window to scroll it
// and the scrollbars are just indicators like on mobile
// but you can set the scrollbars to drag too
STYLE = {scrollBarDrag:true};

// choose a dimension and add the circle as content
new Window(300,300,circle).center(); // or loc(x, y) the window

Let me know if you have any issues - just having a big party this afternoon but if you need me to prepare an FLA or a video about it, I can.  Also, Tutorial 02 of this playlist explains a bit more too! https://www.youtube.com/playlist?list=PLCIzupgRt1pZnv-n6iYaucIjLpLYOue36.

[peor]

Thank you for replying. But how do I use Movieclip or Graphics on stage in Animate CC these codes 

viewerW = 300;
	viewerH = 300;
	scrollW = 25;

	const mask2 = new Rectangle(viewerW,viewerH)
		.addTo()
		.pos(600, 200);

	pageH = viewerH*4; // make a longer page this time
	const page2 = new Container()
		.addTo()
		.pos(mask2.x, mask2.y);
	const back2 = new Rectangle(viewerW, pageH, lighter)
		.addTo(page2);
	const s = back2.height/(4);
	let c;
	for (let i=0; i<4; i++) {
		c = F.makeCircles(viewerW/2*.8)
			.loc(viewerW/2, s/2 + s*i, page2);
	}
	page2.setMask(mask2);

	// width, height, label, color, rollColor, borderColor, borderWidth, corner, shadowColor, shadowBlur, hitPadding
	const button2 = new Button({
		width:scrollW,
		height:viewerH/pageH*viewerH, // note the proportion of viewable height / total height (then * viewable height)
		label:"",
		backgroundColor:silver,
		rollBackgroundColor:tin,
		corner:scrollW*.5
	}).expand(); // helps on mobile

	// min, max, step, button, barLength, barWidth, barColor, vertical, useTicks, inside
	const scrollbar2 = new Slider({
		min:0,
		max:pageH-viewerH,
		step:0,
		button:button2,
		barLength:viewerH,
		barWidth:scrollW,
		barColor:light,
		vertical:true,
		inside:true,
		currentValue:pageH-viewerH
	})
		.addTo()
		.pos(page2.x + viewerW, page2.y);

	let desiredY = page2.y;
	const damp = new Damp(desiredY, .1);

	scrollbar2.on("change", doScroll2);
	function doScroll2() {
		desiredY = mask2.y + scrollbar2.currentValue - scrollbar2.max;
	};

	Ticker.add(function() {
		page2.y = damp.convert(desiredY);
	});

with instance name on object on stage in action. I'm not so good in programming. So can you show me how I do that.

[Nicktendo28]

I am no expert when it comes to code but you can try this. It explains it well. 

https://stackoverflow.com/questions/15198139/vertical-scroll-bar-for-canvas-with-dynamic-added-conte...

[Dr Abstract]

We have made a video for you https://youtu.be/dpOOKe5GIck that shows how to add a MovieClip to a window with damping like that example.  Here is a ZIM example - https://zimjs.com/explore/windowdamp.html you can see that it is the SAME as the ZIM Bits example you asked about (which I created years ago) but we have since simplified the process, so that is why I gave you the previous code.  The video shows you:

1. how to give the MovieClip an instance name so it can be used in the code. 
2. how to get the ZIM Shim and use that as the template
3. how to add the code below so you can use the ZIM Window in Adobe Animate

this.stop(); // otherwise, Animate puts MovieClip back on timeline

// my MovieClip is on the stage called circle as an instance name
// I moved the transformation point to the top left 
// use the transform tool (Q)and move that little circle to top left 
const circles = zimify(this.circles); 

// choose a dimension and add the circle as content
// by default, you drag the objects in the window to scroll it 
// and the scrollbars are just indicators like on mobile
// but you can set the scrollbars to drag too
const w = new Window({
	width:300,
	height:300,
	// backgroundColor:yellow,
	content:circles,
	scrollBarDrag:true,
	damp:.1,
	paddingV:10
}).center(); // or loc(x, y) the window

// optionally customize the scrollbar and update the window
w.scrollBar.size = 10;
w.update();

There are many more tutorials here https://zimjs.com/animate

Hope this helps!  Cheers.

[Dr Abstract]

Sorry - typo above - the movieClip is on the stage with an instance name of circles (plural - initially, I just had once circle but added a few more for the example) so now it is circles.

[Dr Abstract]

Oh - and please grab the latest ZIM Shim ZIP as we have updated it to ZIM ZIM 02.  Cheers.

[Nicktendo28]

This is great stuff. Great work!

[peor]

Thank you for replying. Give me tips how to do it. Again, thank you so much.