Dynamic Scrolling Buttons

Get Adobe Flash player


Here’s an example. A dynamic scroll, that changes speed according to your mouse. Here is the code for it as well, I tried to keep it pretty generic, just put this onto a movie clip I named “scroll.” And change the variables to fit your needs. Enjoy, and let me know what you make with it.

Actionscript (as2)

onClipEvent(load) {
//variables
scrollMovieClipW = this._width - Stage.width;
leftScrollMargin = 175;
rightScrollMargin = 275;
verticalScrollMargin = 250;
//Note: The lower acceleration value the faster the scroll will be.
acceleration = 3;
}

onClipEvent (enterFrame) {
//to move left
//if mouse is right of 0 (left edge)
if (_root._xmouse >= 0 &&
//if mouse is left of left scroll margin
_root._xmouse <= leftScrollMargin &&
//if mouse is vertically below green line (over the scroll movie clip)
_root._ymouse >= verticalScrollMargin &&
//if the scroll movie clip can still scroll further
_root.scroll._x <= 0) {
this._x -= (_root._xmouse - leftScrollMargin) / acceleration;
}

//to move right
else if (_root._xmouse >= rightScrollMargin &&
_root._xmouse <= Stage.width &&
_root._ymouse >= verticalScrollMargin &&
_root.scroll._x >= -scrollMovieClipW) {
//move right
this._x -= (_root._xmouse - rightScrollMargin) / acceleration;
}
}

Source

Download the example file: dynamicScrollingButtons.fla

This entry was posted in portfolio, tutorial and tagged , , , , , , , . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

13 Comments

  1. Posted January 8, 2008 at 5:32 pm | Permalink

    http://www.beedigital.net/blog/?p=1755

    This page has been featured on Bee Digital

  2. tourmz
    Posted March 6, 2008 at 7:05 pm | Permalink

    is there someway to make start at one again when it reaches ten PLEASE HELP…lol…i actually need to load images dynamically instead of numbers but for now this could really work well i use a filmstrip that i create i photoshop instead of the colored bar…

  3. Posted March 11, 2008 at 1:23 pm | Permalink

    Yes totally, there is a way to do that. I’d start by making it dynamic… Then you can wrap the buttons around to the other side once they are off the stage. Or you can put two instances of the ‘colored bar’ side by side and have them wrap around and connect at the seams. It’s a lot like the Scrolling Link List I made, that one is vertical though, I made it dynamic and they wrap around to the end of the list as soon as they are off stage.

  4. Posted May 13, 2008 at 9:56 pm | Permalink

    Thank you for sharing, I’ve stared at the actionscript for hours. How do I get my clip to stop scrolling off the stage? Yours stops on a dime, mine scrolls and scrolls…..hanging on by my fingernails….. help me…..

  5. Posted May 14, 2008 at 6:02 am | Permalink

    Thanks for the code, I’ve been looking for it for a long time!! Unfortunately in my project there’s some problem, similar to Kent, last comment. It would be nice if you can help us.

    Thanxxxx!!!!

  6. Posted May 14, 2008 at 11:57 am | Permalink

    @Kent &
    @Ako,
    look closely at lines 19 – 20 and 28 of the code above and notice the scrollMovieClipW var in line 3. That’s a good hint…
    It looks at the width of the scrolling clip and checks if it’s scrolled that far before letting it move farther. To go left it’s 0 and right it’s -width.

    Not much more I can do without more explanation or actionscript samples… Good luck!

  7. Posted May 17, 2008 at 9:55 pm | Permalink

    I’ve got it. (smacks self in forehead) A simple oversight, so painfully obvious once I walked away for a few days. I never named the instance of the symbol in the symbol’s properties so there was no way for it to check itself against the stage size. Thanks Evan, you are a Flash god.

  8. Santana
    Posted July 5, 2008 at 3:38 pm | Permalink

    How can I make the scroll go up and down, instead of left to right?

  9. Posted July 7, 2008 at 7:22 am | Permalink

    dear friends,

    how to get html pages into dynamic text tool…kindly answer me

  10. Posted December 4, 2008 at 2:56 pm | Permalink

    Hi

    Nice work done by you.
    Thankx

  11. Hbyrd
    Posted November 25, 2009 at 1:24 am | Permalink

    OMG, I totally forgot the instance name as well. Working good… my buttons are off, but that’s probably a silly mistake on my part. I will update with link to site when I am done, but that’ll be a while.

  12. Dan
    Posted December 16, 2009 at 8:45 am | Permalink

    Hi,
    Thank you for this, works a treat. I want to be able to make it work on a vertical axis though. What do I change in the AS to make this work?

    Thank you

    Dan

  13. Posted February 10, 2010 at 7:06 pm | Permalink

    hey..i was wanting to know how to make multiple instances of this clip. I know that you can just drag more instances of it to the stage but my site is going to have multiple galleries and i just want to change the instance name to something else. When i change the instance name and look in the actionscript i try changing the “scrollMovieClipW” to whatever i named the other one and i get the same problem as kent and ako…any advice?

