FlashLite入門【2】ムービー作成の流れ

FlashLite

1.とりあえず作ってみる

　FlashLiteの単純なアプリケーションを1つ作る。
作業手順はこちら
１）FlashCS4でムービーを作成、PC上でテストする。
２）FTPソフトでWEBサーバーにswfファイルをアップロードする。
３）ケータイでWEBサーバーをアクセスし、動作を確認する。

　３で動作がおかしい場合は１に戻って修正する。今回は2つのボタンを用意し、それぞれをおすとステージ上のテキストエリアに”ボタン１””ボタン２”と表示するムービーをつくる。

2.flaファイルを新規作成する。

　Adobe Flash CS4 Professionalを起動する。ところで”Flash”といった場合、Flashの作成をするソフトなのか、ブラウザ用のFlashプラグインなのか、混同することがある。Flash(swfムービー)を再生するブラウザ用のプラグインは無料。作成用のAdobe Flash CS4 Professionalは有料。
http://www.adobe.com/jp/products/flash/

　作成用のソフトは、フリーも含めていくつかあるが、FlashLiteを開発できる環境は正規のFlashがお勧め。持っていない場合は、試用版が約1ヶ月使える。さて、Adobe Flash CS4を起動して、新規作成から「Flashファイル(モバイル)」を選ぶ。新規作成時にモバイル用を選ぶと、Device Central CS4が起動する。ここで、これから作るムービーのバージョンなどを決める。ここでは「新規ドキュメント」タブの設定は以下のように

・プレイヤーバージョン Flash Lite 1.1
・ActionScriptバージョン ActionScript 1.0
・コンテンツタイプ　スタンドアローンプレイヤー

　ウィンドウ左のサンプルデバイスセットから「FlashLite1.1 16 176x208」を選ぶ。開発ターゲットをダブルクリックすると、画面の左側にクリックしたデバイスが表示される。そこで、ウィンドウ下部の「選択されたすべてのデバイスのカスタムサイズ」という部分にチェックを入れると、デバイスのサイズに応じたステージサイズになる。
※このへんが面倒と感じる人は、最初「AS2.0」で作成し、「ファイル」メニューの「パブリッシュ設定」の「Flash」タブを変更して作成することもできる。

3.ボタンの作成

デバッグで変数の内容を確認するには主に2つの方法があります。
１）Traceを使う
２）画面上にテキストフィールドを配置する

１の方法は、開発中のPC上で確認する場合に使う。
２は、実機でもチェックできるので、PC上での開発が終わり、実機チェックの段階でトラブルを解決する方法。
・なんでもいいけど、ステージ内に四角を書いてみる。
・四角をドラッグして選択状態にする。
・右クリックで「シンボルに変換」(Windowsの場合）
・「シンボルに変換」ウィンドウの「タイプ」を「ボタン」にする。
・「OK」ボタンを押す。
・作成した「ボタン」を選択状態にして、アクションウィンドウを開く。
・下記スクリプトを記述する。

on (keyPress "1"){
    trace("1");
}

これでいったん完成。

　ここからはテスト。CTRL+EnterキーでDevice Centralが起動する。Device Centralではエミュレータがうごいてるので、画面上のケータイのキーをクリックするとキーを押したときの動作になる。ちなみに、テンキーを押しても動作するが、PCのキーとは配列が違うので、注意。(PCは123が下)

　エミュレータ上で”1”キーを押と、Flashのウィンドウの”出力”に「1」が表示される。何度も押すと、その回数分表示される。このtrace命令は開発中に”出力”ウィンドウに文字を出す命令。実機で動作中には機能しないし、無駄にswfの容量を消費する。
swf生成時にtraceを入れない設定がある（と思う）。ここでFlashLiteのポイントとしては「作成したボタンをクリックしているワケではない。」という事。
ケータイにはマウスもないしね。確認のために、ボタンのスクリプトを以下のように修正する。

on (keyPress "1"){
    trace("1");
}
on (keyPress "2"){
    trace("2");
}

1つのボタンに、”２キー”で押した動作を追加できる。

4.テキストフィールドの作成

　さて、trace、実機で動いているか確認出来ないし、エミュレータ上のテスト以外では意味が無い。確認用、もしくは占いの結果の表示、スコアの表示などで便利に使えるのがテキストフィールド。テキストフィールドはFlashと同様、変数を割り当てると、その内容が表示される。ただし、インスタンスで指定して、変数を割り当てない方式は使えない。テキストフィールドを配置して、ダイナミックテキストに指定。
変数名をaとする。

　画面上の適当な位置に適当なサイズのテキストフィールドを配置する。上部１／３に左上(0，0)から配置すればOK。

ボタンのスクリプトを修正。

on (keyPress "1"){
    trace("1");
    a=1;
}
on (keyPress "2"){
    trace("2");
    a=2;
}

　これでムービープレビューしてみる。Device Centralのケータイのキーをマウスでクリックして、1を押したらテキストフィールドに1が表示され、2を押せば２が表示される。

　問題無ければ、どこかレンタルしているWEBサーバーにFTPでアップする。QRコードを作ってくれるサイトもあるから、そのへんを利用すると便利。ひんぱんにテストするなら、テスト用のディレクトリをブックマークしておけばよい。

サンプルをこちら。

FlashLiteサイト[usuaji Games]
■FlashLiteのサンプル sample2_3.swf
http://hspcenter.com/i/

※ケータイ用のサイト

　テスト用のディレクトリはURLさえわかれば誰でもアクセスできてしまう。企業からの依頼の物などをチェックする時には何か対策を取ること。実機で試して問題がなければ、おわり。出来れば、複数のキャリアのケータイでチェックするなどの体制があると安心。

　という事で、駆け足の解説でわかりにくくてもうしわけないが、ここまでで作成の流れを紹介した。