要素のアニメーションをずっと繰り返す - ムービークリップのシンボルを利用 - Animate

Adobe Animateで要素のアニメーションをずっと繰り返す方法を紹介します。

概要

要素をずっと回転させた状態にしたいなど、シーンの一部の要素をループして繰り返すアニメーションを作成したい場合があります。 Adobe Animateでは、ムービークリップのシンボルを利用することで、要素のアニメーションを繰り返すことができます。

手順

今回は配置した画像をずっと回転している状態で画像の位置が動くアニメーションを作成します。

Adobe Animateを起動し、ドキュメントを開くか作成します。シーンのキャンバス編集画面を表示します。

画像の読み込み

イメージのシンボルを作成して画像を配置するか、または画像をライブラリに読み込みます。シンボルの作成手順はこちらの記事を参照してください。

ムービークリップのシンボルの作成

別のシンボルを追加します。[新規シンボルの作成]ダイアログが表示されますので、名称を設定し、[種類]の欄を[ムービークリップ]に設定してシンボルを作成します。シンボルの作成手順はこちらの記事を参照してください。

ムービークリップのシンボルが作成されます。シンボルの編集画面が表示されます。

先に読み込んだ、イメージのシンボル、または画像をドラッグして、ムービークリップのシンボルのキャンバス(ステージ)にドロップします。

シンボルをドロップすると、イメージがキャンバス(ステージ)上に配置されます。

タイムラインパネルの画像を配置したレイヤーを選択した状態で、最初のフレームを選択して右クリックします。下図のポップアップメニューが表示されます。 [モーショントゥイーンを作成]の項目をクリックします。

モーショントゥイーンが作成されます。

右側のエリアの[プロパティ]タブをクリックし、プロパティパネルを表示します。プロパティタブが画面に表示されていない場合は、 [ウィンドウ]メニューの[プロパティ]の項目をクリックしてプロパティパネルを表示します。

プロパティパネルの上部の[フレーム]をクリックします。下図の表示に切り替わります。

プロパティパネルの[トゥイーン]のセクションの[回転]のコンボボックスをクリックします。ドロップダウンリストが表示されますので、回転したい方向を選択します。今回は[時計回り]の項目をクリックして選択します。

[回転]の右側の[回数]と[角度]の値を設定します。

モーショントゥイーンでどのくらい画像を回転するかを設定します。今回は24フレームで1回の回転とします。おおよそ、1秒間に1回の回転速度になります。

設定ができたら、タイムラインパネルの時間のインジケーターを移動してアニメーションを確認します。時間の変化とともに配置した画像が、時計回りに回転する様子が確認できます。

プロパティパネルの[オブジェクト]タブをクリックし、[ループ]セクションのループの設定が[グラフィックをループで再生]ボタンが選択されている状態であることを確認します。

設定ができたら、ウィンドウ上部の左矢印ボタンをクリックし、ムービークリップの編集画面を抜けます。

ムービークリップのシンボルのシーンへの配置

シーンの編集画面に戻ります。

[ライブラリ]パネルを表示し、先ほど編集したムービークリップのシンボルの項目をドラッグし、シーンのキャンバスにドロップします。

ムービークリップで作成した画像がキャンバンス上に表示されます。

自由変形ツールで選択し、リサイズして位置を調整します。

動作確認

この状態でプレビューして動作を確認します。[制御]メニューの[プレビュー]の項目をクリックします。

Webブラウザが起動し、ページが表示されます。画像が回転し続けるアニメーションが表示されます。

ムービークリップのシンボルに移動のアニメーションを追加する

シーンに配置したムービークリップのシンボルに、移動のアニメーションを追加し、回転しながら移動するアニメーションにします。タイムラインパネルで配置したムービークリップのレイヤーのフレームを選択した状態で右クリックします。下図のポップアップメニューが表示されます。[モーショントゥイーンを作成]の項目をクリックします。