FlashでiPhoneアプリのモックアップ作り

Tweet

書籍、iPhoneアプリで稼ごうを読んでいます。
この本は iPhoneアプリの設計・デザインから開発まで、さらにプロモーションのノウハウなど、個人開発者や小企業ではなかなか得られなかった情報を提供してくれる良書だと思いました。個人的には、アプリ開発受注時の注意点、見積書の書き方など、大変勉強になりました。

この本の中で、企画段階でアプリのモックアップを作るのに便利なツールが、いくつか紹介されていました。今まであまり気にしていなかったのですが、確かにニーズはあるなという気がします。
そこで、ひとつの方法として Flash CS5.5 + AIR for iOS を使ったモックアップ作りというのを提案してみます。
今回は、現在企画中の「ニンジンゲーム」を例にして、Flash でモックアップを作ってみました。

まず、ステージサイズを320×480にした空のドキュメントを作ります。
それから、タイムラインの１フレームに１画面分の情報を入れていきます。
今回は以下の３画面をタイムライン上に作成しました。
Flashを使う利点として、テキスト、シェイプ、ビットマップ画像などを自由に配置できることが上げられます。

ステージ１：タイトル画面

ステージ２：ゲーム画面

ステージ３：ゲームオーバー画面＆広告エリア

全体のタイムラインは以下のようになりました。

ステージ１のタイムラインに、以下の ActionScript を埋め込みます。

stop();

stage.addEventListener(MouseEvent.CLICK,stageClick);

function stageClick(e:MouseEvent):void {
	var no:int = currentFrame;
	++no;  // 次のフレームNOを計算
	if (no>totalFrames) {
		no = 1;  // 最初のフレームへ戻る
	}
	gotoAndStop(no);  // フレーム移動
}

これで、画面をタップする毎に、１画面ずつ遷移していくモックアップアプリケーションができました。
これをパソコン上でプレビューするだけでもいいですが、AIR for iOS アプリとしてパブリッシュして、iPhoneなどのデバイスに転送すれば、プレゼンの際に威力を発揮するのではないかと思われます。