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

1-2 作成開始の準備と基礎知識

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

今回は、作成開始の準備と基礎知識について説明いたします。

まずは、完成したファイルをAdobe Edge Animate CCで開いてみましょう。

前回ダウンロードしたファイルのindex.anを開くと、このような画面が開きます。
EdgeAnimate完成例

この画面構成について説明いたします。

画面の基本構成

各領域について説明いたします。
  • プロパティパネル
    選択したオブジェクトのプロパティが設定できます。
    CSSにどのようなプロパティではき出されるのか、パッと見てわかります。
  • ステージ
    メインのキャンバス
  • タイムラインパネル
    FLASHとは似てるようで少し違うので、そちらに慣れている方はご注意ください。
  • エレメントパネル
    ドキュメントの構造を把握できたり、表示/非表示を切り替えることができます。
    またアクションがこのパネルで設定できます。
  • ライブラリパネル
    プロジェクト内で利用しているアセットやシンボル、WebFont等がリストで表示されます。

このように、EdgeAnimateCCは、5つの領域により成り立っています。

では、作成を始めましょう。

今回のアニメーションを作成するにあたって使用する素材は、以下の2つです。

サンプルファイル

◆ info.txt
◆ paris.png

これらをもとに、レスポンシブでかつインタラクティブなアニメーションを作成していきましょう。

次の記事では、いよいよ新規作成に入ります。

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



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

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