Edge Animate入門 第5回：シンボルを利用する

本記事では、Adobe Edge Animate CC（以下、Edge Animate）で作成したエレメントを、「シンボル」機能を使って再利用する方法を紹介します。

Edge Animate CC の体験版をダウンロード サンプルファイルをダウンロード

シンボルを作成する

Edge Animateでは、「シンボル」という仕組みを利用してエレメントをシンボル登録し、再利用できます。静止エレメントだけでなく、アニメーションを付け たエレメントも、一連のアニメーションをひとまとめにしてシンボル化できます。また、複数のエレメントをまとめてシンボル化できます。

※このシンボル機能は、Flash Professionalのムービークリップに非常によく似ています。

アニメーションを付けたエレメントをシンボル化してみましょう。エレメントをシンボル化する手順は以下の通りです。

  1. アニ メーションが付けられているエレメントを選択します。シンボルの選択は、ステージ上のエレメントをクリックするか、タイムライン上のエレメントのレイヤー をクリックします。複数のエレメントをまとめてシンボル化したい場合には、［ctrl］キーを押しながら選択します。

図1 シンボル化したいエレメントを選択します

  1. ［修正］メニュー→［シンボルに変換］を選択し、［シンボルを作成］ダイアログボックスの［シンボル名］にわかりやすい名前を入力して［OK］ボタンをクリックします。

図2 ［シンボルを作成］ダイアログボックスでシンボル名を入力します

これで、一連のアニメーションはひとまとめの「シンボル」として扱えるようになります。シンボルは、画面右側の［ライブラリ］パネルに登録されま す。この［ライブラリ］パネルからステージへとシンボルをドラッグ＆ドロップすると、そのシンボルの「インスタンス」（シンボルとして登録した一連のアニ メーションと同じ動きを持つエレメント群）が作成されます。インスタンスでは、個別に位置や大きさ、アニメーションなどを設定できます。

複数のインスタンスをステージに配置して、再生してみましょう。すると、個々のインスタンスがもとのアニメーションと同じように動くことが確認できますね。

図3 シンボル化したエレメントは［ライブラリ］パネルに登録されます。［ライブラリ］パネルからステージへとシンボルをドラッグ＆ドロップすると、そのシンボルの「インスタンス」が作成されます（サンプル：sample.an）

シンボルの操作と編集

シンボルは、メインのタイムラインとは異なる独自のタイムラインを持ち、入れ子状のアニメーションを作成できるようになります。シンボルの特徴や典型的な操作方法は、以下のようになります。

再生のタイミングを操作する

シ ンボルから作成したインスタンスをステージ上に配置すると、インスタンスごとのタイムラインに［再生］レイヤーが表示されます。この［再生］レイヤーの右 端、もしくは［プロパティ］パネルの［再生］欄にある［＋］ボタンをクリックして表示されるメニューから、シンボルの再生／停止のタイミングや、再生の開 始位置などを設定できます。

例えば、メインのタイムラインに3つのインスタンスを配置し、そのうち1つだけは500ミリ秒の時点から再生を開始したい場合には、次のように設定します。

  1. タイムラインの再生ヘッドを0ミリ秒の位置に移動し、［再生］レイヤーの［+］ボタンを押して表示されるメニューから［停止］を選択します。
  2. 再生ヘッドを500ミリ秒の位置に移動し、同じくメニューから［再生］を選択します。

これで、3つのインスタンスのうち1つだけ、再生開始を500ミリ秒遅らせることができます。

図4 再生ヘッドを0ミリ秒の位置に移動して［停止］を選択し、500ミリ秒の位置に移動して［再生］を選択します（サンプル：sample2.an）

ループ再生を行う

デフォルトの設定では、シンボルのアニメーションは、それぞれが終端まで再生された時点で停止します。これを、ループするアニメーションとしたい場合には、［コードエディター］を利用して、JavaScriptの命令を追加します。

［コードエディター］を使ってシンボルにループ再生の命令を追加するための手順は以下の通りです。

  1. ［ウインドウ］メニュー→［コード］を選択し、［コードエディター］を表示します。
  2. エディター左側の一覧から、ループ再生したいシンボルの右側にある［+］をクリックし、さらに［タイムライン］→［complete］を選択（ダブルクリック）します。completeは、再生終了時に発生するイベントです。
  3. 再生終了時に実行する処理を記述するためのひな形が自動で入力されます。さらに、エディター右側の処理候補一覧から［再生］をクリックします。
  4. 「sym.play();」という命令文が入力されたのを確認してエディターを閉じます。これで、全てのインスタンスがループ再生を行うようになります。

図5 シンボルをループ再生させるには、JavaScriptの命令を追加します。［コードエディター］を使えば、JavaScriptがわからずとも、項目を選ぶだけで命令を追加できます（サンプル：sample3.an）

シンボルを編集する

ステージ上のシンボル、または［ライブラリ］パネル内のシンボルをダブルクリックすると、シンボル内編集モードに移行します。シンボル内編集モードでは、独自のタイムラインを使って、シンボル内のエレメントの再配置や、アニメーションの編集を行えます。

ま た、シンボル内編集モードにおいて、位置などのスタイルの値は基本的に「シンボルの基準点（+マークのある位置）」が基準となります。例えば、シンボル内 のエレメントの座標モードを「グローバル」に設定し、座標の値を「x=50」「y=0」とした場合には、「メインのタイムラインの基準点から」ではなく、 「シンボルの基準点から、X方向に50、Y方向に0の位置へと配置されます。

図6 ［ライブラリ］パネル内のシンボルをダブルクリックして、シンボル内編集モードに移行したところ

なお、シンボルを編集すると、その変更内容は全てのインスタンスに反映されます。逆にインスタンスを変更しても、その内容はシンボルに反映されません。

シンボル化するメリット

このようにシンボルの仕組みを使うと、エレメントを再利用できるようになり、複雑なアニメーションも作りやすくなります。また、同じエレメントを複 数配置する場合、単にコピペするよりも、シンボル化してインスタンスとして複数配置した方がファイルサイズを抑えることができます。

また、 ちょっとイレギュラーなシンボルの使い方ですが、タイムラインのレイヤーが複雑になった場合、動かない背景やテキストなどを整理整頓のためにシンボル化し て置くと便利です（DOM的には入れ子になるdiv要素が1段階増えてしまうので、注意が必要な場合もあります）。