• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Scrollbar

Participant ,
Jan 12, 2023 Jan 12, 2023

Copy link to clipboard

Copied

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.

TOPICS
How to , Performance

Views

383

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jan 12, 2023 Jan 12, 2023

Copy link to clipboard

Copied

did you follow the comments?  they look pretty complete.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Jan 12, 2023 Jan 12, 2023

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jan 12, 2023 Jan 12, 2023

Copy link to clipboard

Copied

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.

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Jan 13, 2023 Jan 13, 2023

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jan 13, 2023 Jan 13, 2023

Copy link to clipboard

Copied

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...

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jan 13, 2023 Jan 13, 2023

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jan 13, 2023 Jan 13, 2023

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jan 13, 2023 Jan 13, 2023

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jan 13, 2023 Jan 13, 2023

Copy link to clipboard

Copied

This is great stuff. Great work!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Jan 15, 2023 Jan 15, 2023

Copy link to clipboard

Copied

LATEST

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines