Custom scroll box with mouse wheel scroll (AS2)

Sunday, 30 March 2008

Recently I was working in a project where I needed a scroll box with dynamic content and the ability to attach movies, to create empty movie clips, load external .swf files, to play movies etc. I looked around some time in order to find a shell that is easy to insert into my project. I could not find something like this and I start developing one from scratch.

This is a “component” – class that is able to load anything inside and use scroll bar or mouse wheel to scroll the content.

Here is the live example and the source files.

Tags: flash 8 scroll box, flash AS2 scroll box, flash scroll, mouse scroll, scroll box, scroll mouse wheel

The entry 'Custom scroll box with mouse wheel scroll (AS2)' was posted on March 30th, 2008 at 8:29 am and last modified on October 17th, 2008 at 9:34 am, and is filed under Flash AS. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

19 Responses to “Custom scroll box with mouse wheel scroll (AS2)”

deeplay writes:
No. 1 — October 29th, 2008 at 4:50 pm
Hi. Your Scroll box is very useful fo me.
But i have some problems (sorry for my english):
You are attach movieclip from library. Can i attach movieclip form same instance where there is a scrollbar (situates)? If yes, how i can do it?
Thanks for answer.
scuty writes:
No. 2 — October 29th, 2008 at 7:11 pm
So you are trying to attach a movie clip that is in the library but this movie clip has a Scroll class inside. And you want to run this class when the movie clip is attached to some other Scroll class.

Is that correct?
deeplay writes:
No. 3 — October 29th, 2008 at 7:57 pm
Thx for answer, scuty.
No, it’s not correct i think.
I have some movieclip. Content of this movieclip is a dynamic, it’s a site’s content, this movieclip have a html textfield, some symbols &etc. To the html textfield i can load some text from the external php-file &etc.
So i want to attach this clip to your scroll. But how?
deeplay writes:
No. 4 — October 29th, 2008 at 8:03 pm
sorry for my problematic explains again
if you can’t understand me, i can upload some sample (fla) for you.
scuty writes:
No. 5 — October 29th, 2008 at 8:11 pm
Sure send me some link with the source files so I can download them.
But to attach the movie from the library do this:
```
var s:Scroll = new Scroll(your_root, your_depth, {width:your_width, height:your_height});
var new_mc:MovieClip = s.content.attachMovie("movie_from_library_id", "new_movie_name", your_depth);
s.Render();
```
To access your movieclip content use “new_mc”.

If the content of your movie clip changes, then you should use s.Refresh(); because it’s faster then s.Render();.
deeplay writes:
No. 6 — October 29th, 2008 at 8:52 pm
scuty, i think var new_mc:MovieClip will help me. Please check my example
deeplay writes:
No. 7 — October 29th, 2008 at 9:20 pm
scuty! thanks very-very much! var new_mc:MovieClip — that was all my problems! I know it’s not your scroll bar’s propertys it’s standart in AS, i didn’t know about it. Thank you for time that you spend for my foolish “problem”

blog is cool! please write new interesting publications!
scuty writes:
No. 8 — October 29th, 2008 at 9:25 pm
Have fun!
theycallmeshua writes:
No. 9 — February 6th, 2009 at 12:49 pm
i love the scroll box i just cant figure out how to position it differently. im trying to get it to 285, 125, on my page. how can i do this?

scuty writes:
No. 10 — February 6th, 2009 at 1:47 pm

var the_container:MovieClip = _root.createEmptyMovieClip(mc_new_name, your_depth);
the_container._x = 285;
the_container._y = 125;
var s:Scroll = new Scroll(the_container, your_depth, {width:your_width, height:your_height});

var s:Scroll = new Scroll(the_container, your_depth, {x:285, y:125, width:your_width, height:your_height});

I hope this was helpful.

vinod writes:
No. 11 — June 18th, 2009 at 12:17 am

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.

scuty writes:
No. 12 — June 18th, 2009 at 6:58 am
So all you want is a box and you can scroll the content inside the box.
ac1 writes:
No. 13 — June 21st, 2009 at 9:40 pm
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….
ac1 writes:
No. 14 — June 21st, 2009 at 9:48 pm
… 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?
ac1 writes:
No. 15 — June 21st, 2009 at 10:09 pm
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)!
scuty writes:
No. 16 — June 22nd, 2009 at 7:54 am
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.
ac1 writes:
No. 17 — June 23rd, 2009 at 9:57 pm
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.
ac1 writes:
No. 18 — June 23rd, 2009 at 10:04 pm
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.
scuty writes:
No. 19 — June 24th, 2009 at 7:25 am
I am glad that was helpful.

Custom scroll box with mouse wheel scroll (AS2)

19 Responses to “Custom scroll box with mouse wheel scroll (AS2)”

Leave a Reply

Categories

Pages