Ｆｌａｓｈアニメーション制作講座

1. Ｆｌａｓｈアニメーション制作講座 2005年9月5日 坪倉篤志

2. 本日の内容 • ３限目 • はじめに • Macromedia Flashについて • アニメーション（映像制作）について • Document Design 2 / Webデザイン • お絵かき入門（基本操作） • ４限目 • アニメーション入門 • フレームアニメーション（パラパラ漫画） • シェイプトゥーイン • モーショントゥーイン

3. ・Macromedia Flashについて • 非常に多くのWebページに用いられている • 作品紹介、代表的なWebページ • アニメーション制作 • Flashで制作したアニメーションをWebで公開してたら、人気が出て、TVアニメーションになった等 • 蛙男商会　http://www.kaeruotoko.com/ • 古墳GALのコフィー （ＴＶアニメ化） • NEWS23 蛙男劇場 • 六本木ヒルズシアターにて公開 • プログラムが可能であり、インタラクティブコンテンツ制作（ゲーム、Webページ） • 動画像、３Dモデルを組み込める • 携帯向けのコンテンツ • Macromedia社は昨年度Adobeに買収

4. Flashサイトの紹介 • Webサイト紹介 • skthttp://skt-products.com/flash.html • Flash素材 http://flash.xtaro.com/sozai/cute1.htm • OCNゲーム×なつゲー　FLASH ゲームコンテストhttp://game.coden.ntt.com/contest/index.html • 企業ページ • NISSANhttp://www.nissan.co.jp/ • AUhttp://www.au.kddi.com/ • 学習できるサイトも多数 • Flash道場　http://www2.netwave.or.jp/~light/ • Flashの技　http://www.1art.jp/ • Flash PLAYON.JP http://www.game3rd.com/flash/index.htm • flash-jp.comhttp://www.flash-jp.com/

5. アニメーション（映像）制作について

6. アニメーションの種類 • 平面アニメーション • セルアニメーション • ＴＶアニメーションの大半。絵を描いた透明のセルロイドを用いる。複数のセルを重ねて1つの絵や場面を構築する • （近年はデジタル化のため、セルは用いていない場合が多い） • ペーパーアニメーション　（俗に言うパラパラアニメ） • Webアニメーション • 他（オイルペイント・アニメーション、切り絵アニメーション、影絵アニメーション、シネカリグラフィ） • 立体アニメーション • （クレイアニメーション、人形アニメーション、他）

7. アニメーション制作の流れ • 企画、脚本、演出、絵コンテ、レイアウト • 制作、原画、動画、色指定、彩色・仕上、[検査] • 撮影、特殊効果、[現像] • 編集 • 音入れ（MA（マルチオーディオ）、AR（アフレコ）） • プレビュー • 放送・メディアへ ※[]印はデジタル化により省略

8. アニメーションを企画しよう • 企画って？ • どんなアニメーションを作りたい？ • イメージを具体的にすること • ストーリーを考えること • キャラクター・登場人物を考えること • 紙に書くこと

9. ふうせん君 ある天気がメッチャえ～日 ふうせん君はピクニックに行きたくなりました。 ふうせん君はふうせんちゃんを誘いました ピクニックに出かけていきました～ アニメーションのストーリー • ４コマ漫画をイメージ • 例：誰が、どんな事をしたのか、見てわかるように • オチがあると楽しい • 絵コンテを書こう • アニメーションのシーン（場面）を絵と文字で表現

10. フレーム アニメーションについて • 動作や形が少しずつ異なる多くの絵や人形を一齣(ひとこま)ずつ撮影し、映写した時に画像が連続して動いて見えるようにするもの。ビデオ-レコーダーによるものやコンピューター-グラフィックスを応用するものもある。アニメ。動画。三省堂提供「大辞林 第二版」より(gooの辞書より) • 静止画を同位置に連続して表示する事で、動いて見える映像 • パラパラアニメが身近 • 用語 • fps：(frame per second)　一秒間に再生するフレーム数 • NTSC 30fps(29.97)　走査線 525本　4:3 • 映画 24fps • HDTV（High Definition TeleVision）60fps 走査線1125本,1250本 16:9 時間軸(タイムライン)

