読者です 読者をやめる 読者になる 読者になる

アニメーション基礎

Flash

Flashとは

  • FlashはAnimateCCという呼び名になり、ブラウザもFlash Playerのサポートを取りやめている現在、勉強する価値は無いと思います

新規ファイル作成

  • FlashCS6までは「ActionScript2.0」で、FlashCC以降は「ActionScript3.0」で作成
  • AnimateCCの場合は、内容によっては「HTML5 Canvas
基本的な画面構成
  • ステージ:ムービーとして表示する絵を配置します
  • プロパティ:選択しているオブジェクトの属性を変更します
  • ライブラリ:アニメーションをするオブジェクトを格納します
  • タイムライン:ムービーの進行管理をおこないます
鉛筆ツールのオプション
  1. ストレート
  2. スムーズ
  3. インク

というオプションがあります

  • ストレートやインクで線を描くと、描き方によっては少しガタガタした線になってしまうことがあり、ガイドレイヤーの線として描くと思い通りの動きにならないことがありますので、注意しましょう
線の微調整方法
  • 線を描いたあとでちょっとした微調整をしたい場合には、矢印ツールでドラッグすることで微調整ができます
  • ガタガタになってしまった線も、微調整可能です

流し消す
  • はみ出たところを消すためには「流し消す」を使います


Fashムービーの基本練習


(1)新規ファイル作成(ActionScript2.0


(2)ワークスペースを「デザイナー」に変更

  • 「プロパティ」パネルと「ライブラリ」パネルは常に表示させます


(3)円を描く(楕円ツール)

  • 楕円ツールを選択後、線「赤 5px程度」と塗り「なし」の設定を変更する
  • 「オブジェクトの描画(丸が四角で囲まれたアイコン)」と「スナップ(磁石のアイコン)」のチェックを外す
  • 「オブジェクトの描画」がチェックされているとIllustratorと同じベクトル、外れているとPhotoshopと同じビットマップになります

  • 消しゴムツールを使う場合、「ビットマップ」で描画します



(4)F6で「キーフレームの挿入(複製)」


(5)消しゴムツールで一部分を消す


(6)この操作を、円がなくなるまで繰り返す

  • 繰り返す回数は、なりゆき


(7)Enterキーを押して動きを確認する


(8)フレームレートを「24.00」から「12.00」に変更する

  • 単純な動きでは、「24.00」は早すぎます


(9)レイヤー名をクリックし、フレームをすべて選択する


(10)再生をすると、何もない画面に円が描画されるムービーになります

  • ムービーをクリックすると再生されます


シンボルとインスタンス

シンボル
  • Flashのアニメーション内で使用する「オブジェクト(部品)」
  • シンボル化されたオブジェクトは、ライブラリに保管されて、そこからいつでも取り出すことができます
  • ライブラリからステージ上にドラッグ&ドロップすることで使うことができます
インスタンス
  • ライブラリから、ステージ上にシンボルをドラッグ&ドロップしたときや、ステージ上にあるオブジェクトを「シンボルに変換」した際、そのオブジェクトは「インスタンス」と呼ばれます
  • これは、シンボルの「分身」にあたるものと言うことができます
シンボルとインスタンスとの関係
  • シンボルは「オリジナルの部品」
  • インスタンスは、その部品を元に作られた「コピー」
  • シンボルを修正したい場合は、ステージ上のインスタンスをダブルクリックするか、ライブラリパネルでシンボル(上に表示されているグラフィック)をダブルクリックすることで可能です
  • ステージ上にあるインスタンスは、色・大きさ・透明度など、オリジナルの内容を変えない範囲での変更は行えますが、文字の内容の変更などは行えません

シンボルを使うことのメリット

  • データ量が少なくてすむ
  • 変更が効率的に行える

シンボルの種類

ムービークリップシンボル
ボタンシンボル
  • 「アップ」「オーバー」「ダウン」「ヒット」という特別な意味を持ったフレームを持つシンボル
グラフィックシンボル
  • 静止画像をそのままシンボル化し、タイムラインを使って動かすときに使う

フレームとキーフレーム

  • 1フレーム目には、最初から「空白キーフレーム」が挿入されています
  • そのままステージにオブジェクトを配置すると、○が●に変化します
フレーム
  • アニメーションのひとつひとつの「コマ」のこと
  • タイムラインの一つのマス目が1フレームとなり、フレームが右方向に進むほど、時間が経過していることを示す
  • アニメーションは、フレームの状態が変化していくことで実現します
キーフレーム
  • フレームの中でも特殊な位置付け
  • 文字通り「キーとなるフレーム」で、アニメーションの一つの「区切り」を示す
  • 単純なアニメーションはキーフレームとキーフレームとの間の動きを補完することでできている
  • キーフレームではないフレームのステージ上にオブジェクトを置こうとすると、そのオブジェクトは、直前のキーフレームから次のキーフレームまでの間のフレームすべてにコピーされます
  • もしそのフレームに新しくオブジェクトを配置したい場合は、まず最初に必ず「空白キーフレーム」を挿入する必要があります


  • キーフレーム以外のフレームは、動きを補完している間隔です

トゥイーンアニメーション

  • トゥイーンアニメーションに対して、一つ一つのフレームに、パラパラアニメのように動きを設定していくアニメーションは「フレームアニメーション」と呼びます

  • 「トゥイーン」とは、キーフレームとキーフレームとの間の動きを補完してくれる機能
  • トゥイーンアニメーションには、「モーション」と「シェイプ」の2種類がある
モーショントゥイーン
  • オブジェクトの動きや大きさ、色などの動きをアニメーションするもの
  • 動かすオブジェクトはシンボル化しなければならない(インスタンスであること)
  • 動きのあるインスタンスは、1レイヤーにひとつしか配置できない(別々に動かすオブジェクトは、レイヤーを分ける)
  • 位置や形を編集するフレームはキーフレームにする
  • モーショントゥイーンを設定する


クラシックトゥイーン
  • モーショントゥイーンと同じ条件で設定する


シェイプトゥイーン
  • オブジェクトの形を変化させるアニメーション
  • トゥイーンを設定するためにはいろいろな条件があり、動きの制御もやや難しいのが特徴




練習課題