Skip to main content
This topic has been closed for replies.

2 replies

Dr Abstract
Known Participant
January 12, 2023

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.

 

peorAuthor
Inspiring
January 13, 2023

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.

Community Expert
January 13, 2023

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-content-in-html5

kglad
Community Expert
Community Expert
January 12, 2023

did you follow the comments?  they look pretty complete.

peorAuthor
Inspiring
January 12, 2023

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