ちょっと簡単なフォトギャラリーを作ってみたよ

ちょっと簡単なフォトギャラリーを作ってみました。
こんな感じ
http://moeten.info/flex/20080703_tileListTest/bin-release/main.html

TileList内でマウスオーバーアクションがなんとかできないかなぁってことでいろいろとやってたんだけど、いまいちスマートにいかなかった。
TileListのアイテムの削除や追加エフェクトはサンプルとして既にあるんだけどアイテムのマウスオーバーで簡単にエフェクトを使うことができないんだろうか・・・。
とりあえずマウスオーバーで画像にエフェクトを追加する方法。

<mx:Image rollOutEffect="{outerDocument.myOut}" rollOverEffect="{outerDocument.myOver}"/>

outerDocumentでエフェクトを指定しています。
＃本来ならTileListの方でitemRollOverなどから呼び出した方がいいと思うんだけど・・・
TileListでアイテムを横にずらーと並べる方法。
TileListをdirection="vertical"で横に並べて rowCount="1"で１行縛り。これで横にながーいTileListができます。

<mx:TileList id="tl" x="0" y="0" width="100%" height="100%" dataProvider="{hts.lastResult.item}"  rowCount="1"
               rollOverColor="0xffffff" itemClick="onItemClick()" selectionColor="0xffccff" backgroundAlpha="0.3" direction="vertical"  horizontalScrollPolicy="off"
               rowHeight="160" columnWidth="160">

ソースはこちら

<?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]" viewSourceURL="srcview/index.html">
<mx:Script>
<![CDATA[
import mx.effects.easing.*;
//初期化関数
private function init():void{
    hts.send();
}
//アイテムクリック時
private function onItemClick():void{
    myImage.source = tl.selectedItem.image.image1;
    myShow.play();
}
//次のページ前ページ移動
private var i:int = 0;
private function onNext():void{
    if( i+5 < hts.lastResult.item.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:HTTPService id="hts" url="http://moeten.info/maidcafe/?type=shop&amp;wgps_lat=35.698349&amp;wgps_lon=139.773104&amp;m=api"
    useProxy="false" showBusyCursor="true" resultFormat="e4x" />
<!--################  ################-->
<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" >
        <mx:TileList id="tl" x="0" y="0" width="100%" height="100%" dataProvider="{hts.lastResult.item}"  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.image1}" 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>