flash講座1234はFLASH(フラッシュ)を使った動画の制作を分かりやすく解説した講座です。

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

 写真の出し入れ(1)に基本を述べましたが、ここでは、その応用編です。

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