Tile list Smooth scrolling in Flex + AIR

//main.mxml

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" verticalGap="0" creationComplete="init()" >

<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.events.ScrollEventDirection;
import mx.events.ScrollEvent;

[Bindable]private var tileListCollection:ArrayCollection = new ArrayCollection( [
{ industryName: "A" ,metaTag:"m1" },
{ industryName: "B" ,metaTag:"m2" },
{ industryName: "C" ,metaTag:"m3" },
{ industryName: "D" ,metaTag:"m4" },
{ industryName: "E" ,metaTag:"m5" },
{ industryName: "F" ,metaTag:"m6" },
{ industryName: "G" ,metaTag:"m7" },
{ industryName: "H" ,metaTag:"m8" },
{ industryName: "A" ,metaTag:"m1" },
{ industryName: "B" ,metaTag:"m2" },
{ industryName: "C" ,metaTag:"m3" },
{ industryName: "D" ,metaTag:"m4" },
{ industryName: "E" ,metaTag:"m5" },
{ industryName: "F" ,metaTag:"m6" },
{ industryName: "G" ,metaTag:"m7" },
{ industryName: "H" ,metaTag:"m8" },
{ industryName: "I" ,metaTag:"m9" } ]);

[Bindable]private var tileContainerHT:int;

/**
* Find the height of the tile list
*/
private function init():void
{
var len:int = tileListCollection.length;
var tempHt:int = (Math.ceil(len/4))
tileContainerHT = (tempHt*230)
}

var timer:Timer ;
private function downBoxMouseOverHandler():void
{
timer = new Timer(1);
timer.addEventListener(TimerEvent.TIMER,upMove);
timer.start();
}

private function upMove(evt:TimerEvent):void
{
tileListContainer.verticalScrollPosition +=5;
}

private function downBoxMouseOutHandler():void
{
timer.stop();
}

//*****************************************************************

var timer_1:Timer;
private function topBoxMouseOverHandler():void
{
timer_1 = new Timer(1);
timer_1.addEventListener(TimerEvent.TIMER,downMove);
timer_1.start();
}

private function downMove(evt:TimerEvent):void
{
tileListContainer.verticalScrollPosition -=5;
}

private function topBoxMouseOutHandler():void
{
timer_1.stop();
}

]]>
</mx:Script>


<mx:Box width="500" height="15" backgroundColor="red" mouseOver="topBoxMouseOverHandler()"
mouseOut="topBoxMouseOutHandler()"/>
<mx:Box id="tileListContainer" height="500" backgroundColor="red" horizontalScrollPolicy="off" >
<mx:TileList id="CameraSelection" width="100%" height="{tileContainerHT}" horizontalScrollPolicy="off"
maxColumns="4" rowHeight="225" columnWidth="125" itemRenderer="TileListItemRenderer"
dataProvider="{tileListCollection}" paddingRight="20" verticalScrollPolicy="off"/>

</mx:Box>
<mx:Box width="500" height="15" backgroundColor="red" mouseOver="downBoxMouseOverHandler()"
mouseOut="downBoxMouseOutHandler()"/>

</mx:Application>


//TileListItemRenderer.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="100" height="100"
horizontalAlign="center" verticalAlign="middle" borderStyle="solid" >
<mx:Label text="{data.industryName}"/>
<mx:Label text="{data.metaTag}"/>
</mx:VBox>


Thanks
R.Bhatia