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.
Related tutorials:
Comments
27 Responses to “MovieClip Scroller”Leave a Reply
You must be logged in to post a comment.
Hey there, I keep getting an error message; 5001: the name of package ‘com.greensock’ does not reflect the location of this file. Please change the package definition’s name nside this file or move file. it then describes the file location so 8/8/greensock-tweening-plaform-as3/com/greensock/TweenMax.as
any ideas where i should move this file to?
Thk you!
Finally i got to do a horizontal scollbar!
I get this error when i publish:
TypeError: Error #1009: Cannot access a property or method of a null object reference.
at GuestbookMC/frame1()
Is it beacue the GuestbookMC is taken dynamicly from the library, when its needen on stage?
(exported for actionscript)
if this is the problem, how can i solve this??
worked it out…
i think im doin everything right.. but i guess im not.. i put the folder inside my work file…. but i get errors :
1172: Definition gs:TweenMax could not be found.
Hey,
I am using this on a site but have separate scollers for multiple clips in a movie.
I am new to ActionScript and Flash, and I am getting this error: TypeError: Error #1009: Cannot access a property or method of a null object reference.
at jessicaclucas_fla::MainTimeline/stopResumescroll()
I have several different clips in one movie that have scrolling content. When I click a button to move to a different clip that doesn’t have a certain scroll, it gives me this error. I cannot figure out how to fix this. You can see the site I am working on: http://www.jessicaclucas.com. I would really appreciate some help! Thank you in advance. Is there any way I can say only use this function if the movie clip is on the stage? Here is the code for one of the clips:
//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 RESUMECONTENT_HEIGHT:Number = 1500;
var RESUME_HEIGHT:Number = 450;
//We want to know what was the previous y coordinate of the content (for the animation)
var oldResumeY:Number = myResumecontent.y;
//Position the content on the top left corner of the mask
myResumecontent.x = myResume.x;
myResumecontent.y = myResume.y;
//Set the mask to our content
myResumecontent.mask = myResume;
//Create a rectangle that will act as the Resumebounds to the scrollMC.
//This way the scrollMC can only be dragged along the line.
var Resumebounds:Rectangle = new Rectangle(resumescrollMC.x,resumescrollMC.y,0,450);
//We want to know when the user is Resumescrolling
var Resumescrolling:Boolean = false;
//Listen when the user is holding the mouse down on the scrollMC
resumescrollMC.addEventListener(MouseEvent.MOUSE_DOWN, startResumescroll);
//Listen when the user releases the mouse button
stage.addEventListener(MouseEvent.MOUSE_UP, stopResumescroll);
//This function is called when the user is dragging the scrollMC
function startResumescroll(e:Event):void {
//Set Resumescrolling to true
Resumescrolling = true;
//Start dragging the scrollMC
resumescrollMC.startDrag(false,Resumebounds);
}
//This function is called when the user stops dragging the scrollMC
function stopResumescroll(e:Event):void {
//Set Resumescrolling to false
Resumescrolling = false;
//Stop the drag
resumescrollMC.stopDrag();
}
//Add ENTER_FRAME to animate the scroll
addEventListener(Event.ENTER_FRAME, enterResumeHandler);
//This function is called in each frame
function enterResumeHandler(e:Event):void {
//Check if we are Resumescrolling
if (Resumescrolling == true) {
//Calculate the distance how far the scrollMC is from the top
var distance:Number = Math.round(resumescrollMC.y – Resumebounds.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 / RESUME_HEIGHT;
//Save the old y coordinate
oldResumeY = myResumecontent.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 = -((RESUMECONTENT_HEIGHT – RESUME_HEIGHT) * percentage) + myResume.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(oldResumeY – targetY) > 5) {
//Tween the content to the new location.
//Call the function ResumetweenFinished() when the tween is complete.
TweenMax.to(myResumecontent, 0.3, {y: targetY, blurFilter:{blurX:22, blurY:22}, onComplete: ResumetweenFinished});
}
}
}
//This function is called when the tween is finished
function ResumetweenFinished():void {
//Tween the content back to “normal” (= remove blur)
TweenMax.to(myResumecontent, 0.3, {blurFilter:{blurX:0, blurY:0}});
}
Bu kodları denemek için indirebilmemiz iyi olurdu
I found tutorials.flashmymind.com very informative. The article is professionally written and I feel like the author knows the subject very well. tutorials.flashmymind.com keep it that way.
Hello, thanks very much for the source, it worked great, exept that I tried to load it as child trough a loader class, and there it’s no longer working, it’s probably my mistake but I would really like to figure it out…
thanks again
Ed
Just download TweenMax (link at top of page) and dump it into the same folder as the .fla you’re trying to put the scrolling text in. It will automatically import it and you shouldn’t have to change any of those functions in the actionscript.
Thank you very much! This is much better than using a dynamic textfield with htmlText. At least for styling it.
I double check that all my symbols were given the correct instance name, however it says that scrollMC, myContent and myMask have an access of an undefined property. What did I do wrong?
This is perfect!! I’ve been trying to figure this out for ages…
Could someone please post a simple way of converting this to a horizontal scroll, though??
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?
If you preload the movie than you can get the height of a mc that wraps the xml imported textfield. This wrapper can be contentMC. then set CONTENT_HEIGHT = contentMC.height; I got this off my head right now, hope it helps
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