Flash Scroll Bars Tutorial

This is a simple way of creating a scrolling window, or panel in flash. It's something used very often in html pages, and can also be very useful in flash designs too. It's not too complicated, but you'll need to know a bit about flash to start with. If you have any comments let me know.

Step 1. What objects make up a scrolling area

Show This Step

A scrolling window is made up of 4 items:

1. The content to be scrolled

2. The movieclip that forms a mask, allowing only part of the content to be visible

3. The slider bar

4. The button on the slider bar, thaat the user drags up and down

 

Here you see the parts in action, (but without a mask)

 
Hide This Step

Step 2. Creating the objects

Show This Step

Start a new flash file (we're using action script 2 here)

Create the 4 objects, make them into movie clips, exept the slider button - make that into a button.

Make sure your mcContents' clip is longer than your mcScrollWindow clip, or there is no point having a scroll feature...

Name the objects on the stage as labeled in the diagram >

Click here to download this file.

 
Hide This Step

Step 3. Making the slider button move

Show This Step

The first stage is to create some code that lets the user drag the button up and down the slider

We'll use the flash function 'startDrag' and 'stopDrag' for this.

Code

 Human Person Language

btnSlider.onPress = function() {

startDrag(this)

}

 

btnSlider.onRelease = btnSlider.onReleaseOutside = function() {

stopDrag()

}

when you press on btnSlider

start draging 'this' - this is the thing you clicked on

 

 

 

when you let go, either with the cursor on, our off the button

stop dragging the object around

Try this, you will find the button can be dragged - but it can move anywhere - which is not quite what we want!

Limitting Where It Drags Around

This is done by adding some info to the startDrag() command, telling the location for how far up, left, down and right it can move

Code

 Human Person Language

btnSlider.onPress = function() {

left = mcSliderBar._x;

right = mcSliderBar._x

top = mcSliderBar._y;

bottom = mcSliderBar._y + mcSliderBar._height - btnSlider._height

 

startDrag(this, false, left, top, right, bottom)

}

 

how far left slider bar can move

how far right slider bar can move

how far up slider bar can move

how down left slider bar can move

 

do the startdrag command, adding in all these values in this order. The 'false' applies to another option. If you entered 'true' the object would centre itself on the cursor position, try it, but generally we don't want this ot happen on scroll bars.

This diagram explains how we got the values for top, bottom, left and right.

Click here to download this file.

Hide This Step

Step 4. Making the scroll contents move

Show This Step

Now we need to make the contents (mcContents) movieclip move up when we drag the button down, and move down when we drag it up

First, we need to set up function called a 'listener' which will 'listen' to when the mouse moves, and then runs some code.

Code

 Human Person Language

btnSlider.onPress = function() {

left = mcSliderBar._x;

right = mcSliderBar._x

top = mcSliderBar._y;

bottom = mcSliderBar._y + mcSliderBar._height - btnSlider._height

startDrag(this, false, left, top, right, bottom)

Mouse.addListener(mouseListener);

}

 

btnSlider.onRelease = btnSlider.onReleaseOutside = function() {

stopDrag();

Mouse.removeListener(mouseListener);

}

 

var mouseListener:Object = new Object();

mouseListener.onMouseMove = function() {

trace (_ymouse)

};

 

 

 

 

 

 

when button is pressed start the mouse listener

 

 

 

 

when button is released, remove the listener

 

 

this line defines the 'listerner'

create a function that happens when the mouse moves

do something! at the moment, it's just telling where the mouse is

The code for creating a listener is a bit odd, but don't worry, all you need to know is that you've made a mouseListener function, told it enable that function when you press the button, and stop it when you release the mouse

Click here to download this file.

Next, we need to make the movieclip mcContents move

We need to think of a few things here.

  • How far can the slider button move
  • How far should the contents move
  • How many times further should the contents move compared to how far you are moving the button

Eg, if the bar can move 100pixels, but the contents have to 500pixels, the contents movieclip must move 5 times further than the bar.

Code

mouseListener.onMouseMove = function() {

SliderMovement = mcSliderBar._height - btnSlider._height

ContentsMovement= mcContents._height - mcScrollWindow._height


MovementRatio= SliderMovement / ContentsMovement

HowFarIsSliderDownBar = btnSlider._y - mcSliderBar._y

HowFarToMoveContents = HowFarIsSliderDownBar / MovementRatio

mcContents._y = mcScrollWindow._y - HowFarToMoveContents

};

see:

note 1

note 2

 

note 3

note 4

note 5

note 6

 
Human Person Language

Note 1

How far the can slider button move. To do this, we work out the differece between the height of the slider bar, and the height of the slider button

 

mcSliderBar._height - btnSlider._height

 

eg

Slider Button Height = 100

Slider Bar Height = 230

Slider Movement = 190 - 100 = 90

 

 

 

 

 

 

Note 2

To work out how far the contents need to move, we look at how much taller the contents are than the scroll window

 

ContentsMovement= mcContents._height - mcScrollWindow._height

 

eg

Contents Height = 280

Scroll WIndor Height = 100

Slide Movement = 280 - 100 = 180

 

 

 

 

Note 3

We then work out how much further the content has to move than the slider button

 

MovementRatio= SliderMovement / ContentsMovement

 

eg

MovementRation = 180 / 90 = 2 - The scroll contents have to move twice as much distance as the slider button moves.

 

 

 

Note 4

Then we have to work out how far down the slider the slider button is. We can do this by taking the vertical position of the slider button, and substracting the vertical position of the bar. Eg, if the button is at position 100, and the top of the bar is 60, we know the button is 40pixels down the slider.

 

Note 5

We can now work out how far, in pixels to move the content, by multiplying the value for 'HowFarIsSliderDownBar' by 'HowMustFasterMustContentMove'

 

Noye 6

Finally, we set the vertical position of the mcContents movieclip. When the slider is at the top, we want the contents to be at same vertical position as the top of the mcScrollWindow movieclip. Then, as the slider gets moved down, we want to move the contents up, so we substract the value 'HowFarToMoveContents'

 

One last thing, simply make your scroll window movieclip in to mask, masking the contents.

Give it a try, you should now have a fully working vertical scroll bar.

Click here to download this file.

Hide This Step

Advanced

Setting the size of the scroller

Show This Step

Coming soon - Look at the scroll bars on this page, when you open up sections, the page content gets longer, and the scroll button becomes shorter. This is very standard, looks professional, and pretty easy to add in to our scroll bar.

Hide This Step

Making it go Horizontal

Show This Step

Coming soon - lets swap the axis to horizontal, and make a horizontal slider

Hide This Step

Making it go Horizontal & Vertical

Show This Step

Coming soon - The next logical step, adding both horizontal and vertical sliders.

Hide This Step

Comments?

To make the ideal, most useful tutorials, I need your comments. Did you understand everything, did I make any mistakes, or not explain something? Did it simply not work! Let me know