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

3-1 Edge Web Fontsを使ってみよう

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

前回までに作成したコンテンツのテキスト部分に対して、Edge Web Fontsを適用することで、
もっと見栄えよく変更していきましょう。

Edge Web Fontsとは

Adobe Edge Web FontsのWebサイトへ

Edge Web Fontsの適用は非常に簡単です。
さて、さっそく変更を加えていきましょう。

タイトルテキスト

1.タイトルテキストを選択します。

タイトルテキストを選択

2.EdgeAnimationで使用できるフォントを追加し適用します。

・プロパティパネルの「テキスト」でフォントのプルダウンの横の「Webフォントを追加」を選択します。
Webフォントを追加を選択
・Edge Web Fontsパネルが開くのを確認します。
Edge Web Fontsパネルが開く
・見出し用のアイコンを選択します。
・見出しに向いたテキストフォントの絞り込みができます。
見出し用のアイコンから選ぶ
・タイトルテキストフォントを選びます。
・今回はPoiret Oneを選択します。
Poiret One
・パネルの右下の「フォントを追加」をクリックします。
フォントを追加をクリック
・適用を行うと、ライブラリパネルのフォント一覧にも追加されるので確認しましょう。
ライブラリパネル

Informationテキスト1にフォントを設定します。

・フォントを検索して適用する方法で操作してみましょう。

1.Informationテキスト1を選択します。

Informationテキスト1を選択

2.EdgeAnimationで使用できるフォントを追加し適用します。

・Edge Web Fontsパネル内の検索バーを使用して、フォントを検索し、追加します。
・Informationテキストフォント1 Josefin Sans
EdgeAnimationで使用できるフォントを追加し適用

Informationテキスト2にフォントを設定します。

・検索して追加したフォントを適用する方法で操作してみましょう。

1.Informationテキスト2を選択します。

Informationテキスト2を選択

2.フォントを適用します。

・プロパティパネルの「テキスト」でフォントのプルダウンを開きます。
・Informationテキストフォント2 Josefin Sans を選択します。
フォントを適用

ボタンテキストにフォントを設定します。

1.ボタンテキスト1、2を選択します。

・ボタンテキスト1を選択したあと、ボタンテキスト2をshiftキーを押しながらクリックするとまとめて選択できます。
ボタンテキスト1と2を選択

2.EdgeAnimationで使用できるフォントを追加し適用します。

・Edge Web Fontsパネル内の検索バーを使用して、フォントを検索する
・Informationテキストフォント Nova Square
Nova Squareを検索し追加

ここで、ファイルを保存します。
次に、作成したコンテンツをブラウザで見てみましょう。

ブラウザでプレビュー

1.「ファイル」から「ブラウザでプレビュー」を選択します。

ブラウザでプレビュー
きちんと表示されましたでしょうか。

このように、Webフォントを簡単に利用することができます。
これが、EdgeAnimateの特徴です。

次回からはいよいよアニメーションに入ります。
まずは簡単なところから順を追って説明していきます。

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



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

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