２０１２年度　インタラクティブ映像制作実習I(1)

第６回アニメーション制作Tips

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

★本日のテーマ

本日は、Flashを用いて比較的長いアニメーションを制作する上で便利な「シーン」の使い方について学ぶ。
また、これまで学習した知識を復習し、それらをより実践的に駆使できるようになるために、「実践課題」に取り組む。

★シーン（pp.160-162）※新版p.185

「シーン」とは、場面が変わる単位のこと。
Flashにおけるシーンは、レイヤーとフレームを一新でき、新しいシーンを作ると、タイムラインは再び、１フレームから始まる。

長いアニメーションを制作する際、場面ごとに編集工程を整理できるので便利。

新しいシーンの作成。[挿入]から[シーン]を選択。
編集バーの[シーンの編集]でシーンを切り替えることが出来る。
　下記のファイルでは、３つのシーンが登録されている。※教材フォルダから、scene.flaをコピー

＜シーン１＞

＜シーン２＞

＜シーン３＞

＜ムービーの再生＞
[シーン]パネルでは、シーンの追加、切り替え、名前の変更、コピーなどができる。シーン名に具体的な名前にすると、場面の内容が明確になり、編集作業をする際に便利である。

●シーン名の変更

↓

●順番の変更

↓

＜ムービーの再生＞

＜注意＞

シーンを設定できるのは、メインタイムライン（root）のみである。

シーンは、ActionScriptとの相性が悪い。ゲーム制作などActionScripを多用する場合にシーンを用いるとムービークリップの制御で不具合が発生することがあるので、そうした場合はシーンを用いないようにする。

ファイルの統合について
- 異なるflaファイル間で、シーンをコピー＆ペーストで共有するための機能は用意されていないが、下記の方法を用いることで実質コピー可能。
  →ペアで分業し、あとで合わせる場合は要注意。
- 任意のフレームを選択の上、コピー＆ペーストする。この場合は、シンボル名の重複に注意すること。その場合、シンボルが上書きされる可能性がある。
  
  ex)file_A.flaのシーン１をfile_B.flaのシーン２にコピーする場合。
  （１）file_A.flaのシーン１のフレーム１〜６０（レイヤー１）を選択し、右クリック→[フレームのコピー]
  
  （２）file_B.flaのシーン２のフレーム１を選択し、右クリック→ [フレームのペースト]
- グループでファイルを統合する作業を最後にいっぺんにおこなうのはリスキーなので、最低でも２、３回にわけておこない、その都度、ファイルのバックアップをとること。

★Webサーバーへのアップロード方法

Webブラウジングは、「クライアント・サーバモデル」という仕組みによって実現される。すなわち、IEやFirefox等のブラウザと遠隔地にあるコンピュータ（サーバ）との通信が不可欠となる。
したがって、Webでコンテンツを公開するためには、それらを「サーバ」にアップロードする必要がある。
パブリッシュの方法（p.134）※新版.27,pp.330-338
FlashコンテンツをHTMLベースで公開するためには、「パブリッシュ」を実行し、サーバに転送する「SWFファイル」「HTMLファイル」「JavaScriptファイル」を生成する必要がある。

■[ファイル]→[パブリッシュ]で、「SWFファイル」「HTMLファイル」「JavaScriptファイル(AC_RunActiveContent.js)」を作成できる。

■[ファイル]→パブリッシュ設定]で、生成するSWFファイル、HTMLファイルの詳細設定を行うことが出来る。
FFFTPを利用してファイルをサーバにアップロード。
- アップ先:
  URL : http://www.ritsumei.ac.jp/~ユーザ名(Rainbow ID)/interactive/
- FFFTPの使用方法:
  - FTPクライアント「FFFTP」を起動。
  - [新規ホスト]をクリックし、[ホストの設定]を行う。
    - ホストの設定名:任意のものでよい。
    - ホスト名：remote.ritsumei.ac.jp
    - ユーザ名：RAINBOW IDを入力
    - パスワード：RAINBOWのパスワードを入力
    以上の設定を行い[OK]を押す。
  - アップロード先ディレクトリ（フォルダ）の作成
    
    フォルダ「public_html」を開く。「public_html」がない場合は作成する。[右クリック]→[フォルダ作成]
    
    フォルダ「public_html」内に、フォルダ「interactive」を作成する。[右クリック]→[フォルダ作成]
  - ファイルのアップロード
    フォルダ「interactive」を開き、その中に、「SWFファイル」「HTMLファイル」「JavaScriptファイル」をドラッグアンドドロップする。
  - ブラウジング
    
    FirefoxあるいはIntenet Exploreを起動。
    URLに「 http://www.ritsumei.ac.jp/~ユーザ名(Rainbow ID)/interactive/アップロードしたファイル名.html」を指定。
    
    ※ http://www.ritsumei.jp/ではなくhttp://www.ritsumei.ac.jp/である。
    ※ユーザー名の頭にチルダ「~」を忘れずに。
  なお、FFFTPの使用については、『RAINBOW GUIDE』のp.68に詳細な説明あり。

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

