Create an Auto-Scrolling Vertical Content
October 6th, 2009 in Flash | 41 CommentsIn this lesson, let’s see how to build an auto-scrolling vertical content that scrolls from top to bottom and vice-versa according to the mouse position.
1. Create a new flash file (Actionscript 3.0) and save it as AutoScrollVerticalContent.fla. Set the frame rate to 30fps.
2. Rename “layer 1″ to “content” and on this layer put the content that you want to scroll.
Convert your content to a movie clip with registration point at the top. Give it an instance name of “content_mc”.
Center the content on the stage.
3. Create a new “actions” layer and with its first frame selected open the actions panel.
In order to scroll from top to bottom and vice-versa, we need to determine the limits inside which the content can scroll, which means that we have to determine the y coordinate limits. The schema below recaps it :
To sum up, stage.stageHeight – content-mc.height < content_mc.y < 0.
4. In the code, create the following variables :
var verticalCenter:Number = stage.stageHeight / 2; var limit:Number = stage.stageHeight - content_mc.height; var speed:Number = 0.1; var scrollY:Number = 0;
5. Next add an ENTER_FRAME event listener that will be handled by the scrollContent function.
addEventListener(Event.ENTER_FRAME, scrollContent);
6. In the scrollContent function, we set the y property of “content_mc” to its new value scrollY, that is calculated according to the mouse position relative to the stage’s center.
Finally, we check if we are still in the limits and if we’ve reached them we set the y property in order to block the content from scrolling.
7. Here’s the final code, test your movie to see it in application.
var verticalCenter:Number = stage.stageHeight / 2;
var limit:Number = stage.stageHeight - content_mc.height;
var speed:Number = 0.1;
var scrollY:Number = 0;
addEventListener(Event.ENTER_FRAME, scrollContent);
function scrollContent(e:Event):void {
scrollY = - speed * ( mouseY - verticalCenter );
content_mc.y+= scrollY;
if (content_mc.y>0) { content_mc.y= 0;}
else if (content_mc.y< limit) { content_mc.y= limit; }
}
Oct 7th, 2009
yo nice, sweet and simple,
but is it possible you create a horizontal one with scrollers that loads dynamic text/image/swf tutorial? i seen a couple normal xml galleries here and elsewhere, can’t seems to find one to suit what that I really need.
Oct 8th, 2009
Really really cool
Thx
Oct 19th, 2009
Nice.
Is there any way to do it in Actionscript 2.0?
Oct 19th, 2009
Hello – very nice! Also looking for a way in Actionscript 2.0 – can anyone help PLZ!
Nov 1st, 2009
[...] Create an Auto-Scrolling Vertical Content [...]
Nov 4th, 2009
For horizontal just do the opposite of all the Y
Nov 4th, 2009
BTW, thank you for this great tutorial. Something like this is VERY hard to find online for some reason.
Nov 6th, 2009
First of all, Great tutorial! But is it also possible to integrate a neutral position in the slider, I want to implement some text in my slider so it would be great if it is possible.
Nov 7th, 2009
I’m new to Flash and I’m having trouble adding my own images. Any advice would be appreciated.
Nov 16th, 2009
This is really cool and very easy.
But I need just a little more
can you tell me how to create a link for each image? So I can open a web site in a blank window?
Plea se give me a help, I’ve been trying to reach the code for 2 weeks and I get nothing but insomnia.
Thank you very much.
Nov 26th, 2009
[...] Create an Auto-Scrolling Vertical Content [...]
Nov 26th, 2009
Simple but usefull, thank you.
Dec 13th, 2009
This works perfect! I’ve been searching for something like this for a long time
Dec 30th, 2009
[...] Create an Auto-Scrolling Vertical Content link [...]
Dec 31st, 2009
Thank you its working for me.
But how can I make it should stop when the mouse is not on the images?
Jan 3rd, 2010
Excellent ! Simple and efficient. Thanks
Jan 14th, 2010
actionscript for horizontal movement:
var horizontalCenter:Number = stage.stageWidth / 2;
var limit:Number = stage.stageWidth – content_mc.width;
var speed:Number = 0.1;
var scrollX:Number = 0;
addEventListener(Event.ENTER_FRAME, scrollContent);
function scrollContent(e:Event):void {
scrollX = – speed * ( mouseX – horizontalCenter );
content_mc.x+= scrollX;
if (content_mc.x>0) { content_mc.x= 0;}
else if (content_mc.x< limit) { content_mc.x= limit; }
}
Jan 19th, 2010
I have inserted this behind a mask on a larger page but when my mouse moves off of the images they keep on scrolling, is there a work around for this?
Please help!!
Great tut by the waybeen looking around for this for a long time, well done.
Jan 29th, 2010
Is there a way to make the image start to scrolling up automatically when it first loads?
Feb 3rd, 2010
just wondering how to set a custom X and Y so its not the whole stage?
Feb 22nd, 2010
great work ! ! !
can we make same auto scrolling component in flex because i dont know how to work on flash.can u help me.
Mar 15th, 2010
[...] TUTORIAL Cargando … [...]
Mar 24th, 2010
I will try to use it.thanks
Apr 6th, 2010
i need the same effect in flex not even using the mouse
is it possible?
Apr 9th, 2010
AS2 version:
var verticalCenter:Number = Stage.height / 2;
var limit:Number = Stage.height – content_mc._height;
var speed:Number = 0.1;
var scrollY:Number = 0;
function scrollContent() {
scrollY = – speed * ( _ymouse – verticalCenter );
content_mc._y+= scrollY;
if (content_mc._y>0) { content_mc._y= 0;}
else if (content_mc._y< limit) { content_mc._y= limit; }
}
this.onEnterFrame = function() { scrollContent(); };
Apr 19th, 2010
[...] Create an Auto-Scrolling Vertical Content [...]
Jul 20th, 2010
This AS2 not found
AS2 version:
var verticalCenter:Number = Stage.height / 2;
var limit:Number = Stage.height – content_mc._height;
var speed:Number = 0.1;
var scrollY:Number = 0;
function scrollContent() {
scrollY = – speed * ( _ymouse – verticalCenter );
content_mc._y+= scrollY;
if (content_mc._y>0) { content_mc._y= 0;}
else if (content_mc._y< limit) { content_mc._y= limit; }
}
this.onEnterFrame = function() { scrollContent(); };
Jul 20th, 2010
the script worked for me this way
var verticalCenter:Number = Stage.height / 2;
var limit:Number = Stage.height – content_mc._height;
var speed:Number = 0.1;
var scrollY:Number = 0;
function scrollContent() {
scrollY = -speed*(_ymouse-verticalCenter);
content_mc._y+= scrollY;
if (content_mc._y>0) { content_mc._y= 0;}
else if (content_mc._y< limit) { content_mc._y= limit; }
}
this.onEnterFrame = function() { scrollContent(); };
Oct 15th, 2010
var verticalCenter:Number = hg_mask._height / 2;
var limit:Number = hg_mask._height – content_mc._height;
var speed:Number = 0.1;
var scrollY:Number = 0;
this.onEnterFrame = function() { scrollContent(); };
function scrollContent() {
scrollY = – speed * ( _ymouse – verticalCenter );
content_mc._y+= scrollY;
if (content_mc._y>0) { content_mc._y= 0;}
else if (content_mc._y< limit) { content_mc._y= limit; }
}
Oct 15th, 2010
if You are using mask then use above script it works
Feb 7th, 2011
How would you go about making each image linked to a different page?
Apr 14th, 2011
[...] Create an Auto-Scrolling Vertical Content [...]
Jun 2nd, 2011
OMG THANKS ive been looking all over for something like this
Jun 29th, 2011
Dear All,
How can i make the above scroller work in a loop. Appreciate your help guys.
God Bless
Jul 4th, 2011
its very easy and usefull. i need same easy Horizontal Auto-Scrolling Content.
Jul 12th, 2011
Hi,
I used this link for image scrolling, I want to link the image to another page, please tell me how to do it
var verticalCenter:Number = stage.stageHeight / 2;
var limit:Number = stage.stageHeight – content_mc.height;
var speed:Number = 0.05;
var scrollY:Number = 0;
addEventListener(Event.ENTER_FRAME, scrollContent);
function scrollContent(e:Event):void {
scrollY = – speed * ( mouseY – verticalCenter );
content_mc.y+= scrollY;
if (content_mc.y>0) { content_mc.y= 0;}
else if (content_mc.y< limit) { content_mc.y= limit; }
}
Jul 15th, 2011
Hey, thanks for this, However I could do with some help, I have used UILoaders to load external images into the content_mc (as I want to be able to replace these images regularily without editing the .flv each time) When I go to test I get the following errors:
Error: Error #2099: The loading object is not sufficiently loaded to provide this information.
at flash.display::LoaderInfo/get loader()
at fl.display::ProLoader/get realLoader()
at fl.display::ProLoaderInfo()
at fl.display::ProLoader()
at fl.containers::UILoader/initLoader()
at fl.containers::UILoader/load()
at fl.containers::UILoader/set source()
at AutoScrollingVerticalGallery_fla::Content_1/__setProp_Image006_Content_Layer1_0()
at AutoScrollingVerticalGallery_fla::Content_1()
at flash.display::Sprite/constructChildren()
at flash.display::Sprite()
at flash.display::MovieClip()
at AutoScrollingVerticalGallery_fla::MainTimeline()
TypeError: Error #1009: Cannot access a property or method of a null object reference.
at AutoScrollingVerticalGallery_fla::MainTimeline/frame1()
Could someone please advise?
Aug 4th, 2011
i want to scroll text automaticaly in loop in a slide show in as2 pls tell me
Aug 7th, 2011
Use This Code if you the content to scroll within a “box”
and giv a instance name of “boxclip” for the box:
var verticalCenter:Number = boxclip.y + ( boxclip.height / 2 );
var limit:Number = boxclip.height – content_mc.height + boxclip.y;
var speed:Number = 0.1;
var scrollY:Number = 0;
addEventListener(Event.ENTER_FRAME, scrollContent);
function scrollContent(e:Event):void {
scrollY = – speed * ( mouseY – verticalCenter );
content_mc.y+= scrollY;
if (content_mc.y>boxclip.y) { content_mc.y= boxclip.y;}
else if (content_mc.y< limit) { content_mc.y= limit; }
}
Dec 16th, 2011
Thanks for someone finally putting up some code that is short and straight to the point and easy for me to adapt to my project without having to weed through tons of crap to make it work! Perfect!
-Scott
Dec 27th, 2011
Thanks all
all Works Great
But if U are a beginner than
do not copy and paste the script in your application
Just write into it
than works great