トップ » 技術記事 » 無料で作るケータイFlash(Flash Lite2/3)(1) - 開発ツールのセットアップ

無料で作るケータイFlash(Flash Lite2/3)(1) - 開発ツールのセットアップ

タグ: ActionScript Flash Lite ケータイFlash

ケータイFlash(Flash Lite 2/3)対応端末が、今や非常に幅広いことに驚きます。携帯電話は当然のこと、MP3プレイヤーなどの携帯デバイス、ゲーム機のWii/PS3、無線LAN内蔵の次世代目覚ましのChumbyなど多くの環境で動かすことができます。本連載では、無料のツールを組み合わせて Flash Lite 2/3 に対応したアプリを作る方法を紹介します。

おさらいと今回の内容

前回は、Flash Lite 2/3 を作ることのできるオープンソースのソフトをいろいろ紹介しました。mtasc や swfmill といったツールが何をするものなのか紹介しました。今回は、MTASC と swfmill の開発環境のセットアップ方法を紹介したいと思います。

MTASC で Hello World

それでは、はじめに、ActionScript 2.0 コンパイラの「MTASC」を使って、Hello, World を表示するところまで、手順を追って紹介します。

まずは開発用エディタFlashDevelopをインストールしよう!

ここでは、一番簡単にやる方法として、Windows + FlashDevelop を利用して作業してみます。(MacやLinuxな人は、次の項目を見てください。) FlashDevelop は、ActionScript を記述するのに最適の開発用エディタです。前回も紹介しましたが、Adobe Flash 標準のエディタよりずっと賢いので、Adobe Flash を持っている人でも、FlashDevelopと併用している人もたくさんいます。

※英語なので、ちょっと抵抗があるかもしれませんが、上記ページの Information のタブにある「Releases」をクリックします。そして、「FlashDevelop 3.x.x xxx released」の記事を見ると、ダウンロード先のアドレスが記述されています。

http://aoikujira.com/demo/hakkaku/rc/200812113a2yD-dl0.png
http://aoikujira.com/demo/hakkaku/rc/20081211zG9FW1-dl1.png

また、.NET Framework2.0が必要になります。もし、入っていなければインストールしてください。

ダウンロードができたら、インストーラーを実行します。[Next]ボタンを何度かクリックしたら、特に困ることなくインストールが完了すると思います。

次に mtasc をインストールしよう!

そして、次に、ActionScript2.0 コンパイラの MTASC をインストールすることになるだろうと、思うかもしれませんが、実は、FlashDevelop をインストールすると、もれなく、MTASC が組み込まれますので、別途インストールする必要はありません!!

しかし、FlashDevelop に抵抗がある人や、Mac OS X/Linuxを使っている人のために、MTASC のインストールについて書いておきます。

  • MTASC (Windows/Mac OS X/Linux)は以下のサイトからダウンロードできます。
  • http://www.mtasc.org/

ダウンロードしたら、ZIPファイルを解凍します。そして、適当なフォルダにコピーして、そのディレクトリにパスを通します。

FlashDevelop でプロジェクトを作ろう!

それでは、FlashDevelop の手順に戻ります。まずは、FlashDevelop を起動します。次に、新規プロジェクトを作ります。そのためには、メインメニューから[Project] > [New Project] をクリックします。そして、[ActionScript2]のカテゴリから「AS2 Project」を選択します。

http://aoikujira.com/demo/hakkaku/rc/20081211XDdzyd-newpro.png

ここでプロジェクト名は「HelloWorld」にして、[OK]ボタンを押します。

メインクラスを作ろう!

次にいよいよ、ActionScript2.0を記述します。ここまでの手順で、MTASC のメインクラスの雛型が完成しています。画面右側に出ている[Project]のパネル(Project Manager)の src の中にある、Main.as をダブルクリックします。

http://aoikujira.com/demo/hakkaku/rc/20081211HzqbwZ-hinagata.png

このまま、ツールパネルの実行ボタン(あるいはメニューから[Project]>[Test Movie])をクリックすると、コンパイルが行われて、内蔵ブラウザに、真っ白なSWFファイルが表示されます。

さて、何も表示されないのでは寂しいので雛型に手を加えて、Hello World を完成させてみます。以下のプログラムのように書き換えてみて、再度、コンパイル+実行をしてみます。

class Main
{
	public static function main(swfRoot:MovieClip):Void
	{
		// --- ここから追加
		_root.createTextField("a_txt", 1, 0, 0, 200, 300);
		_root.a_txt.text = "Hello, World!";
		// --- ここまで追加
	}

	public function Main()
	{
	}
}
http://aoikujira.com/demo/hakkaku/rc/20081211biJRc-hello.png

小さい文字で、Hello と表示されたことと思います。

