AS3: Double AxisScroller

View Preview
Download Example Files
Download AxisScroller

I've been asked a couple of times to show a demonstration of the AxisScroller being used on both the X and Y axis. Here is an example of it in AS3. For some reason I haven't been able to replicate this behavior with the AS2 version but I'll continue to look into it further and see if I can come up with a solution. If anyone else wants to take a shot at it, by all means please do so.

Actionscript:
  1. import flash.events.MouseEvent;
  2. import fl.transitions.Tween;
  3. import fl.transitions.easing.*;
  4. import com.reintroducing.ui.AxisScroller;
  5.  
  6. stop();
  7.  
  8. var optionalObjV:Object = new Object(
  9. {
  10.     scrollType: "easing",
  11.     isTrackClickable: true,
  12.     useArrows: true,
  13.     upArrow: content_mc.up_btn,
  14.     downArrow: content_mc.down_btn,
  15.     continuousScroll: false,
  16.     easeFunc: Regular.easeOut,
  17.     duration: .25,
  18.     arrowMove: 50,
  19.     scaleScroller: true,
  20.     autoHideControls: true
  21. });
  22.  
  23. var optionalObjH:Object = new Object(
  24. {
  25.     scrollType: "easing",
  26.     isTrackClickable: true,
  27.     useArrows: true,
  28.     upArrow: content_mc.left_btn,
  29.     downArrow: content_mc.right_btn,
  30.     continuousScroll: false,
  31.     easeFunc: Regular.easeOut,
  32.     duration: .25,
  33.     arrowMove: 50,
  34.     scaleScroller: true,
  35.     autoHideControls: true
  36. });
  37.  
  38. var scrollerV:AxisScroller = new AxisScroller(stage, content_mc, content_mc.scrollerV_mc, content_mc.movie_mc, content_mc.trackV_mc, content_mc.mask_mc, "y", optionalObjV);
  39. var scrollerH:AxisScroller = new AxisScroller(stage, content_mc, content_mc.scrollerH_mc, content_mc.movie_mc, content_mc.trackH_mc, content_mc.mask_mc, "x", optionalObjH);
  40.  
  41. reset_btn.addEventListener(MouseEvent.MOUSE_DOWN, resetScroller);
  42.  
  43. function resetScroller($evt:MouseEvent):void
  44. {
  45.     scrollerV.reset();
  46.     scrollerH.reset();
  47. }

If you found this post useful, please consider leaving a comment, subscribing to the feed, or making a small donation.

3 Comments

Thanks! But found a bug. If you scroll all the way to the bottom, then click on the top, there is a little bounce. More obvious if the content is smaller, as the slider moves above the arrows.

Don't worry about replicating this in AS2. AS2 is old school!

Tomer,
Yeah, I've found this to be true in both versions of the AxisScroller, it is because of the ability to scale the scroller to the content which was introduced in v1.5 of the AS2 version i believe because I had to make the scroller be able to take on other sizes, so now that is not controllable. I've been thinking about how to reduce that and will still consider it, but its not a priority. After all, you can just set the track to not clickable and it won't be a problem 😛

Leave a comment

(required)

(required)