インスタンス（ムービークリップやボタン）を押したら特定のサイトを開く


(インスタンス名).addEventListener.(MouseEvent.CLICK, 関数名);
function 関数名(e:MouseEvent):void{
　/* 処理の記述 */
return;
}

new URLRequest([開きたいサイトのURL]);

開きたいサイトのURLを設定。

※ 下記の例のように、URLを変数に格納して用いる。var 変数名:URLRequest = new URLRequest("http://www.....");といった具合。

navigateToURL(先に設定したURL リクエスト[,開き方オプション]);

リクエストのサイトを開く。

※ 開き方オブションは省略可。オプションの種類は下記のとおり。
"_self":現在のウィンドウまたはフレーム。
"_blank":新規ウインドウ。
"_parent":現在のフレームの親フレーム。
"_top":現在のウィンドウの最上位フレーム。

例）ボタンを押したら、あるWebサイト（ここでは立命館のHP）を開く。

※必ず[プロパティ]にてインスタンス名をつけること。上の例では「siteOpen」というインスタンス名がつけられている。
※→ サンプルファイルのダウンロード

★ 余裕のある人は挑戦してみよう！

★シーンを使わずにActionScriptを用いてムービークリップを制御する方法

ActionScriptでムービークリップを制御することで、「シーン」と同等の場面管理を実現することが可能。
こちらの方法の方が、多様な制御が可能であるし、モーショントゥインの管理などもやりやすい。

作成例：

1. 全てのシーンを格納するムービークリップを作成。[挿入]→[新規シンボル]
※新規シンボル「container_of_all」を作成。

2. 第１のシーンに該当するムービークリップを作成。[挿入]→[新規シンボル]
※新規シンボル「 container_of_scene1」を作成。
※container_of_scene1の中に第１シーンのアニメーションを作成。

3. 第２のシーンに該当するムービークリップを作成。[挿入]→[新規シンボル]
※新規シンボル「container_of_scene2」を作成。
※container_of_scne2の中に第２シーンのアニメーションを作成。

4. 第３のシーンに該当するムービークリップを作成。[挿入]→[新規シンボル]
※新規シンボル「container_of_scene3」を作成。
※container_of_scene3の中に第3シーンのアニメーションを作成。

5. container_of_allの中にキーフレームをシーン数分作成する。ここでは３つ。

6. 第1キーフレームにcontainer_of_scene1を配置。同様に、第2キーフレームには、container_of_scene2を配置。第3キーフレームには、container_of_scene3 を配置。シンボルの入れ子にする。
※ 配置した３つのインスタンスには、それぞれ「インスタンス名」をつける。（プロパティパネルの[インスタンス名]）
ここでのインスタンス名は、container_of_scene1を「scene1」、container_of_scene2を「scene2」、contaner_of_scene3を「scene3」とする。

7. container_of_allをメイン（root）のタイムラインの第1フレームに配置する。（ここではインスタンス名を「containerOfAll」とする）

8. メインのタイムラインの第1フレームにActionScriptを記述する。
※サンプルファイルのダウンロード

MovieClip.stop();

ムービークリップの再生ヘッドを停止する。

MovieClip. play();

ムービークリップの再生ヘッドをを”再生状態”にする。

MovieClip. gotoAndStop(フレーム);

再生ヘッドを特定のフレームに移動させて停止させる。

MovieClip. gotoAndPlay(フレーム);

再生ヘッドを特定のフレームに移動させて、そこから再生状態にする。

★実践課題（１）昔ばなしアニメーション化企画

「さるかに合戦」「雪女」などに代表される日本の昔ばなし、あるいは、「北風と太陽」「ありときりぎりす」などのイソップ物語など古くから語り継がれる物語を題材に、１分程度の短篇アニメーションを作成しなさい。

＜手順＞
（１）企画書の作成（シナリオの確認、アニメーション構成案、役割分担等を記入）←本日提出（次回授業終了時まで受け付ける）
（２）アニメーションを作成
（３）アニメーションをWebサーバにアップロード←完成次第
※ファイルのアップロードの仕方は次週開設する予定である。

＜注意点＞
・制作のはじめにキャラクターのデザインを行い、ペアで共有する。全編を通してブレのないようにする。また、キャラクターは、基本的にシンボル化すること。
・アニメーションのオープニングでタイトルを表示すること。
・今回は、実践的な課題であるため、授業で習っていない技術も教科書等を参考にして積極的に導入しなさい。
・制作時間は限られているので、実現可能性を十分に考慮すること。

＜企画書＞
企画書フォーマットのダウンロード

企画書は、5部（グループで4部、提出用1部）作成のこと。3名で取り組む場合は4部。
・二人で話し合いながら、同じように記入する。
・5部のうち1部提出する。
・企画書はプリントアウトしたものを提出する。また、教材フォルダの中の本日の日付が名前となっているフォルダの中に、グループフォルダを作成し保存する。ファイル名は、グループ名_日付.doc ex)group_a_100518.doc

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

[Prev] [Home] [Next]

第６回 アニメーション制作Tips