2Dキャラクターアニメーションの作成

2Dベクターキャラクターアニメーションを作成し、その動きを微調整し、Adobe Stockからアセットを読み込み、様々なフォーマットにパブリッシュする方法について学習します。

このアニメーションを実際に作ってみたい場合は、アセットをご利用ください

このアニメーションを作成するには、2Dアニメーションアセットをご自身のCreative Cloudアカウントに保存してお使いください。Creative Cloudライブラリに保存したら、Animate CCのCC Librariesパネルからそのアセットにアクセスできます。

注意:ライブラリを保存するには、Creative Cloudアカウントにログインする必要があります。お持ちでない場合はAdobe IDを取得してください。

1. アニメーションのステージを準備する

HTML5 Canvasドキュメントを作成し、ステージおよびドキュメントのプロパティを設定してアニメーションプロジェクトを準備します。Adobe Stockから、アニメーションの背景で使用するベクター画像にアクセスします。

2. シーンを作成する

コンポジションにレイヤーを追加して描画ツール(長方形、ペン、ブラシツールなど)を使用し、背景シーンの描画を仕上げます。

3. キャラクターを読み込んで準備する

キャラクター用の新規レイヤーを作成します。その後、Illustrator CCで描いたキャラクターをCC Librariesパネルから読み込みます。ムービークリップシンボルを作成し、レイヤーを分けて、アニメーション用のキャラクターのすべてのパーツを準備します。 

注意:CCライブラリアカウントにキャラクターを保存するには、2Dアニメーションアセットをクリックしてください。

4. キャラクターをアニメーション化する

フレームとキーフレームの違いや、モーショントゥイーンとシェイプトゥイーンの違いを学習します。次に、その概念を使って、キャラクターの複数の場所にループアニメーションを適用し、リアルな動きを表現します。

5. メインタイムラインにアニメーションを追加する

ムービークリップアニメーションと、メインタイムライン上のアニメーションとの違いを学習します。メインタイムラインのキャラクターをアニメーション化し、そのパスを微調整します。空の雲に別のアニメーションを定義し、アニメーションプロジェクトをテストします。

6. プロジェクトをパブリッシュする 

パブリッシュ設定を使って、Web、Dreamweaver、Muse、InDesignプロジェクト、またはカスタムパブリッシュターゲットで使用できるようにプロジェクトを書き出します。

7. 作品を共有する

アニメーションに#MadeWithAnimateというタグをつけて、ソーシャルメディア上で共有します。

 

これですべての作業が終わりました。チュートリアルをさらに役立つものにするために、アンケートにご協力ください。

 

02/12/2017

Contributors: Joseph Labrecque, Ryan Bubnis

このページは役に立ちましたか。
はい
いいえ