画像ファイルをアニメーションさせよう

Flash では、画像ファイルをアニメーションさせることもできます。
今回は、Flash に画像ファイルを読み込み、その画像をアニメーションさせる方法を見ていきましょう。

せっかく画像ファイルをアニメーションさせるのであれば、ベクターデータで表現しやすいようなフラットなイラストではなく、画像でしか表現できないような素材をアニメーションさせたくなりますよね。
例えば写真素材であったり、イラストでも複雑なグラデーションを使用した絵画的な表現のものであったり…
そういうわけで、とりあえず以下のようなサンプルを作ってみました。
雲というか、霧というか、煙のようなものが流れるアニメーションです。

キャラクターなどの画像を動かす場合には問題無いのですが、背景素材などをループするようにスクロールさせるのは、意外と難しいです。
というのも、ループさせる画像を制作する段階で、画像の右端と左端が繋がるようにできていないといけないからです。
画像制作の際に、少し手間がかかるというわけですね。

それでは、画像ファイルの読み込みからアニメーションさせるまでの流れを、順を追って解説します。

Flash に読み込める画像ファイルの種類

画像のファイル形式には、いろいろな種類のものがありますが、Flash 内に読み込むことができる画像ファイルであれば、何でも動かせます。
具体的には、jpeg、png、gif、bmp、dxf に加えて、アドビ独自の、ai、psd、fxg などです。
アニメーション制作に限定すれば、jpeg と png の2種類が最も使用頻度の高いファイル形式で、ベクターデータを扱う場合に限り、ai を読み込むといった感じでしょうか。
それぞれの画像ファイルには、それぞれの特徴があるので、使用する際には注意が必要です。
例えば、jpg形式の画像では、透明部分を維持することはできないので、一枚ものの背景などに使用することになります。
png形式の場合には、画像の一部を透過させることができるので、背景の手前で動き回るキャラクターなどにも問題無く使用できます。

jpeg と png の使い分け方

上記のサンプルアニメーションの場合、レイヤーとしては5層構造となっています。
手前から数えて1番目のレイヤーで、最も高速でスクロールする煙をアニメーションさせています。
2番目のレイヤーは、少しゆっくりスクロールする煙で、透明度も高くなっています。
3番目のレイヤーには、対決する人物の画像を配置していますが、これはまったくアニメーションしないレイヤーです。
4番目のレイヤーは、最もゆっくりスクロールしている、遠くにある煙です。
最下層となる5番目のレイヤーには、背景の画像を配置していますが、これもまったくアニメーションしないレイヤーです。

1番目から4番目までのレイヤーに配置した画像は、背景が透明でなければならないため、すべてpng形式の画像を使用しています。
とはいっても、煙の画像は、1枚の画像の縦横比率を変更させたり、アルファを変更させたりして使いまわしているだけです。
5番目のレイヤーに配置した画像だけは、透明部分が必要無いため、jpeg形式の画像を使用しています。

jpg画像をpng画像と同じように扱いたい場合には、『写真を切り抜こう』の頁で書いたように、Flash内で透明化したい部分を削除する作業が必要になります。
ただしこれは、キャラクターなどのように、不透明度100%の部分と、不透明度0%の部分がはっきり分かれているようなものに限られます。
今回のサンプルの煙のように、輪郭線がハッキリしていないものや、半透明の部分が複雑すぎるものは、この方法は使えません。
このような場合は、Photoshop などのソフトで煙の画像を作り、png 形式で保存したものを、Flash に読み込むしかありません。

画像ファイルの読み込み

Flash で画像ファイルを扱う場合、まずは画像ファイルを flaファイルの中に読み込みます。
Premiere や After Effects や Final Cut など一般的な動画編集ソフトの場合は、画像ファイルを外部リンクとして扱います。
ところが Flash の場合は、画像ファイルにリンクを張るわけではなく、完全に flaファイルの中に取り込むかたちです。
読み込みの手順としては、メニューバーの『ファイル』→『読み込み』をクリックして、『ステージに読み込み』か『ライブラリに読み込み』を選択します。
『ステージに読み込み』を選択した場合は、現在選択されているフレームのステージ上にダイレクトに画像が配置され、それと同時にラブラリ内にも保存されます。
『ライブラリに読み込み』を選択した場合は、一旦ライブラリ内のみに保存され、必要に応じてステージ上にドラッグアンドドロップして使用します。

アニメーションの設定

画像ファイルをアニメーションさせるには、クラシックトゥイーンを使用します。
設定方法は、通常のオブジェクトをアニメーションさせる方法とまったく同じです。
swf 以外の動画ファイル用にアニメーションを制作する場合は『グラフィックシンボル』しか使用できないため、まずは画像ファイルを『グラフィックシンボル』に登録します。
そして開始フレームと終了フレームのそれぞれのステージ上にシンボルを配置して、動き始める状態と、動きが完了する状態に、画像の配置などを調整します。
最後に、開始フレームから終了フレームにかけて、クラシックトゥイーンを設定すれば完成です。
通常のオブジェクトと同様に、クラシックトゥイーンにイージングや回転を設定することもでき、縦横比率の変化も含めた拡大縮小や、色が変化するアニメーションも可能です。

以上が、画像ファイルをアニメーションさせる方法です。
基本的には、通常のオブジェクトをアニメーションさせる方法と全く同じですが、読み込む画像ファイルの形式によって、それぞれの特徴に違いがあることを理解しておくことが大切です。

フラットな表現に特化したベクターデータとは違い、何でもアリの画像ファイルを使用することで、アニメーションの表現方法に、さらに奥行きが加わることと思います。