Comments on: Custom scroll box with mouse wheel scroll (AS2)

By: mr meo

mr meo — Wed, 05 Jan 2011 06:30:29 +0000

Thanks for this code, I’m like this scrollbar and used it. Then I try to change the position of scrollface from the top to bottom. The condition is when I click the button, the movieclip like a chart goes down so at the same time the scrollface also start from the bottom and scroll to up. How to change the code. TQ

By: scuty

scuty — Wed, 24 Jun 2009 11:25:44 +0000

I am glad that was helpful.

By: ac1

ac1 — Wed, 24 Jun 2009 02:04:08 +0000

I have to sheepishly admit that I was simply rushing through this and messed up some rather basic math.

Still a great component!

Thank you, again.

By: ac1

ac1 — Wed, 24 Jun 2009 01:57:11 +0000

One other question, when setting up your scrollbar component, do I need to set the component MC dimensions as well as the content MC dimensions? Currently my scrollbar MC is the size I would like, where I would like it but not seeing to the bottom of the nested content MC.

By: scuty

scuty — Mon, 22 Jun 2009 11:54:53 +0000

You are welcome!

To create a custom scroll like the scroll component it’s hard. But as you say, you could just skin the scroll component.

By: ac1

ac1 — Mon, 22 Jun 2009 02:09:35 +0000

resolved it enough now to work with. (now I just need to skin the component).

Here’s what I did (my movieClip in question is 800px wide and I have it centered dynamically on the screen. I wanted the scrollbar aligned screenRight)

var sw:Number = Stage.width;
var swr:Number = sw-800;
var swrr:Number = swr/2;
var nw:Number = swrr+780;

** I set the width of sc1 to ‘nw’.

thanks again for the script(s)!

By: ac1

ac1 — Mon, 22 Jun 2009 01:48:53 +0000

… I would have edited my last comment …

Is there a way to detach the scrollbar in your example so I could give it it’s own _x and _y properties?

Maybe house it in another emptyMovieClip?

By: ac1

ac1 — Mon, 22 Jun 2009 01:40:58 +0000

I’m pretty much in the same boat as vinod, I am working off of the same tut found on Kirupa and would like to allow mouseWheel interactivity.

In other words be able to click and slide the scrollbar or use the mouseWheel– with the scrollbar adjusting as I scroll with the mouseWheel.

I am toying around with your above example and it’s great. Thank you for that.

I am actually trying to go a step further than my issue described above (mouseWheel) by dynamically placing both the scrollbar movieClip and the content movieClip on the stage….

By: scuty

scuty — Thu, 18 Jun 2009 10:58:30 +0000

So all you want is a box and you can scroll the content inside the box.

By: vinod

vinod — Thu, 18 Jun 2009 04:17:20 +0000

scrolling = function () {
	var scrollHeight:Number = scrollTrack._height;
	var contentHeight:Number = contentMain._height;
	var scrollFaceHeight:Number = scrollFace._height;
	var maskHeight:Number = maskedView._height;
	var initPosition:Number = scrollFace._y=scrollTrack._y;
	var initContentPos:Number = contentMain._y;
	var finalContentPos:Number = maskHeight-contentHeight+initContentPos;
	var left:Number = scrollTrack._x;
	var top:Number = scrollTrack._y;
	var right:Number = scrollTrack._x;
	var bottom:Number = scrollTrack._height-scrollFaceHeight+scrollTrack._y;
	var dy:Number = 0;
	var speed:Number = 10;
	var moveVal:Number = (contentHeight-maskHeight)/(scrollHeight-scrollFaceHeight);
 
	scrollFace.onPress = function() {
		var currPos:Number = this._y;
		startDrag(this, false, left, top, right, bottom);
		this.onMouseMove = function() {
			dy = Math.abs(initPosition-this._y);
			contentMain._y = Math.round(dy*-1*moveVal+initContentPos);
		};
	};
	scrollFace.onMouseUp = function() {
		stopDrag();
		delete this.onMouseMove;
	};
	btnUp.onPress = function() {
		this.onEnterFrame = function() {
			if (contentMain._y+speed&lt;maskedView._y) {
				if (scrollFace._yfinalContentPos) {
				if (scrollFace._y&gt;=bottom) {
					scrollFace._y = bottom;
				} else {
					scrollFace._y += speed/moveVal;
				}
				contentMain._y -= speed;
			} else {
				scrollFace._y = bottom;
				contentMain._y = finalContentPos;
				delete this.onEnterFrame;
			}
		};
	};
	btnDown.onRelease = function() {
		delete this.onEnterFrame;
	};
	btnDown.onDragOut = function() {
		delete this.onEnterFrame;
	};
 
	if (contentHeight&lt;maskHeight) {
		scrollFace._visible = false;
		btnUp.enabled = false;
		btnDown.enabled = false;
	} else {
		scrollFace._visible = true;
		btnUp.enabled = true;
		btnDown.enabled = true;
	}
};
scrolling();

Movie clips names: btnUp, scrollFace, scrollTrack, btnDown, contentMain.
contentMain is a movie clip which holds text content and pictures,
scrollFace is hold to drag up and down on scrollTrack.
from kirupa.com
I found this code for scroll content in flash for my presentaions
I want to add scroll content on Mouse wheel can it be possible. if yes what would be the code and where in this script,

I am not a programmer Iam a graphic designer can any folks help me out.