HTML5 Canvas のダイナミックテキストの表示文字列を変更する - Animate

Adobe AnimateでHTML5 Canvas のダイナミックテキストの表示文字列を変更する手順を紹介します。

手順

ダイナミックテキストの配置

Adobe AnimateのHTML5 Canvasにテキストツールを利用してテキストを配置します。テキストの配置手順についてはこちらの記事を参照してください。


配置したテキストをクリックして選択します。右側のプロパティウィンドウの[静止テキスト]のコンボボックスをクリックします。下図のドロップダウンメニューが表示されます。


ドロップダウンメニューの[ダイナミックテキスト]の項目をクリックします。


コンボボックスの項目が[ダイナミックテキスト]に変更できました。


プロパティウィンドウの上部の[<インスタンス名>]のテキストボックスをクリックし、インスタンス名を設定します。今回は"Label01"と設定しました。

ロジックの実装

ボタンを配置し、クリックイベントを設定します。手順の詳細についてはこちらの記事を参照してください。


接地したボタンのインスタンス名を設定し、クリックイベントのアクションを設定します。


アクションウィンドウでボタンクリック時の動作を実装します。


今回は下記のコードを記述します。

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

下記のコードにより、インスタンス名"Label01"のダイナミックテキストのテキストの値を"くじらキャンディ"に変更します。

this.Label01.text = "くじらキャンディ";

実行結果

プレビューを実行し、HTML5 CanvasドキュメントをWebブラウザで表示しします。テキストとボタンが表示されます。テキストの文字列は「ぺんぎんクッキー」が表示されています。


[Button]をクリックします。テキストの文字列が「くじらキャンディー」に変化します。ボタンのクリックにより、ダイナミックテキストの文字列が変更されることが確認できました。