このチュートリアルでは第三者的なソフトを使った、アニメーションに物体の動きによるブレを加える方法を紹介します。

Flashではこの効果を加えることは難しいので、ここではAdobe Photoshopを使います。

端的に言うと、2枚のイメージをPhotoshopからインポートして、１枚は普通のイメージ、もう１枚はブレを加えたものを用意するのです。

この2枚のイメージを使った、モーションによるブレを効果的に表現するために、実際にオブジェクトが加速しているように仕上げます。
こんな感じのUFOはどうでしょう？







1:
では始めましょう！
　
まず、Photoshop(同じような加工ができるなら何でも構いません)でイメージを開いて、ぼかし(移動)を使って、イメージに好きなぐらいにブレを加えてください。

さて、これで元の画像とそれにブレを加えた2枚の画像が準備できたはずです。

[You must be registered and logged in to see this image.]

これらのイメージをjpg形式で保存してください。
ただし、イメージの質が重要になる場合はpng形式で保存することを勧めます。
png形式の場合は、Flashファイルのサイズが大きくなってしまうことに気を付けてください。

では次に進みましょう。


2:
Flashを立ち上げて、ファイル>読み込みから2枚のイメージをインポートします。

Flashでの最適化について設定できますが、もし必要なければ、飛ばしてください。

ウィンドウ>ライブラリ(F11)から、イメージ名を右クリックしてプロパティへ移動します。

もしイメージを.pngで保存していたなら、“ロスレス(PNG/GIF)”を選択してください。
そうしなければ、ファイルはファイル>パブリッシュ設定 で設定されているように圧縮されてしまいます。

[You must be registered and logged in to see this image.]


3:
さて、Flashで使用するイメージが準備できました。
　
2枚のイメージを異なったレイヤーに配置してください。
　
元のイメージに好きなモーショントゥイーンを適用します。そして、図2のように、元のイメージの、トゥイーンの終着点と同じ位置からブレを加えたイメージをスタートさせます。







これが全てです、元のイメージを途中でブレを加えたものに置き換えているだけです。つなぎ目のところを正確に一致させることだけ注意してください。


結論:
このチュートリアルでおこなったこと

　Photoshopを使ってイメージにブレを加えた

　Flashに元のイメージをブレを加えたイメージをインポートした

　イメージの質とファイルサイズを最適化した

　2つのレイヤーを使って、元とブレを加えたイメージをそれぞれは位置した

　トゥイーンを適用して、2つのアニメーションをつなげた

このチュートリアルを楽しんでくれたらうれしいです！

ダウンロード



引用:Web Design Library著者:AEvision翻訳:atuk]