11. タイムライン end start キーとなる瞬間 中割り 中割り アニメーションについて • キーフレーム法(Key Frame)： • アニメーションの基本的な手法の一つ • 一連の動きのキーとなる瞬間を基準に動きを定義する方法 • インビトゥーイン(中割り)法 • キーフレームの間を埋めるフレーム(中割フレーム)を作成する方法 • 従来のアニメーションでは、手作業で制作 • CGアニメーションでは補完という技術を使う • キーポイント、補完曲線を元に、動き、形状等の補完を行い、中割りフレームの作成 キーフレーム

12. ドキュメントデザイン２ ←（約1時間）→ ←（約0.5時間）→

13. ゲームとアニメーションの半日講習会のスケジュール（例）ゲームとアニメーションの半日講習会のスケジュール（例） 13:00 （約0.5時間） （約0.5時間） • はじめに • アドベンチャーゲーム、アニメーションをデザインしよう ～休憩～ • お絵かき入門（基本操作） • アニメーション入門（パラパラ漫画） ～休憩～ • さぁゲームへ （約0.5-1時間） （約0.5-1時間） （Programと制作　約１～1.5時間） 17:00 実施時間が限られているため、制作の上での基本等は、ある程度、飛ばしている

14. お絵かき入門（基本操作） • Ｍａｃｒｏｍｅｄｉａ　Ｆｌａｓｈの画面構成と基本操作 • Ｍａｃｒｏｍｅｄｉａ　Ｆｌａｓｈでお絵かき • ペンツール、バケツツール • 矩形選択ツール • コピー＆ペースト • レイヤー

15. メニュー ツール ステージ 他の機能は今は片付けて下さい プロパティ Ｍａｃｒｏｍｅｄｉａ　Ｆｌａｓｈの画面構成と基本操作 • Macromedia Flashを起動しよう • 「スタートメニュー」→「Ｍａｃｒｏｍｅｄｉａ」→「Ｍａｃｒｏｍｅｄｉａ　Ｆｌａｓｈ」 • 保存について • ファイルメニューから保存を選択

16. Ｍａｃｒｏｍｅｄｉａ　Ｆｌａｓｈでお絵かき基本図形を描く：ブラシツールと消しゴムツールＭａｃｒｏｍｅｄｉａ　Ｆｌａｓｈでお絵かき基本図形を描く：ブラシツールと消しゴムツール • ブラシツール • 消しゴムツール

17. Ｍａｃｒｏｍｅｄｉａ　Ｆｌａｓｈでお絵かき基本図形を描くＭａｃｒｏｍｅｄｉａ　Ｆｌａｓｈでお絵かき基本図形を描く • 直線（線ツール） • 円（楕円ツール） • 四角形（矩形ツール） • 三角形（多角形ツール→オプション） • 演習 ５種類の異なる形状の図形を描いてみよう：○△□等 memoshiftキーを押しながらドラッグ

18. Ｍａｃｒｏｍｅｄｉａ　Ｆｌａｓｈでお絵かき基本図形を描く：線と塗り、そして図形を削るＭａｃｒｏｍｅｄｉａ　Ｆｌａｓｈでお絵かき基本図形を描く：線と塗り、そして図形を削る • 線と塗りの練習 • 線だけの円を描く • 線と塗りの変更（プロパティ、ツールバー） • 円に色を流し込む（バケツツール） • 塗りの移動（選択ツール） • 線の移動（選択ツール） • 練習：矩形の線の移動（シングルクリック、ダブルクリック） • 図形の分断 • 線で図形の分断 • 塗りで線の分断 • 練習　下記の課題の図形を描いて見ましょう • 練習１　家 • 練習２　柿

19. Ｍａｃｒｏｍｅｄｉａ　Ｆｌａｓｈでお絵かき基本図形を描く：塗りの色の変更Ｍａｃｒｏｍｅｄｉａ　Ｆｌａｓｈでお絵かき基本図形を描く：塗りの色の変更 • 塗りの変更（バケツツール） • □の描画 • バケツツールにて塗りの色の変更 • 色のコピー（スポイトツール） • ２つの色が異なる図形の描画 • スポイトツールにて、片方図形の箇所をクリック • →カーソルが、バケツツールに変更される • 片方の任意の箇所でクリック • 色の変更（選択ツール） • 図形の描画 • 描画した図形を選択ツールで選択 • プロパティにて、色の変更 • 複数を選択時：shiftキーを押しながら連続して選択

