CreateJS IE10/11 タッチ端末でドラッグ&ドロップ(スワイプ)

More than 5 years have passed since last update.


概要

Flash CC からのCanvas書き出しでのドラッグ&ドロップ(兼タッチ端末でのスワイプ)の実現にあたって、ネット上にあるサンプルコードで、Androidブラウザ、Chrome、Safariなどでのマウス操作/タッチ操作はうまく動作する。IE10/11もマウス操作はうまく動作する。

が、IE10/11のタッチ端末での動作だけ、なかなかうまく動かせずハマったのでメモ。

注:FlashやCreateJSの細かいバージョンで、いろいろ変わるようなので201.04.20現在の最新情報としてご覧ください。


環境

Flash CC Ver.13.1 を適用済。

このバージョンから、書き出し方法が変わっています。

参考 http://plus.adobe-adc.jp/post-5022/


参考

・IE10/11のタッチ操作でうまく動くもの

 http://kudox.jp/java-script/createjs-easeljs-event

 この中のドラッグ&ドロップのサンプル

・IE10/11のタッチ操作でうまく動かなかったもの

 http://pops-web.com/main/pops/archives/221

 ここにあるサンプル


コード(Flash内タイムライン上のJavaScript)

aaというインスタンス名をつけたMovieClipをステージに配置します。

細かい説明は省きますが、水平方向にドラッグ移動できるようにしました。

if (createjs.Touch.isSupported()) {

createjs.Touch.enable(stage, true);
}

function mouseDownHandler(mouseDownEvent){
console.log("down");
var target = mouseDownEvent.target;
var basex = target.x - mouseDownEvent.stageX;
function pressMoveHandler(pressMoveEvent){
console.log("move");
target.x = basex + pressMoveEvent.stageX;
stage.update();
}
function pressUpHandler(pressUpEvent){
target.removeEventListener("pressmove", pressMoveHandler);
target.removeEventListener("pressup", pressUpHandler);
console.log("up");
}
target.addEventListener("pressmove", pressMoveHandler);
target.addEventListener("pressup", pressUpHandler);
}

this.aa.addEventListener("mousedown",mouseDownHandler);

これを書きだしたもの

http://dev.elephancube.jp/qiita/drag140420.html

・・・IE10/11のタッチ端末だけ、動きません。


解決法

Flashから書き出されたhtmlに手を加えます。


書き換えポイント1

Flash CC 13.1 で書き出されるCreateJSが、EaseJS 0.7.0 と TweenJS 0.5.0 ですが、最新は、EaseJS 0.7.1 と TweenJS 0.5.1。このマイナーバージョンの違いで変わるので、CreateJS本家サイトから最新版をダウンロードしてきて、リンクを変更する。

CreateJS本家サイト http://www.createjs.com/

書き換え前

<script src="libs/easeljs-0.7.0.min.js"></script>

<script src="libs/tweenjs-0.5.0.min.js"></script>
<script src="libs/movieclip-0.7.0.min.js"></script>

書き換え後

<script src="libs2/easeljs-0.7.1.min.js"></script>

<script src="libs2/tweenjs-0.5.1.min.js"></script>
<script src="libs2/movieclip-0.7.1.min.js"></script>


書き換えポイント2

Flash CC 13.1 で書き出されたままのhtmlだと、Tickerイベントが動作していない!?(定義はされているが、挙動しているのか不明。)ようなので、明示的に定義する。

書き換え前(function init()内)

createjs.Ticker.addEventListener("tick", stage);

書き換え後(function init()内)

function tickHandler(evt) {

stage.update();
}
createjs.Ticker.addEventListener("tick", tickHandler);

書き換えた後

http://dev.elephancube.jp/qiita/drag140420kai.html

うごいたー!!


ソース

flaファイルと書き換え前後のhtmlファイルを入れています。欲しい方はどうぞ。

http://dev.elephancube.jp/qiita/drag140420_src.zip