第1回　アニメーションの概念とフレームアニメーション

「タイムライン」は時間の長さをコマに分割した「フレーム」と、フレームを何層にも重ねることができる「レイヤー」で構成されている。フレームごとにオブジェクトを配置し、時間軸に沿って再生したのがアニメーションだ。Flashでアニメーションを作る手法には、キーフレームごとにオブジェクトを配置する「フレームアニメーション」と、キーフレーム間の動きを自動で生成する「トゥイーン」がある。今回は、アニメーションの概念とフレームアニメーションについて学習していこう。

（1）再生ヘッド
現在再生されているフレーム

（2）タイムラインヘッダー

（3）フレームラベルを設定したキーフレーム

（4）ActionScriptを設定したキーフレーム

（5）空のキーフレーム
何も配置していないキーフレーム

（6）フレームアニメーションを設定したフレーム
ステージにオブジェクトを配置しているフレーム

（7）モーショントゥイーンアニメーションを設定したフレーム

（8）シェイプトゥイーンアニメーションを設定したフレーム

（9）レイヤー

（10）レイヤーフォルダー

（11）オニオンスキン設定用のボタン

（12）現在のフレーム番号

（13）フレームレート
1秒間に再生されるフレーム数。これは理論上の再生速度で、コンピュータの性能によっては、実際より遅く再生される場合がある

（14）経過時間
最初のフレームからの経過時間（現在のフレーム番号／フレームレート）秒

アニメーションには次の種類がある。それぞれの特徴を見ていこう。

パラパラ漫画の要領で作成するアニメーション。動きをつけるフレームすべてにキーフレームを作成し、オブジェクトを配置する。複雑なアニメーションを作ることができる反面、手間がかかり、ファイルサイズも大きくなってしまう【図2】。

インスタンスやグループ化されたオブジェクトのプロパティを変化させるアニメーション。開始するキーフレームにオブジェクトを配置して、終了するキーフレームで位置、サイズ、回転、色、透明度、フィルタ（Flash Professionalのみ）などのプロパティを変更すると、中間の動きが自動的に作成される【図3】。

オブジェクトの形状をモーフィングのように変化させるアニメーション。グループ化やシンボル化していないベクターのオブジェクトに適用できる。開始するキーフレームにオブジェクトを配置して、終了するキーフレームでオブジェクトの形状を変形させると中間の動きが自動的に作成される。カラーや透明度を変化させることもできる【図4】。

フレームアニメーションを使って積み木を組み立てるアニメーションを作成しよう。実際に積み木を組み立てる感覚で作ってみよう。

1フレームずつ編集しなければならないフレームアニメーションは、フレームレートが大きいほど手間がかかる。プレビューで動きの滑らかさを確認しながら小さめ(10fps前後を目安)に調整するとよいだろう。サンプルでは8fpsとした。

1．［名前：block］、［タイプ：グラフィック］の新規シンボルを作成する。「矩形ツール」や「多角形ツール」を使って立方体の積み木を描こう【図5】。

2．「シーン1」に戻り、［ライブラリ］パネルからシンボルをステージに2つドラッグする。一方のインスタンスを選択し、プロパティインスペクタの［カラー］から［着色］を設定。カラーを［R：255］、［G：255］、［B：0］、［濃淡：50%］にして、黄色の積み木を作る【図6】。

3．コピー&ペーストで茶色の積み木を10個、黄色を9個複製する。重ね順に注意しながら、それらを「選択ツール」で配置していく【図7】。キリンの形に並べよう【図8】。

4．［フレーム2］を選択し、右クリック（［Control］＋クリック）して、コンテキストメニューから［キーフレームの挿入］を選ぶ。［フレーム1］の状態がそのままコピーされるので、【図9】のように上の積み木を1つ崩す。同様に、キーフレームを挿入し、1つ積み木を崩すという手順を［フレーム3～20］まで繰り返す【図10】。これで全部で20のキーフレームが作成され、キリンの形の積み木がばらばらになっていくアニメーションができる。

5．［フレーム2～20］をドラッグですべて選択し、［フレーム60～78］に移動。［フレーム1］を［フレーム20］に移動する。ばらばらにするのを逆再生させると組み立てるアニメーションになるので、［フレーム60］を［Alt］＋［option］を押しながら［フレーム19］にドラッグして複製。同様に［フレーム61～78］を［フレーム18～1］に複製する。最後に［フレーム120］にフレームを挿入【図11】。これでキリンの形に組み立てられて、ばらばらになるアニメーションの完成だ。［制御→ムービープレビュー］で確認してみよう。