ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

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

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テンプレートモンスター
ホームページテンプレート

Free Templates Online JP
無料ホームページテンプレート
Free Templates Online JP

株式会社ネットオン
採用Webマーケティング
indeed広告代理店

海外 SEO対策 トラッキングツール
海外 SEO対策
ランキングチェックツール

Rank Tracker

テクニック

HomeFlash講座 > アニメーションの原則1

アニメーションの原則1

投稿日:<2006年6月20日>   レベル:−    ソフトウェア:Flash


アニメーションを始めましょう

キーフレームアニメーションを使って、ロボットのような、さえないアニメーションを作るのは簡単です。このチュートリアルでは、いくつかのアニメーションの原則を紹介していきます。

流れをつける

自然には、物体が動く前には、その予感のようなものがあります。前に動く前には、わずかに後ろに動きます。止まるときには、少し後ろに引っ張られて戻るはずです。もし、アニメーションに凝るなら、このような動きは必須です。

あなたの手を目の高さまで上げて止めてみてください、そして、何気なく足の横に動かしてみてください。その様子を、注意深くみれば、動作の予感と流れがわかるはずです。

ひどい漫画のような動きを作らないためにも、動きの始めと終わりにはコントラスト、つまりイージングが必要です。

Ball#1を動かしてみてください、直線的に動くだけだと思います。全ての行程で同じ速度で動き、終点で止まるだけです。

とても微妙な動きですが、Ball#2は前方に進む前に、一瞬後ろに引っ張られます。そして、止まるときには、少し後方に弾みます。この動きが、自然な動きを演出することになります。

この効果を取り入れるには、まず、モーショントゥイーンを使って、メインの動きを作成します。

500_501_018_01.jpg

次に、新しいキーフレーム(F6)を最初のフレームと最後のフレームの2、3後に挿入してください。

500_501_018_02.jpg


2つ目のキーフレーム(フレーム3)で、最初の位置から少し後方に動かします。3つめのキーフレーム(フレーム18)で、最終点より前方に動かします。

2つ目と3つ目のキーフレームの間でダブルクリックして、トゥイーンに関してイージングを設定します。

500_501_018_03.jpg

これは、自然なアニメーションを作成する基本的な技術です。回転や、拡大などのアニメーションにも適用できます。

物体の収縮、伸張

物体が収縮、伸張するといったことは、柔らかい、弾性力のある材料などに見られます。硬いモノにはこのような動きはありません。

ボールをクリックして動かしてみてください。Ball#1は全く直線的に跳ね返ってくるだけです。

Ball#2は衝突する直前と直後で少しだけ速度が早くなります。縮んだり、伸びたりすることで、ワンランク上のアニメーションが作れます。

少しだけオーバーな動きを加えるだけで、とても興味をそそるアニメーションになります。しかし、過度の演出はリアルさを失わせる原因になってしまいます。

素早く、わずかの演出を加えることで自然に仕上がります。



引用:Web Design Library著者:Anson Vogt翻訳:atuk



スポンサードリンク

コメント

ランダム記事5件

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