Edge Animateの「シンボル」でスライドパネルを制作 (2/3)
2013年05月16日 11時00分更新
各スライドへジャンプするページングボタンをつける
次に、各スライドに直接移動できるページングボタンを設置しましょう。また、表示中のスライドが分かるように、ページングボタンのオン／オフの表示も切り替わるようにします。
シンボル機能を使ってオン／オフボタンを作る
Edge Animateには、エレメント（画像など）ひとつひとつに対して、ステージから独立した個別のタイムラインを持たせられる「シンボル」という機能があります。シンボル機能を使うことによって、アニメーションを入れ子にして複雑な動きを表現できるようになります。また、シンボル化することによって、複数のエレメントをまとめて1つの部品のように扱えます。
シンボルのイメージ
各スライドへ移動するボタンをシンボル化して、個別のタイムラインを持たせ、そのタイムラインをメインステージから操作することによってオン／オフの状態を切り替えるようにしましょう。
シンボルを作る
オン／オフボタンの画像を読み込みます。右サイドのライブラリパネルにある「アセット」の[＋]をクリックして、アセットを追加します。作例では「radioON」「radioOFF」の2つのファイルを読み込みます。
配置するオン・オフボタン
オン／オフボタン画像の読み込み
読み込みに成功するとアセットに画像がセットされ、ライブラリパネルが以下のようになります。
オン／オフボタン画像読み込み後
アセットからオンのボタン画像を、ステージ上にドラッグ＆ドロップします。サンプルでは、以下のようにステージの中央よりやや左寄りに配置します。
オンボタンを配置
配置した画像を右クリックして、「シンボルに変換」を選択します。
シンボルに変換
シンボル名を入力します。作成では「radioButton」としてOKをクリックします。
シンボル名を入力してシンボルを作成
シンボルが追加されると、右サイドのライブラリパネルは以下のようになります。
シンボル追加後のライブラリパネル
追加したシンボルをダブルクリックして、シンボルのタイムラインに切り替えます。シンボルのタイムラインはステージとは別に設定でき、必要に応じてステージからシンボルを呼び出して利用します。
ステージ右上にある階層表示が、「ステージ/radioButton」となっていることから、どのタイムラインをいま操作しているかがわかります。
シンボルのタイムライン
続いて、アセットからオフのボタン画像をステージ上にドラッグ＆ドロップして、オフの画像も配置します。オンの画像にぴったり重なるように位置を調整しましょう。
シンボル内でオン／オフの状態をつくる
radioButtonシンボル内のタイムラインでは、0ミリ秒のときにオンの画像を、250ミリ秒のときにオフの画像を表示するようにします。このradioButtonシンボルのタイムラインをステージのタイムラインから操作して、ボタンのオン／オフを切り替えるわけです。
radioButtonのタイムライン。ステージから呼び出してタイムラインの位置を操作する
0秒のときにオンボタンが表示されるように、オフボタンのエレメントを非表示にします。まず、再生ヘッドが0秒にセットした状態で、オフのエレメントを選択します。エレメントは、タイムライン上で選択できます。
オフボタンエレメントを選択
次に、左側のプロパティパネルの「display」をクリックします。プルダウンの選択肢から「オフ」を選択します。これで、タイムラインが0秒のときにオフボタンを非表示にできました。displayでは、選択したエレメント（div要素）に対するCSSのdisplayプロパティ値を制御できます。
0ミリ秒のときにオフボタンのdisplayを「オフ」
オフボタンが表示されるように、オンボタンエレメントを非表示にします。先ほどと同様の作業を、オンボタンに対しても実施します。再生ヘッドが250ミリ秒にセットした状態で、オンボタンのエレメントを選択します。左側のプロパティパネルのdisplayをクリックし、プルダウンの選択肢から「オフ」を選択します。
250ミリ秒のときにオンボタンのdisplayを「オフ」
再生ヘッドを250ミリ秒にセットしたまま、オフボタンのdisplay「オン」を選択します。
250ミリ秒のときにオフボタンのdisplayを「オン」
これで、タイムラインが250ミリ秒のときにオンボタンを非表示にできました。再生ヘッドを動かして、オン／オフボタンが切り替わることを確認してください。
スライドの位置で状態を変える
作成したオン／オフボタンが、スライドと同期して切り替わるようにします。ステージ左上の階層表示から「ステージ」を選択して、親のステージにタイムラインを切り替えてください。
作例では3枚のスライドに合せてオン／オフボタンを3つ並べます。ライブラリパネルのシンボルから、「radioButton」をステージ上にドラッグ＆ドロップします。以下のように中央下に3つのオン／オフボタンを配置しました。
オン／オフボタンを配置
スライドの画像が切り替わるタイミングで、オン／オフボタンも切り替わるようにします。今回は、順再生と逆再生が存在するので、それぞれの切り替わりのタイミングで、オン／オフの状態を指定する必要があります。
まずは、スライドの1枚目が表示されたときのオン／オフボタンの表示を制御します。各ボタンは、スライドの1枚目が表示されるタイミングで、
- 1つ目のボタン：オン（タイムライン0ミリ秒）
- 2つ目のボタン：オフ（タイムライン250ミリ）
- 3つ目のボタン：オフ（タイムライン 250ミリ秒）
となっている必要があります。タイムラインのトリガーを使って、シンボルのタイムラインを制御していきます。
スライドの1枚目が表示されるのは、タイムラインの0秒の地点です。最初のフレーム（0秒）に再生ヘッドを移動させた状態で、メニューバーの「タイムライン」→「トリガーを挿入」を選択します。
「トリガーを挿入」を選択します
すでに記述されているsym.play();に続けてシンボルを操作するアクションを書いていきます。右側のアクション一覧の中から「シンボルを取得」を選択します。
「シンボルを取得」を選択
var mySymbolObject = sym.getSymbol("Symbol1");と挿入されます。このコードは、「Symbol1」という名前のシンボルを取得して、「mySymbolObject」という変数に格納するという意味です。作例では、「radioButton」という名称のシンボルを取得したいので以下のように書き換えます。
var mySymbolObject = sym.getSymbol("radioButton");シンボルを取得できたら、シンボル内のタイムラインを指定の位置に移動させます。アクション一覧の中から「停止位置」を選択します。
「停止位置」を選択
sym.stop(1000);と挿入されます。「sym」はステージを指し、この1行でステージのタイムラインを1000ミリ秒で止めることを意味します。作例では「radioButton」のタイムラインを0ミリ秒（オンの状態）で止めたいので、以下のように変更します。
mySymbolObject.stop(0);「sym」の部分をその前で取得した「mySymbolObject」で置き換えて、0msを指定しました。実際のコードは以下のようになります。
sym.play();
var mySymbolObject = sym.getSymbol("radioButton");
mySymbolObject.stop(0);2つ目、3つ目のボタンの状態も設定するため、「radioButton2」「radioButton3」についても続けて同様に記述します。1つ目のボタンがオンのときは、2つ目、3つ目のボタンはオフになりますので、それぞれのタイムラインを250ミリ秒（250ms）で停止します。まとめると以下のようになります。
■0ミリ秒のトリガー（スライド1枚目が表示中）
sym.play();
var mySymbolObject = sym.getSymbol("radioButton");
mySymbolObject.stop(0);
var mySymbolObject = sym.getSymbol("radioButton2");
mySymbolObject.stop(250);
var mySymbolObject = sym.getSymbol("radioButton3");
mySymbolObject.stop(250);
トリガー0ミリ秒
2枚目、3枚目のスライドが表示中のときのボタンも同様にしてトリガーを設定しましょう。2000ミリ秒、3000ミリ秒、4000ミリ秒のトリガーに以下のような処理を追加します。
■2000ミリ秒（スライド2枚目が表示中）
var mySymbolObject = sym.getSymbol("radioButton");
mySymbolObject.stop(250);
var mySymbolObject = sym.getSymbol("radioButton2");
mySymbolObject.stop(0);
var mySymbolObject = sym.getSymbol("radioButton3");
mySymbolObject.stop(250);
トリガー2000ミリ秒
■4000ミリ秒（スライド3枚目が表示中）
var mySymbolObject = sym.getSymbol("radioButton");
mySymbolObject.stop(250);
var mySymbolObject = sym.getSymbol("radioButton2");
mySymbolObject.stop(250);
var mySymbolObject = sym.getSymbol("radioButton3");
mySymbolObject.stop(0);
トリガー4000ミリ秒
ブラウザーでプレビューしてみましょう。スライドと同期してボタンの表示が切り替わることを確認してください。
ただし、このままでは逆再生したときに、オン／オフの切り替わるタイミングが遅れてしまいます。逆再生にするとスライドが1000ミリ秒／3000ミリ秒／5000ミリ秒のときに切り替わるためです。そこで、先ほどと同様の処理を1000ミリ秒／3000ミリ秒／5000ミリ秒のトリガーにも追加しましょう。最終的に以下のようになります。
■1000ミリ秒（スライド1枚目が表示中）
var mySymbolObject = sym.getSymbol("radioButton");
mySymbolObject.stop(0);
var mySymbolObject = sym.getSymbol("radioButton2");
mySymbolObject.stop(250);
var mySymbolObject = sym.getSymbol("radioButton3");
mySymbolObject.stop(250);
トリガー1000ミリ秒
■3000ミリ秒（スライド2枚目が表示中）
var mySymbolObject = sym.getSymbol("radioButton");
mySymbolObject.stop(250);
var mySymbolObject = sym.getSymbol("radioButton2");
mySymbolObject.stop(0);
var mySymbolObject = sym.getSymbol("radioButton3");
mySymbolObject.stop(250);
トリガー3000ミリ秒
■5000ミリ秒（スライド3枚目が表示中）
var mySymbolObject = sym.getSymbol("radioButton");
mySymbolObject.stop(250);
var mySymbolObject = sym.getSymbol("radioButton2");
mySymbolObject.stop(250);
var mySymbolObject = sym.getSymbol("radioButton3");
mySymbolObject.stop(0);
トリガー5000ミリ秒
これで逆再生のときも、オン／オフが切り替わるようになりました。ブラウザーでプレビューしてみましょう。スライドショーに同期して、ボタンの表示が切り替わることを確認してください。
オン／オフボタンの切り替えのブラウザプレビュー
ページングボタンから各スライドへジャンプさせる
ページングボタンの仕上げとして、ページングボタンから各スライドへ直接ジャンプできるようにします。先ほど追加したページングボタンをクリックまたはタップしたときに、各スライドへ切り替わるようにします。
最初に、1枚目にジャンプできるようにしてみましょう。ステージで1枚目のオン／オフボタンを選択した状態で、プロパティの右上にある「アクションを開く」ボタンをクリックします。
「アクションを開く」ボタンをクリック
「click」イベントを選択します。
イベントから「click」を選択
アクションの一覧から「再生の開始位置」を選択します。
再生の開始位置を選択
sym.play(1000);と挿入されます。今回は0ミリ秒（スライドの1枚目）に移動させたいので、
sym.play(0);と記述しましょう。
スマートフォンでも動作するように、「touchend」にも同様に記述します。コードウィンドウの左上にある[＋]をクリックして、touchendのアクションを入力し、閉じるボタンでコードウィンドウを閉じます。
同様の処理を2つ目、3つ目のオン／オフボタンにも設定します。最終的にコードは以下のようになります。
■1枚目のオン／オフボタン（click／touchendとも）
sym.play(0);■2枚目のオン／オフボタン（click／touchendとも）
sym.play(2000);■3枚目のオン／オフボタン（click／touchendとも）
sym.play(4000);これで、オン／オフボタンをクリック（タップ）したときに、各スライドへジャンプするようになりました。
