Sample Image Tile List

Sample Application demonstrating the ImageTileList with zooming effect.

View the application here....

Source Code:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
    width="620" height="700" creationComplete="init()"
    backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#FFFFFF, #FFFFFF]">
<mx:Script>
<![CDATA[
import mx.effects.easing.*;

private var myArr:Array;

public function init():void{
   myArr = new Array();
    myArr[0] = {"image": "img/My Computer.png","caption": "My Computer"};
    myArr[1] = {"image": "img/My Documents.png","caption": "My Documents"};
    myArr[2] = {"image": "img/Google.png", "caption": "Google"};
    myArr[3] = {"image": "img/NotePad.png","caption": "NotePad"};
    myArr[4] = {"image": "img/WordPad.png","caption": "WordPad"};
    myArr[5] = {"image": "img/Email.png", "caption": "Email"};
    myArr[6] = {"image": "img/MediaPlayer.png","caption": "MediaPlayer"};
    myArr[7] = {"image": "img/AcrobatReader.png","caption": "AcrobatReader"};
    myArr[8] = {"image": "img/iTunes.png", "caption": "iTunes"};
    myArr[9] = {"image": "img/Ms Paint.png","caption": "Ms Paint"};
    myArr[10] = {"image": "img/Ms Word.png","caption": "Ms Word"};
    myArr[11] = {"image": "img/PowerPoint.png", "caption": "PowerPoint"};
    myArr[12] = {"image": "img/Excel.png", "caption": "Excel"};
    myArr[13] = {"image": "img/Calendar.png","caption": "Calendar"};
    myArr[14] = {"image": "img/Search.png", "caption": "Search"};
    myArr[15] = {"image": "img/My Music.png","caption":"My Music"};
    myArr[16] = {"image": "img/My Pictures.png","caption": "My Pictures"};
    myArr[17] = {"image": "img/My Videos.png", "caption": "My Videos"};

    tl.dataProvider =  myArr;
    //mySlide.visible = true;
}

private function onItemClick():void{
    myImage.source = tl.selectedItem.image;
    myShow.play();
}

private var i:int = 0;

private function onNext():void{
    if( i+5 < myArr.length){
        tl.scrollToIndex(i+5);
        i+=5;
        myShow2.play();
    }
}
private function onBack():void{
    if( i ){
        tl.scrollToIndex(i-5);
        i-=5;
        myShow2.play();
    }
}
]]>
</mx:Script>

<!--################  ################-->
<mx:Parallel id="myOver">
    <mx:Blur blurXFrom="30" blurYFrom="30" />
    <mx:Fade alphaFrom="0.6" alphaTo="1" />
    <mx:Resize widthTo="150" heightTo="150" easingFunction="Back.easeOut"/>
    <mx:Glow alphaTo="20" blurYTo="20" blurXTo="20" color="0x00ff00" />
</mx:Parallel>
<mx:Parallel id="myOut">
    <mx:Fade alphaFrom="1" alphaTo="0.6" />
    <mx:Resize widthTo="100" heightTo="100" easingFunction="Back.easeOut"/>
    <mx:Glow blurYTo="0" blurXTo="0" />
</mx:Parallel>
<mx:Sequence id="myShow2" target="{tl}">
    <mx:Fade alphaFrom="0" alphaTo="1"/>   
</mx:Sequence>
<mx:Fade id="myShow" alphaFrom="0" alphaTo="1"/>   

<!--################  ################-->
<mx:DropShadowFilter id="dsf" blurX="10" blurY="10" color="0x330000" distance="0" strength="1" />
<mx:GlowFilter id="gf" blurX="10" blurY="10" inner="true" color="0xffffff" strength="3" />

<!--################  ################-->
<mx:VDividedBox x="0" y="10" height="100%" width="100%">
    <mx:Canvas width="100%" height="100%" backgroundColor="#FFccff" >
        <mx:Button label="→" click="onNext()" x="580" y="458"/>
        <mx:Button label="←" click="onBack()" x="0" y="458"/>
        <mx:Image id="myImage" width="528" height="439"  x="46" y="10" filters="{[gf,dsf]}"/>
    </mx:Canvas>
    <mx:Canvas label="Canvas 2" width="100%" height="170" id="myCanvas">
        <mx:TileList id="tl" x="0" y="0" width="100%" height="100%"  rowCount="1"
               rollOverColor="0xffffff" itemClick="onItemClick()" selectionColor="0xffccff" backgroundAlpha="0.3" direction="vertical"  horizontalScrollPolicy="off"
               rowHeight="160" columnWidth="160">
               <mx:itemRenderer>
                   <mx:Component>
                       <mx:VBox horizontalScrollPolicy="off" verticalScrollPolicy="off"
                           verticalAlign="middle" horizontalAlign="center"
                           borderStyle="solid" borderThickness="1" borderColor="0xffccff">
                           <mx:Image id="myImage" source="{data.image}" width="100" height="100" alpha="0.6"
                               rollOutEffect="{outerDocument.myOut}" rollOverEffect="{outerDocument.myOver}"/>
                      </mx:VBox>
                    </mx:Component>
               </mx:itemRenderer>
        </mx:TileList>
    </mx:Canvas>
</mx:VDividedBox>
</mx:Application>