イラストの分割とアニメーション

最終更新日 2013/12/22

パーセント単位の設定に続いて、イラストからアニメーションを作成する方法です。

「公式サイト：Learn Edge Animate CC | Adobe TV」

まず、Adobe Photoshop CC でイラストを分割します。

分割方法は、境界線がはっきりしているので、クイック選択ツールで選択してコピー＆ペーストしました。

洋服の部分は、コピースタンプツールで修復しました。

イラストを分割して PNG 形式（.png）で保存しました。

分割したイラストを全て選択して、Adobe Edge Animate CC のステージにドラッグ＆ドロップします。

プロパティパネルで、Stage の幅（W）を 800px 高さ（H）を 500px （イラストとほぼ同じ）に設定します。

エレメントパネルで重ね順を変更しながら、イラストと同じようにステージに並べます。

星は、エレメントパネルで複製（右クリック／複製）します。

星の角度と大きさは、変形ツールで変更します。

上の画像のように、Adobe Edge Animate CC のステージに、分割したイラストを配置しました。

これでアニメーションを作成する準備ができました。

ファイル／名前を付けて保存から、ファイル名を入力して保存します。

キーフレームを追加する方法（アニメーションを作成する方法）には、手動／自動キーフレームモード／ピンの３つがあります。

それぞれ便利な方法を使用して、アニメーションを作成します。

今回はアニメーションの終了位置にエレメントが配置されているので、上の画像のように、ピンを使用してキーフレームを追加すると便利かと思います。

上の画像のように、長方形ツールとテキストツールで、リピート再生ボタンを作成します。

テキストには、Edge Web Fonts を使用しました。

エレメントパネルで、Ctrl キーを押しながら長方形とテキストを選択します。

右クリック／DIV 内のエレメントをグループ化をクリックします。

エレメントパネルの Group のアクションを開く／Click／再生をクリックして、Group をクリックすると再生するように設定します。

上の画像のように、アニメーションを設定します。

キャラクターのイージングは、イーズアウトの Elastic です。

パブリッシュしてアップロードします。

今回の解説でイラストから作成したアニメーションはこちらです。

シンプルなアニメーションですが、制作のヒントになりましたら幸いです。