Create an Auto-Scrolling Vertical Content

Create an Auto-Scrolling Vertical Content

In 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.

View DemoDownload Source

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 :

Screenshot

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

50 thoughts on “Create an Auto-Scrolling Vertical Content

  1. Nick

    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.

  2. Pingback: 45+ Advanced Adobe Flash Actionscript Trainings | Master Design

  3. Matt

    BTW, thank you for this great tutorial. Something like this is VERY hard to find online for some reason.

  4. Remco

    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.

  5. Adilson Vicnete

    This is really cool and very easy.

    But I need just a little more :P 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.

  6. Pingback: Advanced Adobe Flash Actionscript Trainings « Flash Criminals

  7. Pingback: The Best of 2009 in Flash Web Design - Flash Web Design and Design Photography | DesignOra

  8. Juliette

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

  9. Aaron

    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.

  10. flexbeginner

    great work ! ! !
    can we make same auto scrolling component in flex because i dont know how to work on flash.can u help me.

  11. Pingback: Crear un Auto-Scrolling(Auto-desplazamiento) vertical de Contenido | Mailing Factory

  12. FLASH AS2

    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(); };

  13. Pingback: Free I Share 分享资源 分享快乐 » Blog Archive » 45个高级Flash Actionscript应用

  14. Andrew Arias

    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(); };

  15. Andrew Arias

    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(); };

  16. Bhawani Singh Bhati

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

  17. Pingback: 45+ Advanced Adobe Flash Actionscript Trainings - Flash24h.com | Thế giới Flash của bạn!

  18. Emran Naziri

    Dear All,

    How can i make the above scroller work in a loop. Appreciate your help guys.

    God Bless

  19. Rupali

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

  20. Arron M

    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?

  21. MaHeN

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

  22. Scotty G the Webmaster

    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

  23. LastArcher

    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

  24. Jordan

    Hi All!
    Hopefully i get a response to this, but here it goes anyway. i am trying to cnvert this code from AS3 to AS2. i have tried using Noth Flash AS2′s and Andrews version. Currwntly i am getting no compiler errors, but, it does not scroll. my creent code is below. it does work when i am using AS3 and am using the original AS3 code, however im trying to load this into another file i have made already in as2. and alas, you cannot put AS3 SWF’s into AS2 SWf’s. please, as i am on a time crunch, i would love to get an answer ASAP. If i can figure this problem out before an answer is given i will post my findings.

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

  25. Pingback: 45+ Advanced Tutorials of Adobe Flash ActionScript « CSS Tips

  26. T-Money

    Hey guys, does anyone know the code to make the content stop scrolling if your mouse of the movieclip?

  27. MRDS

    Hey guys, does anyone know the code to make the content stop scrolling if your mouse off the movieclip?

  28. rick

    nice post !!

    just wondering did anybody find out how to do this with AS2? coz i tried all the script from your comment, but it doesnt work..

    anyone can help? maybe upload the source file somewhere, since it will easier for me to find my mistakes..

    thx

  29. Bristol

    For AS2 version You need make two MCs on stage: scrollMC (with data) and maskMC.
    maskMC is the mask of scrollMC. and paste this code in frame:

    var ySpeed:Number = 2;
    var mouseY:Number;
    var midPoint:Number = maskMC._y+maskMC._height/2;
    var minY:Number = maskMC._y;
    var maxY:Number = -(scrollMC._height-(maskMC._y+maskMC._height));
    scrollMC.onEnterFrame = function() {
    mouseY = _level0._ymouse-midPoint;
    this._y += -mouseY/ySpeed;
    if (this._y>=minY) {
    this._y = minY;
    } else if (this._y<=maxY) {
    this._y = maxY;
    }
    };

  30. Dillon

    This code works on mouseover instead of entire screen:

    var verticalCenter:Number = stage.stageHeight / 4;
    var limit:Number = stage.stageHeight – content_mc.height;
    var speed:Number = 0.1;
    var scrollY:Number = 0;

    content_mc.addEventListener(MouseEvent.MOUSE_OVER,moveF);
    content_mc.addEventListener(MouseEvent.MOUSE_OUT,stoppingF);

    function moveF(e:MouseEvent) {
    stage.addEventListener(Event.ENTER_FRAME, movingF);
    }

    function movingF(e:Event) {
    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; }
    }

    function stoppingF(e:MouseEvent) {
    stage.removeEventListener(Event.ENTER_FRAME, movingF);
    }

  31. Dillon

    also adjust this line

    var verticalCenter:Number = stage.stageHeight / 4;

    to where you want the division of up and down to be.
    For instance if it was /2 then the division between up and down would be the middle of the stage
    but since my movie clip was in the top half i set the scrolling centre to half of that which is /4

  32. Dillon

    Just found this

    var verticalCenter:Number = container_mc.height / 2;

    so the complete code would be:

    var verticalCenter:Number = container_mc.height / 2;
    var limit:Number = stage.stageHeight – content_mc.height;
    var speed:Number = 0.1;
    var scrollY:Number = 0;

    content_mc.addEventListener(MouseEvent.MOUSE_OVER,moveF);
    content_mc.addEventListener(MouseEvent.MOUSE_OUT,stoppingF);

    function moveF(e:MouseEvent) {
    stage.addEventListener(Event.ENTER_FRAME, movingF);
    }

    function movingF(e:Event) {
    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; }
    }

    function stoppingF(e:MouseEvent) {
    stage.removeEventListener(Event.ENTER_FRAME, movingF);
    }

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>