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

6-2 ボタンを押したときのアクションを作成しよう その2

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

前回は、左ボタンでアニメーションが動くよう設定しました。
今回は、右のボタンをクリックしたときのinfomationの動きを設定していきましょう。

まず、右のボタンをクリックしたときどのような動きにしたいかを考えます。
右のボタンをクリックした時に、sb_info2がはけて、sb_info1が中央へ入ってくるよう設定したいので、左のボタンをクリックしたときの動きの、逆の動きをすればよいということになります。

右ボタンのスクリプトを設定

逆の動きをするということは、スクリプトはとても似たものになりますので、コピーで利用し、一部を変更していきます。

1.左ボタンのスクリプトを利用

・sb_bt2のアクションを開きます。
sb_bt2のアクションを開きます
・アクションをコピーします。
6-1のアクションをコピー
・sb_bt1のアクションを開きます。
アクション開くをクリック
・+(プラス)記号をクリックし、「click」を選びます。
clickを選びます
・コピーしたsb_bt2のスクリプトを貼付けます。
コピーしたスクリプトを貼付けます

2.逆再生のスクリプトに変更する

・逆再生のスクリプトを確信するために、逆再生のスニペットをクリックします。
逆再生のスニペットを確認
・逆再生はplayReverseであることがわかりました。
・確認に利用したスクリプトの一部をコピーします。
逆再生はplayReverseであることがわかります
・確認に利用したスクリプトはコピーしているので、消してしまいます。
・playをplayReverseに書き換えます。
・これで、シンボルを取得して逆再生のスクリプトになります。
playをplayReverseに書き換えます

3.保存して、ブラウザでプレビューします

左のボタンを押すとsb_info2がはけて、sb_info1が中央へ入ってくるアニメーションができました。
完成したように見えますが、さらに考えなければならないことがあります。
同じボタンを続けて押してみましょう。一度元の状態に戻って、また動いてしまいます。

次回は、ボタンと連動するコンテンツが表示されているときは、機能を止めるといった制御をif関数を利用して追加していきましょう。

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



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

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