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

2016-01-25 14:15:20

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

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

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

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

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

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

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

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

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

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

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

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

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

例では、

黄：leftbox
青：topbox
ピンク：rightbox

としています。

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

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

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

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

これで３つの四角いインスタンスが配置された状態の新しいフレームができました。
配置されたインスタンスを縦画面用に調整していきます。

それぞれのインスタンスは、次の様に位置とサイズを変更してください。
縦画面の場合は左メニュー（黄色）を隠しておいてボタンで表示させる作戦なので、領域外（Ｘはマイナスの値）です。

インスタンス名	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

レイヤー「アクション」のフレーム１に記述したActionScript3.0に修正を加えます。

この時点でのレイヤー「アクション」のフレーム１のコードは、次の通りです。

 
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」インスタンスをボタンで呼び出すテストを行います。

共有:

準備

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

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

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

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

画面回転のリスナーとfunction

共有: