Flexでフルスクリーンなスライドショーを作ってみました。

Flexでフルスクリーンなスライドショーを作ってみました。
こんな感じ。
http://www.moeten.info/flex/20080913_shopPhotoGarally/bin-release/

ソースコードは右クリックから見れます。

簡単な説明

フルスクリーンにする方法
htmlファイルのFlash設定項目で

"allowFullScreen","true",

を設定する。
あとはFlex側で

stage.displayState = StageDisplayState.FULL_SCREEN;

とすればフルスクリーンになります。
マウスに追従するきらきらFlash。
こちらのswfファイルを使用します。

• 光がついてくる

こちらをFlexから使うにはちょっとした手順が必要で MovieClipLoaderAsset というクラスを使用します。

//きらきらマウス用
import flash.display.Loader;
import flash.events.Event;
import flash.net.LocalConnection;
import mx.core.MovieClipLoaderAsset;
[Embed(source ='kirakira_mouse_chaser.swf')]
private var FlashCS3:Class;
public function setStar(): void {
    var swf: MovieClipLoaderAsset = new FlashCS3();
    testImage.addChild(swf);
}

こちらのページが詳しいです。

• Flex と Flash CS3 の ハイブリッド SWF について

＃ハート型とか欲しいなぁ。
きらきらギャラリー index.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
    horizontalScrollPolicy="off" verticalScrollPolicy="off"
    creationComplete="init()"
    backgroundAlpha="1" backgroundGradientAlphas="[1,1]"
    backgroundGradientColors="[0x000000,0x000000]"
     viewSourceURL="srcview/index.html">
<mx:Script>
<![CDATA[
[Bindable]private var site:String   = "maidcafe";
[Bindable]private var server:String = "moeten.info";
[Bindable]private var sid:String    = "390";
//初期化関数
private function init():void{
    //外部パラメーター設定
    if( this.parameters.site )  site   = this.parameters.site;
    if( this.parameters.server )server = this.parameters.server;
    if( this.parameters.sid )   sid    = this.parameters.sid;
    hts.send();
    setStar();
}
//hts完了イベント
private function onResult():void{
    tl.visible = true;
    bigImageShow.play();
}
//次画像表示
private function nextPage():void{
    if( tl.selectedIndex >= hts.lastResult.item.length() -1 ){
        return;
    }
    bigImageShow.play();
    tl.selectedIndex +=1;
}
//前画像表示
private function prePage():void{
    if( tl.selectedIndex <= 0 ){
        return;
    }
    bigImageShow.play();
    tl.selectedIndex -=1;
}
//リスト内の画像が選択されたとき
private function onItemClick():void{
    bigImageShow.play();
}
//スライドショー
private var timer:Timer = new Timer( 7000 );
private function startSlideShow():void{
    myTick(new TimerEvent("TIMER"));
    lbtn.visible = false;
    tl.visible   = false;
    nbtn.visible = false;
    pbtn.visible = false;
    numTxt.visible   = false;
    timer.addEventListener(TimerEvent.TIMER , myTick );
    timer.start();
    switch(stage.displayState) {
        case "normal":
            //フルスクリーンイベントリスナー（この辺に書かないとうまく動作しない・・
            stage.addEventListener(FullScreenEvent.FULL_SCREEN, fullScreenListener);
            stage.displayState = StageDisplayState.FULL_SCREEN;
            break;
        case "fullScreen":
        default:
            stage.displayState = "normal";
        break;
    }
}
//スライドショー（タイマーイベント）
private function myTick(e:TimerEvent):void{
    mySlideShow.play();
    var nowid:int = timer.currentCount % hts.lastResult.item.length();
    tl.selectedIndex = nowid;
    //trace( nowid );
}
//フルスクリーンからノーマルへのイベント用
private function fullScreenListener( e:FullScreenEvent):void{
    if( e.fullScreen ){
    }else{
        timer.stop();
        tl.visible   = true;
        lbtn.visible = true;
        nbtn.visible = true;
        pbtn.visible = true;
        numTxt.visible   = true;
        bigImage.visible = true;
        bigImage.alpha   = 1.0;
        var f:Fade = new Fade();
        f.alphaFrom = 0;
        f.alphaTo = 1.0;
        f.play([bigImage]);
    }
}
//きらきらマウス用
import flash.display.Loader;
import flash.events.Event;
import flash.net.LocalConnection;
import mx.core.MovieClipLoaderAsset;
[Embed(source ='kirakira_mouse_chaser.swf')]
private var FlashCS3:Class;
public function setStar(): void {
    var swf: MovieClipLoaderAsset = new FlashCS3();
    testImage.addChild(swf);
}
]]>
</mx:Script>
<!--################# エフェクト #################-->
<mx:Sequence id="bigImageShow" target="{bigImage}">
    <mx:Fade alphaFrom="0" alphaTo="1" />
