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

5-3 information2のアニメーション作成

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

今回はinfomation2にアニメーションを設定していきます。
前回設定したinformation1と合わせると交互に入れ替わるアニメーションになります。

infomation2のアニメーションを作成

infomation1とinfomation2が交互に入れ替わるように見せるため、ふたつを重ねた配置に設定します。

1.開始位置の設定をします

・右によけておいたシンボルを選択します。
右のシンボルを選択します
・自動キーフレームモードをオフにします。
自動キーフレームモードをオフ
・開始位置を240pxにします。
開始位置を240px
・下のように、infomation1に重なった状態になります。
infomation1に重なった状態になります
・シンボルが重なり合うと選択しにくくなるので、information1を非表示にして操作をしやすくします。
・エレメントパネルでsb_info1の目のマークをクリックし、非表示にします。
information1を非表示

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

・ダブルクリックし、シンボルの編集モードにします。
シンボルの編集モード
・タイムラインを先頭に移動します。
タイムラインを先頭に移動
・自動キーフレームモードをオンにします。
自動キーフレームモードをオン

InfoMat2に動きをつけます

最初はinfomation2が表示されていない状態から、ふわっと入ってくるようにします。
次に、マットが入ってきたら、中央に表示されるように設定します。

1.マットを選択し、キーフレームを追加します

・InfoMat2を選択します。
InfoMat2
・左にキーフレーム追加します。
左にキーフレーム追加
・アルファを0にします。
アルファを0

3.タイムラインの移動

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

4.マットの位置を調整

・マットが中央に配置されるよう位置を調整します。
・マットを左に-200px動かします。
マットを左に-200px

5.アルファの調整

・色がついてマットが出てきたように見せるためアルファを調整します。
・アルファを100%にします。
アルファを100%

これでマットがふわっと入ってくるように見えるアニメーションがつきました。
つづいてテキストにもアニメーションをつけます。

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

最初は非表示の状態から、1秒かけてぼけたテキストが徐々に表示されるようにします。
テキストはマットのように移動せず、中央の位置で表示されるよう設定します。

1.InfoText2を選択します

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

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

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

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

・タイムライン1秒にします。
タイムライン1秒
・アルファを1にします。
アルファ1
・ぼかしを0にします。
ぼかしを0
・自動キーフレームモードをオフにします。
自動キーフレームモードをオフ
・左に-200pxに移動します。
左に-200pxに移動

4.タイムラインの開始位置の変更

・自動キーフレームモードをオンにします。
自動キーフレームモードをオン

infomation2のタイミングを調整する

自然な動きにするために、infomation2が少し遅れて出てくるよう調整します。

1.infomation2が0.5秒あけたタイミングで出てくるよう調整

・タイムラインをドラッグするようにInfoText2とInfoMat2をまとめて囲み、選択します。
タイムラインを選択します
・全体を0.5秒うしろにずらします。
0.5秒うしろにずらします
・シンボルの編集モードを解除して、メインのステージに戻ります。

2.保存して、プレビューします

保存して、プレビューします。
information2につけたアニメーションが確認できるようになりました。何度かリロードして動きを確認してみてください。
ふわっとマットが表示され、テキストがぼやけた状態からはっきりしてくるようになりました。

設定がたくさんありましたがいかがでしたでしょうか。
次回からはボタンとマットが連動するよう動きを調整していきます。

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



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

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