アドビ Flash を使用した Web アニメーション
1.1

2「Fl」と書かれた赤いアイコンをダブルクリックします。

Flash の基本（代表例のみ）
2.1

ツール画面
①選択ツール④テキストツール
文字を挿入する物体などを選択する②自由変形ツール
拡大縮小、回転など幾何学変換を行う③鉛筆ツール
鉛筆で描画することができる種類
静止テキスト：通常、アニメーションを作成する際、これを選択
ダイナミックテキスト：Action Script 内で「変数」として扱うことが可能。＝代入する
テキスト入力：インタラクティブな Web
サイトを作る際に使用する⑤矩形ツール
マウスボタン長押しで、以下の図形が使えます⑥「線の色」「面の色」⑤などで図形を描く際、「線の色」と「面の色」を指定することができる。

バケツツール「線」と「線」で囲まれた閉じた線形に対して、面の色をつけることができる。

Flash での簡単なアニメーション操作編
クラシックトゥイーン と モーショントゥイーン
Flash CS4 からのモーショントゥイーン（直線的なアニメ

今回は、時間の関係で Flash CS5.5 を使った ActionScript2.0ーション）は，旧バージョンまでのモーショントゥイーを使用します。下記に２つのモーショントゥイーンの作ンとは違っています。旧バージョンまでのモーショント成方法と違いについて簡単に説明します。

ゥイーンは「クラシックトゥイーン」と言い，CS4 での新モーショントゥイーンとは区別されています。
Flash CS4 からは、必ず「物体」を作成したあとにシンボクラシックトゥイーンが適用できるのは，「グラフィックインスタンス」，「ボタンインスタンス」，「ムービークリル化、インスタンス名をつける手間が増えました。

ップインスタンス」の３種類のインスタンスです。

これは ActionScript3.0 によって完全 Object 志向型プログ的に同じ操作です。

ラムへと変わったためです。

クラシックトゥイーン操作編＊クラシックトゥイーンではどのインスタンスでも基本＊クラシックトゥイーンが適用できるのは１レイヤー１1インスタンスです。
＊まずステージ上にムービークリップを配置します。
↓次にクラシックトゥイーンを始めたいレイヤーである
ムービークリップが 20 フレームでステージの左上から右フレーム 1 を選択した状態で，下に動くアニメーションを作成します。

[挿入]→[クラシックトゥイーン]を選択します。↓

まず，ムービークリップを配置したレイヤーの フレーム2～フレーム 20 を選択し，[挿入]→[タイムライン]→[フレーム]で，フレーム 20 までのフレームを挿入します。
＊右クリック→[フレームを挿入]など他の方法で挿入してもかまいません。↓

その指定をすると，フレーム 1 から フレーム 20 にかけてレイヤーの色が変わり，矢印が表示されます。
フレーム 20 のムービークリップを選択して，ステージの右下の方にドラッグで移動させます。
次に，クラシックトゥイーンを終了させたいフレームである
フレーム 20 を選択した状態で，[挿入]→[タイムライン]→[キーフレーム]を選択し，フレーム 20 をキーフレーム にします。↓

これで，ムービークリップがステージの右上から左下に移動する簡単なアニメーションができます。

2

クラシックトゥイーンとはこういう機能です。インスタンスの，動かしたい最初の状態と最後の状態をトゥイーンで結べば，その間のフレームでの位置や色や大きさなどの状態が補完されて，アニメーションが簡単に作成できます。

ムービークリップが 20 フレームでステージの左上から右下に動くアニメーションを作成したいと思いますから，まず，ムービークリップを配置したレイヤーの フレーム
2～フレーム 20 を選択し，[挿入]→[タイムライン]→[フレーム]で，フレーム 20 までのフレームを挿入します。
↓ＦｌａｓｈＣＳ４での新しいモーショントゥイーン

モーショントゥイーンの適用で補完されるプロパティは，
2D X-Y 座標，3D Z 座標，2D 回転（Z 軸周り），3D X-Y-Z
回転，傾斜 X-Y，伸縮 X-Y，カラー効果，フィルタプロパティです。また 3D モーションでは，パブリッシュ設定で FLA ファイルのターゲットが Action Script 3.0 お
よび Flash Player 10 になっている必要があります。
モーショントゥイーン が適用できるのは，「グラフィックインスタンス」，「ボタンインスタンス」，「ムービークリップインスタンス」の３種類と静止テキストを含む「テキストフィールド」です。

次にキーフレームは作らずに，[挿入]→[モーショントゥイーン]を選択して，フレームにモーショントゥイーンを設定します。

モーショントゥイーンでは，X-Y 座標などに加えて，擬似 Z 座標 プロパティや，擬似 3D 回転 プロパティも補完されたアニメーションが作成できます。（中級編になります）これら 3D 的なプロパティはムービークリップインスタンスにしか適用されないため，今回は省略します。
作成の最初はモーショントゥイーンもクラシックトゥイーンとほぼ同様です。↓

そして，最後のフレームである フレーム 20 を表示させて，ムービークリップをステージの右下の方にドラッグ3で移動させます。すると自動的に フレーム 20 にキーフムに表示されるインスタンスを違う場所にドラッグで移レームのようなものが作成されますが，これはキーフレ動させると，自動的にそのフレームに プロパティキーフームではありません。

レーム が挿入され途中で変化するトゥイーンが作成さ

これは 「プロパティキーフレーム」 と呼ばれるもので，れます。↓

Flash CS4 に新たに導入されたものであり，モーショントゥイーンの特定の時間またはフレームのプロパティのために定義された値を指します。
また，それと同時に最初のフレームのインスタンスと最後のフレームのインスタンスをつなぐような線が表示されますが，これを「モーションパス」 と言います。↓

