Cool MovieClip Scroller
February 11, 2009 by: smonteThis tutorial will teach you how to create your own movie clip scroller. We will use ActionScript 3 for the interaction and functionality as usual. The Flash movie can be very easily modified to fit your needs!
Note: You will need TweenMax to complete this tutorial.
Setting up the environment
1. Create a new ActionScript 3 Flash movie of size 300×300.
2. Draw a rectangle of size 200×250. This will act as a mask for the content.
3. Convert the rectangle to a movie clip. Set the registration point to the top left corner.
4. Give the movie clip an instance name of myMask. Position it somewhere on the left side of the stage. Our scrollbar will be on the right side…
4. Draw a line of size 1×250 on the right side of the stage.
5. Next, draw a circle of size 20×20. Convert it to a movie clip. Set the registration point to the center.
6. Give the circle an instance name of scrollMC.
7. Snap the circle to the top of the line that we drew earlier.
8. Next we want to make the content. You can freely create your own content here! The only restriction is that you must make it 200 pixels wide. I inserted some static text and an image. My content ended up being 940 pixels high.
9. Convert all the content stuff to a single movie clip. Set the registration point to the top left corner.
10. Give the content an instance name of myContent.
11. We are done with setting up the Flash movie. Now we can move to ActionScript 3. Your stage should look something like the image below (my content is outside the stage).
Moving to ActionScript 3
12. Create a layer for ActionScript and type the following.
//Import TweenMax and the plugin for the blur filter import gs.TweenMax; import gs.plugins.BlurFilterPlugin; //Save the content's and mask's height. //Assign your own content height here!! var CONTENT_HEIGHT:Number = 940; var MASK_HEIGHT:Number = 250; //We want to know what was the previous y coordinate of the content (for the animation) var oldY:Number = myContent.y; //Position the content on the top left corner of the mask myContent.x = myMask.x; myContent.y = myMask.y; //Set the mask to our content myContent.mask = myMask; //Create a rectangle that will act as the bounds to the scrollMC. //This way the scrollMC can only be dragged along the line. var bounds:Rectangle = new Rectangle(scrollMC.x,scrollMC.y,0,250); //We want to know when the user is scrolling var scrolling:Boolean = false; //Listen when the user is holding the mouse down on the scrollMC scrollMC.addEventListener(MouseEvent.MOUSE_DOWN, startScroll); //Listen when the user releases the mouse button stage.addEventListener(MouseEvent.MOUSE_UP, stopScroll); //This function is called when the user is dragging the scrollMC function startScroll(e:Event):void { //Set scrolling to true scrolling = true; //Start dragging the scrollMC scrollMC.startDrag(false,bounds); } //This function is called when the user stops dragging the scrollMC function stopScroll(e:Event):void { //Set scrolling to false scrolling = false; //Stop the drag scrollMC.stopDrag(); } //Add ENTER_FRAME to animate the scroll addEventListener(Event.ENTER_FRAME, enterHandler); //This function is called in each frame function enterHandler(e:Event):void { //Check if we are scrolling if (scrolling == true) { //Calculate the distance how far the scrollMC is from the top var distance:Number = Math.round(scrollMC.y - bounds.y); //Calculate the percentage of the distance from the line height. //So when the scrollMC is on top, percentage is 0 and when its //at the bottom the percentage is 1. var percentage:Number = distance / MASK_HEIGHT; //Save the old y coordinate oldY = myContent.y; //Calculate a new y target coordinate for the content. //We subtract the mask's height from the contentHeight. //Otherwise the content would move too far up when we scroll down. //Remove the subraction to see for yourself! var targetY:Number = -((CONTENT_HEIGHT - MASK_HEIGHT) * percentage) + myMask.y; //We only want to animate the scroll if the old y is different from the new y. //In our movie we animate the scroll if the difference is bigger than 5 pixels. if (Math.abs(oldY - targetY) > 5) { //Tween the content to the new location. //Call the function tweenFinished() when the tween is complete. TweenMax.to(myContent, 0.3, {y: targetY, blurFilter:{blurX:22, blurY:22}, onComplete: tweenFinished}); } } } //This function is called when the tween is finished function tweenFinished():void { //Tween the content back to "normal" (= remove blur) TweenMax.to(myContent, 0.3, {blurFilter:{blurX:0, blurY:0}}); }
13. You are done, test your movie! There should be more than enough comments to let you know what we are doing in each stage. If you have some questions concerning the tutorial, please post them in the forum.
when I scroll down my image disappear. what sholud I do
How can you set this up so that the textfield adjust with the amount of text that is being imported threw xml?
is the source available? are we to draw out everything only to test this? thanks
I don’t know what tweenmax is, I followed all the steps, so maybe that’s the problem. I downloaded and unzipped the \greensock-tweening-platform-as3\ file. What do I do with that file now? Also, it would be a tremendous help if you could upload the .fla for a working scrollbar.
Many thanks.
Hi… thanks for the tutorial,,
My question is I’ve install the tweenmax in flash but when I import the code to As3 it gives me a syntax problem why?…
can someone help me out…Please……..
Describe the error maybe ?
La belleza de su trabajo
Hey, thanks for the info!
I have now updated the code. The problem was:
var CONTENT_HEIGHT:Number = myContent.height;
That returns the wrong height (don’t asks me why!). I changed it so that I write the height myself. In this case 940.
Second, the target calculation was not perfectly implemented. I have now added the mask’s y coordinate to the equation since the content & mask are not positioned at (0,0). So when the scrollMC is at the top, we position the content at the same y coordinate as the mask’s.
Sorry for the inconvinience.
Bleh, now the code is perfect, can’t even argue about it !
Thanks for this.
- Kemipso
YABADABIDOOH !
Found what is wrong, only have to figure out HOW to fix it now ^.^ (and I have an idea :p)
Your tutorial requires the mask to have the y coordinate set to 0 on the stage, if the mask isn’t on the top of it, the scrolling won’t work properly.
So, how to fix that… *investigates*
- Kemipso
It’s all coming from a little error in the calculation of the target.
Original:
var targetY:Number = -((CONTENT_HEIGHT - MASK_HEIGHT) * percentage);
Modified:
var targetY:Number = -((CONTENT_HEIGHT - MASK_HEIGHT) * percentage)+myMask.y;
Simply have to take into account the y position of the mask.
- Kemipso
Erh.. There’s a typo, Mr Admin !
//Save the content’s and mask’s height
var CONTENT_HEIGHT:Number = myContent.height;
var MASK_HEIGHT:Number = myMask.height;
//Save the mask’s height
The last comment //Save the mask’s height should have been deleted, shouldn’t it ?
And thanks for the tutorial, I’m trying to figure out all that I can do with TweenMax now ^.^
- Kemipso
Something more : Your scrolling is imperfect : activate the scrolling once.
Now, scroll back to the top :
A part of the content can’t be seen anymore, it doesn’t scroll all the way back to the top !
Weiiiiiiird
*tries to figure out what’s wrong*
- Kemipso