スポンサー


    ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

    ウェブプログラミング講座

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テクニック

HomeFlash講座 > モーションによるブレ

モーションによるブレ

投稿日:2006年6月16日   レベル:初級    ソフトウェア:Flash


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

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

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

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





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

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

500_501_015_1.jpg
500_501_015_2.jpg

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

では次に進みましょう。


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

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

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

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

500_501_015_3.jpg


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





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


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

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

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

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

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

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

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

ダウンロード


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



スポンサードリンク

コメント

ランダム記事5件

2016年5月の人気記事ランキング