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

第５回 特殊レイヤー

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

★本日のテーマ

本日は、トゥイーンの効果的活用に有効な特殊レイヤー（ガイドレイヤー、マスクレイヤー）について学習する。
また、オブジェクトの形を変化させるアニメーションを作成する上で便利な「シェイプトゥイーン」についても言及する。

★シェイプトゥイーン（p.158）※新版p.139

トゥイーンを用いてオブジェクトの「形」を自動的に変化させたい時は、「シェイプトゥイーン」を使う。

Cf．モーショントゥイーンは、「位置」「色」「サイズ」の変化プロセスに対応している。

＜シェイプトゥイーンの設定手順＞
（１）オブジェクトを配置。

（２）キーフレームを挿入。


（３）[右クリック]→[シェイプトゥイーンを作成]。


（４）変形後のオブジェクトを設定する。

（５）動きを確認する。


ただし、シェイプトゥイーン機能には以下の３つの制約がある。
また、シェイプトゥイーンは、「変化前の形」と「変化後の形」の対応関係が分かりやすくないと、上手く機能しない。
実質的には、かなりシンプルな形のオブジェクトに対してのみ適用可能だといえる。

ある程度、複雑なオブジェクトにシェイプトゥイーンを設定する場合は、「シェイプヒント」を用いると良い。

＜シェイプヒントの手順＞
以下の図Ａから図Ｂへと形を変化させたいというとき。

図Ａ

図Ｂ


上述の手順にしたがいシェイプトゥイーンを設定すると、次のようなムービーができる。
図Ａと図Ｂの対応がうまく関連づけられず、変化の過程が乱れる。



（１）（第１フレームで）[修正]→[シェイプ]→[シェイプヒントの追加]

（２）（第１フレームで）シェイプヒントを、口の左側に配置する。

（３）（最終フレームで）シェイプヒントを、口の左側に配置する。

（４）同様の処理を、口の右側にも行う。これで、変化前と変化後の口が関連づけられる。

（５）動きを確認。まだ、若干、不自然ではあるが、口元の変化の乱れは無くなった。
さらに多くのシェイプヒントを設定することで、より自然な変化にすることができる。


サンプルファイル→ [download]

★ガイドレイヤー（p.144、p.156 ）※新版p.161

オブジェクトを思い通りに動かしたいときは、「モーションガイド」というガイドラインを利用する。
モーションガイドは、「ガイドレイヤー」と呼ばれる専用のレイヤーに描く。


（１）オブジェクト（インスタンス）を配置する。


（２）キーフレームを追加し、車が山道を上っていくようにモーショントゥイーンを作成する。

※この段階では、下のように再生される


（３）ガイドレイヤーを追加する。


（４）ガイドレイヤーに、モーションガイド（モーションパス）を描く。
モーションガイドは、車の進行（軌道）を想定して描く。


（５）「モーショントゥイーンと吸着」（ツールバー）および「パスに沿って回 転」（プロパティパネル）を設定。




（６）１フレーム目のオブジェクトを、モーションガイドの始点に合わせる。


（７）最終フレームのオブジェクトを、モーションガイドの終点に合わせる。


（８）再生。動きを確認。


サンプルファイル→ [download]

★練習

ガイドレイヤーを用いて自由にアニメーションを作成してみよう。

★マスクレイヤー（p.145、p.157）※新版p.162

「マスク」とは、ムービーの一部を切り抜く機能。
マスクの範囲だけ、その下にある画像を表示できるようになる。

マスクは、「マスクレイヤー」と呼ばれる専用のレイヤーに描く。
モーショントゥイーンと組み合わせることで、多彩な表現が可能となる。

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

ボタンを作ってみよう

１）[挿入]→[新規シンボル]
２）アップ、オーバー、ダウン、ヒットの各フレームにオブジェクトを設定する。

[アップ]は通常の状態。
[オーバー]はマウスカーソルがヒットエリアに入ったときの状態。
[ダウン]はヒットエリアをクリックしたときの状態。
[ヒット]はマウスが反応するエリア。

ボタンを押したら●●が起きる！　ActionScriptの活用


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

例）ボタンを押したら、文字（ここでは「抱腹絶倒！！」）を出力する。 
this.button.addEventListener(MouseEvent.CLICK, MsgTrace);

function MsgTrace(e:MouseEvent):void{

　trace("抱腹絶倒");

return;
}

★本日の課題

本日は、課題Aと課題Bの２つの課題に取り組みなさい。
課題A、Bともに個人課題である。
課題Ａ：宙を舞うホタルを描いて下さい。
なお、ホタルが舞う動きは、ガイドレイヤーを用いて作成してください。
課題Ｂ：マスクによる効果を活かしたバナー広告を作成してください。
サイズは336 × 280ピクセルとする。

本日の課題については、グループ/ペアで１つではなく、両名とも取り組みなさい。
ただし、グループ/ペアで知識やスキルを共有するよう努めてください。
困っているメンバーがいたらたら、積極的に助けること。

＜発展＞ 時間があまった人は、再生ボタンを押したらアニメーションが再生され、停止ボ タンをおしたら停止される機能をつけ加えてみよう。
[Prev] [Home] [Next]