This tutorial will allow you to create a completely customized scroll bar and allow for any items (ie.movie clips, buttons, pictures, etc) to be scrollable, not just text.
To start. Gather all the content you want to be scrollable and place all of it into on big movie clip. In this example I have static text, bitmap, a button and a movie clip. Give this movie clip an instance name.
I called this movie clip
content_mc. Besure to place all of the content originated at X:0 Y:0 otherwise you will get some somewhat off results in the scrolling.
Now create your buttons. I made to very simple buttons with an up and a down arrow on them.
Ex:
(Can't post an image thumb nail because myspace is being crap right now) Click Here
Make each button into a seperate movie clip or button, which ever you prefer.
Give the up button an instance name of
up_mc (or up_btn if you made it a button)
and the down button an instance name of
down_mc (or down_btn if you made it a button).
Now we are done with the designing part of the tutorial. Now comes the fun part...
Action Script:
Create at an actions layer and in the first frame hit F9 to open up your actions panel.
down_btn.on
Press = function () {
if(content_mc._y >= -226){
content_mc._y -= 15;
}
}
up_btn.onPress = function () {
if (content_mc._y <= 74){
content_mc._y += 15;
}
}
You want to create an onPress event for the buttons you created. Then we need to create an if statement inside a function.
You may want to get a pen and paper for this part unless you have a good memory.
Click on the content movie clip and put it at its position it would be in where it would be at the top of the view able area.
Now go to the properties panel and get the Y value for the movie clip. In this example, the Y value of the movie clip is 74px.
Now take the movie clip and place it as far up as you want it to be able to scroll. Once again, in the properties panel, get the Y value or the movie clip again. This time we have -226px for out Y value.
Return the movie clip to its original position at the top most part of the scrollable area.
Back to our action script...
For the down button
we want to say that if the _y value of the movie clip is greater than or equal to >= the second value your wrote down (or remembered) then we will
will change the _yvalue of the movie clip by moving it up + 15px.
now for the up button.
we want to say that if the _y value of the movie clip is less than or equal to <= the first value your wrote down (or remembered) then we will
will change the _yvalue of the movie clip by moving it down - 15px.
Thats all there is to it!
If you want to move the movie clip more/less spaces on each click of the button then incease/decrease (15)the amount of pixels.
If you end up having the problem that the movie clip is moving in the opposite direction that you want it to when a button is pressed then you most likely just need to switch the + and - signs in the functions.
If you want to make your content only viewable in a certain part of your stage then just place a mask over the content_mc movie clip with the area you want people to see.
Thank you for reading this tutorial. I hope you find it very helpful with your flash animations. For any help with this tutorial or questions, please post only in this forum thread.
scrollableContent.fla
~Flash Mods
