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

この記事では、ボタンを作成していきます。

ボタンマット1の作成

1.「長方形」ツールで、任意のサイズで長方形を作成します。

長方形ツール
任意のサイズで長方形を作成

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

・プロパティパネルの「カラー」で設定します。
・色 濃いブルー
・アルファ 50%
タイトルマットの色とアルファの設定

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

・スナップで配置をします。
位置やサイズを調整
・プロパティパネルの「位置とサイズ」で設定します。
・幅 250px × 高さ 100px
プロパティパネルの位置とサイズ

4.ボタン1に名前を設定します。

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

ボタンテキスト1の作成

1.ボタンテキスト1を入力します。

・「テキスト」ツールを選択します。
ボタンテキスト1を入力
・任意の位置やサイズにドラッグし、テキストを入力します。
・ボタンテキスト1 「time schedule」
time schedule

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

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

3.ボタンテキスト1に名前を設定します。

・ボタンテキスト1の名前 「btText1」
ボタンテキスト1に名前を設定

ボタン2の作成

1.ボタンマット1とボタンテキスト1を選択し、コピーします。

・WindowsではAltキー、Macではoptionキーを押しながらドラッグします。
・shiftキーを押しながらだと、位置を固定してコピーすることができます。
・Informationマット1の右辺に合うように、右辺を調節します。
・ピタッとはまるところがあると思います(スマートガイドとスナップ)。そこに合わせましょう。
ボタンマット1とボタンテキスト1をコピー

2.ボタンテキスト2を入力します。

・ボタンテキスト2 「one-night stand」
ボタンテキスト2を入力

3.ボタン2に名前を設定します。

・ボタンマット2の名前 「btMat2」
ボタン2に名前を設定
・ボタンテキスト2の名前 「btText2」
btText2

4.保存します。

これでビジュアルの完成です。
各エリアのサイズは、スナップやスマートガイドを使用して素早く設定することができます。
また、プロパティパネルに値を入力することによって正確に設定することもできるのです。

次回は、WebFontsについて説明します。
完成例を見ていただくとわかると思うのですが、
テキストにはいい感じのフォントが適用されています。
これについて、説明していきます。

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



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

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