A Flash Developer Resource Site
|
Internet Commerce
Developer ChannelFlashKit.com
JavaScript.com JavaScriptSource Developer Jobs ScriptSearch StreamingMediaWorld Web Developer's Journal Web Developer's Virtual Library WebDeveloper.com Webreference Web Hosts XMLfiles.com
internet.com
|
  Tutorials HomeWhat's NewTop RatedSubmitmyTutesRandom!
Search Tutorials
 Tutorials » Interactivity
Explaining The ScriptFirst 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.
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.
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
 |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Scrolling A Movie
 |
 |
|