[CreateJS] ボタンのHTML5書き出し[Canvas] (2)

Flash CC 2014 からボタンをHTML5(Canvas)書き出ししてみるよ。 :bouzu:

createjs_button2
もちろん、CreateJSだよ。 :boy:

HTML5 Canvas ドキュメント (flaファイル) に、ボタン・インスタンスを作成。
各フレーム (アップ・オーバー・ダウン・ヒット) に、画像を配置。
ただし、ヒット・フレームには、画像を配置せず、シェイプのみを配置

createjs_button2_timeline1 createjs_button2_timeline2

createjs_button2_button1 createjs_button2_button2


このようなボタンを複数作成して、メイン・タイムラインに配置。

createjs_button_main

第1フレームに、以下のようなスクリプトを記述。
var root = this;
var buttons = [this.button1, this.button2, this.button3, this.button4];

for (var n = 0; n < 4; n++) {
  var button = buttons[n];
  button.id = n;
  button.addEventListener("click", click);
}

function click(event) {
  select(event.target.id);
}
function select(id) {
  root.txt.text = "id: " + (id + 1);
}

そして、以下の設定で、パブリッシュする。

createjs_button_publish

できた!
:dlfile: 「ボタンのHTML5書き出し (2)」(ファイル一式)

ローカルで確認すると、Chromeでもちゃんと動いた! :sun:


ちなみに、AS3.0で作ったボタンはこちら。

This movie requires Flash Player 16.0