ホーム -> パソコン講座 -> Flash講座上級編

Flash講座:メイキング・オブ・共同参画の街

羽ばたく鳩

フラッシュの基本的な機能の一つに「パラパラアニメ機能」があります。
少しずつ動く絵を並べて、自然に動いているように見せる機能です。
これを使うと特定の動作をしながら動くもの、たとえば歩く人間・動物、はばたく鳥、泳ぐ魚、車の車輪などを表現することが出来ます。一連の動作をまとめて「シンボル」に登録し、それを普通のシンボルと同じように動かすことが出来るのです。
今回のアニメに、どうしてもこの機能を使った鳥を飛ばしたいと思いました。



最初、上のアニメのように某社の見本ファイルを加工して作ったのですが、動きがどうもぎこちなくて気に入りませんでした。
ソースを見るとパラパラアニメのコマ数が少ないのです。羽の位置も中途半端でした。それで最初から作り直すことにしました。

Part11:手書き画像(ビットマップ)のトレース



まず鳩の本体と左右・上・中・下の位置の翼をデッサンし、スキャナーでBMP画像として取り込みます。
分解しやすいように外周部を濃い色で塗ります。
(上図は見本なのでJPEG画像)



フラッシュにそれを読み込ませ、「ビットマップのトレース」機能で分解します。
修正ビットマップビットマップのトレース」を選択します。切り分ける色数設定は少ないほうがいいでしょう。



トレースし、赤色の周辺部分をカットした結果。
切り絵のような線で、かなり癖があります。元の絵とあまりに違う場合はあとで修正します。
細かいゴミを整理し、部品ごとにシンボルとして登録します。

Part12:パラパラアニメ

 

上図のように、5つのフレームに「鳩本体のオブジェクト」と「翼のオブジェクト」で翼の位置を変えた鳩のポーズを作ります。
鳥の体は羽を打ち下ろした時に上がり、持ち上げたときに下がります。この揺れを計算に入れないと動きが自然になりません。



この時、タイムラインの下にある「オニオンスキン」ボタンを押すと前のコマが透けて見えます。
これを利用して自然な動きにしてください。



このような動きになりました。



動きが早すぎたり遅すぎたりした時は「フレームレート」の数字を変えます。



数字の枠をクリックすると「ドキュメントプロパティ」が開きますので、ここで「フレームレート」の数字を調節します。
秒あたりのコマ数ですので、多ければ早く、少なければ遅くなります。



この鳩の動き全体を一つのシンボルにします。5つのフレームを選択し、右クリックで「フレームのコピー」を選びます。



挿入新規シンボル」を選びます。新しいシンボル編集画面になります。



適当な名前をつけます。



シンボル編集の1番フレームに「フレームのペースト」をします。



ライブラリに「飛ぶ鳩」が保存されました。
シンボルになった「飛ぶ鳩」は、他のシンボルと同様にモーショントゥイーンで動かせます。



奥から手前へ3羽飛ばしました。まだ不満はありますが、だいぶ自然になったと思います。

この「パラパラアニメ機能」こそフラッシュの本領だろうと思います。
市街を破壊しながら歩くゴジラや、咆哮(ほうこう)を上げながらのたうつ龍などを表現するときに使えます。
そういう「大物」アニメを作りたい人はぜひ挑戦してください。

さて、これで「メイキング・オブ・共同参画の街:フラッシュ講座上級編」は終わります。
入門編に比べるとシェイプ・トゥイーンやパラパラアニメなど、いくらか高度な技術が使われていると思います。しかし、基本は同じです。
ひとつひとつのアニメーションをていねいに作り、それを根気よく積み重ねて複雑なアニメーションを作るのです。近道はありません。
この講座が少しでもみなさんの参考になることを願っています。

  ページのトップへ

もどる 目次へ

Copyright: Any contents including any images in the site belong to City Kashiwa, Chiba, Japan