このflash講座1234は,flashソフトを用いてflashアニメをスクリプトで制作し無料で公開したものです

FLASH講座 ーモーショントウイーンー
(特1) 写真の出し入れ(1)

 Flashでのサイト作りに欠かせないのが、写真や画像の動きのある移動、登場、退場です。

 ここまでに勉強したモーショントゥイーンの応用、組み合わせでいろんなシーンが作成できると思います。さらに、移動・フェイドイン・回転などのエフェクトを組み合わせた場合を復習を兼ねて講座にしてみました。

 これらを基本に多彩な動きを演出していただければと思います。 私に寄せられたメールには入門段階の人が多いので、一から解説するよう心がけるつもりです。
ステージの準備
w400、h300、背景色黒のステージを設定する。フレームレートはここでは12とするが、きびきびした動きが出したいときは、30などの高いレートにした方がよい。 メニューの「ファイル」「読み込み」でステージに2枚の写真(w250、h188)を読み込み、それぞれをシンボルに変換、名前を付け、ステージから削除する(ライブラリーには格納される)。 ここでは、バラの写真を読み込み、r1、r2と名前を付けた。 元写真のファイル名もpic1,pic2,,,のように連番にしておくと、沢山の写真を読み込むときは一度に読み込むことができるので便利である。
タイムラインの設定
(1)ライブラリー(ウインドウが出ていないときは、メニューの「ウインドウ」で「ライブラリー」にチェックを入れる)からステージにシンボル”r1”をドラッグ&ドロップする。左上座標は、x:75、y:60。
(2)タイムラインの左の「レイヤー1」と書いてあるところをダブルクリックして、レイヤーにr1と名前を付ける。
(3)FRAME 30、40、65それぞれで、右クリックで出てくるメニューウインドウで、「キーフレームの挿入」をクリック
(4)FRAME 0-30の間で(どこでも良い)右クリック、モーショントウイーンを作成をクリック(矢印線が描かれる)
(5)FRAME 40ー65の間で同様にモーショントウイーンを作成する。

次に、タイムライン一番左下のアイコンで、レイヤーを追加し、r2と名前を付ける。 FRAME65にキーフレームを挿入し、ライブラリーからr2をステージにドラッグ&ドロップする。 このとき、ステージに一旦ドロップし再度ドラッグすると、レイヤー1のr1の位置に来ると点線でガイドが表示されるので、同じ位置にドロップすることができる。 次にFRAME 95、105、130、140にキーフレームを挿入し、FRAME 65-95、105-130の間で同様にモーショントウイーンを作成する。
以下のようにタイムラインが作成される。



矢印ができずに点線になったりしたら失敗であるから、上のタイムラインになるように再度やり直し!!
ここでプレビューしてもまだエフェクトをつけていないので、何も起こらない。
エフェクトの割付
(1)フェイドイン(登場)・フェイドアウト(退場)
FRAME 1でr1画像をクリック、画面下の「プロパティーインスペクター」の「カラー」「アルファー」で 0 を設定(フェイドイン)

FRAME65でr1画像をクリック、「アルファー」を 0 に設定(フェイドアウト)

同様に、r2についても、FRAME65とFRAME130のアルファー値を 0 に設定する。
(2)移動+フェイドイン(登場)、移動+フェイドアウト(退場)
(1)のフェイドイン・アウトのエフェクトに加えて、以下のエフェクトを付ける。

FRAME 1でr1をクリック、プロパティーインスペクターでxを-250に変更
yはそのままにしておく(写真が丁度画面の右に隠れる位置)

FRAME65でxを400に変更(画面左に消える)。

同様に、r2についてはFRAME65でyを-190、FRAME130でyを300に設定する。

