無料で作るケータイFlash（Flash Lite2/3）

• 開発ツールを揃えよう！
• 開発ツールのセットアップ
• 待ち受けFlashを作る
• ズームする待ち受けFlashを作る

本連載では、ケータイFlash(Flash Lite 2/3)を無料ツールだけで作ることを目標にしています。今回は携帯電話で使える待ち受けFlashを作るまでの過程を紹介します。

おさらいと今回の内容

• 1回目は、Flash Lite 2/3 を作ることのできるオープンソースのソフトをいろいろ紹介しました。
• 2回目は、MTASCを使ってコンパイルの仕方を紹介しました。簡単なFlashファイルを作って携帯電話で動かしてみました。
• 3回目は、swfmill を利用して画像やフォントを組み込んだ Flashファイルを作りました。

今回は、前回の補足と、もう少しスクリプトを組み込んで「ズームする待ち受けFlash」を作ってみます。

前回の復習～MTASCとswfmillで素材入りSWFファイルの生成

前回は、FlashDevelop の機能を使って、swfmill で作った SWFファイルにスクリプトを埋め込んでみました。FlashDevelop を使わずに作業する場合や、Mac OS X で作業をする場合などは、コマンドラインからコンパイルする必要があります。

もう一度、手動での作業手順と簡単なサンプルを確認してみます。

必要となるファイルは次の通りです。

• sozai.xml
• gazou.png
• Main.as

gazou.png は、240×240px の PNG画像ファイルです。

file:sozai.xml

<?xml version="1.0" encoding="UTF-8" ?>
<movie width="240" height="240" framerate="12" version="7">

  <background color="#000000"/>
  <frame name="first">
    <!-- ライブラリに素材を追加する -->
    <library>
      <clip id="GAZOU" import="gazou.png" />

    </library>
    <!-- 画面に素材を配置する -->
    <place id="GAZOU" name="pic_mc" x="0" y="0" depth="1"/>

  </frame>
</movie>

file:Main.as

class Main
{
    public static function main(swfRoot:MovieClip):Void
    {
        // TextField を配置する
        var clock_txt:TextField;
        swfRoot.createTextField("clock_txt", swfRoot.getNextHighestDepth(),
                                10, 10, 200, 50);
        clock_txt = swfRoot.clock_txt;
        clock_txt.textColor = 0xFFFFFF;
        // 毎フレーム時計を表示する
        swfRoot.onEnterFrame = function() {
            var d:Date = new Date();
            clock_txt.text = d.getHours() + ":" + d.getMinutes() + ":" +
                             d.getSeconds();
        };
    }
}

以下、コンパイル手順です。

（１）swfmill で素材入りの SWF ファイルを作る

MTASC だけでは、画像やフォントなど素材入りのSWFを作ることができません。そこで、素材の元となるSWFファイルを swfmill で作成します。

> swfmill simple sozai.xml sozai.swf

コンパイルすると、sozai.swf が生成されます。

（２）SWFファイルにスクリプトを埋め込む

次に、素材入りSWFファイル「sozai.swf」にスクリプト「Main.as」を埋め込みます。

> mtasc -main Main.as -swf sozai.swf -out Matiuke.swf

コンパイルすると、「Matiuke.swf」が生成されます。

このSWFファイル「Matiuke.swf」を携帯電話に転送して、動作確認できます。

（参考）画像の切り抜きツール

ちなみに、画像ファイルを指定の大きさで切り取るツールを、日本語プログラミング言語「なでしこ」で作ってみたので、良かったら試してみてください。

使い方ですが、なでしこのエディタに以下のプログラムを貼り付けて実行します。画像ファイルを尋ねられるので、画像ファイルを指定すると、画像が画面に表示されます。そこで、ドラッグでウィンドウの大きさを変更すると、画像も同じようにリサイズされます。そこで、画面上の四角い枠を移動させて切り抜きたい部分に合わせて、枠をダブルクリックします。すると、画像を保存できます。

#-----------------------------------------------------------------------
# 画像切り抜きツール
#-----------------------------------------------------------------------
画像W=240
画像H=240
「画像|*.jpeg;*.jpg;*.png」のファイル選択して対象ファイルに代入。
もし、対象ファイルが空ならば、終わる。
#-----------------------------------------------------------------------
対象画像とはイメージ。その位置は「0,0」
一時画像とはイメージ。その可視はオフ。
保存画像とはイメージ。その可視はオフ。
一時画像の画像は対象ファイル。
母艦のサイズ変更した時は
　　対象画像の画像は空。
　　対象画像の幅＝一時画像の幅。
　　対象画像の高さ＝一時画像の高さ。
　　一時画像を対象画像の0,0へ画像コピー。
　　対象画像を(母艦の幅),(母艦の高さ)で、
　　画像比率変えずリサイズ。
母艦のサイズ変更した時。
範囲とはトラック。
そのサイズは「0,0,{画像W},{画像H}」
範囲のダブルクリックした時は
　　保存画像の幅は範囲の幅。その高さは範囲の高さ。
　　対象画像の(範囲のX),(範囲のY),(範囲の幅),(範囲の高さ)を、
　　保存画像の0,0へ画像部分コピー。
　　F=「PNG|*.png」の保存ファイル選択。
　　もし、F=空ならば、戻る。
　　保存画像をFへ画像保存。
範囲を最前面。
#-----------------------------------------------------------------------

