Flex | Flash | Air | AS3
Create an Auto-Scrolling Vertical Content
October 6th, 2009 in FlashIn 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.