[Prev]
[Home]
[Next]
また、オブジェクトの形を変化させるアニメーションを作成する上で便利な「シェイプトゥイーン」についても言及する。
Cf．モーショントゥイーンは、「位置」「色」「サイズ」の変化プロセスに対応している。
＜シェイプトゥイーンの設定手順＞
（１）オブジェクトを配置。
（２）キーフレームを挿入。
（３）[右クリック]→[シェイプトゥイーンを作成]。
（４）変形後のオブジェクトを設定する。
（５）動きを確認する。
ただし、シェイプトゥイーン機能には以下の３つの制約がある。
また、シェイプトゥイーンは、「変化前の形」と「変化後の形」の対応関係が分かりやすくないと、上手く機能しない。
実質的には、かなりシンプルな形のオブジェクトに対してのみ適用可能だといえる。
ある程度、複雑なオブジェクトにシェイプトゥイーンを設定する場合は、「シェイプヒント」を用いると良い。
＜シェイプヒントの手順＞
以下の図Ａから図Ｂへと形を変化させたいというとき。
図Ａ
図Ｂ
上述の手順にしたがいシェイプトゥイーンを設定すると、次のようなムービーができる。
図Ａと図Ｂの対応がうまく関連づけられず、変化の過程が乱れる。
（１）（第１フレームで）[修正]→[シェイプ]→[シェイプヒントの追加]
（２）（第１フレームで）シェイプヒントを、口の左側に配置する。
（３）（最終フレームで）シェイプヒントを、口の左側に配置する。
（４）同様の処理を、口の右側にも行う。これで、変化前と変化後の口が関連づけられる。
（５）動きを確認。まだ、若干、不自然ではあるが、口元の変化の乱れは無くなった。
さらに多くのシェイプヒントを設定することで、より自然な変化にすることができる。
サンプルファイル→ [download]
モーションガイドは、「ガイドレイヤー」と呼ばれる専用のレイヤーに描く。
（１）オブジェクト（インスタンス）を配置する。
（２）キーフレームを追加し、車が山道を上っていくようにモーショントゥイーンを作成する。
※この段階では、下のように再生される
（３）ガイドレイヤーを追加する。
（４）ガイドレイヤーに、モーションガイド（モーションパス）を描く。
モーションガイドは、車の進行（軌道）を想定して描く。
（５）「モーショントゥイーンと吸着」（ツールバー）および「パスに沿って回 転」（プロパティパネル）を設定。
（６）１フレーム目のオブジェクトを、モーションガイドの始点に合わせる。
（７）最終フレームのオブジェクトを、モーションガイドの終点に合わせる。
（８）再生。動きを確認。
サンプルファイル→ [download]
マスクの範囲だけ、その下にある画像を表示できるようになる。
マスクは、「マスクレイヤー」と呼ばれる専用のレイヤーに描く。
モーショントゥイーンと組み合わせることで、多彩な表現が可能となる。
２）アップ、オーバー、ダウン、ヒットの各フレームにオブジェクトを設定する。
[アップ]は通常の状態。
[オーバー]はマウスカーソルがヒットエリアに入ったときの状態。
[ダウン]はヒットエリアをクリックしたときの状態。
[ヒット]はマウスが反応するエリア。
例）ボタンを押したら、文字（ここでは「抱腹絶倒！！」）を出力する。
本日の課題については、グループ/ペアで１つではなく、両名とも取り組みなさい。
ただし、グループ/ペアで知識やスキルを共有するよう努めてください。
困っているメンバーがいたらたら、積極的に助けること。
＜発展＞ 時間があまった人は、再生ボタンを押したらアニメーションが再生され、停止ボ タンをおしたら停止される機能をつけ加えてみよう。
[Prev] [Home] [Next]
第５回 特殊レイヤー
担当者: 斎藤進也 (saitos[at]fc.ritsumei.ac.jp)★本日のテーマ
本日は、トゥイーンの効果的活用に有効な特殊レイヤー（ガイドレイヤー、マスクレイヤー）について学習する。また、オブジェクトの形を変化させるアニメーションを作成する上で便利な「シェイプトゥイーン」についても言及する。
★シェイプトゥイーン（p.158）※新版p.139
トゥイーンを用いてオブジェクトの「形」を自動的に変化させたい時は、「シェイプトゥイーン」を使う。Cf．モーショントゥイーンは、「位置」「色」「サイズ」の変化プロセスに対応している。
＜シェイプトゥイーンの設定手順＞
（１）オブジェクトを配置。
（２）キーフレームを挿入。
（３）[右クリック]→[シェイプトゥイーンを作成]。
（４）変形後のオブジェクトを設定する。
（５）動きを確認する。
ただし、シェイプトゥイーン機能には以下の３つの制約がある。
- １つのレイヤー内のオブジェクトは１つに限る。
- グループ化されたオブジェクトは使用できない。
- シンボル化されたオブジェクトは使用できない。
シンボル内部のタイムラインにシェイプトゥイーンを設定することは可能。
また、シェイプトゥイーンは、「変化前の形」と「変化後の形」の対応関係が分かりやすくないと、上手く機能しない。
実質的には、かなりシンプルな形のオブジェクトに対してのみ適用可能だといえる。
ある程度、複雑なオブジェクトにシェイプトゥイーンを設定する場合は、「シェイプヒント」を用いると良い。
＜シェイプヒントの手順＞
以下の図Ａから図Ｂへと形を変化させたいというとき。
図Ａ
図Ｂ
上述の手順にしたがいシェイプトゥイーンを設定すると、次のようなムービーができる。
図Ａと図Ｂの対応がうまく関連づけられず、変化の過程が乱れる。
（１）（第１フレームで）[修正]→[シェイプ]→[シェイプヒントの追加]
（２）（第１フレームで）シェイプヒントを、口の左側に配置する。
（３）（最終フレームで）シェイプヒントを、口の左側に配置する。
（４）同様の処理を、口の右側にも行う。これで、変化前と変化後の口が関連づけられる。
（５）動きを確認。まだ、若干、不自然ではあるが、口元の変化の乱れは無くなった。
さらに多くのシェイプヒントを設定することで、より自然な変化にすることができる。
サンプルファイル→ [download]
★ガイドレイヤー（p.144、p.156 ）※新版p.161
オブジェクトを思い通りに動かしたいときは、「モーションガイド」というガイドラインを利用する。モーションガイドは、「ガイドレイヤー」と呼ばれる専用のレイヤーに描く。
（１）オブジェクト（インスタンス）を配置する。
（２）キーフレームを追加し、車が山道を上っていくようにモーショントゥイーンを作成する。
※この段階では、下のように再生される
（３）ガイドレイヤーを追加する。
（４）ガイドレイヤーに、モーションガイド（モーションパス）を描く。
モーションガイドは、車の進行（軌道）を想定して描く。
（５）「モーショントゥイーンと吸着」（ツールバー）および「パスに沿って回 転」（プロパティパネル）を設定。
（６）１フレーム目のオブジェクトを、モーションガイドの始点に合わせる。
（７）最終フレームのオブジェクトを、モーションガイドの終点に合わせる。
（８）再生。動きを確認。
サンプルファイル→ [download]
★練習
ガイドレイヤーを用いて自由にアニメーションを作成してみよう。★マスクレイヤー（p.145、p.157）※新版p.162
「マスク」とは、ムービーの一部を切り抜く機能。マスクの範囲だけ、その下にある画像を表示できるようになる。
マスクは、「マスクレイヤー」と呼ばれる専用のレイヤーに描く。
モーショントゥイーンと組み合わせることで、多彩な表現が可能となる。
マスクの基本
（１）（マスクの対象となる）絵を描く（レイヤー「ninjya」）。
（２）（ninjyaレイヤー上に）新規レイヤーを作成
（３）（２）で作成したレイヤーをマスクレイヤーにする。
↓
※レイヤー名は、「レイヤー２」から「mask」に変更。
（４）レイヤーmaskに、マスクを描く（切り抜く範囲の設定を行う）。
※ここで、ムービープレビューを行うと下記のように表示される。↓
（５）必要に応じマスクにモーショントゥイーンを設定する。
スポットライト効果
マスクとモーショントゥイーンを組み合わせることで、下のムービーのように「スポットライト効果」を演出することができる。
※この場合、ステージの背景色を黒にしておく。その上に、スポットライトの色となる白や黄色のグラフィックをステージと同サイズで配置する。
→マスク以外の部分は、ステージそのもの（の色）が表示されるという点に注意が必要。
★確認
mask_ninjya.flaをダウンロードし、スポットライト効果が実現されている仕組みを確認しよう。
→ [download]
★ ActionScriptワンポイントレッスン
ボタンを作ってみよう
１）[挿入]→[新規シンボル]２）アップ、オーバー、ダウン、ヒットの各フレームにオブジェクトを設定する。
[アップ]は通常の状態。
[オーバー]はマウスカーソルがヒットエリアに入ったときの状態。
[ダウン]はヒットエリアをクリックしたときの状態。
[ヒット]はマウスが反応するエリア。
ボタンを押したら●●が起きる！ ActionScriptの活用
(ボタンインスタンス名).addEventListener.(MouseEvent.CLICK, 関数名);
function 関数名(e:MouseEvent):void{
/* 処理の記述 */
return;
}
|
例）ボタンを押したら、文字（ここでは「抱腹絶倒！！」）を出力する。
this.button.addEventListener(MouseEvent.CLICK, MsgTrace);
function MsgTrace(e:MouseEvent):void{
trace("抱腹絶倒");
return;
}
|
★本日の課題
各自自由にアニメーションを作成しなさい。ただし、マスクレイヤーを用いること。本日の課題については、グループ/ペアで１つではなく、両名とも取り組みなさい。
ただし、グループ/ペアで知識やスキルを共有するよう努めてください。
困っているメンバーがいたらたら、積極的に助けること。
＜発展＞ 時間があまった人は、再生ボタンを押したらアニメーションが再生され、停止ボ タンをおしたら停止される機能をつけ加えてみよう。
[Prev] [Home] [Next]