ITツールの使い方

シンボルを作成し、そのシンボルをタイムライン上で呼び出して使う場合、指定がないとタイムラインが再生が始まると同時にシンボルの再生も始まり、シンボル内に定義された動作が終了すると、タイムラインの再生が続いていてもシンボルは操作終了時の状態のままタイムラインの指定に従って表示されるだけです。

そこで、タイムライン上のいつシンボルの再生を開始するかと、シンボルの再生が1回終わっても、継続して再生するようループ再生を設定しておく必要があります。

ます、タイムライン上のいつシンボルの再生を開始するかは、

1. タイムライン上のシンボルの［再生］レイヤーの［+］ボタンを押して表示されるメニューから［停止］を選択。
2. 再生ヘッドをシンボルの再生を開始したい時点に移動し、同じくメニューから［再生］を選択。

で設定します。

次にループ再生の指定は、タイムライン上での[再生]の指定だけでなく［コードエディター］を利用して、JavaScriptの命令を追加します。

まず、タイムライン上で必要な時間分シンボルの[再生を指定します。

次に、シンボル自体にループ再生の指定を行います。

1. [ウインドウ］-［コード］を選択し、［コードエディター］を表示します。
2. エディター左側の一覧から、ループ再生したいシンボルの右側にある［+］をクリックし、さらに、ポップアップしたウインドウの左側から［タイムライン］、右側から［complete］を選択（ダブルクリック）します。completeは、再生終了時に発生するイベントです。
3. すると再生終了時に実行する処理を記述したウインドウがポップアップしてくるので、さウインドウ右側の処理候補一覧から［再生］をクリックします。
4. こうしてコードウインドウの中に「sym.play();」という命令文が記述されます。

オブジェクトの中心が通過する軌跡をモーションパスとして、次の手順で定義します。

1. アニメーションを付けたいエレメントを選択します。
2. ［プロパティ］パネルの［位置とサイズ］欄にある［モーションパス］ラジオボタンを選択します。
3. この状態でキーフレームやピンツールを使って、アニメーションを作成します。アニメーションの作成方法は「エレメントのアニメーション」を参考にしてください。
4. ステージ上にエレメントの軌跡のパスであるモーションパスが表示されます。

モーションパスの編集

モーションパス上の任意の位置にマウスカーソルを近づけると、カーソルがペン形状と+の表示に変わります。この状態でクリックするとパスのアンカーポイントが作成され、さらにマウスをドラッグすると、その方向に引っ張られるようにモーションパスが曲線に変形します。アンカーポイントは、モーションパスに対して複数作成でき、アンカーポイントを削除したい場合は、［ctrl］キーを押しながらアンカーポイント付近へマウスカーソルを近づけ、カーソルがペン形状と-表示に変わったらクリックします。

アンカーポイント自体をドラッグすると、アンカーポイントの位置を移動できます。またタイムライン上の再生ヘッドをアンカーポイントを作りたいタイミングに移動し、対象エレメントをドラッグしても、アンカーポイントが追加されモーションパスが変わります。この場合タイムライン上にキーフレームも作成されます。なおこのキーフレームを削除しても、モーションパスのアンカーポイントは削除されずに残ります。

［プロパティ］-［位置とサイズ］欄にある［自動回転］チェックボックスをオンにすると、モーションパスの曲がり具合に応じてエレメントが回転する動きが追加されます。

曲線の曲がり具合を調整

アンカーポイントをクリックすると、PhotoShopeやillustoratorと同じような2つのハンドルが表示され、このハンドルをドラッグして曲線の曲がり具合を調整します。

2つのハンドルは、曲線が滑らかになるよう、片方を動かすともう片方もアンカーポイントを経由する直線上の位置へと連動して動きます。ハンドルを個別に動かしたい場合は、［alt］キーを押しながらハンドルをドラッグします。

ハンドル位置の編集をリセットしたい場合は、［alt］キーを押しながらアンカーポイントをクリックすると、ハンドルが削除され、鋭角な直線状態となります。このままマウスをドラッグすると、あらためてハンドルが作成され、位置の再調整ができるようになります。

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

エレメントをシンボル化する手順は以下の通りです。

1. アニメーションが付けられているエレメントを選択します。シンボルの選択は、ステージ上のエレメントをクリックするか、タイムライン上のエレメントのレイヤーをクリックします。複数のエレメントをまとめてシンボル化したい場合には、［ctrl］キーを押しながら選択します。
2. ［修正］メニュー→［シンボルに変換］を選択し、［シンボルを作成］ダイアログボックスの［シンボル名］にわかりやすい名前を入力して［OK］ボタンをクリックします。シンボルは、画面右側の［ライブラリ］パネルに登録されます。

シンボルの操作と編集

シンボルは、メインのタイムラインとは異なる独自のタイムラインを持ち、入れ子状のアニメーションが作成できます。また例えば3つのインスタンスのうち1つだけ、再生開始を500ミリ秒遅らせることもできます。

シンボルにループ再生を設定

［コードエディター］を利用して、JavaScriptの命令を追加しループ再生を行う手順は以下の通りです。

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

シンボルの編集

ステージ上のシンボル、または［ライブラリ］パネル内のシンボルをダブルクリックすると、シンボル内編集モードに移行します。メインのタイムラインに戻るには、左上のナビゲーションから「Stage」をクリックします。

なお、シンボルを編集すると、その変更内容は全てのインスタンスに反映されます。逆にインスタンスを変更しても、その内容はシンボルに反映されません。タイムラインのレイヤーが複雑になった場合、動かない背景やテキストなどを整理整頓のためにシンボル化するという使い方も出来ます。

１．コンテンツをパブリッシュする

まず、An側の準備として、ステージ上でオブジェクトが何もないところをクリック、［プロパティ］パネルにステージ（Stage）のプロパティを表示します。

プロパティーには［コンポジションクラス］欄に「EDGE-xxxxxx」というコンポジションクラス名が表示されています。この値はAnによって、他のAnコンテンツと区別するために付けられたIDのようなものです。コンポジションクラス名は、任意の名前に変更できるので、ここのコンテンツ内容に合わせた名前に変更します。