これまででブログのヘッダーとしての機能は一応出来上がりましたが、これだけならわざわざFlashで作らなくても、HTMLとCSSで十分です。今回はちょっとしたアニメーションを追加して、Flashならではのヘッダーに仕上げていきます。

私は絵心がないので、動かすのは幾何学的な図形にしておきます。そんなわけで、流れ星のアニメーションにします。普通に星が動くだけでは面白くないので、ランダムな大きさ・タイミングで星が降るようにActionScriptでプログラミングします。

まずは降らせる星を描いていきます。新しいレイヤーを作成し、ブログタイトルのレイヤーとブログの説明のレイヤーの間に配置します。ActionScriptを使って描画するので、ここで星を描くのはどのレイヤーでもいいのですが、タイトルより下・説明より上に星を流したいので、分かりやすいようにここにレイヤーを作っておきます。

星を描くには多角形ツールを使います。多角形ツールはツールバーの矩形ツールを長押しして出てくるメニューから選択できます。多角形ツールを選択したら、プロパティペインのオプションボタンをクリックして、ツールの設定ウィンドウでスタイルを（多角形ではなく）星にすることで、星形を描くことができるようになります。塗りのカラーも星らしく黄色系にしておきます。

星形を正しい（？）向きで描くには、Shiftキーを押しながらマウスをドラッグすると楽です。普通に描画すると、スクリーンショットのように、線と塗が別々のオブジェクトとして描かれますので、輪郭線を削除しましょう。線の上でダブルクリックすると輪郭線を全選択できますので、その状態でDeleteキーを押せばOKです。次に星の上で右クリックして、シンボルに変換します。今回は、ムービークリップに変換します。シンボルに変換したら、ステージ上の星は削除します。

ステージから削除しても、今描いた星は右ペインのライブラリ内にあります。これをステージ上にドラッグして使うこともできます。プログラミング的には、ライブラリ内にある星はクラス（雛型）であり、ステージ上にドラッグすることでインスタンス化できます。この辺はオブジェクト指向プログラミングの考え方ですね。Actionscriptからインスタンス化して利用するには、クラスの名前を付ける必要があります。これがリンケージという作業になります。（シンボルに変換した時に付けた名前とは異なります。）

ライブラリ内の星を右クリックして、メニューからリンケージを選びます。リンケージプロパティというウィンドウが出るので、ActionScriptに書き出しをチェックし、クラスの名前を記入します。OKボタンを押すと警告ウィンドウが出ますが、これもOKを押します。

これでActionScriptでプログラミングする準備が整いました。前回スクリプト用に作ったレイヤーの先頭フレームを選択してアクションウィンドウを開きます。前回書いたスクリプトの続きに、以下のコードを記述します。

01: var star:Star = new Star();
02: addChildAt(star, 1);
03:
04: var vel:Number;
05: var life:Number;
06: addEventListener(Event.ENTER_FRAME, moveStar);
07:
08: initializeStar();
09:
10: function initializeStar():void {
11: 	star.x = Math.random() * 800;
12: 	star.y = -100 - Math.random() * 400;
13: 	star.scaleX = star.scaleY = 0.2 + Math.random() * 0.8;
14: 	vel = 0;
15: 	life = 300 + Math.random() * 700;
16: }
17:
18: function moveStar(e:Event):void {
19: 	if (star.y > life) {
20: 		initializeStar();
21: 	} else {
22: 		star.x -= vel;
23: 		star.y += vel;
24: 		vel += 0.5;
25: 	}
26: }

コードの中身を簡単に解説します。

1行目ではまずStarクラス（リンケージの作業で星につけたクラス名）のオブジェクトをインスタンス化し、2行目でこのインスタンスをステージに子として加えています。表示順は下から２番目、すなわち星を描く際に作ったレイヤーの位置です。この時点では位置を指定していませんので、まだ描画されません。位置を指定する処理は10行目からのinitialize関数に切り出してあり、8行目でこの関数を呼び出すことで描画されます。

今回は一度に一つの星しか降らせないので、インスタンスは一つだけで、大きさと初期位置をリセットすることで次の星にしています。8行目で、フレーム入るたびにmove関数が実行されるようイベントリスナーを設定しています。すなわち、move関数が星を移動させる処理になります。

initialize関数では、乱数を用いて星の初期位置・大きさ・寿命を設定しています。move関数では、星が寿命を過ぎている場合はリセット（initialize関数を呼び出し）し、そうでない場合は速度の分だけ星の位置を移動させます。速度はフレームに入るたびに増加、すなわち加速度運動をすることになります。

あまりスマートなコードではないかもしれませんが、ほぼ意図したとおりの動作になりました。複数の星（数もランダム）が流れるようにするともっと面白いですが、ブログのヘッダーなので、常時動きがあってうるさく感じるよりも、これくらいの方がいいのかなと思います。

これでFlashは出来上がりました。次回、Flashをブログに貼り付けて最終回とします。