FLASHのお勉強 ーモーショントウイーンー |
（特１） 写真の出し入れ（2） |
| 写真の出し入れ（１）に基本を述べたが、ここでは、その応用編である。 応用編といっても基本となる動きを示しているので、本当の応用は、皆さんのアイディアで展開してほしい。 解説は、入門者向けにごく初歩的な操作も記述したつもりである。 入門者の方は、文章を読みながら、辛抱強くトレースしていただければ、コツみたいなものがつかめるのではなかろうか（期待！）。 |
| SAMPLE 1 |
| （１）ステージの準備 |
| ●W400、H315、背景色黒、フレームレイト24fpsのステージを準備し、写真の出し入れ（１）と同じように、バラの写真4枚を読み込む。 このSAMPLEの場合は、W300,H225の写真を読み込み、シンボルｒ１，ｒ２，ｒ３，ｒ４に変換した。 ●次に、タイムラインにレイヤーを４つ作成する（ここでは下からｒ１，ｒ２，ｒ３，ｒ４）。 さらに、一番上にタイムラインの下、左から2番目のアイコン（モーションガイドの追加）でガイドレイヤーを一つ作成する。 ガイドレイヤーの一つ下のレイヤーだけがガイド対象となり、レイヤー名が一段右に下がって表示される。 ガイドについては、こちらを参照。 ●残りの3つのレイヤーについては、上から順にレイヤー名の左のアイコンをダブルクリックするとウインドウが開くので、そこで、「ガイドの対象」にチェックを入れる。 4つのレイヤーがガイドの対象となり、レイヤー名が右に一段ずれて表示される。 ●ガイドレイヤーのFRAME 1 を選び、ここで円形のガイドラインを作成する。 まず、楕円ツールで、塗りを不能、線のカラーを白に設定し、ｓｈｉｆｔ キーを押しながら画面の中央に来るように適当な大きさの真円を描く。 ここでは、W220,H220、ｘ：94、ｙ：45とした。 |
| （2）写真の貼り付け |
| ●レイヤーｒ１を選択し、ライブラリーからシンボルｒ１をドラッグしてステージに貼り付ける。プロパティーインスペクターの左下のW,H設定のことろの鍵アイコンをクリックしてたて横比を固定させる（W,Hが線で結ばれる）。Wを125に設定するとHは自動的に93.8に変わる。 ●小さくなった写真をドラッグして、中央の変形点がガイドラインの円にのるようにしながら、画面の左下にドロップする。変形点が自動的にガイドライン上に吸着され固定される。ここでは、ｘ：51.3、ｙ：171.2におとした。 ●同様に、レイヤーｒ２にｒ２を小さくして（ｘ：230.9、ｙ：171.2）に、同様にレイヤーｒ３にｒ３を（230.9，45）、レイヤーｒ４にｒ４を（51.3,45）に貼り付ける。 以上で、４枚の写真の中心がガイドラインの真円上にのるように配置される。 |
| （３）エフェクトの割付 |
| ●拡大して登場 ・レイヤーｒ１のFRAME15にキーフレームを挿入し、FRAME 1 でｒ１をクリック、自由変形ツール（ツールボックスの左上から2番目）で大きさをW1,H1に設定する。このとき、変形ツールで一旦W,Hとも10ぐらいに小さくしたあと、プロパティーのW,Hを１に設定するとやりやすい。 FRAME1-15のどこかで右クリックし、モーショントウイーンを作成する。 ・レイヤーｒ２のFRAME 1 の黒丸（キーフレームの印）をドラッグし、FRAME10に移動させる。FRAME25にキーフレームを挿入し、FRAME10のｒ２のW,Hを１に設定した後、モーショントウイーンを作成する。（トウイーンを作成するのと、アルファー値を変える順番はどちらが先でもかまわない） ・レイヤーｒ３、レイヤーｒ４についても、FRAMEを10ずつずらして同様の設定をする。 ・ガイドラインは常に表示させるようにFRAMEを挿入しておく。 |
| ●移動 ・レイヤーｒ１，ｒ２，ｒ３，ｒ４それぞれのFRAME75にキーフレームを挿入する。 このとき、shiftキーを押しながらFRAME 75を縦にドラッグすると、いっぺんに４フレームとも選択できるので、そこで右クリックし、フレームの挿入をする。 ・写真の位置を、時計回りに回して、次の写真の位置に移動させる。その方法を ｒ１で以下に説明する。 ・FRAME75 でｒ１を選択し、ドラッグして時計回りで次の写真の位置まで移動しドロップする。 このとき、移動すべき位置の写真のところで縦横のガイドラインが現れるので、そこでドロップするが、ずれることがあるので、次の写真のx、y座標をあらかじめ書き留めておくこと。 ・ｒ２以降も同様に移動するが、移動は、下のレイヤーから順番に行わないと、重なり具合からドラッグできない。 ・FRAME60と75の間で、レイヤーｒ１からｒ４のフレームを同時選択し、右クリック、モーショントウイーンの作成をする プレビューするか再生ヘッド（タイムライン縦に現れる赤い線で上にあるヘッド部分をドラッグすると移動する）で確認して写真が同時にくるりと移動すればOKである。 |
| ●ｒ２の拡大表示とその他のフェイドアウト ・FRAME85及びFRAME100それぞれに各レイヤーともキーフレームを挿入する。 ・FRAME100でｒ１、ｒ３，ｒ４の写真を選択し、アルファーをそれぞれ0にセットする。（レイヤーｒ１，ｒ３，ｒ４のFRAME100 の位置をコントロールキーを押しながらクリックすると３つとも同時に選択できる） ・FRAME100でｒ２（左上に表示されている写真）をクリックで選択し、W300、H225にセットする。 これで、ｒ２が画面一杯に表示され、その他は消えてなくなる。 |
| ●移動 ・各レイヤーにつき、FRAME110、125にキーフレームを挿入する。 ・各レイヤーともFRAME110と125の間でモーショントウイーンを作成する。 ・ｒ１，ｒ３，ｒ４の移動は、上で示した移動と同様に、時計回りで次の写真位置まで移動する。このとき、FRAME125でアルファーを100にもどす。 ・ｒ２は拡大された写真のままFRAME110で左上の写真の位置に真ん中の変形点がガイドにのるようにして移動し（モーショントウイーンを作成してあると、近づけると自動的にガイドに吸着する）、FRAME125で右上の位置に移動する。 次に、FRAME125で拡大前の写真の大きさにもどす(W125)。 |
| ●回転を伴う拡大 |
| 以降は上記記述の繰り返しであるが、写真が拡大するときに写真を回転させているので、ここについてのみ記述する。 ・ｒ３の平面回転： FRAME135でW125であったものを、FRAME150でW300にし、その間にトウイーンを作成、プロパテイーで 回転・時計回り・1回を設定する。 ・ｒ４の縦方向３D回転： FRAME185でW125、FRAME200でW300、その間にトウイーンを作成 FRAME192でキーフレームを挿入、修正・変形・縦反転を設定 二つのトウイーンに時計回り０回を設定 ・ｒ１のきりきり回転： FRAME235でW125、FRAME250でW300、その間にトウイーンを作成 FRAME242でキーフレームを挿入、修正・変形・縦反転を設定 二つのトウイーンに時計回り１回を設定 |
| ●フェイドアウト |
| 最後に、４つの写真が初期の大きさに戻ったところで、同時にフェイドアウトさせて終了 |
| ●タイムライン |
 |
| ●ｆｌａファイル |
| タイムラインの全解説は省略しますが、本SAMPLEの ｆｌａ ファイルをダウンロードできるようにしますので、興味のある方は、こちらからどうぞ。 |
| HOME お勉強総リスト |