画面をタップしても暗くならない！

AnimateCCで作ったHTML5がiOSで暗くなるのを回避する方法

Adobe Animate CC で作った HTML5 Canvas を<iframe>タグでワードプレスに貼り付けたら画面をタップする度に画面が暗くなってうっとうしい事になっているといいましたが…

Adobe Animater CC で作った HTML5 Canvas をワードプレスに貼り付けてiOSで見ると、タップの度に画面が暗くなる（テスト２）

画面をタップすると暗くなるこの問題、とりあえず解決しました！説明のため、動画を撮影してみました先日、Adobe Animate CC で HTML5 Canvas でパブリッシュした HTML を、ifameタグを使...

解決策をいろいろ調べてなんとなかったのでご報告します。

実験です
1. テスト１バージョン
2. テスト２バージョン
解決方法

実験です

パソコンのブラウザではどちらも同じうに動きます。ところが iPhone や iPad でみてみると違うんですよね。ぜひ試して見てください。

テスト１バージョン

テスト１バージョン
（iOSではタップすると暗くなる）
<span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_end"></span>

オリジナルのHTMLはこちら
【html5canvas-test.html】

テスト２バージョン

テスト2バージョン
（iOSでタップしても暗くならない）
<span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_end"></span>

オリジナルのHTMLはこちら
【html5canvas-test2.html】

解決方法

Animate CC で「HTM5 Canvas」向けに作った .flaファイルのメインタイムライン1フレームメの「アクション」に以下のJavaScriptコードを書いたら、解決しました！

	if (createjs.Touch.isSupported()) {
	createjs.Touch.enable(stage, true);
	}

view raw

html5canvas-test.js

hosted with ❤ by GitHub

CreateJSの”タッチ”を有効にする

メインのタイムラインの最初のフレームで右クリックして「アクション」を開く
メインのタイムラインの最初のフレームで右クリックして「アクション」を開く

たったのこれだけで、iPhoneで発生していたなぞの動作が消えて素直に動いてくれました。
ボタンの発火イベントを “mousedown” にしているのですが、テスト１バージョンではマウスダウンすると暗くなるだけで、マウスを離した時に発火する “クリック” 状態でしたが、今回のコードを書いた事で、マウスダウンでも反応するようになりました。