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>
Posts
