;)
Flash ScrollBar in ActionScript 3.0
Posted by admin in ActionScript 3, Flash, Tutorials
This is a quick tutorial to flashmo scrollbar movieclip which is built on ActionScript 3.0 in Flash CS3. You can apply this scrollbar in any Flash websites. You need only 3 movieclips for scrolling. Below example is based on flashmo 144 scrollbar source file.
Give the instance names as below.
1. ScrollBar movieclip (instance name: flashmo_sb) is to attach to the content and content area.
2. content movieclip (instance name: flashmo_content) is the content to scroll.
3. content area movieclip (instance name: content_area) is a mask for content.
4. ease value for scroller easing which range is from 0.01 (slowest) to 1.00 (fastest).
Then, put below line of codes in timeline actions layer.
flashmo_sb.scrolling(“flashmo_content”, “content_area”, 0.45);
You can also apply this scrollbar in dynamic content which loads content from an external XML file. You may take a look at flashmo 145 garden flash template latest news section for an example.
Hi,flashmo 144 scrollbar demo eplain everything.Very good article.
very good article..and demo is very impressive
thanks, now i can finish this clients website finally!!
i find scroll bar content in blog who are advise site to read article. thanks
Very good! Very simple!
Good job!
I’m student, beginer in AS3. Tutorial is very usefull. Thanks.
I am trying to integrate the flash scrollbar into the homepage of the flashmo_079_classic template. I am pretty new to flash, and am having trouble getting it functioning. I copied the actionscript code over, and then copied the movie clips over, but it doesn’t seem to work – I am getting a green box with the content behind it, and the scroller doesn’t work… any suggestions (or more detailed directions) would be really nice! Thanks
Hi Flash Beginner,
This scrollbar works for AS3 templates only but flashmo_079_classic was built on AS2.
Thanks so much! Any suggestions on a scrollboar built in AS2, or a way around this problem?
Flash Beginner, you may take a look at http://www.flashmo.com/preview/flashmo_064_design for AS2 scrollbar.
Thanks for the advice. One more question – since I am working with the flashmo_079_classic template, is there an easy way to switch the scroll boxes so that they show content entered in Flash, rather than fed in from the XML document? I am interested in a way to format the content of the scroller box to my liking, and don’t need the XML feature. Thanks!
Wow only 1 line of AS? Amazing stuff thanks Flashmo.
its very good getting knowledge of flash but i want to tell you some things is that you the small examples in with a flash file to download
Hi, you code is very very useful! i have only one question about it. How do i remove the “read the full story” buttons from the code
Another question, what kind of changes would i have to make if i wanted to use xml codes like and if i whanted to add one more title to the script
Great tutorial, is it possible to make it a horizontal without flipping everthing?
I WANT to integrate the flash scrollbar into the homepage of the flashmo_120_artwork template. , Admin can you help me
Hi shahram, you need to copy and paste the scrollbar from actionscript 2.0 templates such as http://www.flashmo.com/preview/flashmo_116_dream
thank you admin you are a great man.very cool
I am trying to use the flashmo 145 garden flash template as my basis for applying this scroll bar to my RSS feed data. I copied everything over and change the properties to match my existing design… everthing works fine while using the provided XML data file (flashmo_143_news_list.xml) but when I link to my RSS feed (test_feed.xml), everything disappears… in the code, I changed “flashmo_xml.item[i].title.toString()” to “flashmo_xml.rss.channel.item[i].title.toString()” to accomodate for the changes in the xml structure for my feed… My RSS feed was created in Feeder 1.57 and does not have a “target” tag (but does have a I do have pubDate)… I haven’t gotten far enough along to edit your code so that these feilds will be include in my final output, so it shouldn’t be any alteration error… unless it is doing this because it is not finding a “target” tag in my XML file? Can you help? THANK YOU!!! THANK YOU!!!
Hi
I have a question
I wish to add scrolling with my wheel mouse
How can do this
Ok man, great job!
I have made a scroll class too. Verify in http://blog.ramonfritsch.com/t/scroll
cheers
You guys are my superheros!
Hello, I need to change this code below for the button that makes the scroll, horizontal floor?
var sd:Number;
var sr:Number;
var cd:Number;
var cr:Number;
var new_y:Number;
var drag_area:Rectangle;
var flashmo_content:MovieClip;
var flashmo_content_area:MovieClip;
var scrolling_speed:Number; // 0.00 to 1.00
function scrolling( ct:String, ct_area:String, speed:Number ):void
{
scrolling_speed = speed;
if( scrolling_speed 1 ) scrolling_speed = 0.50;
flashmo_content = parent[ct];
flashmo_content_area = parent[ct_area];
flashmo_content.mask = flashmo_content_area;
flashmo_content.x = flashmo_content_area.x;
flashmo_content.y = flashmo_content_area.y;
flashmo_scroller.x = flashmo_scrollable_area.x;
flashmo_scroller.y = flashmo_scrollable_area.y;
sr = flashmo_content_area.width / flashmo_content.width;
//flashmo_scroller.height = flashmo_scrollable_area.height * sr;
sd = flashmo_scrollable_area.width – flashmo_scroller.width;
cd = flashmo_content.width – flashmo_content_area.width;
cr = cd / sd * 1.01;
drag_area = new Rectangle(0, 0, 0, flashmo_scrollable_area.width – flashmo_scroller.width);
if ( flashmo_content.width <= flashmo_content_area.width )
{
flashmo_scroller.visible = flashmo_scrollable_area.visible = false;
}else{
flashmo_scroller.visible = flashmo_scrollable_area.visible = true;
}
flashmo_scroller.addEventListener( MouseEvent.MOUSE_DOWN, scroller_drag );
flashmo_scroller.addEventListener( MouseEvent.MOUSE_UP, scroller_drop );
this.addEventListener( Event.ENTER_FRAME, on_scroll );
}
function scroller_drag( me:MouseEvent ):void
{
me.target.startDrag(false, drag_area);
stage.addEventListener(MouseEvent.MOUSE_UP, up);
}
function scroller_drop( me:MouseEvent ):void
{
me.target.stopDrag();
stage.removeEventListener(MouseEvent.MOUSE_UP, up);
}
function up( me:MouseEvent ):void
{
flashmo_scroller.stopDrag();
}
function on_scroll( e:Event ):void
{
new_y = flashmo_content_area.x + flashmo_scrollable_area.x * cr – flashmo_scroller.x * cr;
flashmo_content.x += ( new_y – flashmo_content.x ) * scrolling_speed;
}
i don’t understand what the “parent[ct]” means, can anyone explain it? thx and happy new year
What would I do to the code to use this as a horizontal scroll?
hi there:
thanks so much for sharing this code. I have try a bunch of stuff but can’t get the scroll bar to work horizontally. please help.
thanks!
c
Really nice scrollbar!
To bad it doesn’t work with pixelfonts!
Niklas
To horizontal scroll:
You have to change all “height” to “width” and make sure that you are drawing the scrollbar from the beginning in horizontal because just rotating doesn’t change anything.
On the end of the code you have to also change all the “y” to “x”.
Most important: Don’t rotate anything, draw yourself and just copy the code and names of the movie clips from the source file you can download up above.
Cool scrollbar and the shared code, but I suggest that it’s better for AS3 to put the code in .as, not in the frame.
@Travis:
A few days agp, I got a post about horizontal scroll:
http://wordpress.mikeland.us/2010/02/23/simple-horizontal-scrollbar-as3/
I’m glad if this’s the one you want.
I NEED HELP GUYS – I am doing a website for my year 12 english project and i dont know how to put additional SCROLL BARS in
i am using Flashmo template Nature 171
http://www.flashmo.com/preview/flashmo_171_nature
Please help guys the assignment it due in a couple weeks and i have struck a brick wall!!!
The scrollbar source code and clips are very well written. Simple and beautiful. Thanks a lot!