アニメーションの制作
それぞれのシンボルやオブジェクトにアニメーションをつけてゆきます。
フレームレートを設定する
まずフレームレートを設定します。 ステージの何もない所を[選択ツール]でクリックし、「プロパティ」ウィンドウの[プロパティ]から[フレームレート]の値を[30]にします。
この数値が高ければ動きが滑らかになり、低ければカクカクした印象になります。 今回は一般的な30fpsにします。
フレームレートとは、単位時間に何フレーム更新するかの指標です。単位は「fps」（frame per second）で、1秒間にどれだけのフレームが更新されるか、という値で表されます。値が高いほど、多くのフレームを用いて動画が再生されていることになり、画面表示が滑らかになります。
シンボルを作成する
次に、吹き出し部分にスクロールするテキストを作ってゆきます。 [挿入]から[新規シンボルの作成]を選択します。
「新規シンボルの作成」ウインドウが表示されます。
[名前]は[吹き出しテキスト」としました。
[タイプ]を[ムービークリップ]にし[OK]をクリックします。
ステージが、作成したシンボルの編集画面になりました。まだ作成したばかりなので何もありません。
レイヤー名を変更する
次に、レイヤー名を変更します。こうしておくと、管理が容易になります。
テキストを配置する
テキストを配置します。「テキストツール」を選択しステージの中心部をクリックします。
初めにクリックした位置がテキストの始まりの部分になります。
そのままキーボードでテキストを入力します。
今回は、次のようなテキストを入力しました。
「Google 100%活用術
Google アナリティクス・ウェブマスターツールの使い方」
テキストのプロパティの変更をする
入力したテキストを選択した状態で、「プロパティ」ウィンドウの[文字]から[フォントファミリー]を「HG創英角ポップ体」にします。[サイズ]は「20」にします。
更に2行目のテキストが長いので、文字間隔で調整します。
2行目を選択した状態で、「プロパティ」ウィンドウの[文字]から[文字間隔]を「-4.5」にします。その他にも色やその他の見た目を整えます。
キーフレームを挿入する
配置したテキストにアニメーションを付けます。
ストーリーボードに基づき2秒間静止させるので、タイムラインの60マス目の部分を右クリックし、［キーフレームの挿入］を選択します。
（フレームレートを30fpsに設定しているので、30マスで1秒となります。）
同様の方法で、2.5秒後にスライドアウトさせたいので、75マス目にもキーフレームを挿入します。
75マス目をクリックし選択された状態で、ステージに配置したテキストを「選択ツール」でステージの左側に移動させます。この時、テキストの一部が中心部にかからないようにします。
モーショントゥイーンを作成する
タイムラインの60マス目を右クリックし、[クラシックトゥイーンを作成]を選択します。
これで配置したテキストに、1マス目から60マス目は静止状態で、60マス目から75マス目まで左に移動するアニメーションが付きました。
シンボルのレイヤーを追加する
シンボルのレイヤーを追加すると、別のアニメーションを追加作成する事が出来ます。
（先に説明した、レイヤーとは違いますので注意が必要です。）
最初のテキストが過ぎ去ったあと、別のテキストを登場させたいのでレイヤーを追加し、そこにアニメーションを新たに作成します。
まず、シンボルのレイヤーを一つ追加し、レイヤー名を変更します。
これで、スライドインするアニメーションを制作する準備が整いました。次の作業からは、先の作業の繰り返しになりますが、ストーリーボード上の3カット目から4カット目の5秒間を繰り返す設定となります。
ちょっと判りづらいので、続けて、画面入りで解説します。
追加したレイヤーの60マス目（2秒）にキーフレームを挿入します。
白い丸が入った白いマスが表示されました。このマスが選択された状態で「テキストツール」で先ほど配置したテキストと重ならないように、右側に新たに以下のテキストを配置します。（スライドインさせるため、高さは揃えて下さい。）
「私が講師を務めます！ 平成23年7月13日（水） 新宿駅徒歩1分」
追加したレイヤーの75マス目（2.5秒）、135マス目（4.5秒）、150マス目（5秒）にそれぞれキーフレームを挿入します。
配置したテキストを75マス目（2.5秒）、135マス目（4.5秒）はステージの中心部、150マス目（5秒）は中心部にテキストがかからないように左側に移動します。
60マス目（2秒）と、135マス目（4.5秒）にクラシックトゥイーンを作成し、アニメーションを付けます。
最初のテキストが行き去ったあと、次のテキストが登場するアニメーションが出来ました。
ただ、いまの状態では2番目のテキストが行き去った後、また何もなくなってしまいます。
いままでと同様の方法で最初のテキストが入っているレイヤーの、135マス目（4.5秒）から150マス目（5秒）にかけて右側から中央にテキストが移動するアニメーションをつくります。
これで吹き出し部分の基本のアニメーションが出来ました。
マスクの作成
動きの部分は完成しましたが、いまのままでは吹き出しから飛び出して表示されてしまいます。なのでマスク機能を使い表示範囲を限定します。
まず、二つのアニメーションするレイヤーの上に、マスク用のレイヤーを作成します。
矩形ツール
表示させたい範囲を、「矩形ツール」で作成します。中心部からテキストを覆うようにドラッグして範囲を決めます。
この矩形は読み込んだ吹き出しのオブジェクトより少し小さめにします。
マスクを適応する
マスク用のレイヤーのアイコンを右クリックし、[マスク]を選択します。
すると直下のレイヤーに対してマスクが適応されます。
さらにその下のレイヤーにもマスクを適用したいので、適用したいレイヤーのアイコン部分をダブルクリックし、表示される「レイヤープロパティ」ウィンドウの[種類]の「マスクの対象」を選択します。
レイヤーをロックする
マスクを適用するとレイヤーに自動的にロックがかかります。
ステージ上でマスクの状況を確認するには、マスクのレイヤーとマスクの対象となるレイヤーをロックする必要があります。
ロック状態の時には、レイヤーに含まれるオブジェクトを変更する事ができません。
ロックを設定・解除するには、カギアイコンをクリックします。
マスクが適用されました。
これで吹き出しのテキスト部分が完成です。
シンボルを配置する
ステージの左上にある左矢印ボタンで、シンボル編集画面を抜けます。 先ほど作成した吹き出しのテキスト部分がステージに見当たりません。
作成したシンボルは、ライブラリに保存されています。
読み込んだ吹き出しオブジェクトがあるレイヤーの上に、新たにレイヤーを追加します。
「ライブラリ」ウィンドウから、「吹き出しテキスト」をステージにドラッグアンドドロップして配置し、吹き出しに収まるように位置を調整します。
これで吹き出しのテキストが追加されました。
アニメーションの確認
アニメーションの状況の状況を確認するには[制御]から、[ムービーのプレビュー]を選択します。
新しいウィンドウが表示され、設定したステージやシンボルのアニメーションが再生されます。
シンボルに変換する
次にFlash内のバナーにアニメーションをつけます。
シンボルは初めから作る方法の他に、ステージにあるオブジェクトを変換して作成する事もできます。
配置したオブジェクトを「選択ツール」で選択し、[修正]より[シンボルに変換]を選択します。
「シンボルに変換」ウィンドウが表示されます。
[名前]を[バナー]にし、[タイプ]を[ムービークリップ]にします。
配置したオブジェクトがシンボルに変換されました。
シンボル編集画面に入るには、変換したシンボルをダブルクリックします。
フェードインの効果を付ける
バナーにフェードイン効果を付けます。
「アニメーションをつける」と同じように、15マス目（0.5秒）にと30マス目（1秒）にキーフレームを挿入し、1マス目と15マス目にクラシックモーショントゥイーンを作成します。
フェードイン効果だけを付けたいので、全てのマス目でオブジェクトの位置は同じにします。
1マス目が選択された状態で、バナーのオブジェクトを選択します。
この状態で「プロパティ」ウィンドウより[カラー効果]の、[スタイル]から「アルファ」を選択し、[アルファ]の値を0%にします。
同様に15マス目（0.5秒）のアルファの値を0%にします。
これで1マス目から15マス目（0.5秒）にかけて徐々に表示されるフェードインの効果が付きました。
シンボルの動きを止める
シンボルはアニメーションが最後まで再生されると1マス目まで戻り、ループ再生されます。
バナー部分はフェードインのアニメーションが終わったらそのまま停止させたいのでActionScriptを記述して動きを操作します。
ActionScriptを記述
まず、30マス目（1秒）を右クリックし[アクション]を選択します。
「アクション」ウィンドウが表示されました。ここに以下の文章を書きます。
this.stop();
これで、このシンボルは30マス目（1秒）まで再生されると自動的に停止します。
バナー部分が完成しました。
リンクを貼る
バナーのシンボルにActionScriptでリンクを貼ります。
まず、ステージの左上の左矢印をクリックしてシンボル編集モードから抜けます。
バナーのシンボルをクリックし、「プロパティ」ウィンドウの[‹インスタンス名›]を、「banner」に変更します。
ActionScript用の新しいレイヤーを作成します。
新しいレイヤーの1マス目を右クリックし、[アクション]を選択し「アクション」ウィンドウを表示させ、以下のように記述します。
var address: String = "http://www.internet-ads.org/seminar_013.html" //アドレス
this.banner.buttonMode = true;
this.banner.addEventListener(MouseEvent.MOUSE_UP,boxMore);
function boxMore(event:MouseEvent):void {
var url:URLRequest = new URLRequest(address);
navigateToURL( url, "_blank");
}
※このScriptの1行目のアドレスを変更することで、リンク先を変更する事が出来ます。
これでFlashは完成しました。[ファイル]より[保存]を選択し、上書き保存します。
確認する場合は、先に説明した通り、[制御]から[ムービープレビュー]をクリックで確認できます。
では、次に「Flashを公開する」に進みます。