20. Ｍａｃｒｏｍｅｄｉａ　Ｆｌａｓｈでお絵かき基本図形を描く：図形の変更と移動Ｍａｃｒｏｍｅｄｉａ　Ｆｌａｓｈでお絵かき基本図形を描く：図形の変更と移動 選択ツールとダイレクト選択ツールの違いについて • 図形の変形（選択ツール・描いた図形に矢印を近づけた時に矢印の形に注目） • 角の位置の変更 • 図形の描画→選択ツールを用い、角をドラッグ • 直線を曲線に • 図形を描画→選択ツールを用い、線の中央をドラッグ • 練習：丸と直線で顔を描き、笑ってる顔、怒ってる顔を作ってみよう ：通常 ：角の調整 ：線の調整

21. Ｍａｃｒｏｍｅｄｉａ　Ｆｌａｓｈでお絵かき基本図形を描く：図形の変更と移動Ｍａｃｒｏｍｅｄｉａ　Ｆｌａｓｈでお絵かき基本図形を描く：図形の変更と移動 選択ツールとダイレクト選択ツールの違いについて • ダイレクト選択ツール • □を描画 • ポイントの移動 • ダイレクト選択ツールで線上をクリック →アンカーポイントの表示 • アンカーポイントの移動 • ○を描画 • 曲線の調整 • ダイレクト選択ツールで線上をクリック →アンカーポイントとハンドルが表示 • ハンドルを動かして曲線の調整

22. Ｍａｃｒｏｍｅｄｉａ　Ｆｌａｓｈでお絵かき基本図形を描く：図形の変更と移動Ｍａｃｒｏｍｅｄｉａ　Ｆｌａｓｈでお絵かき基本図形を描く：図形の変更と移動 自由変形ツール • 変形したい図形群を選択 • （複数選択する場合はshiftキーを押しながら連続して選択） • 自由変形ツールを選択 • オプションを選択 • 台形化（歪曲オプション） • 平行に変形（回転と傾斜オプション） • 膨らませる（エンベローブオプション） • ハンドルを移動

23. 車 登場人物 背景 Ｍａｃｒｏｍｅｄｉａ　Ｆｌａｓｈでお絵かきレイヤー・キャラクターを描こう アニメーションの世界では、1つの紙に全ての絵を描くということはしません。部品毎に透明なシートに描き、透明なシート達を重ねて1つの絵を構成します。 Ｆｌａｓｈで作るアニメ、ゲームにおいても同じです。 レイヤーと呼ばれる透明のシートを複数使い、 各場面の映像を作っていきます。 レイヤーの追加は　　　　　を押せば追加できます。 レイヤーへの描画は、まずレイヤーを選択してから描いてください レイヤーの重ね合わせの順番も変更できます

24. アニメーション入門 アニメーションの基礎 フレームアニメーション（パラパラ漫画） シェイプトゥーイン（形が変形） モーション（平行移動）

25. ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ アニメーションの基礎 • 複数の絵を短い時間に連続して見る • 動いているように見える。 • Flashでのアニメーションの種類 • フレームアニメーション • モーショントゥーインアニメーション • シェイプトゥイーンアニメーション 時間軸(タイムライン) • シェイプトゥイーンアニメーション • モーショントゥーインアニメーション • フレームアニメーション

26. タイムラインの表示サイズの変更 タイムライン 制御パネル(ウィンドウメニューにある。制御メニュー→ループ再生を選択しておくと便利) ぱらぱら漫画を作ろう • アニメーション制作手順 • フレームにお絵かき • フレームの追加 • 追加したフレームの映像を変形、または新たにお絵かき

27. ぱらぱら漫画を作ろう • 制作練習 • フレーム（キーフレーム）にお絵かき • フレーム（キーフレーム）の追加 • タイムライン上の任意の時間で「右クリック」→「キーフレームの挿入」→キーフレームが作られる（１のキーフレームと同様の画像をコピーされたキーフレームが作られる） • 追加したフレーム（キーフレーム）の画像の変形 • 自由変形ツール • オニオンスキンの活用 • オニオンスキン：指定範囲のフレームを表示 • 動作確認 • 「制御」→「再生」 練習：ボールが飛んでいくシーンを作ってみよう オニオンスキンの範囲

