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="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

    • Recent Posts

      Short Head

      Use zipf's short head to tune your website rather than redesign the whole thing. To make a website successful it needs to meet the needs of the users. Find out what those needs are by using the short head philosophy to equate most searched things as the biggest needs of the users. Use personas to [...]

      Img Set?

      Great article at a list apart discusing the state of the industry regarding responsive images. This picks apart the set attribute of the img element from a surprisingly objective view coming from someone so close to the picture element. Insightful discussion about the principle behind the proposals than the actual solution too. If the working [...]

      Triudo

      A mesmerizing animated triangle-ish shape form. Embedded Link triduo triduo Tweet

      Git – the paradigm shift

      A great developer story about the differences on what Git is vs other version control and what Git is not. This is how we should learn it. I heard over and over that it was distributed, but never grasped what that meant, so here are a few links and explanations that will help unlearn version [...]

      Tweening Lib comes to Javascript!

      I'm very excited to share the news that the tween library from GreenSock (hands down the best tweening library I used in flash) is not ported for use in javascript! This will be great! I missed that simple syntax from as3 when animating javascript, and now I can have my cake and eat it too. [...]

      Responsive CSS Tricks

      Here are a few useful css tricks to remember when building responsive design sites from web designer wall Embedded Link 5 Useful CSS Tricks for Responsive Design Making the design to be responsive is very easy as shown in my Responsive Design in 3 Steps tutorial, but maintaining the elements to look aesthetically balanced on [...]

      Picture element of srcset attribute?

      Bruce details the reasons and story behind the srcset attribute which is now introduced as an alternative to the picture element. Some aspects of the attribute are nice (like the fact that it's an attribute and not a new element, so it's creating up new elements with for problems. It's adapting currently used elements to [...]

      SVG Preloader with Raphael JS

      Here's a very creative use of using a newly available technology. Using svg graphics which are very lightweight, for a website preloader. I like the animation used as well. Embedded Link Make a stylish preloader with SVG | Tutorial | .net magazine Many sites neglect users with slow connections. Ian Culshaw explains how to use [...]

      CSS3 Button/Icon set

      I've been secretly hoping to see a few of these pop up once the whole icon font idea spread through the nets. I really like this idea and it's a very nice implementation too! I only see some quality issues on a couple of the icons (such as youtube), but it's awesome and I hope [...]

      Abstract visuals from satellites amaze me

      Abstract visuals from satellites amaze me Embedded Link Crop Circles in the Desert : Image of the Day Over the course of 25 years, farms have sprouted in the Arabian Desert, fueled by deep and old groundwater. Tweet

    • Recent Comments

      Bruce Brownlee

      Bruce Brownlee

      Ah IE6. I'd have 2 more years of sleep without IE6. Margin doubling, no properties,...
      versaena

      versaena

      how to give color at runtime…… thank you
      Mobile Websites

      Mobile Websites

      I disagree, mobile websites are the future – desktop websites and mobile websites...
      Matt Fasick

      Matt Fasick

      That's cool. I like the ripple effect as well.
      Nico

      Nico

      hi! really great job guy! very impressive.. just a question… do u have a solution to do a refresh...
      Evan Mullins

      Evan Mullins

      Agreed! I've just seen some people get pretty heated about separating all functionality...