AS: Main - it's... erm.... jolly nice!
Varispeed Rollover Scrollbar
SAMPLE - mouseover the orange bar. Move further away from the bar centre to increase scroll speed.
HUH?
Quite often, particularly when working with Flash websites, you may find that you have more text than will comfortably fit on one page. As an alternative to creating new pages and having NEXT and BACK buttons, you may want to consider using a scrollbar. This is one that I've used very often, both on websites and in games like Overrun II, where Stage size was limited.
WHA???
It's really quite simple... I think.
First off, you'll need two Movie Clips (AS: Symbols).
The first one will be the holder for all the content you want to scroll. Make life easy on yourself by creating a new layer and adding a semi-alpha'd rectangle, (IMPORTANT: centre everything on _x=0, _y=0) so you can see your working area.
Then add your text, shapes, images and symbols inside the rectangle area.
Once you're done, exit edit mode, and place an instance of this MC on the stage, giving it the Instance Name: stxt.
Now for the second symbol. This MC will be your scrollbar, so draw a tall thin rectangle, again centred on 0, 0. Exit edit mode, and place it alongside your scrolltext MC on the Stage. It doesn't need an Instance Name.
Align the top of your scrolltext MC and your scrollbar MC to the same _y position.
Select the scrollbar MC, press F9, and add these Actions:
onClipEvent(load){
var scrollspeed=6; //Lower number = faster scroll
var sbcentre=_y; //Grab scrollbar centre
var stpos=_root.stxt._y; //Grab scrolltext position//Calculate max and min _y for scrolltext
var sttopstop= _y-((_root.stxt._height-_height) /2);
var stbotstop= _y+((_root.stxt._height-_height) /2);
}
onClipEvent(enterFrame){
//If mouse is over scrollbar
if (this.hitTest(_root._xmouse, _root._ymouse, true)){
//Calculate speed to move, based on mouse _y
var stmove = (_root._ymouse-sbcentre)/scrollspeed;
//Calculate _y position for scrolltext
stpos = Math.round (stpos-stmove);
}
//Stop scrolltext at top and bottom
if (stpos < sttopstop) {
stpos = sttopstop;
}
if (stpos > stbotstop) {
stpos = stbotstop;
}
//Move scrolltext
_root.stxt._y = stpos;
}
GUMF!!!
I agree. Now you can play with the colour scheme, scrolltext content, etc. You could even play with the code to make it so that press, rather than rollover, will do the scrolling. Example? Why not...
onClipEvent(load){
var sbcentre=_y; //Grab scrollbar centre
var stpos=_root.stxt._y; //Grab scrolltext position//Calculate height ratio of scrollvar to scrolltext
var stmove= (_root.stxt._height-_height) /-_height;
}
on(press){
//Move scrolltext
_root.stxt._y = sbcentre+ ((_root._ymouse-sbcentre) *stmove);
}
If you wanted to, you could create a draggable bar by combining the code above and startDrag(); (AS: Drag & Drop). Have a play, post any versions you come up with.
GLUG?
Associated AS Threads:
AS: ClipEvents by Inglor
AS: Drag & Drop by Inglor
AS: Maths - Basic by T-H
AS: Symbols by Joelasticot
AS: Variables by Rantzien
Other:
Scrollbars
Scrollbars
Scrollbars
Scrollbars
Scrollbars