また同時に，モーションパスも変更されます。↓

この状態で，クラシックトゥイーンと同じようなアニメーションができます。→

このモーションパスは選択ツールで変形することができます。
クラシックトゥイーン でのモーションガイドに近い物ですが，モーションガイドとは違って，線を交差させることなどもできます。↓

トゥイーンスパンは，ステージ上のオブジェクトのプロパティを何度も変更できるタイムライン内のフレームのグループです。
クラシックトゥイーンと同じようにフレーム 1 と フレーム 20 との間辺りのフレームを表示させて，そのフレー4下のようなアニメーションが簡単に作成できます。↓

1.フレーム 1 で、矩形ツールを使用して正方形を描画します。
2.同じレイヤーのフレーム 30 を選択し、挿入／タイムライン／空白キーフレームを選択するか F7 キーを押して、空白キーフレームを追加します。
3.ステージで、楕円ツールを使用してフレーム 30 に円を描画します。 これで、フレーム 1 には正方形で表示されたキーフレームが作成され、フレーム 30 には円で表示されたキーフレームが作成されます。
4.タイムラインで、2 つのシェイプが含まれるレイヤー内にある 2 つのキーフレーム間のフレームの 1 つを選択

参考・引用サイトします。

http://www.1art.jp/flash9/index.html

5.挿入／シェイプトゥイーンを選択します。

http://suzupara.iinaa.net/mixi/cs4_motiontween/index.html

Flash によって、2 つのキーフレーム間にあるすべてのフ＊モーショントゥイーン (Motion Tween)レーム内のシェイプが補間されます。

モーショントゥイーンアニメーションはタイムラインのアニメーションの開始点と終了点のキーフレームを作成

6.トゥイーンをプレビューするには、タイムライン内のフレームに再生ヘッドをスクラブするか、Enter キーを押しするだけで、中間の処理はすべて Flash によって作成されます。

る非常に効率の良い方法です。モーショントゥイーンを7.シェイプに加えてモーションをトゥイーンするには、フ設定できるのはシンボルなどのグループ化された要素のみで、そのオブジェクトを移動、回転、伸縮、透明度、明度、カラーの変更等はできますが、まったく違う形状のものに変化させることはできません。
●シェイプトゥイーン
シェイプトゥイーンは開始点、終了点とも対象がシェイプ画像である場合に適用できる効果で、開始点のシェイプから終了点のシェイプにモーフィング的な効果で変化させることができます。
シェイプトゥイーンの作成
次の手順に、タイムラインのフレーム 1 からフレーム30 の間にシェイプを作成する方法を示します。ただし、選択するタイムラインの任意の部分にトゥイーンを作成

レーム 30 のシェイプを、フレーム 1 のシェイプの位置とは異なるステージ上の位置に移動します。
Enter キーを押してアニメーションをプレビューします。
8.シェイプのカラーをトゥイーンするには、フレーム 1のシェイプをフレーム 30 のシェイプとは異なるカラーにします。
9.トゥイーンにイージングを追加するには、2 つのキーフレーム間にあるフレームの 1 つを選択し、プロパティインスペクタのイージングフィールドに値を入力します。
負の値を入力すると、トゥイーンの先頭がイージングされます。正の値を入力すると、トゥイーンの末尾がイージングされます。

できます。

5

名前を付けて保存の場合は今現在開いているファイルの他に別のファイル名で保存する場合に使用します。
使用方法はメニューの[ファイル]-[名前を付けて保存]を選択します。
保存して最適化
Flash で作業を行っている時にインスタンスやコンポーネントなどのオブジェクトをステージに配置するとその分ファイルのサイズが大きくなります。この時すでに配置（↑シェイプトゥイーンのイメージ画面）したものを削除してもファイルのサイズはそれに伴って小さくはなりません。そういった場合に最適化を行い余ファイルの保存分なデータを削除します。保存して最適化を行うにはメファイル、ドキュメントの保存方法にはいくつかの方法

ニュー[ファイル]-[保存して最適化]を選択します。

があります。主な保存方法は以下の通りです。

ファイルの種類と拡張子について・保存Flash ではパブリッシュ（書き出し）機能により様々なデ・名前を付けて保存ータを書き出してくれます。

・全て保存
・保存して最適化.fla

ドキュメントを保存する場合はメニューの[ファイ元データで再編集が可能です。ＣＳ5.5 では古いバージョル]-[保存]を選択すると保存を行う事ができます。
下記に簡単な保存方法を説明します。
ショートカットキー：Ctrl + S キー (Windows)
・最初に新規ファイルを開きメニューの[ファイル]-[保存]を選択します。

FLA ファイルは主に Flash で使用されるファイルです。
ンのデータは開けますが、古いバージョンではＣＳ5.5 データを開くことができません。
.swf
SWF ファイルは作成した FLA ファイルを Web ページで表示する事ができる様にコンパイラでコンパイルしたファイルです。 (圧縮データのため再編集できません).asAS ファイルは Action Script が記述されたファイルで FLAファイルの外部に置いて使用します。HTML ファイル内
で外部の css や js ファイルを呼びだす時に使用する方法に似ています。 ファイル名及び拡張子は全て半角英数の小文字で統一してください。

次に下のパネルが開くので[保存]ボタンを押せば保存する事ができます。今回の様に新規のファイルを編集して保存の場合は下の様な名前を付けて保存のパネルが開きますが、次回からはメニューの[ファイル]-[保存]を押すだけで保存する事が可能です。

6

7