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

4-5 タイトルのアニメーションを作成しよう

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

前回まではアニメーションの作成方法をみてきました。
今回はいよいよ、コンテンツに実際にアニメーションをつけていきます。
ここでは

■ イージングによる方法
■ CSSのプロパティ設定による方法

の2つの方法について操作してみましょう。

マットのスライドイン

タイトルが左からスライドインするアニメーションをつけます。

1.タイトルマットとタイトルテキストを左からスライドインさせる

・前回作成した円は選択してdeleteで消しておきます。
・タイトルマットとタイトルテキストを選択します。
タイトルマットとタイトルテキストを選択
・ピンの切り替えをクリックし、1秒後にピンを動かします。
ピンの切り替えをクリックし、1秒後にピンを移動
・タイトルマットとタイトルテキストを少し左に動かします。
・Shiftキーを押しながら移動すると水平に移動できます。
タイトルマットとタイトルテキストを少し左に移動
・アルファをゼロにします。
アルファをゼロにします

2.ブラウザでプレビューし確認します

ブラウザでプレビュー
タイトルマットとタイトルテキストが左からスライドインしてくるアニメーションをご確認いただけましたでしょうか。

この設定では同じスピードでスライドインします。次におこなうイージングの設定でスライドインの加速度に変化をつけてみましょう。

イージングの設定

マットがスライドインする時の加速度に変化をつけます。

1.位置のプロパティを設定します

・タイトルマットとタイトルテキストを選択します。
・タイムラインで、タイトルテキストの位置のプロパティをクリック後、Shiftキーを押しながらタイトルマットの位置のプロパティをクリックします。
タイトルマットとタイトルテキストを選択

2.イージングの設定

・イージングのアイコンをクリックします。
イージングのアイコン
・イーズアウトのCubicを選択します。
eイーズアウトのCubicを選択

3.ブラウザでプレビューします

ブラウザでプレビューし動きを確認してみましょう。
先ほどのプレビューと比較し、わずかながらイージングの効果を感じることができましたでしょうか。

次は、CSSフィルタのプロパティの設定による効果をつけてみましょう。

CSSフィルタのプロパティの設定するための準備

CSSフィルタのプロパティを設定する前に微調整をしておきます。

CSSフィルタのプロパティを設定する前の調整

タイトルテキストの位置のプロパティをクリックし、Deleteキーで削除します。
タイトルテキストの位置のプロパティを削除
自動キーフレームモードをオフにし、ピンもオフにします。
キーフレームモードをオフにし、ピンもオフ
タイトルテキストの位置を調整します。
・左 40
タイトルテキストの位置を調整
不透明度の開始位置の調整
・タイムラインをクリックし、ドラッグして開始位置を0.25秒に調整します。
edge_4_5_15
タイトルマットの終了位置の調整
・タイムラインの終了位置が0.5秒になるよう左へドラッグします。
タイムラインの終了位置が0.5秒

準備が整いましたので、CSSフィルタのプロパティの設定にすすみましょう。

CSSフィルタのプロパティの設定

ここでは、タイトルテキストがふわっと現れるよう、CSSフィルタのプロパティにぼかしを設定します。

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

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

2.テキストの再生ヘッドの調整

・再生ヘッドの開始位置を0.25秒にします。
再生ヘッドの位置を0.25秒

3.開始点のぼかしの値を調整

・フィルターのプロパティを開きます。
・フィルター ぼかし 5pxにします。
ぼかしの値を5pxに

4.再生ヘッドを終了点にします

・再生ヘッドの終了点の1.25秒にします。
再生ヘッドの終了点の1.25秒

5.終了点のぼかしの値を調整

・フィルター ぼかし 0px
終了点のぼかしの値を0pxに

6.保存し、ブラウザでプレビュー

・タイトルテキストがふわっと現れるようになります。

今回は、イージング、CSSのフィルタのプロパティを設定した効果についてご紹介しました。
こうした効果をつけることで、サイトの質をより高めることができます。

CSSフィルタはブラウザによって対応していないものがあり、対応していない場合は注意が表示されることがあります。

次の記事では、シンボルを利用し、応用的なアニメーションのテクニックを試していきます。

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



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

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