First time here? First time here? Newsletter Signup Newsletter
Login | Register | 651326 Members and growing!
Search tutorials
Author: Jake Gelbman | Website: http://htt[p://jakeg.f2g.net

Explaining The Script

First ill explain the load function.
onClipEvent (load) {
	diff_y = bound_box._height-scroller._height;
	bounds = bound_box.getBounds(this);
	top = bounds.yMin+(scroller._height/2);
	bottom = bounds.yMax-(scroller._height/2);
	function updateScrollbar () {
		content._y = -(((scroller._y-top)/diff_y)*(content._height-bound_box._height));
	}

You should be familiar with the load handler. If not go look it up. The first variable is diff_y. This variable is the amount of space the scroller has to move. Its taken by taking the height of the bound_box and subtracting the scroller's height. You subtract the scrollers height because in the movie the scroller's crosshair is in the center and you want the full available scrollable area up until the top of the scroller, not till the cross hairs (I'm such a bad writer i swear). Next up is the bounds variable. This gets the bounds of the bound_box movie clip.

getBounds() is a method in flash 5 that returns the location of each side of the bounding box of a movie clip. It returns 4 values.

  • yMin
  • yMax
  • xMin
  • xMax
these values are used for our movie clip to detect the top and bottom y-axis values

here is the main function that will be the ox of out script. We declare the function with function updateScrollbar(). updateScrollbar is just the name of it. content._y is the y location of our content were gonna set it to the right location depending on the location of the scroller. first we make this whole thing negative because while we want the content to scroll up while we are making the scroller go down. the next part: scroller._y-top gets how far down the scroller is. We subtracted top because we need it as a number from 0 to the lowest most it could be which is what the variable diff_y is. when we put the code (scroller._y - top)/diff_y what were really getting is a number betwwen 0 and 1 which is a percent. We multiply that percent by the height of the content minus the height of the bound_box. We have to subtract the bound box's height because if we didnt the movie would end up off the viewable area. I hope that made sense but if it didnt dont worry about it, you can use the function as is.

now ill explain the mouseOver and MouseUp events


onClipEvent (mouseDown) {
	if (scroller.hitTest(_root._xmouse, _root._ymouse)) {
		startDrag ("scroller", false, scroller._x, top, scroller._x, bottom);
		scrolling = true;
	}
}
// here we stop the drag and set scrolling to false
onClipEvent (mouseUp) {
	stopDrag ();
	scrolling = false;
}

this part just makes the scroller follow the clip when you click on it then makes a variable true or false

First we make a mouseDown event handler in it we detect if the mouse clicked the scroller. We do this by using hitTest() method.

The hitTest() method is a method that detects if two things are touching in a movie. it is a movie clip property so it looks like movieClip.hitTest(somethingx,somethingy) its cool for those of us who like code centralized and in one spot, not all over the place in buttons.In our movie we use it with the scroller movie clip and detect if its touching the mouse. I actually got this way of doing things while reading another scrolling tutorial at actionscripts.org. It was written by Patrick Mineault at http://www.actionscripts.org/tutorials/intermediate/scrolling_a_text_box/index.shtml. Go there he probably explains this part better than I can. While his deals with scrolling a text box using scroll and maxscroll properties, mine scrolls a movie clip so they are not similar.

then we start dragging the scroller confining it to a rectangle that keeps the same x value as where you placed it, but puts the top variable for the top of the constrained imaginary box and the bottom variable for the bottom of the rectangle. for more info on the startDrag method go to Macromedia's actionscript dictionary at http://www.macromedia.com/support/flash/action_scripts/objects/startdrag.html After that we set scrolling to true. In the mouseUp event handler we stop the drag and set scrolling to false.

and now finally the enterFrame event handler


onClipEvent (enterFrame) {
	if (scrolling) {
		updateScrollbar();
	}
}

this script occurs every frame so we have to check if were scrolling or not so we dont bog down your computer by performing the updateScrollbar() function too many times without needing to. Finally we call the updateScrollbar() function to set the content to whatever it should be according to the location of the scroller.

That concludes the basic movie scroller. In a day or two ill add the a part to this tutorial for the throwing of the scrollbar. Its in the .fla so if you figure it out yourself - Kodos. Its pretty easy to figure out. Hope this tutorial helped. Stay tuned for when i add the new part to it. send me an email at allforjake@yahoo.com if you want me to notify you of when i change it to incorporate it.

» Level Intermediate

Added: 2001-12-03
Rating: 8 Votes: 143
(10 being the highest)
» Author
sup all. Im Jake. Im 16 and live in NY. I got into flash last summer because its cool. Please send me an email at allforjake@yahoo.com or visit my site (will be cool soon) at jakeg.f2g.net.
» Download
Download the files used in this tutorial.
» Forums
More help? Search our boards for quick answers!

Comments

  • There are no comments yet. Be the first to comment!

  • You must have javascript enabled in order to post comments.

Leave a Comment
  • Your email address will not be published. All fields are required.
Featured Flash FLA
» Author: work2survive
» Title: Girl Walking 1kb
» Description: Walking girl, animation just takes 1kb, using high heels shoes, and fashion model attitude.
Featured Sound Loops
Image for equalize

Audio Player

» Author: BoxCat
» Title: CPU Talk
» Description: From the cyberpunk RPG, "Nameless: the Hackers" Completely Free to use! Keywords: edm hip hop rap electronic mysterious mission hacking chase exciting spy ios ambient chilling love happy sad angry suspense
Latest Font
» Author: Fábio FAFERS
» Description: I created this font for free use. Everyone can apply it in personal or business texts. Its free, but I want to be communicated in case of business use. Donations are accepted to keep the project of free fonts alive! Thank you all
Featured Sound Fx
Image for equalize

Audio Player

» Author: nathan
» Description:

A recorded sound of the Dimensional Fork Gate.