You must be logged in to post Login Register
Search 

Custom Text Scrollbar

User Post

8:49 pm
January 5, 2010


Dark Vortex

Member

posts 4

1

I just utilized this bit of code (custom scroll bar) in a new project, and loved it, but the client noticed that with our text field being dynamic (used 3 tutorials in conjunction actually), there are times that the scroll bar is needlessly there. Is there a little bit of code I can use to have flash quickly check the length of a piece of text and then allow me to either enable or disable the scroll bar for aesthetics?

Thanks.

4:19 pm
February 2, 2010


Inter-Reality

Member

Netherlands

posts 8

2

Hi Dark Vortex,


Advantage of as3 is you can set your own rules. Create a dynamic textfield and give it a certain height.

create a if statement that controls whether or not to load a scrollbar.

Our main script for scrolling can be found on the following site: http://www.hexluv.com/2009/04/…..bar-class/

This is a fully customizable scrollbar with automatic determination if scroll bar is needed.

Saves you alot of time to accomplish other work.


Happy coding!

Cool


Inter-Reality – the true art of coding http://www.inter-reality.nl

7:03 pm
February 3, 2010


Dark Vortex

Member

posts 4

3

I took a look at your suggestion, but I can't get it to work. When I try using it on my TextArea, it makes the whole thing dissapear. I'm not sure why it's doing this, 'cuase the code seems sound ( I couldn't find any major errors), but for now the original question stands. :(

5:21 pm
February 5, 2010


Inter-Reality

Member

Netherlands

posts 8

4

Post edited 1:26 am – February 6, 2010 by Inter-Reality
Post edited 1:28 am – February 6, 2010 by Inter-Reality


Dark Vortex,

your solution:

on your main stage:

  1. create a scrollbar movieclip and give it an instance name of dtf_scroller
  2. set the registration of all the scrollbar elements to top left.
  3. in the scrollbar movieclip you may want to create some elements but the formost is the slider. (to make things pretty you may want to add a scrollbar and an up and down button but for this explanation its the raw deal.)
  4. give your slider an instancename of slider_mc.
  5. create a dynamic textfield and give this an instance name of : dtf (dynamic text field).
  6. add a new layer on the timeline in your main stage. rename the layer to AS
  7. add the following script to the timeline:

//dynamic scroll visibilty test
//author: Inter-Reality.nl
var maxH:Number = 260;
//dtf definitions
var myFormat:TextFormat = new TextFormat();
myFormat.font = “Arial”;
myFormat.color = 0×333333;
myFormat.size = 24;

dtf.wordWrap = true;
dtf.multiline = true;
dtf.setTextFormat(myFormat);
dtf.height = maxH;

dtf.text = “all dynamic text goes here…”;

//if you fill this up till the text surpases your dtf.height the scrollbar will appear

dtf_scroller.visible = dtf.maxScrollV > 1;
dtf.addEventListener(Event.CHANGE, function():void{
dtf_scroller.visible = dtf.maxScrollV > 1;
});

stage.addEventListener(Event.ENTER_FRAME, checkSlider);
//dtf_scroller.scrollUP_mc.addEventListener(MouseEvent.CLICK, upScroll);
//dtf_scroller.scrollDown_mc.addEventListener(MouseEvent.CLICK, downScroll);
dtf_scroller.slider_mc.addEventListener(MouseEvent.MOUSE_DOWN, dragSlider);
stage.addEventListener(MouseEvent.MOUSE_UP, dropSlider);

function upScroll(event:MouseEvent):void
{
    trace(dtf.scrollV);
    dtf.scrollV -= 1;
}

function downScroll(event:MouseEvent):void
{
    trace(dtf.scrollV);
    dtf.scrollV += 1;
}

var bounds:Rectangle = new Rectangle(dtf_scroller.slider_mc.x, dtf_scroller.slider_mc.y,0,maxH);
var dragging:Boolean = false;
function dragSlider(event:MouseEvent):void
{
    dtf_scroller.slider_mc.startDrag(false,bounds);
    dragging = true;
}
function dropSlider(event:MouseEvent):void
{
    dtf_scroller.slider_mc.stopDrag();
    dragging = false;
}
function checkSlider(event:Event):void
{
    //if(dragging){trace(“scroll”);}
    dtf.scrollV = Math.round ((dtf_scroller.slider_mc.y – bounds.y)* dtf.maxScrollV/70);
}

function textScrolled(event:Event):void
{
    dtf_scroller.slider_mc.y = bounds.y + (dtf.scrollV * 70/dtf.maxScrollV);
}
dtf.addEventListener(Event.SCROLL, textScrolled);


To mention: this is a script that doesn't fail. I just tested it and its a dirty way of making a scrollbar visible or non visible.

Let me know if you can work with this…


oh yeah! to spice it up you could chose to use tween elements for positioning…gives a nice effect…


Happy coding!

Cool


[adjustment]

added a zip file dtf.zip

Inter-Reality – the true art of coding http://www.inter-reality.nl

2:52 pm
March 3, 2010


Dark Vortex

Member

posts 4

5

Thanks Inter-Reality! That code fixed everything up nicely. Turns out all I was missing was the,

“itemName.visible = textName.maxScrollV >1″ bit of code.


Thanks again!

Topic RSS 
Search