</mx:Sequence>
<mx:Parallel id="myShow" duration="1000">
    <mx:Fade alphaFrom="0" alphaTo="0.4"/>
    <mx:Move yFrom="{tl.y+100}" yTo="{tl.y}"/>
</mx:Parallel>
<mx:Parallel id="myHide" duration="1000">
    <mx:Fade alphaFrom="0.4" alphaTo="0"/>
    <mx:Move yFrom="{tl.y}" yTo="{tl.y+100}"/>
</mx:Parallel>
<mx:Sequence id="mySlideShow" target="{bigImage}">
    <mx:Fade alphaFrom="0" alphaTo="1" duration="1000"/>
    <mx:Pause duration="5000" />
    <mx:Fade alphaFrom="1" alphaTo="0" duration="1000"/>
</mx:Sequence>
<mx:Fade id="myFade" duration="2000" />
<!--################# フィルター #################-->
<mx:GlowFilter id="gf" inner="true" blurX="50" color="0x000000" strength="2"/>
<mx:GlowFilter id="gf2" blurX="4" blurY="4"    color="0xffffff" strength="10"/>
<mx:GlowFilter id="gf3" blurX="15" blurY="15"  color="0xffffff" strength="1"/>
<!--################# HTS #################-->
<mx:HTTPService id="hts" url="{'http://' + server + '/' + site + '/?m=api&amp;type=photo&amp;sid='+ sid }"
    resultFormat="e4x" result="onResult()"/>
<!--################# コンポーネント #################-->
<mx:SWFLoader id="testImage" mouseEnabled="false"/>
<mx:Label text="{hts.lastResult.item[0].shopname}" bottom="10" right="10" color="0x999999"/>
<mx:Image id="bigImage" width="100%" height="100%" source="{hts.lastResult.item[tl.selectedIndex].image_big}"
    filters="{[gf]}"  mouseEnabled="false"
    horizontalCenter="0" verticalCenter="0" horizontalAlign="center" verticalAlign="middle" />
<mx:Label id="titleTxt" text="{hts.lastResult.item[tl.selectedIndex].title}"
    fontSize="20" color="0x999999" alpha="0.7"
    x="10" y="9" filters="{[gf2,gf3]}"/>
<mx:TileList id="tl" dataProvider="{hts.lastResult.item}" width="100%" height="100"
    y="405" bottom="0" itemClick="onItemClick()"
    showEffect="myShow" visible="false"
    hideEffect="myHide"
    selectionColor="0x000000" rollOverColor="0xcccccc"
    selectedIndex="0" alpha="0.4"
    backgroundAlpha="1" backgroundColor="0xffffff" rowHeight="100" columnWidth="80"
    direction="horizontal">
    <mx:itemRenderer>
        <mx:Component>
        <mx:VBox backgroundAlpha="0" horizontalScrollPolicy="off" verticalScrollPolicy="off"
            width="80" height="80" verticalAlign="middle" horizontalAlign="center">
            <mx:Image source="{data.image}" width="50" completeEffect="Fade"
                verticalAlign="middle" horizontalAlign="center"/>
        </mx:VBox>
        </mx:Component>
    </mx:itemRenderer>
</mx:TileList>
<mx:LinkButton id="lbtn" x="721" y="108" label="スライドショー" click="startSlideShow()"
    right="10" top="10" color="0x999999" rollOverColor="0xffffff"/>
<mx:LinkButton id="nbtn" label="≪" click="prePage()" left="0" fontSize="20" color="0x999999"
    verticalCenter="0" alpha="0.5" rollOverColor="0xffffff"/>
<mx:LinkButton id="pbtn" label="≫" click="nextPage()" right="0" fontSize="20" color="0x999999"
    verticalCenter="0" alpha="0.5" rollOverColor="0xffffff"/>
<mx:Label id="numTxt" text="{tl.selectedIndex + 1 + ' / ' +hts.lastResult.item.length()}"
    bottom="110" color="0x999999" left="10"/>
</mx:Application>