シンボルのボタンにクリックイベントを実装する - Animate

Adobe Animateでシンボルのボタンにクリックイベントを実装する手順を紹介します。

事前準備

こちらの記事を参照して、シンボルのボタンを作成しておきます。

手順

Adobe AnimateでHTML5のCanvasに先に作成したボタンのシンボルを配置します。

インスタンス名の設定

配置したボタンをクリックして選択します。


右側の[プロパティ]タブをクリックして[プロパティ]パネルを表示します。パネルの上部の[オブジェクト]タブをクリックします。 下図の画面が表示されます。プロパティパネル上部の[インスタンス名]のテキストボックスにボタンのインスタンス名を設定します。


[インスタンス名]のテキストボックスに名称を設定します。今回は button01 を設定します。

イベントの設定

[ウィンドウ]メニューをクリックし、[コードスニペット]の項目をクリックします。~

下図の[コードスニペット]のウィンドウが表示されます。


コードスニペットウィンドウのツリービューで[HTML5 Canvas]ノードの[イベントハンドラー]の[マウスクリックイベント]の項目をダブルクリックします。
ダブルクリックする際に、キャンバスに配置されたボタンが選択されていることを確認します。


マウスクリックイベントの項目をダブルクリックすると、下図の[アクション]ウィンドウが表示されます。 ウィンドウの右側のエリアにはコードが入力された状態で画面が表示されます。



入力されているコードは次の通りです。

/* マウスクリックイベント
特定のシンボルインスタンス上でクリックすると、独自のカスタムコードを追加できる関数が実行されます。

手順 :
1. 以下の「// カスタムコードを開始」と記述された行の後ろに新しい行を挿入して、カスタムコードを追加します。
シンボルインスタンスをクリックすると、コードが実行されます。
*/

this.button01.addEventListener("click", fl_MouseClickHandler.bind(this));

function fl_MouseClickHandler()
{
	// カスタムコードを開始
	// このコード例では、出力パネルに "マウスクリック" という用語が表示されます。
	alert("マウスクリック");
	// カスタムコードを終了
}

入力されているコードを以下のコードに変更します。コードスニペットで挿入したコードからコメントを除去して、alert関数の引数の文字列を変更しました。

this.button01.addEventListener("click", fl_MouseClickHandler.bind(this));

function fl_MouseClickHandler()
{
  alert("ボタンがクリックされました。");
}

コードはJavaScriptとして記述します。alert関数の動作の詳細についてはこちらの記事を参照してください。
コードが入力できたら、アクションウィンドウを閉じます。

動作確認

プレビューして動作確認します。[制御]メニューの[プレビュー]の項目をクリックします。


Webブラウザが起動し、下図のページが表示されます。


マウスポインタをボタンの内部に移動するとボタンのカラーが変わります。


ボタンをクリックします。ボタンをクリックするとアラートダイアログが表示されます。ダイアログのメッセージは HTMLのコード内で記述した文字列が表示されます。