First time here? First time here? Newsletter Signup Newsletter
Search tutorials
Author: Adam Lem | Website: http://sphereco.cjb.net

Welcome to my tutorial on the "buttonless scroller".


this tutorial will show you how to create a buttonless scroller like the one above. keep
in mind that the buttons in the actual scroller could reference to anything, not just a
dynamic text field.

this is somewhat of an intermediate tutorial, so you should get yourself aquainted with
the basics of Flash. if you haven't already, there should be some tutorials in the help
menu that could help you with that. okay, here we go...

ACT ONE: Setting up the scroller

create four layers similar to that of the picture below, ignore all the other layer properties
for now.

1. create a rectangle in the middle of the stage with a fill, this will be the box that the
contents of your scroller will scroll through.
2. take the fill, and put it into the mask layer, and put the outline in the outline layer.
(hint: you can use ctrl+shit+v instead of ctrl+v for pasting, and it will paste it in the same
position that you cut from)

3. make a movie clip with some ambiguous content, and put it off to the side, so that it
won't be seen when you test out the swf.

ACT TWO: Creating your scroller

this is the part where you make the content of your scroller. keep in mind that it can only
be as tall as the rectangle that you created in the first act. your options here are unlimited,
but keep in mind that all the contents are going to be in a movie clip.

select all the contents of your scroller, and make it a movie clip named whatever you want.
make sure that you give it a name in the "instance name" field (ie. the variable name).

ACT THREE: The actionscript (OH NO!)

remember that ambiguous content movieclip you made before? this is the secret to this
entire project. open that movieclip, and give it two frames. in the second frame, give it the
"goToAndPlay(1);" actions. the actions in the first frame are as follows.

i'm actually going to simplify this a lot. i made a bunch of variables at the beginning of the
code that you just have to fill out. if you want an explanation of the code, you can email it to
me, and i'll try my best to give you a line by line analysis. anyway here it is, i'll explain what
to fill in where after this. just cut and paste this code into the first frame.

_root.scrollerName = _root.scrollerClip;
_root.left = 10;
_root.innerLeft = 40;
_root.right = 290;
_root.innerRight = 260;
_root.top = 20;
_root.bottom = 100;
_root.minXposition = -120;
_root.maxXposition = 10;
_root.idleScrollSpeed = 1;
_root.overScrollSpeed = 10;
if (_root.scrollerName._x < _root.minXposition) {
_root.scrollerDirection = "right";
} else if (_root.scrollerName._x > _root.maxXposition) {
_root.scrollerDirection = "left";
if (_root._ymouse < _root.bottom && _root._ymouse > _root.top) {
if (_root._xmouse > _root.left && _root._xmouse < _root.innerLeft) {
if (_root.scrollerName._x > _root.maxXposition) {
} else {
_root.scrollerName._x = _root.scrollerName._x + _root.overScrollSpeed;
} else if (_root._xmouse > _root.innerRight && _root._xmouse < _root.right) {
if (_root.scrollerName._x < _root.minXposition) {
} else {
_root.scrollerName._x = _root.scrollerName._x - _root.overScrollSpeed;
} else if (_root._xmouse < _root.left or _root._xmouse > _root.right) {
if (_root.scrollerDirection == "right") {
_root.scrollerName._x = _root.scrollerName._x + _root.idleScrollSpeed;
} else if (_root.scrollerDirection == "left") {
_root.scrollerName._x = _root.scrollerName._x - _root.idleScrollSpeed;
} else if (_root.scrollerDirection == "right") {
_root.scrollerName._x = _root.scrollerName._x + _root.idleScrollSpeed;
} else if (_root.scrollerDirection == "left") {
_root.scrollerName._x = _root.scrollerName._x - _root.idleScrollSpeed;

ACT FOUR: editing the variable

confused yet? okay, here's what you fill in for each of the variables in the beginning.
_root.scrollerName: put in the instance name of the scroller here.
_root.left: put in the x position of the left most side of the rectangle in the outline layer
_root.innerLeft: this is x position of the left most side of the "invisible button" that when the
user mouses over, it scrolls faster. in other words, how wide you want this area to be. keep in
mind that this has to be the actual x position. for example, if your left is 10, and you want that
area to be 40 pixels wide, your value for this would be 50 (10+40=50).

_root.right: same as the left, only it's the right side.
_root.innerRight: same as innerLeft, only it's subtraction this time. for example, if right is 290
and you want the scrollable area to be 30 pixels wide, the value is 260 (290-260=30)

_root.top: the y position of the top line of the rectangle in the outline layer
_root.bottom: the y position of the bottom line of the rectangle in the outline layer
_root.minXposition: okay, this part takes a little work. take your scroller movie clip and move
it as far as you want it to scroll to the LEFT. get the center position of the movie clip by looking
at the number in the info box. make sure that the little black dot is on the center, and not the
top left of that little thing there.

_root.maxXposition: do the same as the minXposition, only this time move it as far as you
want the scroller to move to the RIGHT
_root.idleScrollSpeed: how fast you want it to scroll when nothing is happening.
_root.overScrollSpeed: how fast you want it to scroll when it is moused over.

ACT Five: Almost done.

1. add an action to the ambiguous content movieclip, "onLoad(_root.scrollerDirection = "right";)
2. put in any additional content that your scroller bar needs (ie. in my case the dynamic text
box in the "extra" layer).

YOU'RE DONE! have fun with it.

» Level Intermediate

Added: 2003-05-03
Rating: 6 Votes: 142
» Author
Adam Lem
» Download
Download the files used in this tutorial.
» Forums
More help? Search our boards for quick answers!
Featured Flash FLA
» Author: Inocreato
» Title: RaiseTheBlocks
» Description: Raise all the blocks to win the game
Featured Sound Loops
Image for equalize

Audio Player

» Author: TomCat Carty
» Title: The Wood
» Description: Just a little game ending or it can maybe be looped. Recorders with music box and percussion to give the feel of well, I don't know, the woods? Free to use, just credit me. thank you
Latest Font
» Author: Fábio FAFERS
» Description: I created this font for free use. Everyone can apply it in personal or business texts. Its free, but I want to be communicated in case of business use. Donations are accepted to keep the project of free fonts alive! Thank you all
Featured Sound Fx
Image for equalize

Audio Player

» Author: Davisigner
» Description: Hmm... what to say about this one? It's reminiscent of the closing notes of the opening music from the Three Stooges done in a church organ style with a closing cymbal crash. I'll give this one away gratis, but feel free to check out my free loops and potential upcoming license-mandated ones over in the respective part of Flashkit.