[Prev] [Home] [Next]

---

第３回 タイムラインとオブジェクト

担当者 : 斎藤進也 (saitos@fc.ritsumei.ac.jp)

---

---

★本日のテーマ

本日は、アニメーションを作成する上で最も重要な機構である「タイムライン」について学ぶ。
さらに、オブジェクト操作を理解する上で不可欠な「シンボル」と「インスタンス」という概念について学習する。

本日学ぶトピックは、特に重要です。心して習得してください。

---

---

★タイムラインとフレーム

タイムラインはその名の通り、時間の経過を表すラインである。
これがムービーの時間軸となる。

そして、タイムラインは「フレーム」という長方形のコマで区切られている。

• フレーム設定の種類
  
  • （通常）フレーム：前のキーフレームで表示されている絵をそっくりそのまま引き継ぐ。間（タイミング）をコントロールするために設定される。
  • キーフレーム：（独自の）絵、オブジェクトを配置しているフレーム
  • 空白キーフレーム：絵が表示されていないキーフレーム
  
  
  パラパラ漫画で 考えると、１コマのキーフレームは、１枚の紙にあたる。
  キーフレームが１コマなら紙１枚、１０コマなら紙１０枚のパラパラ漫画になるということ。
  
  
• ごく簡単なパラパラ漫画の作り方
  (1)１コマ目の絵を描く
  
  
  (2)タイムラインの２コマ目をクリックし、[挿入]→[タイムライン ]→[キーフレーム]とする。キーフレームがもうひとつできる。
  
  
  ２コマ目では、１コマ目で描いた絵が選択状態になっている。これは、２コ マ目に１コマ目の絵が複製された状態。
  Escキー、もしくは[[矢印]ツールで 何もないところをクリックし、選択を解除する。
  
  (3)目や口の位置などを変えてみる。
  
  
  (4)同じ要領でどんどんコマを増やしていく。
  
  
  
  (5)[制御]→[ループ再生]をチェックしてから、[制御]→[再生]で再生してみる。
  (6)思い通りに再生できていたら、[制御]→[ムービープレビュー]で「ムービー」(swf) を作成する。　
  
  
  
  
• フレームレートの設定（再生速度の調整）
  フレームレート、すなわち１秒あたりのコマ数（fps:Frame Per Second）を調整 することで、再生の速度を速くしたり、遅くしたりできる。
  デフォルトは、12fps。
  
  ex)フレームレートを3fpsにしてみる。
  
  
  
  [注意!]編集画面での再生では、fpsの変更が反映されないことがあるので、再生速度は、必ずムービープレビューで確認する（[制御]→ムービープレビュー]）。
  
  上記動画のサンプルファイル→ [download]
  
  
• レイヤーとフレーム
  レイヤーごとにフレームの設定をすることができる。それぞれに、設定すること で、背景やキャラクターを個別のタイミングで動かせる。
  
  
  
  
  
  
  
  
  

上記動画のサンプルファイル → [download]

---

---

★シンボルとインスタス

• シンボルとは
  描画したイラストなどをシンボル化するということは、そのイラストを「部品」化し、何度も使い回せるようにするということ。
  シンボルは、[ライブラリ] に格納される。
  
  
• シンボルの種類
  シンボルには、下記の３種類がある。
  • ムービークリップ
    独自のタイムラインを持つことができる。
    
  • ボタン
    ボタンを押す時のような凹凸感を出せる。Webインターフェースを作成する際に便利。
  • グラフィック
    独自のタイムラインを持たない。
    
  
  
• シンボル化の手順
  (1)イラストなどを描く
  
  (2)選択する
  
  (3)右クリックし、[シンボルに変換...]を選択
  
  
  (4)シンボル名を入力。およびシンボルのタイプを選択
  
  
  (5)シンボルは、ライブラリに格納される
  
  
  
• インスタンスとは
  シンボルはステージ上に配置されて、はじめて、目に見える実体となる。
  そして、ライブラリ内のシンボルをステージ上に配置したものをインスタンスという。
  インスタンスは、シンボルから色、形、タイムライン、スクリプトなどをそのまま引き継ぐが、それぞれに独自性を持たせることが可能。
  例えば、配置位置、配置角度、大きさ、色、透明度なども、インスタンスごとに設定することができる。
  
  (1)ライブラリからステージへドラッグアンドドロップで配置できる。
  
  
  (2)それぞれのインスタンスに、色や大きさなどを個別に設定できる。
  
  
  
• インスタンスをダブルクリックすることで、シンボルが編集できる。
  ただし、シンボルを編集することは、“原本”を編集するということなので、テージに配置されたすべてのインスタンスに変更点が反映されることになる。
  
  
• メタファーによる理解
  

  シンボル	インスタンス
  本体	分身
  原本	コピー
  自動車の設計図	製品となった自動車
  印鑑	紙に押された印

  
  
• メリット
  • イラスト等の再利用が容易になる
  • swfファイルが軽くなる
  • 編集の手間がはぶける
  • 複数のクリエーターでの共作がしやすくなる
  • ActionScriptでの操作が可能になる

---

★プログラミングに少しずつ慣れよう! 　その二

プログラミング（ActionScript3.0）を使ったコンテンツ制作は、第二クォーターからだが、今のうちから少しずつ慣れていこう。

※【前回の復習】まず、チェックシートをやってみよう。

BMI値を計算するプログラムを書いてみよう。

---

★本日の課題

本日は、課題Aと課題Bの２つの課題に取り組みなさい。
課題Aについては、各自ひとりひとり取り組み、課題Ｂについてはペアでひとつに取り組む。

---

課題A : 下記のうちいずれかの画題を選択し、アニメーションを制作しなさい。

• 目薬をさす人
• トイレを探しており、やっと見つけて、トイレに駆け込む人
• 弓道をする人

※「個人課題」の提出方法
各自が所属するグループのフォルダ内に、それぞれファイルを保存する。
ファイル名は、名字_日付.拡張子とする。ex)saito_110427.fla

---

課題B: 餅つきのアニメーションをペアで作成しなさい。

なお、「餅をつく人」「餅をこねる人」「餅」「杵」「臼」などの各オブジェクトは出来るだけシンボル化し、ペアで分担して作成してください。

分担については、一人が「餅をつく人」「杵」を作成し、もう一人が「餅をこねる人」「餅」「臼」を作成するという形態を推奨する。
また、時間に余裕がある場合は、背景に自由に、キャラクターもしくはアイテムを加えてください。

＜手順＞
（１）どのような絵、アニメーションを作成するかということについてペアで話し合う。
（２）どちらが、どのシンボルを作成するのかということについて話し合う。
（３）各シンボルを作成する。
（４）USBメモリなどを利用し、互いのシンボルを共有する。
（５）全体のバランスを整え、ひとつのムービーとして完成させる。
（６）flaファイルを提出する。

＜共同作業をするにあたって＞

• ペアで知識やスキルを共有するよう努めて下さい。
• 作品のコンセプトを共有するよう努め、コミュニケーションをとって下さい。
• 相手が困っていたら、積極的に助けて下さい。　

---

[Prev] [Home] [Next]

---