Transcript PPT
Ｆｌａｓｈアニメーション制作講座 2005年9月5日 坪倉篤志 本日の内容 • ３限目 – はじめに • Macromedia Flashについて • アニメーション（映像制作）について • Document Design 2 / Webデザイン – お絵かき入門（基本操作） • ４限目 – アニメーション入門 • フレームアニメーション（パラパラ漫画） • シェイプトゥーイン • モーショントゥーイン ・Macromedia Flashについて • 非常に多くのWebページに用いられている – 作品紹介、代表的なWebページ • アニメーション制作 • Flashで制作したアニメーションをWebで公開してたら、人気が 出て、TVアニメーションになった等 – 蛙男商会 http://www.kaeruotoko.com/ • 古墳GALのコフィー （ＴＶアニメ化） • NEWS23 蛙男劇場 • 六本木ヒルズシアターにて公開 • プログラムが可能であり、インタラクティブコンテンツ制 作（ゲーム、Webページ） • 動画像、３Dモデルを組み込める • 携帯向けのコンテンツ • Macromedia社は昨年度Adobeに買収 Flashサイトの紹介 • Webサイト紹介 – skt http://skt-products.com/flash.html – Flash素材 http://flash.xtaro.com/sozai/cute1.htm – OCNゲーム×なつゲー FLASH ゲームコンテスト http://game.coden.ntt.com/contest/index.html • 企業ページ – NISSAN http://www.nissan.co.jp/ – AU http://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.com http://www.flash-jp.com/ アニメーション（映像）制作について アニメーションの種類 平面アニメーション セルアニメーション ＴＶアニメーションの大半。絵を描いた透明のセルロイドを用いる。複数 のセルを重ねて1つの絵や場面を構築する （近年はデジタル化のため、セルは用いていない場合が多い） ペーパーアニメーション （俗に言うパラパラアニメ） Webアニメーション 他（オイルペイント・アニメーション、切り絵アニメーション、影絵アニメーショ ン、シネカリグラフィ） 立体アニメーション （クレイアニメーション、人形アニメーション、他） アニメーション制作の流れ 企画、脚本、演出、絵コンテ、レイアウト 制作、原画、動画、色指定、彩色・仕上、[検査] 撮影、特殊効果、[現像] 編集 音入れ（MA（マルチオーディオ）、AR（アフレコ）） プレビュー 放送・メディアへ ※ []印はデジタル化により省略 アニメーションを企画しよう 企画って？ どんなアニメーションを作りたい？ イメージを具体的にすること ストーリーを考えること キャラクター・登場人物を考えること 紙に書くこと アニメーションのストーリー ４コマ漫画をイメージ 例：誰が、どんな事をしたのか、見てわかるように ふうせん君 オチがあると楽しい ある天気がメッ チャえ～日 絵コンテを書こう アニメーションのシーン（場面）を 絵と文字で表現 ふうせん君はピ クニックに行きた くなりました。 ふうせん君はふ うせんちゃんを誘 いました ピクニックに出か けていきました～ アニメーションについて 動作や形が少しずつ異なる多くの絵や人形を一齣(ひとこま)ずつ撮影し、映写し た時に画像が連続して動いて見えるようにするもの。ビデオ-レコーダーによるも のやコンピューター-グラフィックスを応用するものもある。アニメ。動画。三省堂提 供「大辞林 第二版」より(gooの辞書より) 静止画を同位置に連続して表示する事で、動いて見える映像 時間軸(タイムライン) フレーム パラパラアニメが身近 用語 fps：(frame per second) 一秒間に再生するフレーム数 NTSC 30fps(29.97) 走査線 525本 4:3 映画 24fps HDTV（High Definition TeleVision） 60fps 走査線1125本,1250 本 16:9 アニメーションについて キーフレーム法(Key Frame)： アニメーションの基本的な手法の一つ 一連の動きのキーとなる瞬間を基準に動きを定義する方法 タイムライン end start キーとなる瞬間 中割り 中割り キーフレーム インビトゥーイン(中割り)法 キーフレームの間を埋めるフレーム(中割フレーム)を作成する方法 従来のアニメーションでは、手作業で制作 CGアニメーションでは補完という技術を使う キーポイント、補完曲線を元に、動き、形状等の補完を行い、中割りフレーム の作成 ドキュメントデザイン２ Nacse:小テストと解説の範囲 Flash オリエンテーション 描画の基礎(1) 2 第1章, Web全般 描画の基礎(2) 3 第2章, eコマース 4 5 NACSE 1 第3章, Web開発プロセス 入 門 前 半 第5章第1-3課,オーサリングツール 描画の基礎(3) 描画の基礎(4) アニメーション(1)：フレームアニメーション /インフォメーションアーキテクチャ アニメーション(2)：モーショントゥーインアニメーション 6 第9章,セキュリティ 7 中間試験：範囲 第1章～第3章,第5章第1-3課,第9章 8 中間試験まとめ 9 第4章, HTML 11 NACSE 10 ←（約1時間）→ アニメーション(3)：モーショントゥーインアニメーション （ガイドレイヤー）、シェイプトゥイーンアニメーション ←（約0.5時間）→ 第5章第4-7課, CSS 後 半 第6章,Perl 応 用 アニメーション(4)：レイヤー、マスクレイヤー、エフェ クト（カラーエフェクト、フェイドイン、フェイドアウト等） ActionScript(インタラクティブコンテンツ) 制作 12 第7章,JavaScript 制作 13 第8章,ASP 制作 14 Flash作品展示会 再提出〆切：7/7 15 期末試験：全範囲 作品提出 中間試験：範囲 後半 第4章,第5章第4-7課,第6-8課 ゲームとアニメーションの 半日講習会のスケジュール（例） 13:00 • はじめに （約0.5時間） （約0.5時間） • アドベンチャーゲーム、アニメーションをデザ インしよう ～休憩～ （約0.5-1時間） • お絵かき入門（基本操作） （約0.5-1時間） • アニメーション入門（パラパラ漫画） ～休憩～ • さぁゲームへ 17:00 （Programと制作 約１～1.5時間） 実施時間が限られているため、 制作の上での基本等は、ある程度、飛ばしている お絵かき入門（基本操作） • Ｍａｃｒｏｍｅｄｉａ Ｆｌａｓｈの画面構成と基本操作 • Ｍａｃｒｏｍｅｄｉａ Ｆｌａｓｈでお絵かき – – – – ペンツール、バケツツール 矩形選択ツール コピー＆ペースト レイヤー Ｍａｃｒｏｍｅｄｉａ Ｆｌａｓｈの 画面構成と基本操作 • Macromedia Flashを起動しよう – 「スタートメニュー」→「Ｍａｃｒｏｍｅｄｉａ」→「Ｍａｃｒｏｍｅｄｉａ Ｆｌａｓｈ」 メニュー ツール 他の機能は今は片付けて下さい ステージ • 保存について – ファイルメニューから保存を選択 プロパティ Ｍａｃｒｏｍｅｄｉａ Ｆｌａｓｈでお絵かき 基本図形を描く：ブラシツールと消しゴムツール • ブラシツール • 消しゴムツール Ｍａｃｒｏｍｅｄｉａ Ｆｌａｓｈでお絵かき 基本図形を描く • 直線（線ツール） • 円（楕円ツール） • 四角形（矩形ツール） • 三角形（多角形ツール→オプション） • 演習 ５種類の異なる形状の図形を描いてみよう： ○△□等 memo shiftキーを押しながらドラッグ Ｍａｃｒｏｍｅｄｉａ Ｆｌａｓｈでお絵かき 基本図形を描く：線と塗り、そして図形を削る • 線と塗りの練習 1. 2. 3. 4. • • 線だけの円を描く • 線と塗りの変更（プロパティ、ツールバー） 円に色を流し込む（バケツツール） 塗りの移動（選択ツール） 線の移動（選択ツール） • 練習：矩形の線の移動（シングルクリック、ダブルクリック） 図形の分断 1. 2. 線で図形の分断 塗りで線の分断 練習 下記の課題の図形を描いて見ましょう 練習１ 家 練習２ 柿 Ｍａｃｒｏｍｅｄｉａ Ｆｌａｓｈでお絵かき 基本図形を描く：塗りの色の変更 1. 塗りの変更（バケツツール） 1. □の描画 2. バケツツールにて塗りの色の変更 2. 色のコピー（スポイトツール） 1. ２つの色が異なる図形の描画 2. スポイトツールにて、片方図形の箇所をクリック • →カーソルが、バケツツールに変更される 3. 片方の任意の箇所でクリック 3. 色の変更（選択ツール） 1. 図形の描画 2. 描画した図形を選択ツールで選択 3. プロパティにて、色の変更 • 複数を選択時：shiftキーを押しながら連続して選択 Ｍａｃｒｏｍｅｄｉａ Ｆｌａｓｈでお絵かき 基本図形を描く：図形の変更と移動 選択ツールとダイレクト選択ツールの違いについて 1. 図形の変形（選択ツール・描いた図形に矢印を近づけた 時に矢印の形に注目） • ：通常 角の位置の変更 • 図形の描画→選択ツールを用い、角をドラッグ ：角の調整 • 直線を曲線に • 図形を描画→選択ツールを用い、線の中央をドラッグ ：線の調整 • 練習：丸と直線で顔を描き、笑ってる顔、怒ってる顔を 作ってみよう Ｍａｃｒｏｍｅｄｉａ Ｆｌａｓｈでお絵かき 基本図形を描く：図形の変更と移動 選択ツールとダイレクト選択ツールの違いについて ダイレクト選択ツール □を描画 ポイントの移動 1. 2. ダイレクト選択ツールで線上をクリック →アンカーポイントの表示 アンカーポイントの移動 ○を描画 曲線の調整 1. 2. ダイレクト選択ツールで線上をクリック →アンカーポイントとハンドルが表示 ハンドルを動かして曲線の調整 Ｍａｃｒｏｍｅｄｉａ Ｆｌａｓｈでお絵かき 基本図形を描く：図形の変更と移動 自由変形ツール 1. 変形したい図形群を選択 • （複数選択する場合はshiftキーを押しなが ら連続して選択） 2. 自由変形ツールを選択 3. オプションを選択 • • • 台形化（歪曲オプション） 平行に変形（回転と傾斜オプション） 膨らませる（エンベローブオプション） 4. ハンドルを移動 Ｍａｃｒｏｍｅｄｉａ Ｆｌａｓｈでお絵かき レイヤー・キャラクターを描こう アニメーションの世界では、1つの紙に全ての絵を描くということは しません。部品毎に透明なシートに描き、透明なシート達を 重ねて1つの絵を構成します。 Ｆｌａｓｈで作るアニメ、ゲームにおいても同じです。 レイヤーと呼ばれる透明のシートを複数使い、 各場面の映像を作っていきます。 レイヤーの追加は を押せば追加できます。 レイヤーへの描画は、まずレイヤーを選択してから描いてください レイヤーの重ね合わせの順番も変更できます アニメーション入門 アニメーションの基礎 フレームアニメーション（パラパラ漫画） シェイプトゥーイン（形が変形） モーション（平行移動） アニメーションの基礎 • 複数の絵を短い時間に連続して見る • 動いているように見える。 時間軸(タイムライン) • Flashでのアニメーションの種類 – フレームアニメーション – モーショントゥーインアニメーション – シェイプトゥイーンアニメーション ○ ○ ○ ○ ○ ○ フレームアニメーション モーショントゥーインアニメーション ○ ○ シェイプトゥイーンアニメーション ぱらぱら漫画を作ろう タイムラインの表示サイズの変更 タイムライン 制御パネル(ウィンドウ メニューにある。制御メ ニュー→ループ再生を 選択しておくと便利) • アニメーション制作手順 1.フレームにお絵かき 2.フレームの追加 3.追加したフレームの映像を変形、または新たにお 絵かき ぱらぱら漫画を作ろう • 制作練習 フレーム（キーフレーム）にお絵かき フレーム（キーフレーム）の追加 1. 2. • 3. 4. タイムライン上の任意の時間で「右クリック」→「キーフレームの 挿入」 →キーフレームが作られる（１のキーフレームと同様の画像をコ ピーされたキーフレームが作られる） 追加したフレーム（キーフレーム）の画像の変形 1. 自由変形ツール 2. オニオンスキンの活用 • オニオンスキン：指定範囲のフレームを表示 動作確認 1. 「制御」→「再生」 練習：ボールが飛んでいくシーンを作ってみよう オニオンスキンの範囲 ぱらぱら漫画を作ろう 時間の調整 フレーム（キーフレーム：●のあるフレーム）に絵を描いてアニメー ションを描いてきました。このフレームの表示時間を調 整できます。 表示時間を延ばす 1. • キーフレームで右クリック→フレームを挿入 表示時間を短くする 2. • キーフレーム以外で右クリック→フレームを削除 注意：キーフレームは絶対に消さないこと カレントフレーム (現在のフレーム) キーフレーム シェイプトゥイーンアニメーション ○ • シェイプトゥイーンアニメーション ○ ○ ○ ○ ○ ○ ○ – ２つの形状の異なる図形間のアニメーションです。 – 制作手順 最初のフレームにシェイプを描画 最終フレームに空白キーフレームの挿入 上記最終フレームに異なる形状のシェイプを描画 最初のフレームを選択し、プロパティ→「トゥイーン」を「シェイプ」 へ 練習２、□と○でシェイプトゥイーンアニメーションを制作しなさい。 ＋α、異なる色、異なるシェイプの数を試しなさい 1. 2. 3. 4. • • 基本：１レイヤーに１モーション シェイプトゥイーンアニメーション シェイプヒント （シェイプヒント）シェイプトゥイーンアニメーションの動作をより精密に 調整可能 • 制作手順 基本：１レイヤーに１モーション • 準備：シェイプトゥイーンアニメーションを作成 1. 最初のフレームを選択 修正→シェイプ→シェイプヒントの追加 2. シェイプヒントをシェイプに対し設置 3. 最終フレームに移動 既に用意されているシェイプヒントをシェイプに対し設置 4. １に戻る モーショントゥーインアニメーション シンボル • シンボル：複数のパーツに別けて映像を制作する場合に利用 – パーツのＤＢ化 – シンボル化された画像はFlashのライブラリーに登録される • またモーショントゥーインをする場合もシンボルにする必要が ある。 • シンボルに変換 – ステージにて図形の描画 – 図形の選択→「修正メニュー」→シンボルに変換 • 名前、タイプ（ムービークリップ）、基準点の選択 • ライブラリーに登録される • （ライブラリーの表示： ウインドウ→ライブラリー 基本：１レイヤーに１モーション モーショントゥーインアニメーション • 平行移動 – 1. 制作練習 キーフレームにオブジェクトの描画 i. ii. お絵かき ： （まずは基本図形の□、△等） 絵をシンボル化(パーツ化) タイプ：ムービークリップ 2. 3. 4. キーフレームの追加 追加したキーフレームの画像の位置を変更 タイムラインのフレームを選択→プロパティ、トゥイーンをモーション – 練習１：基本的な図形(○、□等)がステージ上を飛び回るアニメー ションを作りなさい。 基本：１レイヤーに１モーション モーショントゥーインアニメーション • • 自由変形 1. キーフレームにオブジェクトの描画 i. お絵かき ： （まずは基本図形の□、△等） ii. 絵をシンボル化(パーツ化) タイプ：ムービークリップ 2. 3. 4. キーフレームの追加 追加したキーフレームの画像の形状を自由変形ツールで変形 タイムラインのフレームを選択→プロパティ、トゥイーンをモーション – 練習３：練習１又は２のアニメーションで自由変形を試しなさい。 回転移動 – – – – （上記手順と同じ、異なるのは３のみ。３の項目を下記の２種類の方法で制 作可） 方法１ 自由変形ツールで回転して設置 方法２ プロパティの回転パラメータの変更 練習４ ： 練習１又は２のアニメーションで自由変形を試しなさい。 （おまけ） • モーショントゥーインアニメーション – イージング • 初期値：０ • 調整値：イン(-100)～アウト(100) – 練習２：練習１のアニメーションでイージングを試し、イージングに ついて調べなさい • オニオンスキン – オニオンスキンを用いると、フレーム間での映像を確認できます。様々 な表示ができるので、うまく活用してください シーン シーン１ シーン２ シーン５ • 絵コンテはシーンごとに異なる場面を書きました。Flashで も各シーンごとにまとまったアニメーションとして描けます。 • またシーンは順番を入れ替えれます。 • ここにアドベンチャーゲーム、又はアニメーションの各シー ンとシーンの中にアニメーションを描いていきます t シーンのコピー シーンの追加