BBM.net is designed to save you time and deliver the highest quality royalty-free music for your multimedia projects. Features include: over 450 Music Loop Packages from some of the best composers in the business, our music search engine to speed your selection process, alternate music versions & bonus sounds to use for rollovers or transitions, free technical support and free consulting.
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.
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).
Tutorials Home
Tutorials » Interactivity
Non-Button Scroller
