Rookie'sFlashLaboratory
Homeへもどる
PHASE05 スターウォーズイントロ(動画ファイルについて)
今回は、スターウォーズのイントロタイトルのようなアニメを作ってみたいと思います。

ところがどっこい。
あれは簡単そうにみえてけっこう難しいのです。

俯瞰したような文字列が奥に流れていくアレ。
アレをFreeMotion2では表現できないのです。
できないというより、表現するのが困難といった方が良いでしょうか。
非常に手間をかけ、ActionScriptなどを使えば再現可能かもしれません。

しかし、それでは、
「簡単、お手軽」
を謳ったこのサイトの趣旨に反してしまいます。
っていうか、ボクもActionScriptなんてわかりませんしね。

で、考えました、ワタシ考えました。
ちょっとズルい手段かもしれません。
手抜きとも、邪道ともとられかねない手段かもしれません。

でも、いいじゃないですか。
初心者なんですもん。
言い訳になってない、かな・・・。

というわけで、こんなのを作ります。





下準備として、Column Phase04 Windowsムービーメーカーを参考に、
文字列部分の動画ファイルを作っておきます。
全部ムービーメーカーで作っちゃえばいいじゃん、って話ですが、
そうすると、フラッシュで作るという意味合いが薄くなってしまいますので、
今回は、一部だけムービーメーカーで作成した動画ファイルを使用します。

あと、キャンバスの背景色は黒色です。

1
まず、スターウォーズでいうところの、
「遠い昔、はるか彼方の銀河系で・・・」
の部分を作ります。

ここではこれを便宜上「オープニングテキスト」ということにしましょう。

テキストを書き、エフェクトをつけます。
テキストを右クリックし、「エフェクト」-「エフェクトの作成」を選択します。
エフェクトは「入る」の「フェードイン」です。
設定ボタンを押して、「インターバル」の目盛りを「短い」にしておきます。

次に、「エフェクト」のスピードを0.5秒くらいにしたいので、
タイムラインのフレームを6個ぶんを残して、あとは削除します。

さらに、アニメが始まるまで、さらに0.5秒くらい欲しいので、
エフェクトが始まる前に「空のキーフレーム」を6フレーム入れておきます。
いわゆる「インターバル」ですね。

タイムラインの「エフェクト」の最初のフレームを右クリックし、
「空のキーフレームを挿入」を選択。
挿入した「キーフレーム」を5フレーム目まで引き伸ばします。
なぜ5フレームかと言えば、
最初の「キーフレーム」の1フレーム分がプラスされて
6フレームとなるわけです。
ややこしいですね・・・。

この時、「キーフレーム」をいきなりドラッグしてはいけません。
いったん別の適当な部分をクリックして
「キーフレーム」が選択されている状態をはずし、
再びクリックしそのままマウスボタンを離さずにドラッグします。
そして黒く変色した部分を右クリックして「フレームの挿入」を選択します。

これで、「オープニングテキスト」の登場部分ができました。


2
次に「オープニングテキスト」が
まったく変化せず表示されているだけの部分を作ります。
「エフェクト」の最後のフレームの次のフレームに「キーフレーム」を挿入します。

この「キーフレーム」を36フレームに引き伸ばします。
3秒間止まったまま表示させたいからです。
「エフェクト」の最後のフレームが12フレーム目ですから、
+36で48フレーム目まで引き伸ばします。
さらに、最初の「キーフレーム」1フレーム分引きますので、
47フレームまで引き伸ばしてください。

すべて、1で「インターバル」を入れたのと同じ要領でやればOKです。


3
「オープニングテキスト」の最後。
フェードアウトさせたいと思います。

2で作成したのの次のフレームに「キーフレーム」を挿入します。

要領は1の「フェードイン」と同じです。
「エフェクト」の「出る」の「フェードアウト」を選択。
「設定」のインターバルの目盛りを一番左にします。

これも0.5秒で消したいので、6フレーム残して後は削除します。

「オープニングテキスト」はこれで完成です。


4
では次に、「タイトル」パートに移ります。
今回は「タイトル」用の画像をあらかじめ作っておきました。
もちろん、直接「テキスト」を書き込んでも問題ありません。

タイムラインで「オープニングテキスト」の最後のフレームの
次のフレームに「空のキーフレーム」を挿入します。
次に「読み込み」を押し、ダイアログから目的の画像を選択します。

画像を右クリックし、「シンボルに変換」をクリック。
「シンボルに変換」ダイアログの「グラフィック」を選択して「OK」ボタン。

つづけて、画像を右クリックし、「エフェクト」-「エフェクトの作成」。
このシンボルのエフェクトは「出る」の「縮小」です。

あとは好みにもよりますが、アニメのスピードはそのままとしますので、
タイムラインはいじりません。


5
では、本題ともいうべき動画ファイルの挿入をします。

4の次のタイムラインのフレームに「空のキーフレーム」を入れます。
「読み込み」ボタンを押して、事前に作ってあったムービーファイルを
選択すると、右のようなダイアログがでます。
いろいろと細かい設定ができるようですが、とりあえず、このまま「次へ」
を押しちゃいましょう。

動画ファイルの読み込みはこれだけです。


6
最後になりましたが、背景画像を設定したいと思います。
別に一番最初にやっておいても問題ないんですけどね。

まず、レイヤーを追加します。
できたレイヤーは背景用のレイヤーですので、
今まで作ってきたレイヤーの下に入れたいです。
新しく作ったレイヤーをドラッグして、レイヤー1の下にもって行きます。

ここに背景の宇宙の画像を入れるわけですが、宇宙の画像に切り替わるのは
「タイトル」の登場からです。
っていうか、背景画像が欲しいのは「タイトル」の所だけです。
「オープニングテキスト」の時は黒い背景ですので、タイムラインの
レイヤー2の最初にキーフレームを「オープニングテキスト」と同じフレーム数まで
ドラッグして、右クリック「フレームの挿入」です。

その次のフレームに「空のキーフレーム」を挿入し、「読み込み」から画像を
読み込んでください。
これは、動画ファイルを作った時と同じ背景を使うと良いでしょう。
背景画像の位置あわせをしますが、たぶん、上の「タイトル」用の画像が邪魔で
背景画像が動かせないと思います。
タイムラインのレイヤー1の右にある目のアイコンをクリックしてレイヤー1を
非表示にします。
これで背景画像が動かせるはずです。

次にお決まりの、「キーフレーム」をドラッグして「フレームの挿入」をします。

これで完成です。




最後にプレビューしてちゃんと動くか確認してみましょう。
まぁ、プレビューは1工程ごとに小まめにやるべきでしょうが・・・。

ひょっとすると動画ファイルの出だしの動きが悪いかもしれません。
PCの性能によるものなのか、それともフラッシュに動画ファイルを挿入すれば
こうなっちゃうのかは不明です。
とりあえず、ボクのPCでは出だしがキレイに動きません・・・。


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