Flex Hero のモバイルアプリ開発でハマった点

「Flex Hero のモバイルアプリ開発の基本」では、ホントの基本のみのご紹介でした。
今回は、実際に使ってみてハマった点をいくつかご紹介したいと思います。
*なお、この記事は公開されているFlash Builder Buritto Preview版 を対象としています。

画面回転時のレイアウト

app.xml で autoOrients を true にすると画面回転が有効になるので、回転時のレイアウトを考慮して設計しましょう。
StageOrientationEvent.ORIENTATION_CHANGE で画面回転のイベントを拾い、layoutを変えてみたりして、
画面領域を有効に使用して、見せたいコンテンツが見えやすいように、かつ操作しやすいように配置する必要があります。

上図の例で言うと、layoutをVerticalから変更せずに横回転すると、Chartが横に間延びします。
さらに、下部のListはタッチ操作でスクロールしますが、これも縦が狭まって操作し辛くなっています。
そこで、回転時にlayoutをHorizontalに変更することで、どちらのコンポーネントも見やすく、操作しやすくなります。

Graphics.lineTo()はなるべく使わない

例えば、フリーハンドで線を引く際にGraphics.lineTo()を使う場合と、
BitmapData.copyPixels()を使う場合をFPSを計って比較すると、
BitmapData.copyPixels()のパフォーマンスが良いようです。

上図はフリーハンドで10秒間、線を引き続けるテストの結果です(正確な比較ではありませんが)
”min”の値が、10秒間で一番低かったFPSの値です。
Graphics.lineTo()では、線の引き続けるとFPSがどんどん落ちていく一方で、
BitmapData.copyPixels()では、Graphics.lineTo()ほど遅くはなりませんでした。

*Graphics.drawPath()でも試してみましたが、今回はlineTo()とほぼ同じでしたが、
複雑なパスを書く場合は、Graphics.drawPath()の方が実行コードの行数が少なくなるので、
処理が高速化できるとのこと(下記参考より)

*デスクトップ上でデバックして比較すると、ほとんど差異がありませんでした。
*2011・3・2追記:このテストはrenderModeをcpuのままにしています。

その他、モバイルアプリでパフォーマンスを出すには、下記参考リンクは必読

・参考
「Flash Platform のパフォーマンスの最適化」

GPUモードで制限される機能

  • ブレンドモード:レイヤー、アルファ、消去、オーバーレイ、ハードライト、比較(明)、比較(暗)はサポートされません
  • フィルターはサポートされません
  • PixelBender はサポートされません
  • その他にも制限事項があるので、下記参考リンクは必読

・参考
「モバイル AIR アプリケーションでの GPU レンダリング」
「モバイルデバイスでサポートされていない ActionScript 3.0 API」

MXチャートコンポーネントの使用

基本の話でも書きましたが、チャートコンポーネントをそのままモバイルに乗っけることが出来ます。
ここでは手順をもうちょっと詳しく説明を。

1:swcの追加

「Flexモバイルプロジェクト」では、デフォルトではmx.swcが入ってないので、
プロジェクトプロパティ>Flexビルドパスで、
sdks\4.5.0\frameworks\libs\にある、以下の3つのswcを追加します。

  • mx.swc
  • datavisualization.swc
  • sparkskins.swc

*上2つだけで良い、という情報もありますが、私の環境では3つ追加しないとビルドできませんでした。

2:ネームスペースを追加

<s:View …
xmlns:charts=”mx.charts.*”
xmlns:series=”mx.charts.series.*”
xmlns:chartClasses=”mx.charts.chartClasses.*” />

あとはチャートを設置するだけ。
実機でも動作(アニメーションも)を確認しました。

サンプル画面

・参考
「Using mx.charts in a Flex Hero mobile project」

小ネタ

1:アプリなしでAndroidでスクリーンショットを撮るには

iPhoneの場合、ホームボタン+スリープボタンで簡単に端末のスクリーンショットが撮れますが、
Androidの場合はどうするのかというと、AndroidSDK内にあるandroid-sdk-windows\tools\ddms.batを起動し、
Device > Screen Captuerで撮影できます。

2:カメラロールへの保存

アプリからカメラロールへのアクセスするとき、USBケーブルがつながったままだと、
アクセスできません。カメラロールへのアクセスを確認するときはUSBケーブルを外しましょう。

以上、Preview版を触ってみて気をつけたことを書いてきましたが、
リリース版ではいろいろ改善されることを期待してます。

Related Post

すぐに使えるFlexコネタ集すぐに使えるFlexコネタ集

昨日のおしゃれFxug勉強会にお越しいただいたみなさま、ありがとうございました。勉強会での発表より、ドリームページで使ったFlexコネタ集を。 1.scaleプロパティの活用 なんの変哲もないよく見かけるscaleプロパティを使った小技。Scaleを少し変更するだけで、同じインスタンスも素敵に変身します。 【Window領域に合わせた拡大表示】大きなディスプレイを使っている人は、Windowもめいいっぱい広げて使いたいもの。Flexでは表示サイズに合わせた%指定やパディングの指定もできすが、座標計算をして表示しているコンポーネントの場合、Windowサイズが変更されるときにいちいち計算をしなおすのは面倒。そんなときは、今のWindowサイズにおける表示可能領域とそのコンポーネントのサイズを比較して、何%拡大可能か計算します。それをscaleにセットするだけで、簡単にリキッド・レイアウトが実現できます。 【一覧表示】一覧表示や、Mini Map表示ならスケールダウン。scaleを小さく設定するだけでミニチュアコンポーネントが作れます。ミニチュアながらも機能はそのまま!なのがかわいらしい。必要に応じてステータスを変更しいらない機能は無効化しましょう。 scaleを変更するだけでいいので簡単です。インスタンスを使いまわせば経済的ですし、下手な計算なロジックを書いてバグを埋め込む心配もなし! 2.ドラッグプロキシーの活用

Flex4でアイコン付きのカスタムボタンを作るFlex4でアイコン付きのカスタムボタンを作る

みなさん、Flex4(spark)は使ってますか?今回の記事では、よく使うアイコン付きButtonコンポーネントをFlex4で作ってみたいと思います。 Flex3ではiconプロパティに、画像パスをセットしてあげればアイコンが表示できましたが、Flex4のButtonにはiconプロパティがありませんので、カスタムButtonSkinを作成して、アイコンを実装します。 完成図はこんな感じです。表示するLabelも複数行にしました。 ■ButtonSkinクラスの構成カスタムButtonSkinの作成は、新規MXMLスキンでホストコンポーネントを(spark)Buttonにセットして生成できます。すると、デフォルトのButtonSkinクラスがコピーされるので、ここにiconを表示するパーツを追加します。MXMLで編集できるので、デザインビューで確認しながらスキンをカスタマイズできます。追加する前に、デフォルトのButtonSkinの構成をまとめてみます。 1:ホストコンポーネント <!– host component