ウェブアニメーション実習２０１4（前半）

[Prev] [Home] [Next]

第５回特殊レイヤー

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

★本日のテーマ

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

★シェイプトゥイーン

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

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

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

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

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

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

（５）動きを確認する。

ただし、シェイプトゥイーン機能には以下の３つの制約がある。

１つのレイヤー内のオブジェクトは１つに限る。
グループ化されたオブジェクトは使用できない。
シンボル化されたオブジェクトは使用できない。
シンボル内部のタイムラインにシェイプトゥイーンを設定することは可能。

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

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

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

図Ａ

図Ｂ

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

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

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

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

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

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

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

★ガイドレイヤー

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

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

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

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

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

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

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

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

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

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

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

★練習

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

★マスクレイヤー

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

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

マスクの基本
（１）（マスクの対象となる）絵を描く（レイヤー「ninjya」）。

（２）（ninjyaレイヤー上に）新規レイヤーを作成

（３）（２）で作成したレイヤーをマスクレイヤーにする。

↓

※レイヤー名は、「レイヤー２」から「mask」に変更。

（４）レイヤーmaskに、マスクを描く（切り抜く範囲の設定を行う）。

※ここで、ムービープレビューを行うと下記のように表示される。↓

（５）必要に応じマスクにモーショントゥイーンを設定する。
スポットライト効果
マスクとモーショントゥイーンを組み合わせることで、下のムービーのように「スポットライト効果」を演出することができる。

※この場合、ステージの背景色を黒にしておく。その上に、スポットライトの色となる白や黄色のグラフィックをステージと同サイズで配置する。
→マスク以外の部分は、ステージそのもの（の色）が表示されるという点に注意が必要。

★確認
mask_ninjya.flaをダウンロードし、スポットライト効果が実現されている仕組みを確認しよう。
→ [download]

★ ActionScriptワンポイントレッスン

ボタンを作ってみよう

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

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

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


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

例）ボタンを押したら、文字（ここでは「抱腹絶倒！！」）を出力する。

button.addEventListener(MouseEvent.CLICK, MsgTrace);

function MsgTrace(e:MouseEvent):void{

　trace("抱腹絶倒");

return;
}

インスタンス名をつけ忘れることが多いので注意！

★イベントリスナーの使用（以下の内容は難しいので、今日のところは興味のある人だけ読んで下さい）

addEventListenerメソッド

addEventListenerは、「●●に、あることが起きた場合、こうしなさい」ということを設定するメソッドである。
→「●●」は、インスタンス。「あること」はイベント。「こうしなさい」は関数（メソッド）。

イベントターゲット.addEventListener(イベント定数（イベントの種類）, 通知先の関数名(イベントハンドラの参照));

具体的には、以下のように書く

通知先の関数(イベントハンドラ)の設定
→「こうしなさい」の内容を記述する。

function 関数名 ( 引数 ) { 処理；}

※ 引数にはイベントオブジェクトが渡される。イベントオブジェクトの型に注意する。上述のサンプルプログラムで言うと・・・

よく使うイベント定数（イベントの種類）

イベント定数	説明
MouseEvent.CLICK	クリックしたときに発生するclickイベントを表す
KeyboadEvent.KEY_DOWN	キーが押されたときに発生するKeydownイベントを表す
Event.ENTER_FRAME	FPSに合わせたタイミングで発生するenterFrameイベントを表す

removeEventListeneメソッド

不要になったイベントリスナーは、removeEventListenerメソッドで削除できる。
各パラメータにはaddEventListenerメソッドで登録した時と同じ値を指定する。

※次週の準備

次週、簡単なアフレコを行う予定です。今日は、機材の使い方をチェック。

★本日の課題

本日は、課題Aと課題Bの２つの課題に取り組みなさい。
課題A、Bともに個人課題である。

課題Ａ：宙を舞うホタルを描いて下さい。
なお、ホタルが舞う動きは、ガイドレイヤーを用いて作成してください。

課題Ｂ：マスクによる効果を活かしたバナー広告を作成してください。
なお、「母の日」もしくは「父の日」の商戦にむけての広告という設定で制作してください。
バナーのサイズは、幅300px 、高さ250pxとします。※Yahoo Japanのトップページ右側のバナーと同サイズ。

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

＜発展＞時間があまった人は、【課題Ａ】について再生ボタンを押したらアニメーションが再生され、停止ボタンをおしたら停止される機能をつけ加えてみよう。