Main.as には、Mainクラスを記述するという決まりになっています。つまり、ファイル名とクラス名は一致させる必要があります。これは、Java のクラスの作り方と似ています。

MTASCでは静的関数(static function)の main() 関数がエントリポイントになっています。一番はじめにこの関数が実行されます。

ここで追加した2行ですが、1行目では、テキスト表示用のテキストフィールド(TextField)を生成し、2行目でそこに文字を設定しています。

_root.createTextField("a_txt", 1, 0, 0, 200, 300); // --- (*1)
_root.a_txt.text = "Hello, World!";                // --- (*2)

Flash には、文字を表示するためのテキストフィールド(TextField)や、図形や画像を表示するためのムービークリップ(MovieClip)が用意されています。これらのオブジェクトはツリー状に配置されます。

MovieClip には、自身の子要素としてテキストフィールドを作成する「createTextField()」や、ムービークリックを作成する「createEmptyMovieClip()」というメソッドが用意されています。

例えば、顔を描画するときには、顔の輪郭を配置し、その上に目や口や鼻といったパーツ(MovieClip)を配置します。そして鼻の上には穴のパーツを配置するという具合に、ツリー状に配置することで顔を完成させるのです。


+- 顔の輪郭
    |- 目
    |- 口
    |- 鼻
        |- 鼻の穴

プログラム中の(*1) では、_root (FlashのトップレベルのMovieClip)に、a_txt という名前の MovieClip を追加しています。(*2) を見ると分かりますが、追加された a_txt を操作する場合には、_root.a_txt という名前でアクセスすることができます。この text に値を代入することにより、画面に文字が表示される仕組みとなっています。

携帯電話で動かしてみる

それでは、実際に携帯電話で動くように、設定を変えてみます。FlashDevelop のメニューから[Project]>[Properties]をクリックすると、コンパイル設定を変更するダイアログが出てきます。この中の[Output]タブで、Platform の Target を、Flash Player 7 に設定します。これで、FlashLite2 に対応するSWFファイルが作れます。もし、FlashLite3 に対応させるには、Flash Player 8 に設定します。

次に、General の Dimensions を携帯電話の画面サイズに設定します。 以下のページを見ると、Docomo の携帯電話の画面サイズが一覧で示されています。この中からターゲットとなりそうな画面サイズを考えて決定すると良いでしょう。

一般的には、QVGA [240×320] か、WQVGA [240×400] に合わせて作ることになると思います。ここでは、240×240 に設定してみましょう。(ちなみに、この値をケータイFlash配布サイトに登録されているケータイFlashを解析してみたところ、このサイズのものが多かったので、これに合わせると良いでしょう。)

また、ケータイFlashでは処理速度が遅いので、コマ落ちが生じることがあります。そこで、Framerate も、12など小さな値にしておく必要があります。

設定例
設定例

次に、携帯電話に転送して動くかどうか確認してみましょう。転送の方法には、いくつか方法があります。

  • ホームページにアップしておいて携帯電話のブラウザでアクセスする
  • メールに添付して開く
  • SDカードなどにコピー
  • 赤外線やBluetoothで転送する

最後のSDカードにコピーする方法は、パケット代もかからず非常に手軽なのですが、機種によって、Flashを認識できるディレクトリが違いますので、試行錯誤が必要かもしれません。(適当なFlashファイルをSDカードに保存してみてどこにコピーされているのか確認してみましょう。)

また、赤外線やBluetoothが使えるなら、SDカードを差し替えることなく転送することができるので、パケット代節約派の筆者は個人的には一番重宝しています。

実際に、Hello, World のSWFファイルを実行してみたところを、別の携帯電話で撮影したのが以下の写真です。

http://aoikujira.com/demo/hakkaku/rc/20081211yG8OI-keitai.png.jpg

まとめ

以上、今回はMTASCを利用してケータイFlashを作ってみました。ActionScript2.0は、JavaScriptにクラスの概念を導入した言語です。Javaに慣れていると、ちょっと癖があるように感じるかもしれませんが、ちょっと文字を表示したり、画像を動かすくらいなら、それほど難しくありませんので、そのあたりから挑戦してみると良いでしょう。

今回は、文字を表示しただけで終わってしまいましたので、次回は、swfmill など他のツールと MTASC を併用して絵を動かしてみたいと思います。お楽しみに。

Series Navigation

執筆者紹介

クジラ飛行机

クジラ飛行机

くじらはんど(http://kujirahand/)にて、日本語プログラミング言語「なでしこ」(IPA未踏ユース採択)、テキスト音楽「サクラ」(OSPオンラインソフト大賞入賞)など多くのオンラインソフトを開発。著書に「Flexプロフェッショナルガイド」「なでしこ公式バイブル」、「一週間でマスターするActionScript3.0」など。

TrackBack URL :