I've included 4 methods by which you can customize the scroll object. They work quite nicely and are easy to get a hold of. All of these methods are optional, if you don't set them they'll default to particular values that I've chosen.
Important: When using these methods you must call them before you build the scroll:
objectName = new Scroll(x,y,width,height)
objectName.method()
objectName.build()
setMargins() Method:
Determines the left, right, top, bottom margins for the contents of the scroll object
Usage:
objectName.setMargins(left,right,top,bottom)
Defaults to (10,10,10,10)
setDimensions() Method:
Determines the dimensions of the scrollbar and the thickness of the border. The following diagrams should help explain it:
Usage:
objectName.setDimensions(barX,barY,barW,barH,arrowuH,arrowdH,boxH,border)
Defaults to (0,0,15,objectName.h,15,15,30,1) - makes the scroll directly beside the scroll frame.
setColors() Method:
Determines the colors of various parts of the scroll.
Usage:
objectName.setColors(background,border,bar,arrow,box)
The colors must be set as a string (in quotes). To make the color transparent use null.
Defaults to (null,"#000000","#C5C5C5","#555555","#898989") - transparent background, grey scrollbar, black arrows
setImages() Method:
The setImages() method is the one you'll likely always want to use. Instead of having just plain old squares for the parts of the scrollbar, you can define your own images. I've also allowed you to define the images that represent a "clicked" state so you can mimic 3D buttons.
You can set the images for the scroll box (the part that scrolls), the up arrow, down arrow, and the background vertical bar. For first 3 there are 2 states - 0 when not clicked, 1 when clicked. The bar doesn't have a clicked state.
Usage:
objectName.setImages(box0,box1,up0,up1,dn0,dn1,bar,dir)
Example:
myscroll.setImages('box0.gif','box1.gif','arrowUp0.gif','arrowUp1.gif','arrowDn0.gif','arrowDn1.gif','bar.gif')
If you don't want to have an image for some of them, just use null as its value (without quotes).
The dir is optional and allows you to set the directory where all the images are located:
myscroll.setImages('box0.gif','box1.gif','arrowUp0.gif','arrowUp1.gif','arrowDn0.gif','arrowDn1.gif','bar.gif','../images/')
The Bar Image:
The bar is what I've named the part behind the scroll box (I don't know what the heck you're really supposed to call these things). I have removed the barHeight parameter and instead added 2 properties this.bar.imageW and this.bar.imageH which default to this.bar.width and this.bar.height (set by the setDimensions() method). The means the image inserted for the bar will by default stretch the whole length of the scrollbar. This is nice so that you need only to have a small image. But if you instead want an image that needs a fixed height you can change these values manually so that the bar image will not stretch:
// must be done before build() myscroll.bar.imageW = 20 myscroll.bar.imageH = 350
By default the scroll object will clip the layers which the images are in. Because I forsee that it may be necessary for your images to extend further, I've included a property clipImages which you can set to false which will stop the layers from clipping your images. The demo provided does this so that the arrows overlap the scrollbox.
View demo-images.html for a custom images scroll example. View Source Code.
| Home | Next Lesson: List Object |