アド企画 制作部
アド企画 制作部
 

Flashでスマホアプリ開発:画面回転でレイアウトを変えてみる1

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によって自動生成されています。

20160124a

スクリプト用にレイヤーを追加

タイムラインにスクリプト用のレイヤーを追加します。
例ではレイヤーの名前を「アクション」としてみました。

20160124b


タイムラインの「レイヤー1:フレーム1」に記述してあったコードを、「アクションレイヤー:フレーム1」に引っ越し(カット&ペースト)します。レイヤー1:フレーム1のコードは空っぽにします。
※ 画面回転イベントキャッチのテスト用に記述したtraceコードは、必要がなければ削除してください。

20160124c

フレームにラベルを設定1

フレームにラベルをつけます。

タイムラインのレイヤー1:プレーム1をクリックして、プロパティでラベルをつけてください。
現在フレーム1のステージ上には、画面が横の場合のレイアウトでボックスが配置されていますので、例では「yoko」という名前のラベルをつけました。

20160124d

レイアウトしたボックスの設定

ステージ上にレイアウトされている黄・青・ピンクの四角を、それぞれムービクリップのシンボルに変換します。

20160124e

例では、シンボルの名前を

黄:左ボックス
青:上ボックス
ピンク:右ボックス

としています。
これでステージ上には、名前のないムービークリップのインスタンスが3つレイアウトされている状態になります。

今度は、それぞれにインスタンスの名前を付けていきます。

20160124f

例では、

黄:leftbox
青:topbox
ピンク:rightbox

としています。


※ シンボルの登録やインスタンスに名前を付ける手順については、「Flash:シンボル・インスタンスを作成して、ActionScript3.0で動かしてみるサンプル」を参考にしてください。

縦画面用のフレームを追加する

次に、縦画面用のフレームを追加します。

タイムラインのレイヤー1の2フレーム以降の適当な場所に「キーフレームの挿入」とします。
例では、10フレーム目に追加してみました。

20160124g

これで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

20160124h

なお、Flashファイル作成時に「W:800 H:480」としています。この表の通りに配置すると、青とピンクの四角の周りには10pxの空きができる配置になります(ピンクの下は余白ナシ)。


追加したこのフレームにもラベルを付けておきます。
画面が縦の場合のレイアウトでボックスが配置されていますので、例では「tate」という名前のラベルをつけました。

20160124i

これから、画面が横の時はラベル「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;

	}
}‌

20160124m

後でTweenerを使用して、leftboxのメニューを表示させたいので、Tweenerライブラリを使用できるように
import caurina.transitions.Tweener;
を追記。
また、縦画面の場合のレイアウトはステージの左上を基準に配置したので、
stage.align = flash.display.StageAlign.TOP_LEFT;
となっていることを確認してください。

functionの「onResize」では、「gotoAndStop」関数でステージの横幅が600以上なら「yoko」ラベルに、それ以外なら「tate」ラベルに移動するようにしています。

これで一度デバッグしてみます。

20160124j

「device」→「Rotate Left」又は「Rotate Right」で縦横を回転してみます。

20160124k

20160124l

画面が縦の場合に黄色い「leftmenu」インスタンスが隠れていて、上図の様になっていれば成功です。



次回は、ここからボタンを配置して、黄色の「leftmenu」インスタンスをボタンで呼び出すテストを行います。