ASonJS

ActionScript 1.0 on JavaScript

last modified date 2008.6.30

ASonJS は JavaScript 上で ActionScript 1.0 のようなスクリプトを書く事を目指しています。
Safari 用です。FireFox2~ Opera9.5~ でも動きます。IE の事は知りません。
用途は iPhone や iPodTouch 上で動くゲーム制作です。
このページを含め、まだまだヒドい部分が多々あります。

使用例

サンプル

ステージの生成

HTMLに


<div id='main' style ='width:320px; height:268px;'></div>

などと、ステージとなる DIV を作っておきます。
今のところ外部CSSファイルでサイズを指定すると Stage.width Stage.height が取れません。

head に


<script>

var setup = function(){

 var _root = Stage.init({element : document.getElementById('main') ,fps : 24});

}

window.addEventListener('load',setup,false);

</script>

という感じに書くと、ロード完了時に main に fps が 24 でステージサイズが320px*268pxのステージが作られます。
_root には _root となる MovieClip が入ります。この _root に attachMovie する事で
ステージに子MovieClipを追加して行きます。


var monkey = _root.attachMovie('player','monkey',_root.getNextHighestDepth());

この後で


monkey.onLoad = function(){~処理~};

と定義すると、実行中の関数を抜けた後で onLoad に定義した関数が実行されます。
（実際の ActionScript とは挙動が違います。）

ライブラリの作り方

HTML の中に


<div id='library' style='display: none;'>

 <div id='player' labels='{left:1, right:2, jump_left:4, jump_right:7}'>

  <img src='img/monkey_left.gif' width='32' height='32' alt='monkey_left' frames='1' />

  <img src='img/monkey_right.gif' width='32' height='32' alt='monkey_right' frames='2' />

  <img src='img/monkey_left_jump.gif' width='32' height='32' alt='monkey_left_jump' frames='3' />

  <img src='img/monkey_right_jump.gif' width='32' height='32' alt='monkey_right_jump' frames='4' />

 </div>

</div>

のようなタグを書いておきます。DIV 要素 player が本物の Flash で言うところの
ムービークリップシンボルに対応します。id はリンケージの識別子になります。
labels 属性はオブジェクトで「ラベル名:フレーム番号」の対応を複数まとめたオブジェクト。

DIV要素の中の IMG要素はムービークリップに表示される画像です。
src, width, height, frames は必須です。alt は空でも問題ありません。
frames はこの画像が何フレーム続くかの値です。上から順に合計されていきます。

例えば上記の例だと

[Frame 1] monkey_left.gif (ラベル名 left)
[Frame 2] monkey_right.gif (ラベル名 right)
[Frame 3] monkey_right.gif
[Frame 4] monkey_left_jump.gif (ラベル名 jump_left)
[Frame 5] monkey_left_jump.gif
[Frame 6] monkey_left_jump.gif
[Frame 7] monkey_right_jump.gif (ラベル名 jump_right)
[Frame 8] monkey_right_jump.gif
[Frame 9] monkey_right_jump.gif
[Frame 10] monkey_right_jump.gif

という感じにフレームが作られます。

一番上のDIV要素 library は必要ありませんが、まとめて非表示にすると便利です。

クラスとかメソッドとかプロパティとか

trace()

window.console.log に引数を渡します。Safari のコンソールや FireBug で使えます。

window.console.log が無い場合は何もしません。

Stage

init(initObject:Object)　ASonJS独自メソッド: initObject.element ステージとなるDIVノード; initObject.fps フレームレート; 戻り値は MovieClip（これを _root として使います）

使えるプロパティ: width; height; width と height には、init に渡したエレメントの style.width style.height の値が入ります

MovieClip

使えるプロパティ: _x; _y; _width …ただし、今のところ子MovieClipを含んだサイズの取得はできません。; _height …ただし、今のところ子MovieClipを含んだサイズの取得はできません。; _xscale; _yscale; _alpha; _visible; _totalframes; _currentframe; _rotation …ただし、今のところ子MovieClipには反映されません。; onRelease; onEnterFrame; onLoad; onUnload

独自プロパティ: _element …MovieClip の表示用DIV Element; _origin …_rotation を変更した時に軸となる部分を以下の文字列で指定。top-left, top, top-right, left, center, right, bottom-left, bottom, bottom-right の9種類。デフォルトは top-left

使えるメソッド: createEmptyMovieClip(name:String,depth:Number) : MovieClip; attachMovie(id:String,name:String,depth:Number,initObject:Object) : MovieClip; createTextField(name:String,depth:Number,x:Number,y:Number,width:Number,height:Number) : TextField; removeMovieClip() : Void; getNextHighestDepth() : Number; play() : Void; stop() : Void; gotoAndPlay(number or framelabel) : Void; gotoAndStop(number or framelabel) : Void; nextFrame() : Void; prevFrame() : Void; hitTest(MovieClip) : Boolean *MovieClip同士のみ（座標不可）

独自メソッド: addFrameScript(frame:Number, func:Function):Void … frame で指定したフレームに到達した時に func を実行します。サンプル

TextField

使えるプロパティ: text : String; background : Boolean; backgroundColor : String ex.'#FFFFFF' *background が true の時にのみ適用; （全体的に、下記 _element の style を書き換える方が簡単です）

独自プロパティ: _element …TextField の表示用DIV Element

使えるメソッド: removeTextField() : Void