スマート プレゼンター®でセミナー撮影

5-1 informationのアニメーション作成の準備

この講座は、Adobe Edge Animate CCを使用し、フラッシュを使わないでHTMLのインタラクティブなアニメーションを作成し、また、作成したコンテンツを、レスポンシブなレイアウトにしてタブレットデバイスで表示する、ということを目標に進めていきます。

この回ではアニメーション作成の準備として、シンボル化の手順をご説明します。
完成例のメインのコンテンツの動きを見てみましょう。

EdgeAnimate完成例

下のふたつのボタンを交互にクリックすると、中央のメインのコンテンツが動きます。
このような制御を行う場合、オブジェクトをシンボルに変換するシンボル化を行い、シンボルの中でアニメーションするよう設定します。

information1をシンボル化する

ここではinformation1をシンボル化する方法を確認します。

1.information1を選択

information1のタイトルマットとタイトルテキストをまとめて選択します。
information1の選択

2.「シンボルに変換」します

・修正メニューのシンボルに変換を選択
・ショートカットキーの場合はcommandキーとYキーを使います
シンボルに変換します

3.シンボルに名前をつける

・シンボルを作成ダイアログボックスが開きます。
・シンボル名 sb_info1
・ライブラリパネルに登録されます。
・シンボル名は同じ名前はつけられません。
シンボルに名前をつける

information2をシンボル化する

つづいて、information2をシンボル化する方法を確認します。

1.information2を選択

information2のタイトルマットとタイトルテキストをまとめて選択します。
information2のタイトルマットとタイトルテキストを選択

2.「シンボルに変換」します

・修正メニューのシンボルに変換を選択
・ショートカットキーの場合はcommandキーとYキーを使います

3.シンボルに名前をつけます

・シンボル名 sb_info2
シンボル名 sb_info2

ボタン1をシンボル化します

ボタン1をシンボル化する方法を確認します。

1.ボタン1を選択

ボタン1のマットとテキストを選択します。
ボタン1のマットとテキストを選択

2.「シンボルに変換」します

・修正メニューのシンボルに変換を選択
・ショートカットキーの場合はcommandキーとYキーを使います

3.シンボルに名前をつけます

・シンボル名 sb_bt1
シンボル名 sb_bt1

ボタン2をシンボル化する

ボタン2をシンボル化する方法を確認します。

1.ボタン2選択

ボタン2のマットとテキストを選択します。
ボタン2のマットとテキストを選択

2.「シンボルに変換」します

・修正メニューのシンボルに変換を選択
・ショートカットキーの場合はcommandキーとYキーを使います

3.シンボルに名前をつけます

・シンボル名 sb_bt2
シンボル名 sb_bt2

4.ライブラリパネルとタイムラインの確認

・ライブラリパネルとタイムラインにシンボルが登録されているか確認します。
・シンボルに変換したので、ライブラリパネルのシンボルに登録されているのが確認できます。
ライブラリパネルのシンボル

・タイムラインでもシンボル化されているのを確認できます。
タイムラインでもシンボル

今回はシンボルに変換する手順をみてきました。
シンボル化の操作には慣れていただけましたでしょうか。
これで4つのシンボルが完成しました。

次回はinformation1のアニメーションを作成していきましょう。

<前のトピックへ || 次のトピックへ>



各種IT教材と販促支援物の制作承ります

講義、講演会の撮影承ります