Different scroll solution than classic flex scrollbars


The example:

Download the SWF here

The code source

The source is really simple (I am sure its very easy to add cool feature such as kinetic scrolling…):

View here: containermenu or:

<mx:VBox direction="vertical" xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:menu="view.menu.*" 
            mouseWheel="onMouseWheel(event)"
          xmlns:component="view.component.*" horizontalScrollPolicy="off" horizontalAlign="center" verticalScrollPolicy="off" paddingRight="3" width="280">
          
    <mx:Script>
        <![CDATA[
            import flash.utils.clearInterval;
            import flash.utils.setInterval;
            import mx.effects.easing.Exponential;
            import mx.effects.AnimateProperty;
            
            private var fx:AnimateProperty = new AnimateProperty();
            
            private var index:uint;
            
            private function onMouseWheel(e:MouseEvent):void
            {
                doMove(-1*e.delta*100);
            }
        
            private function doDown():void
            {
                index = setInterval(doMove,300,100);
                doMove(100);
            }
                        
            private function doUp():void
            {
                index = setInterval(doMove,300,-100);
                doMove(-100);
            }
            
            private function clear():void
            {
                clearInterval(index);
            }
            
            private function doMove(direction:Number):void
            {
                fx.stop();
                
                fx.property = "verticalScrollPosition";
                fx.easingFunction = Exponential.easeOut;
                fx.toValue = box.verticalScrollPosition + direction;
                
                fx.play([box]);                
            }
        ]]>
    </mx:Script>
    
    <mx:Button label="Up" mouseDown="doUp()" mouseUp="clear()" doubleClickEnabled="true" width="100%" />
    
    <mx:VBox id="box" width="280" height="{height - 60}" horizontalScrollPolicy="off" horizontalAlign="center" verticalScrollPolicy="off">
                            
        <menu:MenuBalance width="260" />
        
        <menu:MenuBalance width="260" />
        
        <mx:Button label="toto" height="200" width="260" />
        
        <menu:MenuBalance width="260" />
        
        <mx:Image source="http://www.7sur7.be/static/FOTO/pe/17/6/1/large_355051.jpg" />
        
        <menu:MenuBalance width="260" />
                
        <menu:MenuForex width="260" />        
        
    </mx:VBox>
    
    <mx:Button label="Down" mouseDown="doDown()" mouseUp="clear()" width="100%" />

</mx:VBox>

~ by mjcprasad2000 on May 5, 2009.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

 
%d bloggers like this: