Flash Training: Scroll Bars	Home • Food • Mates • Members • Tutorials • Forum • Buy Templates • Contact Us

Flash Tutorial - Scrolling Dynamically Loaded Text

Free Flash Tutorial

Step Ten: Scroll Bar - ActionScript

1. Select your Scroll Track MC on your stage and give it the following instance name: scrollTrackbar
2. Double-click your Scroll Track MC to edit it
3. Select your Scroll Bar MC within your Scroll Track MC and give it the following instance name: scrollBar
4. Rename Layer 1 to: Scroll Bar
5. Attach the following ActionScript to your scrollBar Movie Clip:
   
   on (press) {
       this.startDrag(false, 0, 0, 0, _root.scrollBarMax)
           //creates another enterframe function using the Scroll Track MC's timeline
       this.onEnterFrame = function() {
           //sets the variable yPos to the current _y position of the Scroll Bar MC
           yPos = this._y
           //sets the variable scrollPos to the percentage of how much the scroll Bar has been dragged; the variable is a decimal between 0 and 1
           scrollPos = (yPos/_root.scrollBarMax)
           //sets the loadedInfo to scroll according to how much the scrollBar has been dragged
           _root.loadedInfo.scroll = Math.round(_root.loadedInfo.maxscroll * scrollPos)
       }
   }
   
   on (release) {
       //stops this Movie Clip from being dragable
       this.stopDrag()
       //stops the above enterFrame function
       delete this.onEnterFrame
   }

   on (releaseOutside) {
       this.stopDrag()
       delete this.onEnterFrame
   }

ActionScript Explained:

this.startDrag(false, 0, 0, 0, _root.scrollBarMax)
This line allows the scroll Bar to be dragged to a confined space. The "false" parameter indicates whether the movie clip's center should "snap" to the mouse when it is clicked. The next three numbers (0, 0, 0) nd the variable (_root.scrollBarMax) refer to the boundary of how far you can drag the movie clip (left, top, right, bottom) with coordinates from the movie clip's axis. Remember that _root.scrollBarMax indicates how far down the scroll Bar should be able to be dragged

Note: You may be wondering why the scrollBar is a movie clip instead of a button; after all, it has mouse events like a button. But it is important to note that startDrag() will only work for movie clips; not buttons. Mouse events, on the other hand, will work with both.