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

FLASHのお勉強 ーモーショントウイーンー
(特1) 写真の出し入れ(3)

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

 応用編といっても基本となる動きを示しているので、本当の応用は、皆さんのアイディアで展開してください。 本編でも解説は入門者向けにごく初歩的な操作も記述したつもりです。 ファイト! 
SAMPLE 2
<シーン1>
(1)ステージの準備 
●W400、H315、背景色黒、フレームレイト24fpsのステージを準備し、写真の出し入れ(2)と同じように、バラの写真2枚を読み込む。 このSAMPLE2の場合も、W300,H225の写真を読み込み、シンボルr1,r2に変換した。このとき、基準点は左上にした(真ん中でも良い。座標を示す意味でここでは左上)。
●次に、タイムラインにレイヤーを9つ作成する。
(2)写真の登場
●レイヤー1を選択し、ライブラリーからシンボルr1をドラッグしてステージに貼り付ける。プロパティーインスペクターで座標を(50,40)にセットする。
●FRAME8にキーフレームを挿入、プロパティーでW100(にセットする。このとき縦横比をロックしておく。
●FRAME1-8の間で矢印の上で右クリック、モーショントゥイーンを作成。
●レイヤー2-9全部のFRAME20に(shiftキーを押しながらFRAME20を選択、右クリックで)キーフレームを挿入する。
●レイヤー1のW100の写真を選択し、コピー(ctrlキー+cでも可)、レイヤー2-8それぞれのFRAME20を選択し、「編集」「同じ位置にペースト」(ctrl+shift+vでも可)する。これで、同じ写真が9枚左上に重なったことになる。
(3)エフェクト1
●全レイヤーのFRAME30にキーフレームを挿入、FRAME20-30にモーショントゥイーンを作成する。
●FRAME30で(赤い線の再生ヘッドをFRAME30に持ってくる)、左上に重なっている写真を上から(レイヤー9から)ドラッグして9枚が格子になるように配置する。ドラッグは、まず、真横に移動していくとガイドラインが現れるので、右隣にドラッグする。次は真横に移動してさらにその右隣にドロップする。
 このように、ドラッグしてガイドラインを頼りに9枚の写真を3列3行に配置する。配置順序はどうでも良い。
(4)エフェクト2
●全レイヤーのFRAME45、55にキーフレームを挿入する。
●FRAME55で全レイヤーを選択(shiftキーでドラッグするかshiftキーを押しながら一番上のレイヤーと一番下のレイヤーを続けてクリック)し、ついで、真ん中の写真のレイヤー(ここではレイヤー5)のFRAME55をコントロールキーを押しながらクリックすると、真ん中以外の写真が全部選択される。選択されている写真のどれかをクリックし、プロパティーインスペクターで「カラー」「アルファ」を0にセットする。
●真ん中の写真のFRAME55を選択し、ツールボックスの変形ツールで写真をW300ぐらい(正確でなくても良い)にまで拡大する。
●全レイヤーのFRAME65、76にキーフレームを挿入し、レイヤー5(真ん中)だけトウィーンを作成、FRAME65のサイズをW100にもどす。
●全レイヤーのFRAME66でキーフレームに変換し、真ん中の写真(レイヤー5)のアルファを0にセットする。
●FRAME66で全レイヤーの写真を一つずつドラッグして真ん中の写真に重ね合わせる。このとき、ドラッグするとガイドラインが現れるので、ゆっくり移動しながら真ん中でドロップする。
●全レイヤーのFRAME76で全レイヤの写真のアルファを100にもどす。
●全レイヤーのFRAME66-76の間にモーショントゥイーンを作成し、全レイヤーを選んでプロパティで回転・時計回り・1回をセットする。
●全レイヤーのFRAME86でフレームを挿入する。
シーン1のタイムライン
<シーン2> メニューの「挿入」「シーン」でシーン2を挿入する(シーン2を挿入せず、シーン1に続いて作成しても可)
(1)ステージの準備
●タイムライン右上のアイコンで、シーン1を表示させ、メニューの「編集」「タイムライン」「すべてのフレームを選択」で選択し、次いで「タイムライン」でフレームのコピーをする。。
●シーン2の画面に戻って、編集・同じ位置にペーストすると、シーン1がそっくり貼り付く。そこで、全レイヤーのFRAME 1-74を選択し「フレームを削除」する。画面に9枚の写真が並ぶ。
●一番下のレイヤー1を選択し、レイヤの追加ボタンでさらに9つのレイヤーを追加する。レイヤー1をドラッグし新しいレイヤーの上に移動する(レイヤー2の下)。
●ライブラリーからr2をステージにドラッグ&ドロップし、左上の+をr1の左上の写真の+に合わせる。このとき一度ステージにドロップし、再度ドラッグするとガイドラインが現れる。写真の大きさをプロパティーでW100,H75に縮小する。r2の小さくなった写真は、一番左上のr1の写真の下になって見えなくなる。
●レイヤー1ー9の非表示アイコン(片目のマーク)のところにチェックを入れて非表示にする。1枚のr2の写真だけとなる。
●シーン1、エフェクト1の時と同様に、r2の写真を各レイヤーにコピペし、3列3行に並べる。
(2)エフェクト1
一番左上の写真のエフェクトについて作成法を述べる。左上の位置には、r2とr1が重なり合っているが、r1のレイヤーが上にあるので、r1だけが見えている状態になっている。
●二つのレイヤーのFRAME10にキーフレームを挿入し、その間にモショントゥイーンを作成する。
●FRAME10でr1,r2とも「修正」「変形」「横反転」を施す。
●プロパティで時計回り0回をセットする。(下左のタイムライン) ・・・・r1しか見えない。
●r1のレイヤのFRAME5にキーフレームを挿入し、FRAME6-10を選択し、右クリック、フレームの削除(下右)。
     
以上のエフェクトを残り8枚の写真についても設定するが、このとき適当にタイムラインをずらせて、時間差をつける。
(FRAME35 まで、添付ファイルのタイムラインを参照のこと)
(3)エフェクト2
●FRAME55ー75で表示されている9枚のr2を下の写真のように2枚ずつ違う方向に反転させながら、真ん中の写真を拡大消失させ、同時に拡大するr1の写真と入れ替える。

ここは、文章で書くと冗長になりかえって分かりにくいかもしれないので、添付のflaファイルを参照してほしい。
要は、横反転、縦反転、時計回り、反時計回りで回転する方向をセットすればよい。
真ん中の写真は、r2の写真をFRAME75でW300に拡大し、アルファを0に設定する。 FRAME60に、r1の写真を新しいレイヤーの真ん中の位置にW300で配置してFRAME75にキーフレームを挿入し、FRAME60でW100、アルファ0に設定すれば、FRAME75ではr1の拡大写真が表示されることになる。
シーン2のタイムライン
●flashファイル
本SAMPLE2の 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-4)