modify flex spark scroller to scroll by page, with easing

Question

I have modified the scroller skin for my VScrollBar per Steven Shongrunden's excellent article http://flexponential.com/2009/10/09/changing-the-position-of-the-scroll-bars-in-a-spark-list/ so there are just the up and down button, no scroller bar.

Now I want to modify the behavior of the scroller so that it scrolls one-page per click. Even better, I'd like to have the scrolling animate with easing, ie not jump from page to page, but scroll with animation.

The documentation for the ScrollBarBase http://www.flex-component.com/asdoc/kcdualslider/spark/components/supportClasses/ScrollBarBase.html suggests a number of methods which should provide a means to achieve this, but I can't find any examples of how to use these excellent methods and properties:

animatePaging(newValue:Number, pageSize:Number): 
  Animates the operation to move to newValue.

button_buttonDownHandler(event:Event): 
  Handles a click on the increment or decrement button      

button_buttonUpHandler(event:Event): 
  Handles releasing the increment or decrement button

decrementButton:Button
  An optional skin part that defines a button that, when pressed, steps the scrollbar up.

incrementButton:Button
  An optional skin part that defines a button that, when pressed, steps the scrollbar down.

My hunch is that I need to interrupt the button_buttonUp/DownHandlers for decrementButton and incrementButton and call animatePaging, but I really have no idea how to do this. These spark skins really remain quit mysterious to me in spite of having written tons of AS3 and successfully modified quite a few skins.

Looking forward to any insight!

Thanks!

Answer 1

I found the solution to my question.

I needed to extend the VScrollBar class. Once I did this is was a simple matter to override the button_buttonDown/UpHandlers.

Having extended the VScrollBar class, in my skin, I substituted

<my_namespace:CustomVScrollBar for  <s:VScrollBar

Here's the gist of my CustomVScrollBar. I'm using gs.TweenLite, but you could use any tweener for the animation

package my_package {

    import flash.events.Event;
    import gs.TweenLite;
    import spark.components.VScrollBar;



    public class CustomVScrollBarextends VScrollBar
    {

        public function CustomVScrollBar()
        {
            super();
        }



        override protected function button_buttonDownHandler(event:Event):void {
            var valueTo:Number;
            if (event.target == incrementButton) {
                valueTo = Math.min(value+pageSize, maximum);
            } else if (event.target == decrementButton) {
                valueTo = Math.max(value-pageSize, minimum);
            }
            if (! isNaN(valueTo)) {
                TweenLite.to(this.viewport, .75, {verticalScrollPosition: valueTo});
            }
        }

        override protected function button_buttonUpHandler(event:Event):void {
            // 
            // nothing
        }

    }
}