Post a Comment

Your email is never published nor shared. 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>

  • Recent Posts

    WordCamp Presentation Slides: From Photoshop PSD to WordPress Theme

    Here are my slides for my WordCamp Atlanta presentation, From PSD to WordPress Theme: Under the skin: PSD to WP on Prezi Tweet

    wordpress_wordcamp_atlanta_2012_feb_2_3

    Speaker at WordCamp Atlanta 2012

    I’m proud to announce that I’ve been asked to speak at WordCamp Atlanta this year! WordCamp will be held this weekend and hosted at SCAD Atlanta! My session is titled: From PSD to WordPress Theme: Under the skin. Obviously, I’ll be focusing on themes. We’ll look at what they are, what they can do, how [...]

    Adobe-like Arrow Headers | CSS-Tricks

    Zero images is something that always gets me excited, I really like these arrow button styles! I like the css used more and the hover/active states too, nice css3 transitions. via Adobe-like Arrow Headers | CSS-Tricks. Tweet

    snow

    Snow via Javascript & Canvas – Tis the Season

    After playing with the settings in my experiments I found a few settings I liked and wanted to develop further. The first was snow! An added bonus I was able to work on a project just for the holidays and used much of this code in it! I looked around the web and saw a [...]

  • Recent Shares

    bio

    An Event Apart Notes: Ethan Marcotte, Responsive Web Design

    Ethan Marcotte has become the father of Responsive Web Design and spent this whole day focused on principles, techniques, gotchas, examples, … all about building and how to build responsive sites. With a sprinkle of mobile first. For Ethan, it all started with this article: http://www.alistapart.com/articles/dao/ Think of architecture, the whole design phase is established [...]

    sammyj

    An Event Apart Notes: Ethan Marcotte, Rolling Up Our Responsive Sleeves

    Henry Adams (Descendant of 2 presidents: great-grandson to John Adams and grandson to John Quincy Adams). He lived between the civil war and world war 1. He witnessed the industrial revolution. Chaos was the law of nature, Order was the dream of man Samuel Johnson – funniest man in the 17th Century… Responsive Design: 1. [...]

    Webcomm_Montreal

    An Event Apart Notes: Jared Spool, The Curious Properties of Intuitive Web Pages

    Senseless waste of asterisks… Avis used an asterisk to denote optional fields. This means that there is a lot of baggage that comes with an asterixk. Somewhere this symbol got meaning, it’s not in the bible! We can control when something goes from unintuitive to intuitive. A design is intuitive (although technically and grammatically speaking [...]

    untitled-158-2

    An Event Apart Notes: Marco Arment, Bridging the App Gap

    The iPhone changed our industry in 2007: first mobile to have a desktop class web browser and it made people start using their mobile phones as computers! All apps other than apple provided ones were web browser apps. Most of the first apps were branded web browsers. No real difference between using mobile site or [...]

  • Recent Comments

    Lori Newman

    Lori Newman

    Just wanted to thank you for your presentation. It was extremely informative and just what I...
    Karl

    Karl

    I have been using for some time this nice Banner, from developer FX. They have a really nice Live...
    Karl

    Karl

    Thank you for this wonderful link… recommend it! Fast, simple, easy… :-)
    Gabriel

    Gabriel

    Hi Valerie, I don’t know if you are still following this post, but I tried seeing if it is...
    avinash

    avinash

    Hi Evan, I am using the same code and trying it on chrome/firefox it is not working on neither...
    Matt

    Matt

    I needed to store url variables from advertising tracking servers – this method works like a...