ActionScript3.0入門ノート

dispatchEventは何やら難しそうなメソッドですが、実は意外と手軽に使えます。次のサンプルプログラムのポイントは、円いインスタンスがにょりっと伸びるアニメーションが終了したよ〜っていうのをdispatchEventするところにあります。
ソースファイルを置いておきますので、ちょっと研究してみてくださいね。

ソースファイル > leafs.zip

今日はこういうサンプルを作ってみました。
スプライトの並びが定期的に変わるアニメーション。

ソースファイル > formations.zip

ps.
DLできるようになりました。zipファイル名を間違えていました。(^ ^;;

サーフィンで新年早々、足の甲をケガ（剥離骨折）してしまいました・・・とほほ。
（ps.再検査したら指の骨が3本折れてました。ぎゃぽ〜）

さて、新年１個目のサンプルはちょっと入り組んでいます。ポイントは２つ。１つ目のポイントは二枚葉をDisplayObjectのツリーとして入れ子のように追加して植物を作るところ。2つ目は、すべて植え終わったというイベントを受けて全ての花を咲かせるところです。

双葉と花のシンボルはMovieClipクラスを拡張したクラスとリンケージしているので、そこも注目してください。また、花は茎の先頭の二枚葉に咲くように、入れ子になっているchildの末端を特定するために「再帰呼び出し」も使っています。

ソースファイル > plants.zip

今日はビットマップをグレースケールに変換するサンプルです。グレースケールからカラーに色が変わるエフェクトや、選択されている絵だけをカラーするなど、いろんな応用ができそうです。

スクリプトのポイントは３つ。１つは、MovieClipインスタンスのBitmapDataをどうやって取り出すか？という点。２つ目は色の取り出しと設定。そして３つ目がグレースケール変換の方法です。

RGBカラーをグレースケールに変換する換算式はいろいろあるようですが、ここではNTSC係数の加重平均法を使っています。

左がオリジナルの写真。右がスクリプトで作ったグレースケール写真。

竹ざおに止まっているトンボに触ると別の竹ざおに飛んで逃げるというサンプルです。トンボはを描き、ちゃんと進む方向を向いて飛びます。ちょっと楽しいでしょ。

このムービーのヒントになるのが次のサンプルです。トンボがマウスカーソルの周りをグルグル周回します。こちらはソースファイルを置いておくので、これを元に考えてみてください。

ソースファイル > event_tombo.fla.zip

黒虫（仮名）というムービーを作りました。似たようなムービーはあちこちで見たことがあると思いますが、ちょっと試したいことがあって作ったものです。
クリックして追い回すと楽しいですよ。(^ ^)/

メッセージ文をXMLから読み込み、それを吹き出しで表示するというサンプルです。XMLでは文字サイズと背景色も指定できます。

吹き出しはドラッグして表示位置と重なりを変えることができます。

日本語フォントを使う場合はフォントを埋め込むわけにいかないので、文字をビットマップに変換することでアニメーション中にも消えないようにしています。

せっかく吹き出しを作るクラスを作ったので利用しましょう。
タイムに加えて吹き出しの表示座標と文を書いたキューポイントXMLを作り、これをスクリプトで読み込んでFLVにキューポイントを設定します。そして、FLV再生中のキューポイントの通過イベントを受けて吹き出しを表示するというサンプルです。

FLVPlaybackコンポーネントにFLVCaptioningコンポーネントを組み合わせれば、再生に合わせて表示するキャプション（字幕）を簡単に付けることができます。
でも、こんな風に袋文字で表示するにはちょっとした工夫が必要です。
さて、どうすればいいんでしょうか？
答えは・・・次の本が出るまで待ってね〜（いろいろ事情があるわけで）

複数のイベントが完了したならば次の動作へ移行したいということがありますよね。次のサンプルでは、そんな複数のイベントを管理するEventGroupというカスタムクラスの簡単なデモです。

円いボールは、それぞれ好きな時間だけ動作して止まります。そして全部のボールの動作が完了するまで待ち、全部が止まったならば次の動作へ移行します。

ここで、個々に発生する「動作完了イベント」を受けて「全部の動作完了イベント」を発生するのがEventGroupの仕事です。メインのスクリプトは、EventGroupのイベントリスナーになるだけで、全員の動作完了を知ることができるわけです。

このサンプルは何の役にも立ちそうにないですが、たとえば複数の問題をクリアしないと先に進めないとか、ネットワークからの複数のデータの読み込みが完了しないと表示しないとか、そういう場合に役立つテクニックです。

ビットマップデータのタイリングとDisplacementMapFilterを組み合わせたサンプルです。うねりはperlinNoise()で作ります。

ちょっと揺れてる？

すっげー揺れている。

１つ前のエントリーで作ったクラスを継承して、揺れながらフェードインするクラスを作るとこんな感じになります。

写真もぐにゃぐにゃできます。

Bitmapを切り刻んでシュレッダー。

GraphicsクラスにはlineTo()、curveTo()、drawCircle()、drawRect()といった図形を描くためのメソッドがありますが、これだけでは不十分です。そこで標準以外の図形を描くクラスを作ってしまいましょう。Pointクラスなどをうまく活用すればいろいろな図形を描くことができます。

扇形を描ければ、次のようなパイグラフも作れますね。

100%表示のスケールがいつも直線だとつまらないと思いませんか？
ドーナツ型のスケールを作るには、まずはドーナツ図形を描くクラスを作ります。
扇形の描き方がわかった人はドーナツも描けるはず。

ベジェ曲線は難しそうですが、AS3.0をよく調べるとベジェ曲線を描くために使えるクラスが用意されていました。

ベジェ曲線を使って複数の点を滑らかにつなぐスプライン曲線も描けます。

ランダムな点を結んだスプライン曲線ではなく、途中が交差しない閉じたスプライン曲線を描くこともできます。

せっかく周回コースができたので、曲線に沿って車を走らせましょう！

自分で図形を描くようになれば、「描く」ってことは描画の式から途中の点の座標もわかるってことなので、図形に沿って動く、しかも向きもちゃんと合わせて、アニメーションをスクリプトで作ることができるようになります。