Vertical text field scroll bar:Basic

[UrbanAnimal]

After seeing on the AS2 forum the topic of reusable scripts and Ranoka posting some script i thought somebody might find this useful... Maybe. I am doing a project where i have to allow the user to change font type/size/colour etc and I have just made a customized vertical scroll bar for a dynamic text field, that has varying length and i thought it would be something that would be reusable. Assuming i can figure out how i'll post the swf of my accessibility window at the end.

So first off, you need a movieClip to use as the scroll bar and a movieClip to use for the bit that you slide up and down. You need your dynamic text field and unless this is going to fill the screen you will have a mask so only a certain area of the field is showing. Now when your movie loads the text field needs to be the same size as the mask/area that is going to be showing so if you've more text than you can fit in i'd start with an empty text field and add the text with AS (or do the scrolling a different way).

You need to make sure that the scroll bar and the mask are the same height and y value and make sure the slider is also aligned to this y value and (obviously) on the layer above the scroll bar. Then set these variables, changing the values for the names of your movieclips/text field:

Code: Select all

var scrollBar:MovieClip = theRelativeInstanceNameOfYourScrollBar;
var scrollSlider:MovieClip = theRelativeInstanceNameOfYourSlider;
var scrollingText:TextField = theRelativeInstanceNameOfYourTextField;

Then add this code

Code: Select all

var myRect:Rectangle = new Rectangle(scrollSlider.x, scrollSlider.y, 0, scrollBar.height - scrollSlider.height);

function dragSlider(event:MouseEvent):void {

   event.target.startDrag(false, myRect);
}

function releaseSlider(event:MouseEvent):void {

   event.target.stopDrag();
}

function scrollFunction(event:Event):void {

   var sliderHeight:int = scrollBar.height - scrollSlider.height;
   var documentHeight:int = scrollingText.maxScrollV;
   var distribution:Number = documentHeight/sliderHeight;
   var currentHeight:int =scrollSlider.y;
   var relativeHeight:Number = currentHeight-scrollBar.y;
   var movement:Number = relativeHeight*distribution;
   scrollingText.scrollV = movement;
}
scrollSlider.addEventListener(MouseEvent.MOUSE_DOWN, dragSlider);
scrollSlider.addEventListener(MouseEvent.MOUSE_UP, releaseSlider);
scrollBar.addEventListener(Event.ENTER_FRAME, scrollFunction);


And that should work i hope. I know i am not great at explanations but i hope this will be of some use to somebody, feel free to ask questions. Here is mine: I couldn't get the swf to work properly so heres a link)

http://home.wlv.ac.uk/~in0238/accessabilityWindow.html
If anyone is intrested in the code to do the colour/text changes just say.

UA

[Ranoka]

Nice, looks like it works well.

You might want to also include a handler to handle when you release outside the slider, because the scrolling only stops if you let go of the slider while you're over it (often I find I've gone off the slider while scrolling).

I tried to fix this with:

Code: Select all

scrollSlider.addEventListener(MouseEvent.ROLL_OUT, releaseSlider);

But that doesn't seem to work, because even when the button is pressed when you roll out it stops scrolling.

Haven't managed to find a way to do it in AS3, I think in AS2 there's onReleaseOutside or something like that, not sure how to do that in AS3.

[UrbanAnimal]

Yeah, i do have that in my code but i left it out of the version i posted because i had the problem you had :p Yeah there was an onReleaseOutside in AS2 but i couldn't find a way to make an equivalent in AS3 but there must be something. If i come across it i will let you know.

EDIT:

Yeah ok its quite simple, if you change the dragSlider and releaseSlider functions to this:

Code: Select all

function dragSlider(event:MouseEvent):void {

   event.target.startDrag(false, myRect);
   stage.addEventListener(MouseEvent.MOUSE_UP, releaseSlider);
}

function releaseSlider(event:MouseEvent):void {

   scrollSlider.stopDrag();
   stage.removeEventListener(MouseEvent.MOUSE_UP, mouseUp);
}

You can just add an event listener to the stage to listen for the mouse up event but if you have other things going on in your movie that require mouse_up events that probably not a good idea.