flex按钮控制滚动条

在做图片切换的时候，grid操作的时候，可能有较多的信息，在一个控件中显示不了！那么自然就会有部分显示隐藏了，要想看到更多的信息时，自然会想到滚动条。但是滚动条有时并不完美，比如用户需要的是一屏一屏的去读取内容，或者用户是需要自动翻页，如果这样还让用户去点击滚动条，那用户可能要点着鼠标不放了！对用户体验自然也就差很多。不多说了，直接看代码：

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
    <fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;
            
            import mx.controls.Alert;  
            private static const UNIT_WIDTH:int = 65;  
            
            /**
             * 向右移动
             */
            private function moveRight(xIndex:int):void  
            {  
                tile.horizontalScrollPosition += xIndex*UNIT_WIDTH;    
            }  
            /**
             * 向左移动
             */
            private function moveLeft(xIndex:int):void{  
                tile.horizontalScrollPosition-=xIndex*UNIT_WIDTH;  
            }
            /**
             * 上下移动
             */
            private function moveScoll(xIndex:int, yIndex:int):void  
            {   
                tile2.verticalScrollPosition += yIndex*UNIT_WIDTH;   
            }  
        ]]>
    </fx:Script>
    <fx:Declarations>
        <!-- 将非可视元素（例如服务、值对象）放在此处 -->
    </fx:Declarations>
    <s:Panel title="Tile Container Example" height="363" width="500" x="30" y="10">
        <mx:Button x="40" y="37" label="向左" click="moveLeft(1)"/>
        <mx:Button x="118" y="37" label="向右" click="moveRight(1)"/>
        <mx:Button x="256" y="10" label="向上" click="moveScoll(0,-1)"/>
        <mx:Button x="334" y="10" label="向下" click="moveScoll(0,1)"/>
        
        <!--水平滚动-->
        <mx:Tile id="tile" direction="vertical" width="200" height="52" x="10" y="66"  verticalScrollPolicy="off" horizontalScrollPolicy="off">
            <mx:Button label="1" height="50" width="75"/>
            <mx:Button label="2" height="50" width="75"/>
            <mx:Button label="3" height="50" width="75"/>
            <mx:Button label="4" height="50" width="75"/>
            <mx:Button label="5" height="50" width="75"/>
            <mx:Button label="6" height="50" width="75"/>
            <mx:Button label="11" height="50" width="75"/>
            <mx:Button label="12" height="50" width="75"/>
            <mx:Button label="13" height="50" width="75"/>
            <mx:Button label="14" height="50" width="75"/>
            <mx:Button label="15" height="50" width="75"/>
            <mx:Button label="16" height="50" width="75"/>
        </mx:Tile>
        <!--垂直滚动-->
        <mx:Tile x="237" id="tile2" direction="horizontal" y="60" width="77" height="150"  verticalScrollPolicy="off">
            <mx:Button label="1" height="50" width="75"/>
            <mx:Button label="2" height="50" width="75"/>
            <mx:Button label="3" height="50" width="75"/>
            <mx:Button label="4" height="50" width="75"/>
            <mx:Button label="5" height="50" width="75"/>
            <mx:Button label="6" height="50" width="75"/>
            <mx:Button label="11" height="50" width="75"/>
            <mx:Button label="12" height="50" width="75"/>
            <mx:Button label="13" height="50" width="75"/>
            <mx:Button label="14" height="50" width="75"/>
            <mx:Button label="15" height="50" width="75"/>
            <mx:Button label="16" height="50" width="75"/>
        </mx:Tile>
    </s:Panel>
</s:Application>