[Prev]
[Home]
[Next]
なお、下記の注意事項を守ること。
car_sam.fla → [download]
＜注意事項＞
＜car.flaの絵＞
car_sam.flaを開くと下記の絵が描かれている。各キャラ、アイテムともシンボル化はされていない。
※メインタイムライン（rootのステージのタイムライン）のキーフレームの数は１つ。
※必要に応じ、フレームレート（fps）の値を変更するとよい。ちなみに、上の ムービーのフレームレートは、3.5fps。
始点と終点のキーフレームにオブジェクトを配置すれば、中間の動きはFlashが自動生成してくれる。
細かくキーフレームを設定する手間が省けると同時に、オブジェクトの動きをスムーズにできる。
第4回 トゥイーン・アニメーション
担当者: 斎藤進也 (saitos@fc.ritsumei.ac.jp)★本日のテーマ
本日は、前回学習した「タイムライン」および「シンボル」についての理解をさらに深めるとともに、効率的にアニメーションを制作する上で便利な「モーショントゥイーン」について学ぶ。★シンボルの入れ子の理解
- まず、シンボルには、下記の３種類があることをキッチリ理解する。
特に、ムービークリップは重要。
- ムービークリップ
独自のタイムラインを持つことができる。
- ボタン
ボタンを押す時のような凹凸感を出せる。Webインターフェースを作 成する際に便利。 - グラフィック
独自のタイムラインを持たない。
そして、あるシンボルの中に別のシンボルを入れることができる。これがシンボルの入れ子。
- ムービークリップ
- 上のムービーのflaファイルをみてみる。
→[download]
ステージのタイムラインをみると、１コマ目にキーフレームが設定 されているだけ。
しかし、ムービーでは、母親の手はアイロン を左右に動かしているし、窓の外では子供が手を振っている。
したがって、どこかに複数のキーフレームが設定されているはず。
- そこで、ライブラリをみてみる（[ウインドウ] →[ライブラリ]）。
いくつかのシンボルが登録されていることが分かる。
- ステージ上には、「haikei」と「iron_syuhu」という２つのシンボルのインスタンスが
配置されている。
- そして、２つのシンボルは、「入れ子」構造を持っている。「haikei」
をダブルクリックしてみると、「haikei」の中に、さらに「mado」
という別のシンボルが入っていることが分かる。
haikei ↓
mado ↓
またさらに、madoをダブルクリックすると、その中に「kodomo」とい うシンボルが入っていることが分かる。
そして、この「kodomo」 には複数のキーフレームが設定されており、これによって手を振る アニメーションが実現されている。
kodomo ↓
kodomoのタイムライン↓
- シンボル「iron_syuhu」も、同様の「入れ子」構造をもっている。
Flashの開発では、オブジェクトの「部品」化（シンボル化）の利 点を生かし、このような構造がしばしばとられる。
★問題
car.flaにある自動車の絵（静止画）を、下記の例にならいアニメーションにしなさい。なお、下記の注意事項を守ること。
car_sam.fla → [download]
＜注意事項＞
- 車を左から右へと走らせるようアニメーションを設定すること。
- 各パーツをシンボル化し、適宜、使いまわせるようにすること。また、タイ
ムラインの編集は、各シンボル内部においておこなうこと。
- 完成したアニメーションのroot(stage)のタイムラインのキーフレームの数は"１"であること。
rootとは、flaファイルを開いた時に、最初に表示されているステージのことを指す。
「root」 ＝「トップの階層」。「rootのタイムライン」＝ 「メインタイムライン」。
- 車のタイヤを回転させること。
- 子供の手を振るアニメーションを加えること。余裕があれば、子供の口も動 かすようにする。
- 車のマフラーから排気ガスがでるようアニメーションを加えること。
- 制限時間は、15分とする。
＜car.flaの絵＞
car_sam.flaを開くと下記の絵が描かれている。各キャラ、アイテムともシンボル化はされていない。
アニメーション例
※メインタイムライン（rootのステージのタイムライン）のキーフレームの数は１つ。
※必要に応じ、フレームレート（fps）の値を変更するとよい。ちなみに、上の ムービーのフレームレートは、3.5fps。
★モーショントゥイーン
モーショントゥイーンとは、オブジェクトの大きさや色、位置などを変化させる アニメーション自動生成機能。始点と終点のキーフレームにオブジェクトを配置すれば、中間の動きはFlashが自動生成してくれる。
細かくキーフレームを設定する手間が省けると同時に、オブジェクトの動きをスムーズにできる。
- 位置の変化
（１）始点となるキーフレームに、絵を配置する。
（２）終点となるフレームにキーフレームを挿入
（任意のフレームにマウスポインタを合わせ、[右クリック]→[キーフレームの挿入]）
（３）始点となるキーフレームにマウスポインタを合わせ、[右クリック]→[モー ショントゥイーンの作成]。
↓
始点から終点まで矢印が表示される。
（４）終点となるキーフレームに配置されているオブジェクトを、任意の位置に移動。ドラッ グ＆ドロップ。
始点から終点へと移動する過程が自動生成される。始点と終点の間にあるフレー ムに自動設定。
以下のように再生される↓
（６）始点と終点の間に、第３のキーフレームをいれて位置を変えると、軌道が変わる。
↓
以下のように再生される↓
（７）さらに、第４、第５のキーフレームを設定し、複雑な軌道設定をおこなうことも可能。
※上のサンプルファイルダウンロード→ [download]
- 大きさの変化
同様にモーショントゥイーンの設定で、オブジェクトの大きさを変化させるアニ メーションを作成することも可能。
（１）始点のオブジェクトの大きさ↓
（２）終点のオブジェクトの大きさ↓
（３）下のように再生される↓
- 色の変化
同様に、色の変化もモーショントゥイーンで設定できる。
＜注意！＞
モーショントゥイーンで色の変化をつける場合は、対象となるオブジェ クトやテキストをシンボル化しておく必要がある。
その上で、始点と終点の 色やアルファ値を、インスタンスの「プロパティ」パネルで設定する必要がある。
★プログラミングに少しずつ慣れよう! その三
| MovieClip.stop(); | 特定のフレームで、ムービーの再生をストッ プさせる |
