Flashで覚えるアセンブラ・スタックマシン入門(Flasm)

• Flashのアセンブラ Flasm を使ってみよう
• swfmill と Flasm で簡単な Flashアセンブラを書いてみよう

前回より、Flasm を使って、バイトコードやスタックマシンについて解説しています。２回目となる今回は、swfmill の使い方を紹介し、ゼロから簡単なスクリプトを作ってみます。

前回のおさらい

Flasm という無料のアセンブラ＋逆アセンブラがあります。Flasm を使うと、Flashファイル(SWFファイル)をFlasm形式のアセンブラに逆コンパイルしたり、これを書き換えて、再度、SWFファイルにコンパイルすることができます。

Flashのスクリプトを実行する仮想マシンは、非常にオーソドックスなスタックマシンとなっており、アセンブラ・スタックマシンを学ぶのに最適な教材と言えます。（そして、時に、Flashを扱う実用上の問題にも対処できるでしょう。）

本稿では、これまで、アセンブラやスタックマシンに興味があったけれど、いまいちよく分からなくて足を踏み出せなかったという方や、ABC(ActionScript ByteCode)に興味がある方に向けて解説をします。

Flasm だけで SWFファイルを作成できるか？

実のところ、Flasm には、Flashファイル(SWFファイル)からスクリプト部分を抜き出して、アセンブラに変換して表示する機能と、変更が加えられたアセンブラをコンパイルして、SWFファイルに埋め込むという機能しかありません。つまり、Flasm だけでは、ゼロからSWFファイルを生成することはできません。

そこで、Flasm と併用したいのが、swfmill と呼ばれるツールです。swfmill は、簡単な XML から SWFファイルを生成することができます。

• swfmill ～ XMLからSWFファイルを生成するツール
• http://swfmill.org/

インストールは簡単です。Windows 版をダウンロードしてきたら、アーカイブを解凍し、swfmill.exe を、前回インストールした、Flasm と同じフォルダにコピーしてください。以上で終了です。

swfmill で Flash ファイルを作成する

それでは、まず、swfmill で簡単なSWFファイルを生成してみようと思います。以下のようなXMLファイルを作成して、「test.xml」という名前で保存してください。

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

  <background color="#ffffff"/>
  <frame>
    <textfield id="a_txt" width="320" height="240" size="32" text="hello!"/>

    <place id="a_txt" name="output" depth="10"/>
  </frame>
</movie>

そして、コマンドラインから、以下のように入力すると、test.swf というSWFファイルを作成します。（swfmill を簡単に使うには、「swfmill simple [IN] [OUT]」のように記述します。）

swfmill simple test.xml test.swf

ここで、作成されたファイルを実行してみると、320×240の真っ白な画面に「hello!」とそっけないメッセージが書かれたFlashが表示されます。

swfmillで生成したSWFファイル

これを、Flasm で逆アセンブルしてみます。

flasm test.swf

すると、「test.flm」というファイルが作成され、覗いてみると以下のようなアセンブラが生成されています。つまり…何もないということですね。

movie 'test.swf' compressed // flash 7, total frames: 1, frame rate: 12 fps, 320x240 px
end

ここへ適当なアセンブラを記述して、Flasmでコンパイルすれば、Flashを使わずに、SWFファイルを作成することができるだろうと思っていたのですが、残念ながらそうはいきません。前述の通り、Flasm では、スクリプト領域を書き換えることができるだけで、スクリプト領域を作ることはできないのです。

そこで、「test.xml」にダミーのスクリプト領域を追加します。XMLの<DoAction>から</DoAction>までがそれに相当します。

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

  <background color="#ffffff"/>
  <frame>
    <textfield id="a_txt" width="320" height="240" size="32" text="hello!"/>

    <place id="a_txt" name="a_txt" depth="10"/>
    <DoAction><actions><EndAction/></actions></DoAction>

  </frame>
</movie>

これを、SWFに変換するには、以下のように書きます。

swfmill simple test.xml test.swf

それでは気を取り直して、再度、Flasm で逆アセンブルしてみます。

flasm test.swf

今度は、うまくいきました。以下が作成された「test.flm」のコードです。

movie 'test.swf' compressed // ...
  frame 0
  end // of frame 0
end

これを、以下のように書き換えましょう。

movie 'test.swf' compressed
  frame 0
    push 'a_txt'
    getVariable
    push 'text'
    push 'FLASM & SWFMILL!'
    setMember
  end // of frame 0
end

そして、Flasm でこのコードを、SWFに埋め込むには次のように書きます。

flasm -a test.flm

すると、次のような、SWF ファイルが生成されます。

無事Flasmアセンブラの埋め込みに成功しました。

