読者です 読者をやめる 読者になる 読者になる

AIR for Androidでページめくりをやってみたよ

せっかくAndroidでタッチパネルが使えるっということでページめくりをやってみました。
こんな感じにぺらっといきます。

Flexで主流だった Flexbook はうまくaddChildができなくて今回は見送りました。
代わりに軽そうな •Leaflip を使用してます。
また、画像などの複数ローダーに便利な BulkLoader を使用しています。
ちなみにアプリを横状態限定にするにはapp.xmlに以下を記述します。

        ・・・
        <aspectRatio>landscape</aspectRatio>
    <autoOrients>false</autoOrients>
    <fullScreen>true</fullScreen>
    <visible>false</visible>
  </initialWindow>

メインビュー viewHome.mxml

サーバーから写真のJSONデーターを取得して画像を読み込んで本に追加しています。

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark" title="maidPhotoBook"
        xmlns:mx="library://ns.adobe.com/flex/mx"
        actionBarVisible="false"
        creationComplete="view1_creationCompleteHandler(event)"
        >
    <fx:Script>
        <![CDATA[
            import br.com.stimuli.loading.BulkLoader;
            import br.com.stimuli.loading.BulkProgressEvent;
            import com.adobe.serialization.json.JSON;
            import com.adobe.serialization.json.JSONDecoder;
            import jp.sionnet.leaflip.Bookflip;
            import mx.collections.ArrayCollection;
            import mx.events.FlexEvent;
            import mx.rpc.events.ResultEvent;
            import mx.rpc.http.HTTPService;
            //初期化関数
            protected function view1_creationCompleteHandler(event:FlexEvent):void
            {
                loadingHts.visible = true;
                hts.send();
            }
            //HTS完了イベント。画像の読み込み
            private var bulk:BulkLoader = new BulkLoader("main");
            protected function hts_resultHandler(event:ResultEvent):void
            {
                loadingHts.visible = false;
                loadingImage.visible = true;
                var obj:Object = JSON.decode(event.result.toString());
                arr.source = obj as Array;
                //画像ローダーの設定
                for( var i:int = 0 ; i < arr.length ; i ++ ){
                    bulk.add( "http://moeten.info/myimage/" + arr[i].imagename + "_480x480.jpg" );
                }
                bulk.addEventListener(BulkProgressEvent.COMPLETE , onLoadComp );
                bulk.start();
            }
            //画像読み込み完了。画像を本に追加する
            private function onLoadComp( e:BulkProgressEvent ):void{
                //効果音の再生
                mySound.play();
                mySound2.play();
                loadingImage.visible = false;
                //本の初期設定
                var book:Bookflip = new Bookflip( 480 , 480 , Bookflip.BIND_LEFT , 64);
                book.setGradient(0x000000, 128);
                book.gradientAlphaRatio = 0.6;
                var pageArr:Array = new Array();
                //画像をローダーから取り出し
                for( var i:int = 0 ; i < arr.length ; i ++ ){
                    var bm:Bitmap = bulk.getBitmap( "http://moeten.info/myimage/" + arr[i].imagename + "_480x480.jpg" );
                    bm.width  = 480;
                    bm.height = 480;
                    var page:Sprite = new Sprite();
                    page.addChild( bm );
                    pageArr[i] = page;
                }
                //画像を本に追加
                book.setCover( pageArr[0] , pageArr[1] );
                while( pageArr.length ){
                    book.pushPage( pageArr.pop() , pageArr.pop() );
                }
                myUI.addChild(book);
                book.x = -80;
            }
        ]]>
    </fx:Script>
    <fx:Declarations>
        <!--サウンドエフェクト-->
        <mx:SoundEffect id="mySound2" source="assets/sound.mp3" target="{this}" useDuration="false"/>
        <mx:SoundEffect id="mySound" source="assets/OMT001_11S002.mp3" target="{this}" useDuration="false"/>
        <!---->
        <s:ArrayCollection id="arr" />
        <s:HTTPService id="hts" url="http://moeten.info/maidcafe/json.php?m=photo&amp;sid=390"
                        result="hts_resultHandler(event)" resultFormat="text"/>
    </fx:Declarations>
    <!--本用キャンバス-->
    <mx:UIComponent id="myUI" width="100%" height="100%" verticalCenter="0" horizontalCenter="0"/>
    <!--ローダー表示部-->
    <s:VGroup width="300" horizontalCenter="0" verticalCenter="0">
    <s:Group id="loadingHts" width="300" height="100" horizontalCenter="0" verticalCenter="0">
        <s:Rect width="100%" height="100%" radiusX="10" radiusY="10">
            <s:fill>
                <s:SolidColor color="0xffffff" alpha="0.3"/>
            </s:fill>
        </s:Rect>
        <s:Label text="画像XML読み込み中" verticalCenter="0" horizontalCenter="0"/>
    </s:Group>
    <s:Group id="loadingImage" width="300" height="100" horizontalCenter="0" verticalCenter="0">
        <s:Rect width="100%" height="100%" radiusX="10" radiusY="10">
            <s:fill>
                <s:SolidColor color="0xffffff" alpha="0.3"/>
            </s:fill>
        </s:Rect>
        <s:Label text="画像ファイル読み込み中" verticalCenter="0" horizontalCenter="0"/>
    </s:Group>
    </s:VGroup>
    <!--飾り-->
    <s:Image  top="9" horizontalCenter="0" source="assets/parts.png"/>
    <!--タイトル-->
    <s:Label bottom="20" horizontalCenter="0" text="メイドフォトブック">
        <s:filters>
            <s:GlowFilter blurX="4" blurY="4" strength="10" color="0x888888" />
        </s:filters>
    </s:Label>
</s:View>