ActionScript 3 Custom Scrollbar
February 6, 2009 by: smonteLearn how to create your own custom scrollbar!
1. Create a new document (ActionScript 3.0).
2. Draw a rectangle of size 40×100.
3. Convert the rectangle into a movie clip. Give it an instance name of “scrollMC”.
4. Draw a line of size 1×200. Convert it into a movie clip.
5. Snap the rectangle on top of the line.
6. Add a text field (250×250) next to the scrollbar . Give it an insance name of “scrollText”.
7. Now we can set the text field’s properties via ActionScript. Create an actions layer and type the following.
var someText:String = "Etiam sed pede. Aliquam rhoncus purus a tortor. Vestibulum tortor risus," + "hendrerit id, elementum sed, ornare eget, nunc. Integer eu magna. Phasellus cursus. Integer eu sem." + "Aliquam quam. Cras feugiat quam eu sem. Praesent interdum purus non risus. Fusce dui metus, aliquam ac," + "sollicitudin vitae, luctus quis, elit. Suspendisse tempor felis eget erat. Sed auctor, est nec luctus "+ "bibendum, neque massa luctus risus, id dignissim enim leo ut nisi. Praesent sed metus sed ante porta "+ "sodales. Ut tincidunt varius arcu. Aenean luctus tempus massa. Aenean ac eros. Nulla facilisi. "+ "Pellentesque nulla. Nunc dolor dolor, laoreet ac, fermentum vitae, mattis ultricies, ipsum."; scrollText.text = someText; scrollText.multiline = true; scrollText.wordWrap = true;
Explanation: We assign some text to the scrollText text field. We want it to be multiline and wrap text.
8. Let’s add the scrolling functionality to the scrollbar. Type the following.
var bounds:Rectangle = new Rectangle(scrollMC.x, scrollMC.y, 0, 200); var scrolling:Boolean = false; function startScroll (e:Event):void { scrolling = true; scrollMC.startDrag (false,bounds); } function stopScroll (e:Event):void { scrolling = false; scrollMC.stopDrag (); } scrollMC.addEventListener (MouseEvent.MOUSE_DOWN, startScroll); stage.addEventListener (MouseEvent.MOUSE_UP, stopScroll);
Explanation: First we declare a bounds rectangle. It’s x and y coordinates are the same as scrollMC’s. We want it to be a width of 0 and height of 200. Bounds rectangle is used on limiting the movement of the scrollMC. We use the scrolling variable later on, don’t worry about it now. We add the dragging function for the scrollMC by assigning MOUSE_DOWN and MOUSE_UP event handlers. We assign the bounds rectangle to the startdrag’s bounds property. Go ahead and test your movie. As you can see, the scrollMC still doesn’t move the text, but the scrollMC’s movement is now correct.
9. Now let’s make the scrollMC to scroll the text, type the following.
addEventListener (Event.ENTER_FRAME, enterHandler); function enterHandler (e:Event):void { if (scrolling == true) { scrollText.scrollV = Math.round(((scrollMC.y - bounds.y)/200)*scrollText.maxScrollV); } }
Explanation: We want this function to run on every frame, so we use the ENTER_FRAME event. First it checks if the user is dragging the scrollMC. If he does, we scroll the text accordingly. First we calculate the height difference between scrollMC and the bounds rectangle. We divide it by 200, so we get the proportianal value. Then we multiply that value by the maximum scrollV value of the text field. If you have trouble trying to understand this equation, try it with some real numbers.
E.g. if (sqrButtonMC.y - bounds.y) equals 40, and the maxScrollV equals 10, the equation is
Math.floor(((40)/200)*10) = 2. So we scroll the text by 2 units (scrollV = 2).
The Math.round simply rounds the value to the nearest integer.
10. You are done! Test your movie…If you have any questions concerning the tutorials, please visit the forum.
Final code
var someText:String = "Etiam sed pede. Aliquam rhoncus purus a tortor. Vestibulum tortor risus," + "hendrerit id, elementum sed, ornare eget, nunc. Integer eu magna. Phasellus cursus. Integer eu sem." + "Aliquam quam. Cras feugiat quam eu sem. Praesent interdum purus non risus. Fusce dui metus, aliquam ac," + "sollicitudin vitae, luctus quis, elit. Suspendisse tempor felis eget erat. Sed auctor, est nec luctus "+ "bibendum, neque massa luctus risus, id dignissim enim leo ut nisi. Praesent sed metus sed ante porta "+ "sodales. Ut tincidunt varius arcu. Aenean luctus tempus massa. Aenean ac eros. Nulla facilisi. "+ "Pellentesque nulla. Nunc dolor dolor, laoreet ac, fermentum vitae, mattis ultricies, ipsum."; scrollText.text = someText; scrollText.multiline = true; scrollText.wordWrap = true; function scrollUp (e:Event):void { scrollText.scrollV -= 1; trace (scrollText.scrollV); } function scrollDown (e:Event):void { scrollText.scrollV += 1; trace (scrollText.scrollV); } var bounds:Rectangle = new Rectangle(scrollMC.x, scrollMC.y, 0, 200); var scrolling:Boolean = false; function startScroll (e:Event):void { scrolling = true; scrollMC.startDrag (false,bounds); } function stopScroll (e:Event):void { scrolling = false; scrollMC.stopDrag (); } scrollMC.addEventListener (MouseEvent.MOUSE_DOWN, startScroll); stage.addEventListener (MouseEvent.MOUSE_UP, stopScroll); addEventListener (Event.ENTER_FRAME, enterHandler); function enterHandler (e:Event):void { if (scrolling == true) { scrollText.scrollV = Math.round(((scrollMC.y - bounds.y)/200)*scrollText.maxScrollV); } }
Any one want to tell us how to format the text - line spaces, bold, stuff like that.
Great tutorial! I just wanted to ask how you would go about adding some easing to the scroll as the text moves using Tween max or something similiar. Thank!
Is there any way to format the text? I.E. having spaces after the sentences and new paragraphs?
SCROLLER is very gud but its difficult 2 understand ActionScript 3 Custom Scrollbar plz can u send me a fla plz shekhar student