ActionScript.org Flash, Flex and ActionScript Resources - http://www.actionscript.org/resources
Easy Movieclip Scrolling in Flash 8
http://www.actionscript.org/resources/articles/186/1/Easy-Movieclip-Scrolling-in-Flash-8/Page1.html
Hasan Otuome
Hasan Otuome is Chief Architect for Marx Media (http://www.marxmedia.net) where he can usually be found developing Rich Internet Applications for the company's clients. He champions creative uses and combinations of Flash, PHP, AJAX and MySQL, among others, for their benefits in user experience improvement. 
By Hasan Otuome
Published on December 19, 2005
 
Tutorial details:
Written by:
Hasan Otuome
Time: Approximately 35 minutes
Difficulty: Intermediate
Requirements: Flash 8.
Topics Covered: Usage of scrollRect to scroll text and graphics.
Assumed knowledge: Actionscript 1.0 and/or 2.0

You can find the source files for this tutorial here.

This tutorial aims to shed some light on one of Flash 8's best kept secrets, scrollRect. Hopefully after following along you'll have yet another tool at your disposal to aid in making some truly amazing projects. OK, let's get to it.

Introducing scrollRect

In case you didn't know there have been a lot of improvements made with Flash 8. Some are well documented while others are not. This tutorial deals with one of the lesser known gems in Flash 8 - scrollRect. scrollRect is a property of the MovieClip Object and, as we'll see, it allows us to quickly scroll movie clip content without having to use all of the techniques we had to use prior to Flash 8. This is what we'll be creating:



Setting Things Up

Before we get down and dirty though, let's set up our FLA:

First, create a new flash document and then create (3) layers: actions, scroller, window.

layer setup


Now, create a movie clip to hold the image we'll be scrolling. If the library panel isn't already open, press Ctrl+L. Then right click inside the library panel and choose New Symbol. Give it a name, I chose mc_pic and make sure to select Export for Actionscript.

pic clip

name pic clip



Create (1) button to use as your scroller.

make the button

 


Create (1) rectangle graphic symbol the size you want your window (optional).

create mask

 

Convert your graphic symbol to a movie clip (Press F8).

name window

 

Place your new movie clip on the stage on the window layer. Name the instance. I used mc_win.

place clip


Next, we'll get into a little actionscripting...
 


Glue It All Together


First, Place your scroller button on the stage on the scroller layer. Duplicate (Ctrl+C) and paste the button in place (Ctrl+Shift+V). Shift it down a few pixels. With the duplicate still selected, flip it vertically (Modify-->Transform-->Flip Vertical) and give it an instance name. I used btn_downscroll. Then give the original an instance name.




Now with the actions layer selected, open the actions panel. I like to do some initializing first (ie defining variables, etc). First, we'll create a global variable called mainTL which will give us a quick reference to the root timeline no matter what level we're on in our code. Next, we'll add the picture clip to the stage at runtime inside of the window clip using the attachMovie method of the MovieClip Object and we'll load the image in there. After that, we'll define our scrollRect property for our window movie clip.

[as]
//--------------------------------- begin initialization -----------------------\
// define global reference to this movie's root
_global.mainTL = this;
//load an image into the pic clip inside the window clip
mc_win.attachMovie("mc_pic","mc_pic", 1);
mc_win.mc_pic.attachMovie("img","img",2);
//mc_win.mc_pic.loadMovie("sample.jpg");
//create scrollable clip
mc_win.scrollRect = new flash.geom.Rectangle(0, 16, 577, 273);
//--------------------------------- end initialization -----------------------\
[/as]
What this last line basically says is that we want to add a mask (Rectangle) to the window movie clip @ an x of 0 & y of 16 whose width is "577" & height is "273". You can test the movie at this point to see the clipping effect.

Now we want to scroll the clip. So in the actions layer let's add the code for the buttons. We'll start with the "Up" scroll.

[as]//--------------------------------- code for scrollers -----------------------\
btn_upscroll.onPress = function() {
    target = mainTL.mc_win;
    var scrollUp = target.scrollRect;
    var scrollmax = target._y;
    trace(scrollmax);
    trace(scrollUp.y);
    if (scrollUp.y>scrollmax) {
        scrollUp.y -= 10;
        target.scrollRect = scrollUp;
    }
}
[/as]
Here we are basically saying that we don't want to go past the _y coordinate of the window clip (scrollmax) when we scroll up and it won't as long as the y of the scrollRect (scrollUp.y) is GREATER THAN scrollmax. The trace statements just allow us to see the change of scrollUp.y as it relates to scrollmax when we test our movie.

Now let's code the "Down" scroll. It's pretty much the same except we're just changing what our scrollmax variable will be based on.
[as]
btn_downscroll.onPress = function() {
    target = mainTL.mc_win;
    var scrollDown = target.scrollRect;
    var scrollmax = scrollDown.height;
    trace(scrollmax);
    trace(scrollDown.y);
    if (scrollDown.y<scrollmax) {
        scrollDown.y += 10;
        target.scrollRect = scrollDown;
    }
};
//--------------------------------- end scroller code -----------------------\
[/as]
Here it's the height of the scrollRect (scrollDown.height). And, since this function is the opposite of scrollUp we'll test for a y coordinate that's LESS THAN scrollmax. If we test our movie now (Ctrl+Enter) we should be scrolling away.

Well, that's it pretty much. You can use this basic example for a lot of different purposes: scrolling images loaded at runtime, scrolling movie clips attached at runtime, etc. Hopefully you can extend upon this and add different functionality. If you do, be sure to drop me a line and a link so I can check it out. Enjoy!


Hasan
hasan at marxmedia dot net