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

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

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

おさらいと今回の内容

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

今回は、素材ファイルを組み合わせて、見栄えの良い待ち受けFlashを作ってみます。

• 今回作った待ち受けFlash

素材の準備

ケータイFlashのダウンロードサイトを見てみると、待ち受けFlashが大変人気なのが分かります。犬や猫の図柄に時計がついているというのがとてもキュートです。そこで、ライセンスが比較的ゆるい「クリエイティブコモンズ」の写真を使って待ち受けFlashを作ってみたいと思います。クリエイティブコモンズの写真は、「フォト蔵」を見ると、たくさん見つかります。

フォト蔵にはクリエイティブコモンズの写真がたくさん！

季節柄、白鳥の写真などを待ち受けにしてみたくなったので、白鳥の写真を加工して使ってみようと思います。多くの携帯電話のサイズは、QVGA [240×320] なので、これに合わせてここぞという部分を切り抜いてみました。(写真は、じじさんの戻ってきた白鳥たち081219です。)

ここでは、サイズを240×240の正方形で切り抜いて見ました。これを「gazou.png」という名前で保存しました。

切り抜いた白鳥の写真

swfmill で素材を SWFファイルに変換してみる

まずは素材をSWFファイルに変換してみます。そのためには、swfmill を利用します。swfmill を使うと、素材ファイルを記述したXMLを SWF に変換することができるのです。

前回の続きで、FlashDevelopを利用している人は、既にインストールされています。しかし、FlashDevelop では、swfmill にパスを通してくれないので、環境変数に swfmill のパスを追加した方が使い勝手がよくなります。そこで、swfmill を以下より入手して、パスを通します。

• swfmill — http://swfmill.org/

swfmillのセットアップ～パスを通す

まず、環境変数の設定画面を出します。環境変数の設定は、Windows Vista だと、[コントロールパネル - ユーザーアカウント - ユーザーアカウント] を開いて、エクスプローラーの左下にある[環境変数の変更]をクリックします。Windows XP なら、[コントロールパネル - システム - 詳細設定 - 環境変数]ボタンを選択します。

環境変数の中から、PATH を選んで、そこに「;c:\swfmill」など、swfmillをコピーしたパスを追加します。これで、swfmill コマンドを使えるようになります。

素材記述用 XML の作成とコンパイル

まずは、素材を記述する XML ファイルを作ってみます。これを「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>

これを、SWF ファイルにコンパイルするには、コマンドラインから以下のコマンドを実行します。

> swfmill simple Sozai.xml sozai.swf

すると、sozai.swf というSWFファイルが生成されます。

デジタル時計を埋め込む

待ち受けFlashに必要なもの、それは、デジタル時計です。次に、MTASC を使って時計をプログラムしてみます。なぜ、はじめから、MTASC で画像を表示しないのかと言えば、MTASC だけでは、SWF ファイルの中に画像などのリソースを埋め込むことができないからです。

そのため、swfmill で一度、SWF ファイルを作っておいて、その SWF に MTASC でスクリプトを埋め込むという手順を踏みます。

FlashDevelop を使っている場合には、設定画面で、埋め込みを行う SWF を指定します。その前に、前回の手順を参考にして、ActionScript2.0のプロジェクトを作っておいてください。

そして、メニューから[Project] > [Properties]をクリックして、設定ダイアログを出します。そして、[Injection] のタブを表示させて、Input SWF file に SWF ファイル（ここでは、sozai.swf）を指定します。

それでは、時計を表示するスクリプトを作ってみます。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();
        };
    }
}

FlashDevelopで実行してみます。無事にエラーがなく動作することが分かったら、携帯電話に転送してみます。

携帯電話に転送してみたところ

プログラムの説明

少し、プログラムについて補足してみます。前回、Hello, World プログラムを作ってみましたが、今回は、それに時間を表示する処理を追加したものとなっています。ルートとなるMovieClipに、onEnterFrame というイベントに関数を定義すると、フレームを書き換えるたびに、実行する処理を記述できます。

// 毎フレーム時計を表示する
swfRoot.onEnterFrame = function() {
    var d:Date = new Date();
    clock_txt.text = d.getHours() + ":" + d.getMinutes() + ":" +
                     d.getSeconds();
};

フォントを埋め込んでみる

ただ、味気ない時計を表示するだけでは物足りなく感じますので、フリーの手書き風フォント「あくあフォント」を埋め込んでみます。あくあフォントは、以下のサイトよりダウンロードできます。

• あくあフォント — http://www.vector.co.jp/soft/data/writing/se244261.html

はじめに、ベースとなる SWF ファイルを作成します。フォントを埋め込むためには、以下のように書きます。ポイントは、<library> タグの中に <font> タグを記述します。font タグの属性 glyphs には、使用する文字を指定します。ここにたくさん文字を記述すると、それだけファイルサイズが大きくなります。

<?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" />

            <!-- フォントを埋め込む -->
            <font id="font/aqua" import="aquafont.ttf" glyphs="0123456789:"/>
        </library>

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

    </frame>
</movie>

次に、時計を表示するスクリプトです。前回からの変更点は、embedFonts を true にし、TextFormat を指定するところです。

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.embedFonts = true;
        var fmt:TextFormat = new TextFormat();
        fmt.font = "font/aqua";
        fmt.color = 0xFFFFFF;
        fmt.size = 32;
        clock_txt.setNewTextFormat(fmt);
        // 毎フレーム時計を表示する
        swfRoot.onEnterFrame = function() {
            var d:Date = new Date();
            clock_txt.text = d.getHours() + ":" + d.getMinutes() + ":" +
                             d.getSeconds();
        };
    }
}

まとめ

以上、素材ファイルにデジタル時計を組み合わせた、待ち受けFlash を作ってみました。今回は素材を表示させて、そこにTextFieldを重ねただけなので、それほど動きがありません。そのため、あまり面白くありませんが、素材を組み合わせることで、面白い仕掛けを作ることができます。次回は、複数の素材を組み合わせて、面白い仕掛けを組み込んでみます。