FLASHのお勉強 ーモーショントウイーンー |
（特１） 写真の出し入れ（１） |
| Flashでのサイト作りに欠かせないのが、写真や画像の動きのある移動、登場、退場である。 ここまでに勉強したモーショントゥイーンの応用、組み合わせでいろんなシーンが作成できると思うが、ここで、移動・フェイドイン・回転などのエフェクトを組み合わせた場合を復習を兼ねて勉強してみようと思う。 ここで示すのは、基本的な例であって、これらを基本に多彩な動きを演出していただければと思う。 私に寄せられたメールには入門段階の人が多いことを考え、一から解説するよう心がけるつもりである。 |
| ステージの準備 |
| ｗ400、ｈ300、背景色黒のステージを設定する。フレームレートはここでは12とするが、きびきびした動きが出したいときは、30などの高いレートにした方がよい。 メニューの「ファイル」「読み込み」でステージに２枚の写真（ｗ250、ｈ188）を読み込み、それぞれをシンボルに変換、名前を付け、ステージから削除する（ライブラリーには格納される）。 ここでは、バラの写真を読み込み、r1、r2と名前を付けた。 元写真のファイル名もpic1,pic2,,,のように連番にしておくと、沢山の写真を読み込むときは一度に読み込むことができるので便利である。 |
| タイムラインの設定 |
| （１）ライブラリー（ウインドウが出ていないときは、メニューの「ウインドウ」で「ライブラリー」にチェックを入れる）からステージにシンボル”ｒ１”をドラッグ＆ドロップする。左上座標は、ｘ：75、ｙ：60。 （２）タイムラインの左の「レイヤー1」と書いてあるところをダブルクリックして、レイヤーにｒ１と名前を付ける。 （３）FRAME 30、40、65それぞれで、右クリックで出てくるメニューウインドウで、「キーフレームの挿入」をクリック （４）FRAME 0-30の間で（どこでも良い）右クリック、モーショントウイーンを作成をクリック（矢印線が描かれる） （５）FRAME 40ｰ65の間で同様にモーショントウイーンを作成する。 次に、タイムライン一番左下のアイコンで、レイヤーを追加し、ｒ２と名前を付ける。 FRAME65にキーフレームを挿入し、ライブラリーからｒ２をステージにドラッグ＆ドロップする。 このとき、ステージに一旦ドロップし再度ドラッグすると、レイヤー1のｒ１の位置に来ると点線でガイドが表示されるので、同じ位置にドロップすることができる。 次にFRAME 95、105、130、140にキーフレームを挿入し、FRAME 65-95、105-130の間で同様にモーショントウイーンを作成する。 以下のようにタイムラインが作成される。  矢印ができずに点線になったりしたら失敗であるから、上のタイムラインになるように再度やり直し！！ ここでプレビューしてもまだエフェクトをつけていないので、何も起こらない。 |
| エフェクトの割付 |
| （１）フェイドイン（登場）・フェイドアウト（退場） |
| FRAME 1でｒ１画像をクリック、画面下の「プロパティーインスペクター」の「カラー」「アルファー」で 0 を設定（フェイドイン） FRAME65でｒ１画像をクリック、「アルファー」を 0 に設定（フェイドアウト） 同様に、ｒ２についても、FRAME65とFRAME130のアルファー値を 0 に設定する。 |
| （２）移動＋フェイドイン（登場）、移動+フェイドアウト（退場） |
| （１）のフェイドイン・アウトのエフェクトに加えて、以下のエフェクトを付ける。 FRAME 1でｒ１をクリック、プロパティーインスペクターでｘを-250に変更 ｙはそのままにしておく（写真が丁度画面の右に隠れる位置） FRAME65でｘを400に変更（画面左に消える）。 同様に、ｒ２についてはFRAME65でｙを-190、FRAME130でｙを300に設定する。 移動の仕方にイージング（はじめ早く、止まるときゆっくりなど）を付ける場合は、各トウイーンの矢印のどこかをクリックし、プロパティでイージングの値を例えば100とする（このサンプルの場合）。FLASH8の場合は、編集タブをクリックするとトウイーンの強弱を対フレームのカーブで設定できるので、動きに変化を付けたいときはこれを使う。この機能を説明しだすと大変なことになるので、この稿ではこれ以上述べないが、凝った動きを付けたい人には強力な武器になるであろう。 |
| （３）横伸縮・縦伸縮による登場・退場 |
| （１）のフェイドイン・アウトのエフェクトに加えて、以下のエフェクトを付ける。 FRAME 1でｒ１をクリック、写真の中央部にある小さな丸（変形点）を真っ直ぐ左にドラッグして写真の左ふちにドロップする（写真が縦1本の線状になる）。このとき、プロパティーでW=1、H=188になっていなければこれに設定。 FRAME65で同様に変形点を右ふちに移動させる FRAME65でｒ２をクリック、変形点を写真の上ふちに、FRAME130で下ふちに移動させる。 なお、縦、あるいは、横1本になった線状の写真の位置をいろいろ動かすと、また違ったエフェクトになるので、お試しあれ。 |
| （４）縦横同時伸縮による登場・退場 |
| （３）のエフェクトに加えて、以下の設定を行う。 FRAME 1で線状になったｒ１をクリック、プロパティでHを188から1に変更する。 FRAME65でｒ１をクリック、Hを１にし、ｘを325、ｙを248に変更する。 FRAME６５でｒ２をクリックし、Wを１に、ｘを200、ｙを150に設定。 FRAME130でｒ２をクリック、Wを１に、ｘを200、ｙを150に設定する。 |
| （５）回転を伴う登場・退場 |
| （１）のフェイドイン・アウトのエフェクトに加えて、以下のエフェクトを付ける。 FRAME 1 でｒ１をクリック、画面左のツールボックスの左上2番目の自由変形アイコンをクリック、ｒ１が自由変形状態になるので、４隅のどこかの四角をドラッグして写真を最小の状態（W8，H8）まで小さくする。 次に、FRAME1-30の矢印のどこかをクリック、プロパティーの「回転」を右回り、１回に設定する。 FRAME65でｒ１をクリック、自由変形ツールでシフトキーを押しながら（縦横比を保ったまま）写真を拡大する（H500程度）。トウイーンを選んで「回転」右回り1回を設定する。 FRAME65でｒ２をクリック、自由変形ツールでW8,H8に縮小する。 FRAME65-95のどこかでクリックし、プロパティーのイージングを0に戻す。FRAME80で右クリック、「キーフレームに変換」をクリック。同じくFRAME 80でｒ２をクリックし、「修正」メニューの「変形」で横反転をクリックする。次いで、FRAME65-80のトウイーン（矢印）をクリックし、時計回り0回に設定する。FRAME80-95も同じ設定にする。 同様にFRAME117をキーフレームに変換し、今度は縦反転を設定、ｒ２を右下にドラッグして移動する（ここではｘ150，ｙ110）。FRAME130でｒ２をクリック、ドラッグして右下に移動（x220，y150）。FRAME105-117、117-130のトウイーンに対しても時計回り0回を設定する。 なお、最後のエフェクトのみは、FRAME80と117にキーフレームを入れるので、ここだけが上に示したタイムラインとは異なる。 |
| ●ｆｌａファイル |
| 本SAMPLEの ｆｌａ ファイルをダウンロードできるようにしますので、興味のある方は、こちらからどうぞ。 |
| HOME お勉強総リスト |