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

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

プロジェクトの新規作成

1.EdgeAnimateCCを起動します。

EdgeAnimateのトップ画面

2.「ファイル」メニューから「新規作成」を選択します。

・EdgeAnimateを初めて起動した場合には、このとき、レッスンパネルが表示されていると思います。
・「はじめに」から順番に行うと、EdgeAnimateCCの使い方がひととおり理解できる、チュートリアルとなっています。一度行ってみるとよいでしょう。
・今回はこのパネルは削除しておきます。

edgeAnimate新規作成

3.ステージサイズの設定を行います。

・幅640px × 高さ960px
・最小の幅 0px
・最大の幅 none
・ここの値は第7回に大きく変更しますが、最初は固定値で進めていくとわかりやすいでしょう。

EdgeAnimateステージサイズ

4.ステージのタイトルを設定しましょう。

・ステージタイトル 「Night Conference」

edge_stage_title

5.保存します。

・「ファイル」メニューから「保存」を選びます。
・保存場所と名前は任意で構いませんが、今後、PhoneGapというアプリを用いて、Android等のアプリとしてビルドすることができます。
・これを利用する可能性が少しでもある場合、「index」という名前にする必要があります。
・今回は、この可能性を少しだけ感じながら、名前を「index」としておきます。

EdgeAnimate保存

EdgeAnimateCCを一旦閉じて、保存されたものを見てみましょう。

EdgeAnimateで保存した時にできるファイル

◆ edge_includes(jQueryに使用するjsファイルが格納されている)
◆ jsファイルがいくつか(EdgeAnimateCCで設定するアクションのファイル)
◆ index.an(本体)
◆ index.html(本体)
ここで、(本体)が2つあります。
index.anはEdgeAnimateCCのプロジェクトファイルです。これを開くと、EdgeAnimateCCが一度で開きます。実はこのファイルは無くてもいいファイルです。
また、index.htmlをEdgeAnimateCCで開くと、index.anと同じものが開きます。
これらのどちらを開いて作業するかは、お好みで選んでいただいて大丈夫です。

次の記事では、背景画像を読み込みます。
画像を読み込むと、どのように画面が変化するのかを見てみましょう。

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



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

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