Flash Professional CS5 でつくる Android 向けマルチスクリーン対応アプリケーション
必要条件
その他の必要条件
Adobe Flash Professional CS5 Extension for AIR 2.5
この記事では、画面サイズの異なる Android 搭載デバイスをターゲットした Flash アプリケーションの作り方を解説します。実行されたデバイスの解像度にあわせて、自動的にレイアウトを補正するアプリケーションの制作手法を学ぶことで、マルチスリーンに対応したアプリの開発を効率的に行えるようになります。
この記事で紹介するサンプルを利用するために必要なソフトウェアは、最新のアップデートが適用された Adobe® Flash® Professional CS5 と、Adobe Labs に公開されている Adobe Flash Professional CS5 Extension for AIR 2.5 機能拡張です。
はじめに：サンプルファイルの使い方
AIR for Android を使ってパブリッシュするには証明書の設定が必要です。（プレビューだけであれば不要です）
以下の手順で設定を行います。
1．プロパティパネル内の "AIR Android 設定" の編集ボタンを押して、"アプリケーションとインストーラーの設定（ベータ版）" のダイアログを開きます
2．"デプロイ" タブを選択して、証明書を選択します。証明書が無い場合は、"作成" ボタンをクリックして、新しい証明書を作成します。
3．"デプロイ" タブ内で、証明書のパスワードを入力します。"このセッション中はパスワードを保存する" をチェックします。
以上の設定でパブリッシュが実行できます。デバイスが無い場合など、プレビューにより確認する場合は、Ctrl/Cmd+Enter キーを押すとプレビュー画面が起動します。
サンプル 0：動的なレイアウトの実現
ウインドウの高さを小さくすると、上部のバーの高さは変わらないが、下の 2 つの領域は比率を保って縮小される
最初に、コンテンツを表示する領域の配置を制御する方法から説明します。対応するサンプルファイルは sample_v0 です。
ステージの設定
まず、ステージの設定を行います。設定するのは、以下の 2 点です。
- Flash Player が勝手に表示倍率を変えないように、ステージの大きさを固定する
- 画面の大きさが変わったときに再描画処理を実行するために、Resize イベントを監視
サンプルでは、コンストラクタ内で以下の設定を行っています。
// 勝手に書き変えられないように、大きさを固定
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
// リサイズしたら再描画するようにイベント監視
stage.addEventListener(Event.RESIZE, resizeHandler);
物理単位の使用
デバイスでは、機種ごとにピクセル密度が異なるため、大きさをピクセルで指定すると、実際に表示される大きさが変わります。ボタンなどタッチ操作するものは、指で触れられる大きさを確保するために、ミリメートルのような物理単位で指定したい場合があると思います。
そのため、サンプルファイルでは、ピクセルを物理単位に変換する関数を用いています。Capabilities.screenDPI から取得したピクセル密度 （1 インチあたりのピクセル数） を使用しています。
// インチをピクセルに変換
private function inchesToPixels(inches:Number):uint{
return Math.round(Capabilities.screenDPI * inches);
}
// ミリメートルをピクセルに変換
private function mmToPixels(mm:Number):uint{
return Math.round(Capabilities.screenDPI * (mm / 25.4));
}
配置位置の計算
次に、各領域の大きさの計算と描画を行います。この処理は、最初に Resize イベントに登録したメソッド内で行います。
まず、画面の縦と横とどちらが長いか、stage.stageWidth と stage.stageHeight を使って計算します。この結果により、縦長と横長のレイアウトの切り替えを行います。
// 縦横の比率を計算
var isHorizonal:Boolean = ( stage.stageWidth / stage.stageHeight) > 1;
縦長の場合の各領域の高さは以下のように計算されます。上部のバーは 10 mm 固定、下の 2 つの領域は、7 : 3 に配分されます。mainView が 70%、subView が 30% です。
// レイアウト用の基本的な値を算出する
var topBarHeight:Number = mmToPixels(10);
var topBarHeight:Number = stage.stageWidth;
var contentHeight:Number = stage.stageHeight - topBarHeight;
// レイアウトごとに変わる値を算出する
mainViewHeight = contentHeight*0.7;
subViewHeight = contentHeight - mainViewHeight;
// 各要素を実際にリサイズする
resizeTopBar(topBarWidth, topBarHeight);
...
各領域の大きさを求めたら、領域内の背景を描画します。下は、画面上部のバーの描画に使われているメソッドです。
// 要素の描画用メソッド
private function resizeTopBar(w:Number, h:Number):void {
topBar.graphics.clear();
topBar.graphics.beginFill(0x660000);
topBar.graphics.drawRect(0, 0, w, h);
topBar.graphics.endFill();
}
サンプル 1：アイテムの配置
次は、領域内に表示されるコンテンツの表示を調整する方法の説明です。対応するサンプルファイルは sample_v1 です。
ボタンの位置と大きさの指定
画面上部のバーの高さは物理単位を使用しています。そのため、内部に配置するアイテムの大きさも物理サイズで指定します。下はボタンとラベルの大きさを指定している箇所です。（注；このサンプルで表示されている "ボタン" には、ボタンとしての機能は追加されていません。）
button = new Sprite();
buttonLabel = new TextField();
buttonLabel.width = mmToPixels(9);
buttonLabel.height = mmToPixels(4.5);
buttonLabel.text = '追加';
button.addChild(buttonLabel);
...
resizeButton(mmToPixels(9),mmToPixels(6));
下は、ボタンを配置している箇所です。ここでも物理単位（ミリメートル）が使われています。
button.x = topBarWidth - button.width - mmToPixels(1);
button.y = ( topBarHeight - button.height ) *0.5;
buttonLabel.y = ( button.height - buttonLabel.textHeight )*0.5;
写真の大きさの指定
写真の大きさは、表示する領域の大きさに対する相対値を使って指定します。下は、領域の大きさを元に、mainView に表示する写真の大きさを決めている箇所です。
resizePicture(mainViewWidth - mainViewWidth*0.1, mainViewHeight - mainViewHeight*0.1);
...
private function resizePicture(w:Number, h:Number):void {
// 指定された大きさに拡大縮小する
var part:Number = Math.min(w, h);
picture.width = part;
picture.height = part;
}
配置にも相対値が使われています。
picture.x = ( mainViewWidth - picture.width )/2;
picture.y = ( mainViewHeight - picture.height )/2;public class ResizableView extends Sprite {
このように大きさと位置を決めることで、全てのコンテンツが、領域の大きさに応じて配置されるようになります。
サンプル 2：クラス設計の見直し
最後に、相対値を使ってコードを整理します。対応するサンプルファイルは sample_v2 です。
インターフェースの定義
2 つ目のサンプルで、画面の解像度に応じたコンテンツ配置は実現されました。ですが、実際のコードを見るとコンテンツ配置のためのコードが大部分を占めています。これでは、コンテンツが多くなった場合、実用的ではなくなってしまうでしょう。
そこで、再配置の責任をそれぞれのコンポーネントに持たせることにします。全ての配置を 1 カ所で行う代わりに、各コンポーネントが、自分の子にあたるオブジェクトの配置を行う、という考え方です。これにより、個々の再配置ロジックは短くなり、何が行われているのか理解しやすくなることが期待されます。
具体的には、下のインターフェースを持つクラスを定義して、画面に配置される各要素を、このクラスのサブクラスとして定義します。全部で 6 つのクラスができることになります。 （3 つの領域と、ボタン、写真、サムネール）
public function ResizableView() {
// overrideしてください
public function resize(w:Number, h:Number):void {
throw new IllegalOperationError("このメソッドはオーバーライドされている必要があります。");
}
}
この変更により、クラスの数は増えましたが、再配置のロジックは分かり易くなりました。実際に、sample_v2 と sample_v1 を比べてみて下さい。また、物理単位に変換するメソッドも、ユーティリティとして外部クラスに分けてあります。
以上、マルチスクリーン対応のアプリの作り方、は参考になったでしょうか？スマートフォンやタブレット向けのアプリ開発の際に、お役に立てば幸いです。
