2013年5月8日水曜日

LWFのスクリプト

今回はスクリプトでタイムラインの制御をやってみたいと思います。

ですが、まずLWF for HTML5での基本的なスクリプトの記述について触れたいと思います。

基本的にスクリプトはフレームに記述していきます。
また、actionScriptではなくjavaScriptで記述します。



上記の画像のように

/* js

*/

と記述し、その間にjavascriptを記述していきます。
また、ムービークリップの1フレーム目の記述に限り、下記の記述を行うことができます。

/* js_load    (MCが生成された時点で1回だけ実行)
/*js_postLoad    (MCの再生準備が整った時に1回だけ実行)

ですが、ひとまず上記は置いておきます。後に詳しく触れたいと思います。





では、本題に入ります。
前回作った鳥が跳ねるムービークリップを改造したいと思います。
下記のような感じにして1フレーム目と最後のフレームにスクリプトの記述を行いました。


1フレーム目には下記のように記述しています


上記のスクリプトでまず、ラベル名[start]のフレームにジャンプしています。このように
ラベル名を指定してgotoAndPlay(),gotoAndStop()を行うことができます。
もちろんフレーム数でも指定することができます。Flashと同じく最初は1フレームから始まります。

スクリプト中のthisはムービークリップ自身を指しています。
ムービークリップ(LWF上ではMovieクラス)はこの他にも様々なメソッドがあります。

また、最後のフレームも上記と同じような記述になっておりアニメーションをループしています。





他にもplay()やstop()などで再生、停止を行ったりすることもできます。
サンプルLWFを下記の場所に置いてみましたのでご参考にどうぞ

http://lwfs.tamagokobo.com/lwfs_work_output/html5/list/part1/index-webkitcss.html
http://lwfs.tamagokobo.com/lwfs_work_output/html5/list/part1/index-canvas.html
http://lwfs.tamagokobo.com/lwfs_work_output/html5/list/part1/index-webgl.html

元のflaファイルはこちらになります。

http://lwfs.tamagokobo.com/source/part1/part1.fla

上記のLWFを見ていただければわかると思いますがボタンが使用されていると思います。
次回は、このボタンについて詳しく触れていきたいと思います。








0 件のコメント:

コメントを投稿