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

5-2 information1のアニメーションを作成

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

今回はボタンとinfomation1にアニメーションを設定していきます。

ボタンにアニメーションを設定します

まずは、ボタンの濃淡(アルファ)が変化するアニメーションの設定をしていきます。

1.ボタンを選択します

・シンボル化されたボタン1とボタン2をまとめて選択します。
ボタン1とボタン2をまとめて選択

2.タイムラインを先頭に戻します

・タイムラインの再生ヘッドを先頭に戻します。
再生ヘッドを先頭

3.ピンの切り替えを選択し、ピンの位置を移動

・ピンの位置を0.5秒にします
ピンの位置を0.5秒

4.アルファを調整します

・アルファを0にします
アルファを0

5.ピンの切り替えを解除します

・ピンの切り替えをクリックしピンを解除します。
ピンを解除します

これでボタンのアルファが変化するアニメーションがつきました。

シンボルを使った入れ子のアニメーションを作成

つづいて、information1のアニメーションを作成していきます。
ここでは編集モードで作業をすすめます。
前回シンボル化していますので、編集モードに切り替えるにはシンボルをダブルクリックします。
また、編集モードを解除したい場合は、シンボル以外の部分をダブルクリックします。

1.シンボルの編集モードにします

・sb_info1をダブルクリックします。
sb_info1をダブルクリック
・編集モードに切り替わりマットとテキストが別々に選択できるようになります。
編集モードに切り替わります

2.タイムラインの調整

・タイムラインの再生ヘッドを先頭にします。
再生ヘッドを先頭

InfoMat1に動きをつける

ここでは、InfoMat1が0.5秒で透明になって、左にはけて消えていく動きをつけてみましょう。

1.マットを選択します

・InfoMat1を選択します。
マットを選択

2.キーフレームを追加します

・位置とサイズのプロパティで左にキーフレームを追加します。
左にキーフレームを追加

・アルファのキーフレームを追加します。
アルファのキーフレームを追加

3.タイムラインの移動

・タイムラインの再生ヘッドを0.5秒に移動します。
再生ヘッドを0.5秒

4.マットの位置を調整

・左へずれて画面の外へ消えていくアニメーションにしたいのでマットの位置をマイナスで指定します。
・左 -180px
マットの位置を調整

5.アルファの調整

・アルファを0にします。
・アルファを調整した効果により徐々に消えていくアニメーションになります。
アルファを0
これで、マットが徐々に消えていくアニメーションができました。
続いて、テキストにもアニメーションをつけていきましょう。

InfoText1にアニメーションをつけます

ここでは、テキストが1秒かけてぼやけながら消えていくアニメーションをつけていきます。

1.InfoText1の選択

・タイムラインを先頭にしておきます。
・InfoText1を選択します。

2.キーフレームを設定します

・アルファにキーフレームを設定します
アルファにキーフレームを設定
・ぼかしにキーフレームを設定します
ぼかしにキーフレームを設定

3.タイムライン、アルファ、ぼかしの設定

・タイムラインの再生ヘッドを1秒に移動します
タイムラインの再生ヘッドを1秒に移動
・アルファを0に設定します
・アルファを0
・ぼかしを5pxに設定します
ぼかしを5pxに設定

4.タイムラインの終了点の設定

・アニメーションが終わった後でその状態を少し維持するための工夫をつけ加えておきましょう。
・タイムラインの再生ヘッドを1.5に移動します。
・InfoText1、InfoMat1の設定の全てにキーフレームを追加します

タイムラインの終了点の設定
タイムラインの終了点に工夫を加えることで、自然なアニメーションになります。

5.保存して、ブラウザでプレビューで内容を確認します

インフォメーションのマットが左にはけていくと同時に、文字がぼやけながら、だんだん消えていきます。
何度かプレビューして変化を確認してみてください。

いかがでしたでしょうか。
これで、information1にアニメーションがつきました。

次回はinformation1に入れ替わるようにinformation2が入るようアニメーションを設定していきます。

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



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

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