Changes between Version 1 and Version 2 of HowTo/MtascTutorial


Ignore:
Timestamp:
Oct 27, 2010, 3:03:31 PM (14 years ago)
Author:
村山 俊之
Comment:

--

Legend:

Unmodified
Added
Removed
Modified
  • HowTo/MtascTutorial

    v1 v2  
    7575さて、これによって test.swf ファイルが生成されたはずなので、早速ブラウザ等で表示してみよう。画面の上の方に「Hello World!」と表示されれば ok 。
    7676
     77=== 簡単なアニメーションプログラム ===
     78
     79さて、 !ActionScript 2 および Flash Light 2.x のリファレンスについては、以下のサイトを辞書的に参照するとよい。
     80
     81 * [http://livedocs.adobe.com/flash/9.0_jp/main/wwhelp/wwhimpl/js/html/wwhelp.htm Flash CS3 ドキュメンテーション]
     82
     83HTML+!JavaScript の世界が HTML 文書を中心に回っているならば、 Flash+!ActionScript の世界は Flash '''ムービー''' を中心に回っている。 Flash ムービーは複数の'''ムービークリップ'''を重ね合わせるような形で構成されており、レイヤーを分けて同時に複数のアニメーションを走らせることができるようになっている。
     84
     85MTASC では、 -header オプションを用いて固定のフレームレートを指定することができるが、このフレームが切り替わるタイミングで呼ばれるメッセージハンドラメソッドが存在する。それが、 !MovieClip.onEnterFrame() メソッドだ。基本的には、空っぽのムービークリップオブジェクトを作成し、そのオブジェクトのメンバフィールド onEnterFrame に、 !JavaScript でやるのと同じ要領で、実際に描画を行う処理が記述された関数オブジェクトを代入しておけばよい。
     86
     87以下は、画面内でランダムな 3頂点による三角形を絶え間なく表示し続けるプログラムのサンプルである。
     88
     89{{{
     90class Tuto {
     91    // 画面の大きさ
     92    static var MAX_HEIGHT = 240;
     93    static var MAX_WIDTH = 240;
     94   
     95    static var app:Tuto;
     96   
     97    var mc:MovieClip;
     98
     99    function Tuto(parent_mc) {
     100        // 空のムービークリップを生成
     101        this.mc = parent_mc.createEmptyMovieClip("tuto_mc", 1);
     102        // フレームが切り替わるタイミングで呼ばれるメッセージハンドラを設定
     103        this.mc.onEnterFrame = function() {
     104            // ** この関数内の this は、関数の外側における this.mc と同じ意味になる。要注意! **
     105            // 画面をクリアする
     106            this.clear();
     107            // 塗りつぶしの開始
     108            this.beginFill(0xff4499);
     109            // 線のスタイルを設定
     110            this.lineStyle(2, 0x444444);
     111            // 線を描画
     112            this.moveTo(Math.floor(Math.random() * Tuto.MAX_WIDTH), Math.floor(Math.random() * Tuto.MAX_HEIGHT));
     113            this.lineTo(Math.floor(Math.random() * Tuto.MAX_WIDTH), Math.floor(Math.random() * Tuto.MAX_HEIGHT));
     114            this.lineTo(Math.floor(Math.random() * Tuto.MAX_WIDTH), Math.floor(Math.random() * Tuto.MAX_HEIGHT));
     115            // 塗りつぶしを終了; ここまでで描画した線の内部が塗りつぶされる
     116            this.endFill();
     117        };
     118    }
     119
     120    // プログラムの開始点
     121    static function main(mc) {
     122        app = new Tuto(mc);
     123    }
     124}
     125}}}
     126
     127このプログラムをファイル tuto.as として保存し、以下のコマンドでコンパイルすると、
     128
     129{{{
     130$ mtasc -swf tuto.swf -main -header 240:240:10 tuto.as
     131}}}
     132
     133this.mc.onEnterFrame に代入している関数が、毎秒 10 回呼び出される。その中での処理内容として、既に描画されている三角形を消し、塗りつぶしの色と線のスタイルを設定し、ランダムな位置と形で三角形を描画する、ということをやっている。
     134
     135== デバッグする ==
     136
     137MTASC に対応したデバッガは存在しないが、デバッグ版の Flash を使用することでログを出力することができる。また、このログを Firefox 上でリアルタイムにモニタするアドオンも存在する。
     138
     139=== デバッグ版の Flash をインストールする ===
     140
     141デバッグ版の Flash プレイヤーは以下の場所にて配布されている。
     142
     143 * [http://www.adobe.com/support/flashplayer/downloads.html Adobe Flash Player - Downloads]
     144
     145Firefox で使用するには、自身が用いている OS の「Plugin content debugger」と題されたリンクをクリックしてダウンロードし、インストールを行う。
     146
     147=== ログファイルのパス ===
     148
     149ログファイルのパスは固定であり、変更できない。 OS によって出力先が異なり、以下のようになっている。
     150
     151 * Windows XP の場合: %HOMEDRIVE%%HOMEPATH%\Application Data\Macromedia\Flash Player\Logs\flashlog.txt
     152 * Mac OS X の場合: /Users/(ユーザー名)/Library/Preferences/Macromedia/Flash Player/Logs/flashlog.txt
     153 * Linux の場合: $HOME/.macromedia/Flash_Player/Logs/flashlog.txt
     154
     155=== Flash Tracer をインストールする ===
     156
     157Firefox 上でログをリアルタイムに表示するアドオン Flash Tracer をインストールする。
     158
     159 * [http://www.sephiroth.it/firefox/flashtracer/ Firefox extensions - Flash Tracer (2.3.1) - sephiroth.it]
     160
     161リンク先ページの一番下にある「Install now」をクリックすると、インストールできずに黄色い帯の警告が表示されるので、「許可」ボタンをクリックしてインストールを強行する。
     162
     163その後、 Firefox を再起動し、「ツール」メニューの「Flash Tracer」を選択すると、画面左に Flash Tracer ペインが出現する。その横幅をドラッグ操作で広げてあげると、右下隅にスパナーの形をしたアイコンが表示されるので、それをクリックすると設定画面が表示される。その中の「Select output file」と書かれた入力欄に、上述したログファイルのパスを入力し、「Default charset」に「UTF-8」を選択して「OK」ボタンをクリックすれば、準備完了だ。
     164
     165=== トレースログを出力してみる ===
     166
     167以下のプログラムを作成し、コンパイルする。
     168
     169{{{
     170class Test {
     171    static var app:Test;
     172   
     173    function Test() {
     174        trace("Hello debug log!!");
     175    }
     176   
     177    static function Test(mc) {
     178        app = new Test();
     179    }
     180}
     181}}}
     182
     183生成された swf ファイルを Firefox で読み込み、「ツール」メニューの「Flash Tracer」を選択して Flash Tracer を起動すると、以下のようなメッセージが表示されているはず。
     184
     185{{{
     186Hello debug log!!
     187}}}
     188
     189このように、'''trace() 関数'''を用いることによって、任意の文字列をログに出力することができる。