Adobe Animateを使ってみる

2023.02.05

アニメーション作成ソフトのAdobe Animateを簡単に触ってみます。

使い方

まずはAdobe Animateを使ってアニメーションを作成してみます。
アプリを起動して、新規作成を選択します。

左メニューの線ツールで線を引きます。

ペンツールを選択して、線にポイントを追加します。

この追加したポイントをアニメーションさせてみます。
タイムラインで30フレーム目を選択して、キーフレームを挿入します。

5フレーム目を選択して、キーフレームを挿入します。

10フレーム目を選択して、ダイレクト選択ツールで追加したパスをそれぞれ適当に移動させます。

5フレーム目を選択して、シェイプトゥイーンを挿入します。

15,20,25フレーム目でも同様にパスを移動して、シェイプトゥイーンを挿入します。

30フレーム目はパスの移動をしないで、25フレーム目を選択してシェイプトゥイーンを挿入します。

これでアニメーションの設定が完了しました。
最終的なタイムラインは以下のようになっています。

画面右上のムービープレビューからプレビューの確認ができます。

上記で作成したアニメーションを実際に書き出してみます。

まずはアニメーションGIFで書き出してみます。
ファイル > 書き出し > アニメーションGIFを書き出しを選択します。

書き出しの設定を適宜変更します。

アニメーションGIFでの書き出しができました。
アニメーションGIFで書き出すデモページ

次にcanvasで動作するように書き出してみます。
ファイル > パブリッシュ設定を選択します。

左の項目でJavaScript/HTMLにチェックを入れ、出力名を設定した上で適宜設定を変更してパブリッシュをクリックします。

これでHTMLとJavaScriptのファイルが生成されました。
canvasで書き出すデモページ

ちなみにパブリッシュ設定でSVGを選択することもできますが、アニメーションとしての書き出しはできない？ようでした。