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

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

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

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

createjs_button1_timeline1 createjs_button1_timeline2

createjs_button1_button1 createjs_button1_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書き出し (1)」(ファイル一式)

がっ!ローカルで確認すると、Chromeで動かない! 😮
こんなエラーが出てた。
Uncaught An error has occurred. This is most likely due to security restrictions on reading canvas pixel data with local or cross-domain images.

ぎゃぼー! :rain:


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

This movie requires Flash Player 16.0