Rookie'sFlashLaboratory
Homeへもどる
PHASE04 レイヤーについて
今回はレイヤーの説明をば。

レイヤーはAdobePhotoshopをお使いの方なら説明の必要もないものですね。
アレとほぼ同じです。

画像を1枚2枚・・・と重ねていくものです。

なので別段ここで説明する必要もない、と思っていたんですよ。
が、FreeMotion2のレイヤーはちょっと複雑でした。

画像(オブジェクト)をレイヤーで2〜3枚重ねて、エフェクトをそれぞれつけて、
いざプレビューボタンを押したけど、これが何も表示されない・・・。
これにはコケました。
なんだかんだと数時間試した末、やっとアニメが動くようになったんですよね。

つまり、レイヤーを使って画像を動かす場合、特定の手順を踏む必要があるみたいです。

と、言うわけで、さらっといきなり動かせた人はいいんですが、動かせなかった
ボクのような方のために、とりあえず説明しとこうと思います。

今回の作例
ちなみに、 公式HPのサンプル を参考にさせていただきました。





1
まず、メインのでっかい文字を書きます。
「変形」ツールを使ってサイズを大きくします。
および、角度調節、位置変更もしておきます。

色合わせは最後に行います。
ここではわかりやすいように黒色にしています。


2
タイムラインの50フレーム目に「キーフレーム挿入」。
終了位置に画像を持って行きます。

同じくタイムラインの真ん中あたりで右クリックし、
メニューから「モーショントゥーン作成」を選択します。

これで、メインの文字が右上から左下へ動くアニメができました。

アニメに関しての詳しい解説は、 Phase01 を参考にしてください。
今回はガイドラインは使っていませんので、ガイドラインについての
解説は読み飛ばしてください。


3
「レイヤーの追加」ボタンを押してレイヤーを追加します。

続けて、メインの文字を横切る細かい文字を書きます。

ちなみに、ボクが書いた英文は、
翻訳ソフトに適当な言葉を打ち込んで英訳したものです。
あまりまじめに読まないでください・・・。

タイムラインに余計なキーフレームがある場合はこれを削除しておいてください。
これが、レイヤーを操作する上でややこしくなる元です。
いらないタイムラインの上で右クリックすると出てくるメニューに
「フレームの削除」がありますので、それを選択すればOKです。


4
メイン文字と同じ方法でこの小文字群にも動きをつけます。

小文字群は右から左に動かします。
別に上から下でも、下から上でもナナメでも何でもいいです。

ただ、今回の場合は移動の幅を少なくすると良いみたいです。


5
色合わせをします。

メイン文字を白に変更します。
メインの文字の色変更は、
タイムラインの一番最初のキーフレームをクリックし、
文字をダブルクリックすると文字編集モードになります。
文字を全て選択して、
画面下のプロパティにあるカラーボックス(?)をクリックして
任意の色を選択すれば色変更完了です。

ちゃんと終点の文字の画像も色が変わっています。

背景を黒にします。
カンバスのオブジェクトがない部分をクリックすると
プロパティが背景用に変わりますので背景のカラーを選択します。

カンバスをクリックしても背景用プロパティが出ない場合があったりして
イラついたりする時もなきにしもあらず、です。
そんな時は落ち着いて、しばらく待てば切り替わると思います。
たぶん処理が遅れているだけだと思います。
ボクのPCだけかな、こんな現象?
こんな時はタイムラインのフレームを切り替えるのもいいみたいです。

さて、これでとりあえずは完成です。

以下、小ネタ集です。


Tips1
全てのレイヤーのフレームを追加削除したい場合。
これは別に説明しなくても、適当にいじくってると見つかる小技。

適当なフレームを、クリックしてそのまま横にドラッグすると
一括してフレームの選択が出来ます。
この時、他のレイヤーに向かってナナメにドラッグすると、
別のレイヤーのフレームも選択できます。


Tips2
各レイヤーのエフェクト開始のタイミングをずらしたい。
これがわからなかった・・・。

1.タイムラインの一番前を右クリックして「空のキーフレーム挿入」を選択します。
2.”いったん別のフレームをクリックしてから”、
  再度今挿入したキーフレームをクリックし、”クリックしたままドラッグします”。
3.複数フレームを選択したら、右クリックして「フレームの挿入」です。

これでアニメーションの開始タイミングをずらすことができました。



 
Copyright (C) 2008 森静四郎, All rights reserved.