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:

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.

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.

Create (1) button to use as your scroller.

 

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

 

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

 

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

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

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