移動の仕方にイージング(はじめ早く、止まるときゆっくりなど)を付ける場合は、各トウイーンの矢印のどこかをクリックし、プロパティでイージングの値を例えば100とする(このサンプルの場合)。FLASH8の場合は、編集タブをクリックするとトウイーンの強弱を対フレームのカーブで設定できるので、動きに変化を付けたいときはこれを使う。この機能を説明しだすと大変なことになるので、この稿ではこれ以上述べないが、凝った動きを付けたい人には強力な武器になるであろう。
(3)横伸縮・縦伸縮による登場・退場
(1)のフェイドイン・アウトのエフェクトに加えて、以下のエフェクトを付ける。

FRAME 1でr1をクリック、写真の中央部にある小さな丸(変形点)を真っ直ぐ左にドラッグして写真の左ふちにドロップする(写真が縦1本の線状になる)。このとき、プロパティーでW=1、H=188になっていなければこれに設定。
FRAME65で同様に変形点を右ふちに移動させる

FRAME65でr2をクリック、変形点を写真の上ふちに、FRAME130で下ふちに移動させる。

なお、縦、あるいは、横1本になった線状の写真の位置をいろいろ動かすと、また違ったエフェクトになるので、お試しあれ。
(4)縦横同時伸縮による登場・退場
(3)のエフェクトに加えて、以下の設定を行う。

FRAME 1で線状になったr1をクリック、プロパティでHを188から1に変更する。
FRAME65でr1をクリック、Hを1にし、xを325、yを248に変更する。

FRAME65でr2をクリックし、Wを1に、xを200、yを150に設定。
FRAME130でr2をクリック、Wを1に、xを200、yを150に設定する。
(5)回転を伴う登場・退場
(1)のフェイドイン・アウトのエフェクトに加えて、以下のエフェクトを付ける。

FRAME 1 でr1をクリック、画面左のツールボックスの左上2番目の自由変形アイコンをクリック、r1が自由変形状態になるので、4隅のどこかの四角をドラッグして写真を最小の状態(W8,H8)まで小さくする。
次に、FRAME1-30の矢印のどこかをクリック、プロパティーの「回転」を右回り、1回に設定する。
FRAME65でr1をクリック、自由変形ツールでシフトキーを押しながら(縦横比を保ったまま)写真を拡大する(H500程度)。トウイーンを選んで「回転」右回り1回を設定する。

FRAME65でr2をクリック、自由変形ツールでW8,H8に縮小する。
FRAME65-95のどこかでクリックし、プロパティーのイージングを0に戻す。FRAME80で右クリック、「キーフレームに変換」をクリック。同じくFRAME 80でr2をクリックし、「修正」メニューの「変形」で横反転をクリックする。次いで、FRAME65-80のトウイーン(矢印)をクリックし、時計回り0回に設定する。FRAME80-95も同じ設定にする。
同様にFRAME117をキーフレームに変換し、今度は縦反転を設定、r2を右下にドラッグして移動する(ここではx150,y110)。FRAME130でr2をクリック、ドラッグして右下に移動(x220,y150)。FRAME105-117、117-130のトウイーンに対しても時計回り0回を設定する。 なお、最後のエフェクトのみは、FRAME80と117にキーフレームを入れるので、ここだけが上に示したタイムラインとは異なる。
●flashファイル
本SAMPLEの flash ファイルをダウンロードできるようにしますので、興味のある方は、こちらからどうぞ。
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
このサイトで使用しましたflashソフトはflash mx 2004年版(Flash Japan)- flash8 及び FlashCS3-2007年版です。 flash講座(フラッシュ講座)は、Yoshioka氏(通称、ひげ親父)による制作です。 コツコツと作られたflash素材(flashアニメ、スクリプト)はユーザーの方により保存変更され動画flash(動画フラッシュ)や携帯flash(待受flash)として利用されて来ました。
 氏は、flashスクリプトについての学習を、パソコン塾講師活躍中に始められ、独立した今も続けておられます。 
  macromedia flashソフトは新しくadobe flash時代に入りましたので、これを機会にflash学習サイトを「flash講座1234」としてリニューアルいたしました。 引き続きご愛顧承りますよう、よろしくお願いいたします。
                                                                       (by Hiraoka)
HOME   Flash講座リスト     モーショントゥイーン(特1-2)