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

2-1 タイトルマットの作成

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

今回は、ビジュアルの部分を完成させていきます。
まずはタイトル部分から作成していきましょう。

タイトルマットの作成

1.タイトルマットとなる長方形を作成します。

・長方形ツールをクリックします。
長方形の作成
・任意のサイズで長方形を作成します。サイズと位置は後から調整します。
長方形を描く

2.タイトルマットの色とアルファの設定をします。

・プロパティパネルのカラーで設定します。
・色 黒
・アルファ 50%
タイトルマットのカラーを設定

3.位置やサイズを正確に整えます。

・プロパティパネルの位置とサイズで設定します。
・サイズの調整は幅と高さの縦横比を保持のマークを外した状態にすると、それぞれのサイズを別々に入力できます。
・左 40px
・上 40px
・幅 560px × 高さ 100px
位置やサイズを正確に整える

4.角丸の設定をします。

・プロパティパネルの角で設定します。
・1を選択
・角丸 10px
角丸の設定

5.タイトルマットに名前を設定します。

・プロパティパネルにてタイトルを設定します。
・タイトルマットの名前 「TitleMat」
タイトルマットに名前を設定

これでタイトルマットの設定ができました。
続いてタイトルテキストを作成していきましょう。

タイトルテキストの作成

1.タイトルテキストを入力します。

・「テキスト」ツールを選択します。
タイトルテキストを入力
・任意の位置やサイズにドラッグし、テキストを入力します。
・タイトルテキスト 「Night confernce in Paris」
タイトルテキスト詳細を入力

2.テキストエリアの調整をします。

・タイトルマットの左辺に合うように、テキストエリアの左辺を調節します。
・ピタッとはまるところがあると思います(スマートガイドとスナップ)。そこに合わせましょう。
・右辺も同じように、タイトルマットの右辺と合わせましょう。
テキストエリアの調整

3.テキストの設定します。

・プロパティパネルのテキストで設定します。
・色 白
・text-align 中央揃え
・フォントサイズ 36px
テキストの設定
・テキストが配置できました。
テキストの配置

4.タイトルテキストの要素を設定します。

・EdgeAnimateでは要素の設定も同時にできます。
・このままだと、divとして書き出されてしまいます。
・ここでは見出し1に設定したいのでh1に変更します。
見出しに変更する

5.タイトルテキストに名前を設定します。

・タイトルマットの名前 「TitleText」
タイトルテキストに名前を設定

6.保存します。

これでタイトル部分が完成しました。
次の記事ではInformationコンテンツの作成に進みます。

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



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

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