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

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

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

今回はアニメーションを設定したコンテンツに対して、ボタンをクリックするとアニメーションが動くといった、インタラクティビティーを与えるためにアクションを設定します。

完成例を見てみましょう。
下のボタンをクリックするとコンテンツが入ってくるというインタラクティビティーを設定します。
EdgeAnimate完成例
前回、再生コマンドで停止をかけた状態になっているので、今回はこれを再生するスクリプトを書き込みます。
ここではハンドコーディングより効率のいい方法を試します。

スクリプトの設定

one night standのボタンを押した時、sb_info2を表示させ、sb_info1がはけるスクリプトを書いていきます。

1.スクリプトを設定したいシンボルを選択します

・右側のボタンのone night stand をクリックします。
ボタンのone night stand をクリック

2.アクションを設定します

・エレメントパネルの左にある{ }(アクション開く)をクリックします。
アクション開くをクリック
・+(プラス)記号をクリックし、「click」を選びます。
clickを選びます
・右側のスニペットの中から「シンボルを取得」を選択します。
シンボルを取得を選択します
・操作方法のサンプルが緑の文字で表示してあるので、ここでは選択してDeleteで消してしまいます。
サンプルが緑の文字をDeleteで消します

3.シンボルを取得の変数を編集します

・変数にはサンプルが入っていますので、操作に合わせて編集を行います。
・mySymbolObjectをinfoText1にします。
・Symbol1をsb_info1にします。

<変更前>
変数を編集前
<変更後>
変数を編集後

4.再生を選択し、変数を編集します

・右のスニペットから「再生」をクリックします
再生をクリック
・変数を編集します。
・sym.play();をinfoText1.play();に変更します。

<変更前>
変数を編集前
<変更後>
変数を編集後

5.ブラウザでプレビュー

・ブラウザでプレビューし、右のボタンをクリックするとsb_info1がはけるようになったか確認します。

6.sb_info2が入ってくるようコードを追加

・infoText1として書いたスクリプトをコピーし、下に貼り付けます。
スクリプトをコピーし下に貼り付け
・貼り付けた内容を編集します。
・1となっているところを全て2に変更します。
貼り付けた内容を編集

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

・ブラウザでプレビューし、右のボタンをクリックするとsb_info1がはけ、さらにsb_info2が入ってくるようになりました。

スクリプトの手直し

スクリプトはもっと簡潔に書くことができますので手直ししてみましょう。
変数を作り、代入して、その変数を再生しているので変数を利用せずに、対象を再生するスクリプトにすることで簡潔になります。
スクリプトの簡略化

保存してブラウザでプレビューします。
スクリプトの書き方は変わりましたが、先ほどと同様に再生できます。

いかがでしたでしょうか。次回は左のボタンのtime scheduleにスクリプトを追加していきます。
今回設定した右のボタンどのように違うか予想してみてください。

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



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

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