Scrollbar

Forum|Forum|3 years ago
January 12, 2023
2 replies
992 views

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.

This topic has been closed for replies.

Dr Abstract

Known Participant

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.

P

peorAuthor

Inspiring

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.