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.

View all articles by Hasan Otuome


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.

//--------------------------------- 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 -----------------------\

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.

//--------------------------------- 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;
     }
 }

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. 

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 -----------------------\

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