私は絵心がないので、動かすのは幾何学的な図形にしておきます。そんなわけで、流れ星のアニメーションにします。普通に星が動くだけでは面白くないので、ランダムな大きさ・タイミングで星が降るように 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 をブログに貼り付けて最終回とします。

まずはロールオーバー効果を付けてみましょう。最初に、ブログタイトルを選択して右クリックし、シンボルに変換します。適当に名前をつけ、タイプはボタンを選択します。

後で使用することになるので、このシンボルにインスタンス名（blogTitle とします）を付けておきます。

この「シンボルに変換」という概念が最初はよく分からなかったのですが、このテキストを含んだ別の独立した子ムービー（今回の例ではボタンですが）のオブジェクトを配置する感じでしょうか。ブログテキストをダブルクリックするとシンボルの編集モードに入り、そこでは親ムービーと同様に、しかし独立した、新規のレイヤー上にテキスト（ブログタイトル）が配置されています。

次に、マウスを上に持ってきたときに反応するヒットエリアを作成します。

実は、ヒットエリアを作らなくても、ロールオーバー効果は設定できます。また、ステージ上に配置したテキストには、プロパティペインで URL リンクを簡単に設定することができます。しかし、この２つの設定はなぜか両立せず、ロールオーバーが正しく働かなくなってしまいました。そこで、ActionScript を使ってリンクを設定することにして、リンクとロールオーバーに反応させるためにヒットエリアを作成することにしました。この方法のほうがいろいろと応用もききそうな気もします。

今テキストが置かれているレイヤーとは別のレイヤーを作成し、そこに矩形ツールを使って長方形を描きます。位置とサイズは最初は適当に作っておいて、後でプロパティペインで、ブログタイトルのテキストと同じ値に設定します。

タイムライン上で、長方形を描いたレイヤーとアップフレームが交差するボックスを、ヒットフレームまでドラッグして移動します。これで、この長方形はシンボルのヒットエリアとしてのみ働く透明なボタンになります。

では、マウスオーバーの際のテキストの見た目を変更していきます。

ブログタイトルのテキストが配置されたレイヤーを選択して、アップフレーム上を右クリックしてキーフレームを挿入します。

ステージ上のブログタイトルを選択し、プロパティペインでテキストの塗りのカラーを変更します。

ここまでで、ブログタイトルにマウスカーソルを乗せるとテキストの色が変わるようになりました。

では、ブログタイトルのテキストにリンクを設定しましょう。先に述べたように、ActionScript を使用して記述していきます。

ステージ上をダブルクリックまたはシーン１と書かれたリンクをクリックして、シンボルの編集を抜けて親ムービーの編集に戻り、スクリプト用に新しいレイヤーを作成します。

このレイヤーの先頭フレームを選択して、F9 を押して（またはウィンドウメニューから）アクションウィンドウを開きます。ここにコードを記述していきます。（スクリーンショットでは、アクションウィンドウはプロパティペインに格納しています。）

最初に設定したシンボルのインスタンス名がここで必要になります。ActionScript 自体の説明は面倒なので（！）、スクリプトの内容を以下に載せるだけにしますが、流れとしては、（１）インスタンスにイベントリスナーを設定し、マウスクリックに反応させる、（２）クリックされたときの処理を記述した関数を宣言する、ということになります。

blogTitle.addEventListener(MouseEvent.CLICK, gotoHome);
function gotoHome(e:MouseEvent):void {
	navigateToURL(new URLRequest('http://act.affai.com/'), '_self');
}

長くなりましたが、今回はここまで。せっかくの Flash なので、次回はちょっとしたアニメーションを加えてみます。