Be a Supporter!

As: Varispeed Rollover Scrollbar

  • 5,308 Views
  • 10 Replies
New Topic Respond to this Topic
Denvish
Denvish
  • Member since: Apr. 25, 2003
  • Offline.
Forum Stats
Member
Level 46
Blank Slate
As: Varispeed Rollover Scrollbar Sep. 4th, 2005 @ 06:02 AM Reply

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


- - Flash - Music - Images - -

BBS Signature
noob-toast
noob-toast
  • Member since: May. 18, 2004
  • Offline.
Forum Stats
Member
Level 08
Blank Slate
Response to As: Varispeed Rollover Scrollbar Sep. 4th, 2005 @ 06:14 AM Reply

Very, very nice. This can and will come in handy. ;D


These new signatures can suck on mah balls. My lolis don't fit in. Lol wut what are you guys still doing on NG, move on.

BBS Signature
Denvish
Denvish
  • Member since: Apr. 25, 2003
  • Offline.
Forum Stats
Member
Level 46
Blank Slate
Response to As: Varispeed Rollover Scrollbar Sep. 4th, 2005 @ 03:12 PM Reply

Oops. My finger slipped. Honest.


- - Flash - Music - Images - -

BBS Signature
T-H
T-H
  • Member since: Jan. 7, 2004
  • Offline.
Forum Stats
Member
Level 40
Blank Slate
Response to As: Varispeed Rollover Scrollbar Sep. 4th, 2005 @ 03:33 PM Reply

Cherries(i think it was him) asked me to make something similar for him the other day.

http://img41.imagesh..age=scrollbar0kl.swf

Dj-Offsea
Dj-Offsea
  • Member since: Aug. 1, 2002
  • Offline.
Forum Stats
Member
Level 07
Blank Slate
Response to As: Varispeed Rollover Scrollbar May. 18th, 2006 @ 09:55 AM Reply

Maybe i did it wrong, but here it`s only going down... isnt scrolling back up.

xWELSHxDRAGONx
xWELSHxDRAGONx
  • Member since: Apr. 13, 2006
  • Offline.
Forum Stats
Member
Level 07
Blank Slate
Response to As: Varispeed Rollover Scrollbar May. 18th, 2006 @ 10:19 AM Reply

May i suggest the use of scrollrect if you are using falsh 8 - especially if you are scrolling a large movie clip. Also i think scrollREct gives more control for less work.

example of use:

import flash.geom.Rectangle;
window:Rectangle = new Rectangle(0, 0, 200, 200);
movieclip.scrollRect = window;

or if you want like above, a scrollbar, jus make a function that updates when you press button, or drag scrollbar, eg:

scrollbar.onPress(){
setScroll(scrollbar._x,scrollbar._y)
}

function setScroll(x,y){
window:Rectangle = new Rectangle(x, y, 200, 200);
movieclip.scrollRect = window;
}

Hoeloe
Hoeloe
  • Member since: Apr. 29, 2004
  • Offline.
Forum Stats
Member
Level 37
Game Developer
Response to As: Varispeed Rollover Scrollbar Aug. 17th, 2006 @ 04:06 AM Reply

i made a draggable scrollbar, but i can't set limits. The stxt movieclip just keeps going up. How do i fix?


Song of the Firefly is on Steam Greenlight and Facebook. Give them a look and support the project!
------------------------------

BBS Signature
jotendo
jotendo
  • Member since: Nov. 25, 2005
  • Offline.
Forum Stats
Member
Level 09
Blank Slate
Response to As: Varispeed Rollover Scrollbar Nov. 16th, 2006 @ 02:35 AM Reply

thats neat.

sniffy-gerbil
sniffy-gerbil
  • Member since: Apr. 14, 2006
  • Offline.
Forum Stats
Member
Level 08
Blank Slate
Response to As: Varispeed Rollover Scrollbar Dec. 11th, 2006 @ 06:47 PM Reply

I guess I'm not a very logical thinker.
I never thought of a scrollbar code being this simple!
Thanks for sharing.

Just one thing, I've seen it/them before but i don't know how to set them up.
Isn't there like default scrollbar/button images for actionscriptlike in a internet browser?
Like I've seen them a lot on company websites and senn them more than once but I just picture where.

sniffy-gerbil
sniffy-gerbil
  • Member since: Apr. 14, 2006
  • Offline.
Forum Stats
Member
Level 08
Blank Slate
Response to As: Varispeed Rollover Scrollbar Dec. 12th, 2006 @ 05:31 PM Reply

anyone?

FOAME
FOAME
  • Member since: Jun. 19, 2007
  • Offline.
Forum Stats
Member
Level 04
Blank Slate
Response to As: Varispeed Rollover Scrollbar Aug. 13th, 2008 @ 05:59 PM Reply

Thanks for the tutorial, but is there a way to make the scroll bar the entire size of the material you're trying to scroll, so that you'll be able to scroll the material with out going to a scroll bar?

Example: (look at the tour dates section) http://www.n-e-r-d.com/


BBS Signature