Flashでのコンテンツ開発、2つの手法

この授業ではAdobe Flashを用いて動的なコンテンツを作成していく予定です。

Flashを用いて、インタラクティブで動きのあるコンテンツを制作する手法として、大きく分けて2つの手法 (流派?) が存在します。ひとつは、タイムラインをベースにした開発手法、もうひとつは、スクリプト (ActionScript 3) をベースにした、スクリプトベースの開発手法です。

この「Web動画表現」の講義では、最終的には、後者のスクリプトベースでの開発手法を用いて開発を行っていこうと考えています。スクリプトベースの開発手法のほうが、より自由度が高く、しかも大規模なコンテンツの制作に適していると考えているからです。

しかしながら、Flashに全く初めて触れるという初心者にはこのスクリプトベースの開発手法は、少しハードルが高いのも事実です。ですので、今日の講義では、まず最初により基本的な開発手法であるタイムラインをベースにした開発手法について簡単に触れて、Flashの基本操作について習熟したいと思います。

アニメーションのしくみを学ぶ

DVD「ノーマン・マクラレン作品コレクション」パイオニアLDC、より「ノーマン・マクラレンのアニメーション講座 1」を視聴

• 映画のフィルムとコマ
• あるコマと次のコマの違いが「動き」となる
• 撮影台を使用した、アニメーション撮影の手順
• 直線AからBまで移動するアニメーション
• 何回の動きでAからBまで移動するのか
• アニメーションの重要な要素「テンポ」
• 2地点間の分割数によるテンポのスペクトラム
• 「動きの距離」がアニメーターにとってとても重要

従来のアニメーションとFlashでのアニメーションの違い

• 基本的な原理は従来のアニメーションと同じ
• あるコマと次のコマとの差が動きとなる
• しかし、より効率的に、なめらかなアニメーションが作成できるよう工夫されている
• 同じ動作を何度もくりかえすのはコンピュータが得意とすること
• その部分は人間がやるのではなく、自動化する

トゥイーンとは

• トゥイーンという概念が重要
• もともとはアニメーション用語、主要アニメーターが重要なフレーム (主要な変更を含むフレーム) だけを描画し、アシスタントがその間のフレームを描画するという工程を指したもの
• Flashでも同様に、主要となるコマ(キーフレームと呼ぶ)を描くだけで、あとはアシスタント(コンピュータ)が残りのフレームを自動的に描いてくれる
• モーショントゥイーン：「動き」のトゥイーン、ステージに配置したもの(インスタンス)を、移動、拡大、縮小、回転などすることができる
• シェイプトゥイーン：「形」のトゥイーン、ステージに配置したもの(インスタンス)の形状を変化することができる

実際にアニメーションを作ってみる

A地点からB地点まで直線移動するアニメーションを作成する

• 「Flashファイル(AS3.0)」で、新規作成

• ツールボックスの楕円ツールを選択して、ステージ上に円を描く

• 矢印ツールで描いた円の全体を選択する。網点で選択範囲が表示される

• メニューから「挿入」→「シンボルに変換」を選択。ダイアログボックスが表示されるので、このエレメントの名前をつけ、タイプを「グラフィック」にして[OK]ボタンを押す

• 作成した物体(インスタンス)が選択された状態で、メニューから「挿入」→「モーショントゥイーン」を選択

• 自動的に1秒分の長さのモーショントゥイーンが作成される

• 最終フレームを選択した状態で、物体(インスタンス)を移動する。移動経路(モーションパス)が表示される。

• モーションパスは変形することも可能、いろいろな動きを作ってみる

• 最後のフレームの右端にマウスポインタを重ねて、マウスポインタが「←→」という表示になった状態で左右にドラッグすると、アニメーションの長さ(テンポ)を変更できる

• メニューから「制御」→「再生」または、[Enter]キーで、アニメーションを再生する

拡大、縮小、回転

• 自由変形ツールを使用すると、移動だけでなく、拡大、縮小、回転することも可能
• 表示される枠の周囲8箇所にあるコントロールポイントで、拡大、縮小、変形することが可能
• 枠の角にマウスポインタを近づけて、矢印が回転する表示になったポイントで、物体を回転することができる
• 変形、回転を使用して、いろいろな動きを試してみる

自由変形ツール

レイヤーの活用

• 複数のシンボルをアニメーションさせるには
• ひとつのモーショントゥイーンには1つのシンボルしか使用してはいけない
• 2つ以上のシンボルがあると、トゥイーンは生成されないはず
• 複数のシンボルをトゥイーンするには、レイヤーを活用する
• レイヤー = 層、ステージ上に複数の透明なセルが積み重なっているイメージ
• レイヤーを重ね合わせることで、複数の動きを同時に表現可能
• レイヤーの追加は、タイムラインの左下にある、レイヤーの追加ボタンから