シンボル専用のタイムライン

最終更新日 2013/12/26

イラストからアニメーションに続いて、シンボルの使い方です。

Adobe Edge Animate CC を使って、アクセサリーの商品紹介ページ（サンプル）を作ります。

「公式サイト：シンボルを使ったアニメーションの作成 | Adobe TV」

上の画像は、Adobe Photoshop CC で色調とサイズを調整した写真素材です。

写真を選択して、Adobe Edge Animate CC のステージにドラッグ＆ドロップします。

ライブラリパネルとエレメントパネルに写真が追加されました。

Stage の幅（W）を 600px 高さ（H）を 600px に設定しました。（プロパティパネルで設定します）

写真を選択して右クリック／シンボルに変換をクリックします。

シンボルを作成ダイアログボックスが表示されます。

シンボル名を入力します。そのままでも構いません。

今回は、クリックしたら再生するように設定したいので、タイムラインを自動再生のチェックは外します。（自動再生の設定は、シンボルのプロパティパネルから変更できます）

シンボルに変換した写真をダブルクリックします。（修正／シンボルを編集でも構いません）

上の画像のように、シンボル専用のタイムラインが表示されます。

シンボル機能は、メインのタイムラインとは別の「シンボル専用のタイムライン」を持つことが特徴です。

テキストツールで、写真を元の位置に戻すボタンを作成します。

ピンを使って、写真が大きくなるアニメーションを設定します。

写真が大きくなると、Return ボタンが上部に移動します。

アクションで、写真をクリックすると再生するように設定します。

アクションで、テキストをクリックすると逆再生するように設定します。

Stage に戻り、同じ設定を他の写真にも行います。

シンボル（４枚の写真）の設定が完了したら、テキストを入力します。

メインのタイムラインで、１秒かけてコンテンツが表示されるように設定して完成です。

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

今回の解説で作成したアクセサリーの商品紹介ページ（サンプル）はこちらです。

シンプルな商品紹介ページですが、制作のヒントになりましたら幸いです。