絵を動かしてみる

それでは、時計だけが表示されていた待ち受けFlashに、もう少し動的な要素を組み込んでみようと思います。

Main.as を以下のように書き換えると、以下の画像の位置とサイズを次第に大きくしたり、小さくしたりを繰り返すようになります。

class Main
{
    public static function main(swfRoot:MovieClip):Void
    {
        // --- 時計 ---
        var clock_txt:TextField;
        swfRoot.createTextField("clock_txt", swfRoot.getNextHighestDepth(),
                                10, 10, 200, 50);
        clock_txt = swfRoot.clock_txt;
        clock_txt.textColor = 0xFFFFFF;
        // --- 毎フレームの処理 ---
        var v   = 1;
        var dir = 1;
        var speed = 1.3;
        var w = swfRoot.pic_mc._width;
        var h = swfRoot.pic_mc._height;
        swfRoot.onEnterFrame = function() {
            // 時計
            var d:Date = new Date();
            clock_txt.text = d.getHours() + ":" + d.getMinutes() + ":" +
                             d.getSeconds();
            // 画像を拡大する
            // 位置の変更
            swfRoot.pic_mc._x  = (240 - w) / 2;
            swfRoot.pic_mc._y  = (240 - h) / 2;
            // サイズの変更
            swfRoot.pic_mc._width  = w;
            swfRoot.pic_mc._height = h;
            w = w + dir * speed;
            h = h + dir * speed;
            v = v + dir;
            if (v <= 0 || v > 100) {
                dir = dir * -1;
            }
        };
    }
}

画像オブジェクト（ムービークリップ）のサイズを変更するには、_width と _height を変更します。位置を変更するには、_x と _y を変更します。

ただし、ActionScript で、連続でムービークリップのサイズ変更するときなどに、for 文を使うと、最後の状態だけが反映されて経過を見ることはできません。例えば、以下のように記述して実行したとします。

for (var i = 0; i < 300; i++) {
    swfRoot.pic_mc._x = i;
}

これは、pic_mc._x には、for 文の最後の値、299 が代入されて終わり、繰り返しの経過を目で確認することはできません。

それでは、どうすれば、良いのかと言うとフレームの書き換え時に呼ばれる「onEnterFrame」イベントで処理します。このイベントの中で、カウンタを加算することにより、オブジェクトの移動を表現できます。

var i = 0;
swfRoot.onEnterFrame = function() { // ... フレームの書き換え時のイベント
    if (i < 300) {
        swfRoot.pic_mc._x = i++;
    }
}

ActionScript2.0 を学ぶにはどうしたら良いか？

ここまでで、なんとなく、ActionScript2.0 を使って、絵を動かしたり、テキストを設定する方法を紹介してきました。しかし、断片的な情報で、ActionScript2.0 のことが、よく分からないという方も多いと思います。

最新の ActionScript のバージョンは、3.0 で、FlashLite で使う ActionScript2.0 とは、またちょっと違った物になっています。そこで、役立つのが、Flash 8以前の資料です。Flash MX 2004 や、Flash 8 に対応したものなら、ActionScript2.0 用です。これは、そのまま、FlashLite 2/3 に対応できます。

また、ActionScript は、JavaScript と互換性があるので、JavaScript が分かる方なら、Adobe にある ActionScript 2.0 の資料に目を通すだけで、その大まかな部分を掴むことができると思います。

• Adobe Flash ActionScript 2.0 の学習とリファレンス
• http://help.adobe.com/ja_JP/AS2LCR/Flash_10.0/help.html?co..

まとめ

以上、簡単ながらフリーソフトの、MTASCとswfmillを利用して、FlashLite 2/3 対応の SWFファイルの作り方を紹介しました。

デザインにこだわりたい人は、Adobe Flash を利用して作る方が生産性は高いと思います。しかし、この連載で紹介したように、画像を表示したり、それをちょっと動かすだけのものや、ゲームを作るなら、Adobe Flash よりも、MTASC を中心にスクリプトを書いた方が効率が良い場合もあります。

FlashLite の表現力では、制約も多くあまり重厚なアプリケーションは作れませんが、ちょっとしたゲームや簡単なツールなどを作るのにはぴったりです。フリーではじめられる利点を活かして、ぜひ、何か作ってみてください。