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

6-3 if関数でアクションを制御しよう

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

前回までで、左右のボタンに連動するアニメーションの設定ができました。
完成に近づいてきましたが、今の状態では同じボタンを押したときにアニメーションが繰り返し再生されてしまいます。
今回はif関数を使って、この動きを制御していく方法をみていきましょう。

トリガーを利用する

まずは、トリガーを利用した方法を試してみます。
ここでは、変数を用意します。変数の値が1か2かによって、ボタンを押したときにアニメーションを動かす、動かさないの判断を行うようにします。
コンテンツが再生されるタイミングをトリガーとして、変数に値を代入する処理を書いていきます。

1.トリガーを挿入する

・タイムラインのトリガーを挿入をクリックします。
トリガーを挿入
・変数名をmsgとし、スクリプトを書きます。
・var msg = 1;
変数名をmsgとし、スクリプトを書きます

2.ボタンに設定したアクションを編集する

・6-1で書いたsb_bt2のアクションを開き、アクションをifで囲みます。
・if (msg == 1){ 6-1のアクション msg = 2; }
sb_bt2のアクションを開き、アクションをifで囲む
・6-2で書いたsb_bt1のアクションを開き、アクションをifで囲みます。
・if (msg == 2){ 6-2のアクション msg = 1; }
sb_bt1のアクションを開き、アクションをifで囲む

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

動きましたでしょうか?残念ながら、ボタンを押しても無反応だったのではないかと思います。
実はこの書き方だと変数はローカル変数になります。ローカル変数は利用範囲が限定される変数です。
場合によってはローカル変数がふさわしいこともあるのですが、今回はグローバル変数にして、別の関数からも参照できるような場所で宣言しなければなりません。

グローバル変数として宣言する

せっかくトリガーにスクリプトを書きましたが、グローバル変数にするために変更を加えます。

コードパネルに書く

・トリガーに書いたものを消します。
トリガーに書いたものを消します
・メニューのウィンドウからコードを選択します。
メニューのウィンドウからコードを選択
・stageをクリックします。
・これまで書いたコードが表示されます。
stageを選択します
・function(“stage”)の直下に、先ほどトリガーに挿入で書いた宣言を書きます。
・var msg = 1;
トリガーに挿入で書いた宣言を書きます

var msg = 1;とします
ここに書くことで、グローバル変数として利用できるようになりました。
ブラウザでプレビューしてみましょう。今度はボタンのクリックに合わせて動くようになり、同じボタンを続けて押した場合はアニメーションが再生されないよう制御できました。

マウスカーソルの形を変える

マウスを合わせたときに、ボタンだとわかるよう、カーソルの形を変更します。

1.カーソルの変更

・プロパティパネルのカーソルのautoをクリックします。
・今回はカーソルをポインタにします。
カーソルをポインタにする

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

ボタンにマウスを合わせたときに、マウスの形がポインタに変わりました。

いかかでしたでしょうか。これでアニメーションは完成です。
次回からは完成したコンテンツをタブレットなどで表示してもバランスよく表示されるよう、レスポンシブレイアウトに変更していきます。

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



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

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