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