Flashを作ってケータイで動かしてみる

Flash

ケータイで動くFlashを作ってみた。

MTASC

MTASCは、オープンソースで開発されたActionScript2のコンパイラ。これを使えば、8万円くらいするAdobe Flashを買わなくてもFlashコンテンツが作れる。でも、これはコンパイラだけでGUIは無い。Adobe Flashを使えば、画面デザインとかアニメーションの作成はGUIでやれるわけだけど、それが無い。全てをコードで表現する必要がある。

MTASCをダウンロードして、どっか好きなところに配置して、pathを通しておく。コマンドプロンプトで

mtasc

と打ってヘルプが出ればおｋ。

ActionScriptを書く

ケータイで動くFlash Liteは、現状はActionScript2で書くらしい。ってことで書いてみた。

class HelloWorld{
   static function main(){
       _root.createTextField('textfield', _root.getNextHighestDepth(), 0, 0, 0, 0);
       var t:TextField = _root.textfield;
       t.autoSize = true;
       t.text = 'Hello, World!';
   }
}

テキストフィールドを作って、そこに「Hello, World!」の文字をセットしてるだけ。ファイル名はとりあえずhello.asとした。ファイル名とクラス名は同じだとかそういうルールはあるのかな？

コンパイル

コマンドプロンプトで

mtasc -swf hello.swf -main hello.as -version 7 -header 240:320:30

と打つと、hello.swfが生成される。オプションの意味は何となくわかると思う。最後のheaderは、幅:高さ:fpsの指定。一応QVGA(240x320)を意識してみたけど、どれくらいが妥当なのかよくわからない。

成功

生成されたswfファイルをWebから見える場所に配置し、ケータイから(iモードで)見てみると、ケータイの画面に「Hello, World!」の文字が出た。成功。Flash Lite向けのコンパイルをしたつもりはないけど、見れるんだね。

当然、PCでも見れる。

もう少し複雑なやつを

Hello, World!だけでは、わざわざFlashで作る意味が無い。普通のiモード用(x)htmlでは不可能なことをFlashで実現してみたい。

class HelloClock{
   function HelloClock(mc:MovieClip){
       var t:TextField = mc.newTextField(0, 0);
       t.text = 'Hello, World!';
       
       var t_date:TextField = mc.newTextField(0, 20);
       var t_time:TextField = mc.newTextField(0, 40);
       setInterval(function(){
           var d:Date = new Date();
           t_date.text = [
               d.getFullYear().toString(),
               (d.getMonth() + 1).toString(),
               d.getDate().toString()
           ].join('.');
           t_time.text = [
               d.getHours().toString(),
               d.getMinutes().toString(),
               d.getSeconds().toString(),
               d.getMilliseconds().toString()
           ].join(':');
       }, 1);
   }
   
   static function main(){
       MovieClip.prototype.newTextField = function(x, y):TextField{
           if(!this.textFieldId) this.textFieldId = 0;
           var name = '_text_field_' + this.textFieldId++.toString();
           
           this.createTextField(name, this.getNextHighestDepth(), x, y, 0, 0);
           var t:TextField = this[name];
           t.autoSize = true;
           
           return t;
       };
       
       var app:HelloClock = new HelloClock(_root);
   }
}

こんなのを書いてみた。簡単な時計。ActionScriptはほとんどJavaScriptと同じなので、クラスの使い方を調べれば簡単に書けた。

現在よく使われているJavaScriptと比べると、classを作ったり変数や関数に型を指定できたりstaticがあったりするのが新しい。JavaScript 2.0っぽい。

ただ、prototypeでメソッドを追加できたり、匿名関数を作ったり、それがクロージャになってたり、配列をjoinして文字列結合したり、setIntervalで定期実行させたり、今までのJavaScriptのやり方は十分通用する。ActionScript面白いわ。

以下のリンクから実際に見てみることができる。

ケータイから見る場合はiモードでswfファイルのURLに直接アクセスすれば良い。PCからではswfファイルをダウンロードしてしまうケースがあるので、htmlに貼り付けた形で見た方が良い。

Flex 3 SDK

ケータイで動かすことを考えず、PCだけをターゲットにするなら、Adobeがオープンソースで公開したFlex 3 SDKを使うとActionScript3でコードが書ける。さらにmxml + cssで画面デザインができる。htmlも使えるんだったかな。こっちの方が断然作りやすい。これも近いうちにやりたい。

ActionScriptのシンタックスハイライト

はてなのスーパーpre記法ってActionScriptのシンタックスハイライトはできないのか。とりあえずJavaScriptでやればいいんだろうけど、メタデータとして考えたときには微妙になる。

いつか対応してくれる日が来ることを願って、>|actionscript|と書いておいた。

終わり

とりあえずは、前にJavaScriptで作ったストップウォッチをFlashに移植してケータイで使えるようにしたいってのが目標。