28. ぱらぱら漫画を作ろう時間の調整 フレーム（キーフレーム：●のあるフレーム）に絵を描いてアニメーションを描いてきました。このフレームの表示時間を調整できます。 • 表示時間を延ばす • キーフレームで右クリック→フレームを挿入 • 表示時間を短くする • キーフレーム以外で右クリック→フレームを削除 注意：キーフレームは絶対に消さないこと カレントフレーム(現在のフレーム) キーフレーム

29. ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ シェイプトゥイーンアニメーション • シェイプトゥイーンアニメーション • ２つの形状の異なる図形間のアニメーションです。 • 制作手順 • 最初のフレームにシェイプを描画 • 最終フレームに空白キーフレームの挿入 • 上記最終フレームに異なる形状のシェイプを描画 • 最初のフレームを選択し、プロパティ→「トゥイーン」を「シェイプ」へ • 練習２、□と○でシェイプトゥイーンアニメーションを制作しなさい。 • ＋α、異なる色、異なるシェイプの数を試しなさい 基本：１レイヤーに１モーション

30. シェイプトゥイーンアニメーションシェイプヒントシェイプトゥイーンアニメーションシェイプヒント （シェイプヒント）シェイプトゥイーンアニメーションの動作をより精密に調整可能 • 制作手順 • 準備：シェイプトゥイーンアニメーションを作成 • 最初のフレームを選択修正→シェイプ→シェイプヒントの追加 • シェイプヒントをシェイプに対し設置 • 最終フレームに移動既に用意されているシェイプヒントをシェイプに対し設置 • １に戻る 基本：１レイヤーに１モーション

31. モーショントゥーインアニメーションシンボルモーショントゥーインアニメーションシンボル • シンボル：複数のパーツに別けて映像を制作する場合に利用 • パーツのＤＢ化 • シンボル化された画像はFlashのライブラリーに登録される • またモーショントゥーインをする場合もシンボルにする必要がある。 • シンボルに変換 • ステージにて図形の描画 • 図形の選択→「修正メニュー」→シンボルに変換 • 名前、タイプ（ムービークリップ）、基準点の選択 • ライブラリーに登録される • （ライブラリーの表示：　ウインドウ→ライブラリー

32. 基本：１レイヤーに１モーション モーショントゥーインアニメーション • 平行移動 • 制作練習 • キーフレームにオブジェクトの描画 • お絵かき　：　（まずは基本図形の□、△等） • 絵をシンボル化(パーツ化)　タイプ：ムービークリップ • キーフレームの追加 • 追加したキーフレームの画像の位置を変更 • タイムラインのフレームを選択→プロパティ、トゥイーンをモーション • 練習１：基本的な図形(○、□等)がステージ上を飛び回るアニメーションを作りなさい。

33. 基本：１レイヤーに１モーション モーショントゥーインアニメーション • 自由変形 • キーフレームにオブジェクトの描画 • お絵かき　：　（まずは基本図形の□、△等） • 絵をシンボル化(パーツ化)　タイプ：ムービークリップ • キーフレームの追加 • 追加したキーフレームの画像の形状を自由変形ツールで変形 • タイムラインのフレームを選択→プロパティ、トゥイーンをモーション • 練習３：練習１又は２のアニメーションで自由変形を試しなさい。 • 回転移動 • （上記手順と同じ、異なるのは３のみ。３の項目を下記の２種類の方法で制作可） • 方法１　自由変形ツールで回転して設置 • 方法２　プロパティの回転パラメータの変更 • 練習４ ： 練習１又は２のアニメーションで自由変形を試しなさい。

34. （おまけ） • モーショントゥーインアニメーション • イージング • 初期値：０ • 調整値：イン(-100)～アウト(100) • 練習２：練習１のアニメーションでイージングを試し、イージングについて調べなさい • オニオンスキン • オニオンスキンを用いると、フレーム間での映像を確認できます。様々な表示ができるので、うまく活用してください

35. t シーンのコピー シーンの追加 シーン シーン５ シーン２ シーン１ • 絵コンテはシーンごとに異なる場面を書きました。Flashでも各シーンごとにまとまったアニメーションとして描けます。 • またシーンは順番を入れ替えれます。 • ここにアドベンチャーゲーム、又はアニメーションの各シーンとシーンの中にアニメーションを描いていきます