Tutorials Home
What's New
Top Rated
Submit
myTutes
Random!
Non-Button Scroller
Author: Adam Lem
| Website: sphereco.cjb.net |
Welcome to my tutorial on the "buttonless scroller".
Intro:
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) {
break;
} 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) {
break;
} 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.08 Votes: 142
Hits: 1732
|
| » Author |
|
Adam Lem
|
| » Download |
|
Download the files used in this tutorial.
|
|
Download (50 kb)
|
|
Get conversion and unzipping tools
for PC and Mac here!
|
| » Forums |
|
More help? Search our boards for quick answers!
|
|
Please rate this tutorial, 10 is the top rating, you can also click the
comments link to read/write a review.
|
|
|
Tutorials » Interactivity
