配置したボタン コンポーネントのクリックイベントを実装する - Animate

Adobe Animate でHTML5 Canvas に配置したボタンのクリックイベントを実装する手順を紹介します。

事前準備

こちらの記事を参照して、シーンのキャンバスにボタンを配置します。

手順

インスタンス名の設定

選択ツールでボタンをクリックし選択します。右側の[プロパティ]タブをクリックしてプロパティパネルを表示します。 ウィンドウが表示されていない場合は、[ウィンドウ]メニューの[プロパティ]をクリックしてプロパティウィンドウを表示します。
プロパティパネルの上部の[オブジェクト]のタブをクリックして選択します。


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

イベントのコード記述

ボタンコンポーネントにインスタンス名を設定した後、ボタンのクリックイベントのコードを記述します。[ウィンドウ]メニューの[コードスニペット]をクリックします。


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


ウィンドウのツリービューの[HTML5 Canvas]ノードの[コンポーネント] > [ユーザーインターフェイス] を開きます。
キャンバスのボタンが選択された状態で、[ボタンのクリックイベント]の項目をダブルクリックします。


[アクション]ウィンドウが表示され、ボタンクリックイベントのコードが自動で入力されます。



以下のコードが入力されます。

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

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

if(!this.button01_click_cbk) {
	function button01_click(evt) {
		// カスタムコードを開始
		console.log("Button clicked");
		// カスタムコードを終了
	}
	$("#dom_overlay_container").on("click", "#button01", button01_click.bind(this));
	this.button01_click_cbk = true;
}

イベントのロジックの実装

イベントのコードを記述します。[アクション]ウィンドウのコードを以下のコードに編集します。
alert('Hello Adobe Animate World!!'); のコードを追加し、ボタンクリック時にアラートダイアログを表示します。 alert関数の動作の詳細はこちらの記事を参照してください。

if(!this.button01_click_cbk) {
	function button01_click(evt) {
		// カスタムコードを開始
		alert('Hello Adobe Animate World!!'); //追加
		console.log("Button clicked");
		// カスタムコードを終了
	}
	$("#dom_overlay_container").on("click", "#button01", button01_click.bind(this));
	this.button01_click_cbk = true;
}

動作の確認

実装したコードの動作を確認します。[制御]メニューの[プレビュー]をクリックします。


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


[Button]をクリックします。実装したアラートダイアログ表示のコードが実行され、アラートダイアログが表示されます。 メッセージもコードに記述したメッセージが表示されます。