Flashでスマホアプリ開発:画面回転でレイアウトを変えてみる1
前回、Flash で AcrionScript3.0を使って、画面回転(RESIZE)のイベントを取得するテストをしてみました。
今回はその延長で、画面回転時に画面のレイアウトも変わるようにしてみました。
横画面では、ありがちな左側にメニューが表示されていて、縦になったらメニューを隠してボタンで呼び出す、という事を想定してテストをしてみました。
また、ボタンでメニューを呼び出す際には、これも以前にテストしたTweenerというアニメーションライブラリを使用してみたいと思います。
準備
前回の「Flashでスマホアプリ開発:画面回転でRESIZE(リサイズ)イベントを取得してみる (Air for iOS | Air for Android)」で作成したFlashファイルを使用します。
ここまではできている前提で、作業を進めます。
後でアニメーションライブラリ「Tweener」も使用するので、その準備もしておきます。
Tweener導入手順については、「Flash:ActionScript3.0でTweenerのテスト」を参考にしてください。
まず、適当なフォルダを作成し、「Flashでスマホアプリ開発:画面回転でRESIZE(リサイズ)イベントを取得してみる (Air for iOS | Air for Android)」で作成したファイルを保存します。
また、Tweenerライブラリ使用のためのフォルダ「caurina」も、合わせて保存します。
例では、「rotate_test」というフォルダを作成して、「rotate_test.fla」というFlashファイルを保存しています。
また、画面回転のパブリッシュ設定も行っているため、「rotate_test-app.xml」というファイルもFlashによって自動生成されています。
スクリプト用にレイヤーを追加
タイムラインにスクリプト用のレイヤーを追加します。
例ではレイヤーの名前を「アクション」としてみました。
タイムラインの「レイヤー1:フレーム1」に記述してあったコードを、「アクションレイヤー:フレーム1」に引っ越し(カット&ペースト)します。レイヤー1:フレーム1のコードは空っぽにします。
※ 画面回転イベントキャッチのテスト用に記述したtraceコードは、必要がなければ削除してください。
フレームにラベルを設定1
フレームにラベルをつけます。
タイムラインのレイヤー1:プレーム1をクリックして、プロパティでラベルをつけてください。
現在フレーム1のステージ上には、画面が横の場合のレイアウトでボックスが配置されていますので、例では「yoko」という名前のラベルをつけました。
レイアウトしたボックスの設定
ステージ上にレイアウトされている黄・青・ピンクの四角を、それぞれムービクリップのシンボルに変換します。
例では、シンボルの名前を
黄:左ボックス
青:上ボックス
ピンク:右ボックス
としています。
これでステージ上には、名前のないムービークリップのインスタンスが3つレイアウトされている状態になります。
今度は、それぞれにインスタンスの名前を付けていきます。
例では、
黄:leftbox
青:topbox
ピンク:rightbox
としています。
※ シンボルの登録やインスタンスに名前を付ける手順については、「Flash:シンボル・インスタンスを作成して、ActionScript3.0で動かしてみるサンプル」を参考にしてください。
縦画面用のフレームを追加する
次に、縦画面用のフレームを追加します。
タイムラインのレイヤー1の2フレーム以降の適当な場所に「キーフレームの挿入」とします。
例では、10フレーム目に追加してみました。
これで3つの四角いインスタンスが配置された状態の新しいフレームができました。
配置されたインスタンスを縦画面用に調整していきます。
それぞれのインスタンスは、次の様に位置とサイズを変更してください。
縦画面の場合は左メニュー(黄色)を隠しておいてボタンで表示させる作戦なので、領域外(Xはマイナスの値)です。
インスタンス名 | X | Y | W(Width) | H(Height) |
---|---|---|---|---|
leftbox | -180.00 | 0.00 | 180.00 | 800.00 |
topbox | 10.00 | 10.00 | 480.00 | 80.00 |
rightbox | 10.00 | 100.00 | 460.00 | 700.00 |
なお、Flashファイル作成時に「W:800 H:480」としています。この表の通りに配置すると、青とピンクの四角の周りには10pxの空きができる配置になります(ピンクの下は余白ナシ)。
追加したこのフレームにもラベルを付けておきます。
画面が縦の場合のレイアウトでボックスが配置されていますので、例では「tate」という名前のラベルをつけました。
これから、画面が横の時はラベル「yoko」のフレームに、縦の時はラベル「tate」のフレームに移動するようにしていきます。
画面回転のリスナーとfunction
レイヤー「アクション」のフレーム1に記述したActionScript3.0に修正を加えます。
この時点でのレイヤー「アクション」のフレーム1のコードは、次の通りです。
import flash.events.Event; //Tweenerライブラリを使えるように import caurina.transitions.Tweener; stage.scaleMode = flash.display.StageScaleMode.NO_SCALE; //縦にした時、左から480px以降は表示させないようにしたいので stage.align = flash.display.StageAlign.TOP_LEFT; //ステージの横幅を控える(最初は「0」に設定) var oldstagewidth: int = 0; //画面回転を監視 stage.addEventListener(Event.RESIZE, onResize); function onResize(e: flash.events.Event): void { //控えておいたステージの横幅と現在のステージの横幅が異なる場合は実行 if (stage.stageWidth != oldstagewidth) { if (stage.stageWidth > 600) { gotoAndStop("yoko"); } else { gotoAndStop("tate"); } //現在のステージの横幅を控える oldstagewidth = stage.stageWidth; } }
後でTweenerを使用して、leftboxのメニューを表示させたいので、Tweenerライブラリを使用できるように
import caurina.transitions.Tweener;
を追記。
また、縦画面の場合のレイアウトはステージの左上を基準に配置したので、
stage.align = flash.display.StageAlign.TOP_LEFT;
となっていることを確認してください。
functionの「onResize」では、「gotoAndStop」関数でステージの横幅が600以上なら「yoko」ラベルに、それ以外なら「tate」ラベルに移動するようにしています。
これで一度デバッグしてみます。
「device」→「Rotate Left」又は「Rotate Right」で縦横を回転してみます。
画面が縦の場合に黄色い「leftmenu」インスタンスが隠れていて、上図の様になっていれば成功です。
次回は、ここからボタンを配置して、黄色の「leftmenu」インスタンスをボタンで呼び出すテストを行います。