また、swfmill を使うと、JPEG や PNG 画像を SWF内に埋め込むことができますので、Flasm と組み合わせることで、Flash を使うことなくちょっとしたゲームを作ることもできると思います。

続いて、swfmill と Flasm を連携させて簡単なプログラムを作ってみます。

画面を左から右へ移動するキャラクターを作る

ここで作るプログラムは、ボール型のキャラクターが画面の左から右へ移動するという非常に単純なものです。キャラクターのために、適当なドローソフトで、ball.png という画像ファイルを作りました。

ball.png の画像

それから、この画像を、SWF に埋め込むために、swfmill で以下のようなXMLファイル「ball.xml」を作りました。以下のXMLで画面に ball.png を表示します。

<?xml version="1.0" encoding="utf-8" ?>

<movie width="320" height="240" framerate="12">
  <background color="#ffffff"/>
  <frame>

    <library>
      <clip id="ball_mc" import="ball.png" />
    </library>
    <place id="ball_mc" name="ball_mc" depth="10" x="10" y="10"/>

    <DoAction><actions><EndAction/></actions></DoAction>
  </frame>
</movie>

そして、前回の手順どおり、これを、SWF に変換し、SWF から、Flasm のための雛形ファイルを作成します。

swfmill simple ball.xml ball.swf
flasm ball.swf

Flasmの雛形「ball.flm」は次のようなものです。そこで、この雛形を書き換えます。

movie 'ball.swf' compressed // ..

  defineMovieClip 1 // total frames: 1
  end // of defineMovieClip 1

  exportAssets
    1 as 'ball_mc'
  end // of exportAssets

  frame 0
  end // of frame 0
end

まずは、このボールを右方向に動かすことから考えてみましょう。ボールの X 座標を取得して、それに１０を足して、再度 X 座標に設定すれば良いのです。簡単に思えます。

しかし、Flash では、１フレームの中で座標を変えても、画面には反映されません。毎フレームごとに座標を変更するという処理を入れないといけないのです。毎フレームごとに処理を行うには、「onEnterFrame」イベントの中で処理を行います。

以下のFlasmアセンブラが、毎フレーム処理を行うようにイベントを設定する例です。以下の、(*1)の部分に、フレーム内で行う処理を記述します。

movie 'ball.swf'
  frame 0
    push '_root'
    getVariable
    push 'onEnterFrame'
    function ()
      // <--- (*1)
    end
    setMember
  end // of frame 0
end

上記の処理は、ActionScript で書くと、以下のようになります。匿名関数を利用して、毎フレーム、何かしらの処理を実行するというものです。

_root.onEnterFrame = function () { .. };

それでは、上記の雛形にボールを右側に１０ずつ移動するコードを追加してみます。

movie 'ball.swf'
  frame 0
    push '_root'
    getVariable
    push 'onEnterFrame'
    function ()
      // ball_mc._x += 10;
      push 'ball_mc'
      getVariable
      push '_x'
      push 'ball_mc'
      getVariable
      push '_x'
      getMember
      push 10
      add
      setMember
    end // function
    setMember
  end // of frame 0
end

このコードを、コンパイルしたものが、以下になります。ボールが、左から右に移動していきます。

http://aoikujira.com/demo/hakkaku/rc/1KTv3iUaSdS+js+cNfIf5Q_ball.swf

アセンブラだと、思いのほかソースが長くなってしまうのですが、少しアセンブラのニーモニックを確認してみます。

まずは、現在のボールの座標を取得するコードです。getVariable で変数の取得、getMember でオブジェクトのメンバを取得できます。以下は、ball_mc のX座標を表すメンバ _x を取得します。

      push 'ball_mc'   // stack ['ball_mc']
      getVariable      //       [(ball_mc のオブジェクト)]
      push '_x'        //       [(ball_mc のオブジェクト), '_x']
      getMember        //       [10]

そして、X座標に値を設定するには、setMember を利用します。以下は、「ball_mc._x = 30」のアセンブラコードです。

    push 'ball_mc'     // stack ['ball_mc']
    getVarialbe        //       [(ball_mcのオブジェクト)]
    push '_x', 30      //       [(ball_mcのオブジェクト), 30]
    setMember          //       []

つまり、上記の、X座標に30を代入するコードの30のところに、X座標の取得コード＋αを挿入すると、画面の左から右に移動するキャラクターが実現できることになります。

まとめ

swfmill を利用することで、Flasmの元になるFlashを自由に作成することができます。また、画像を埋め込むことができるので、swfmill と Flasm を使えば、かなりいろいろな SWF ファイルを作成できることが分かると思います。また、Flasmのアセンブラを眺めていると、Flashのバイトコードが、非常に ActionScript のコードに近いことも分かります。