触摸没有注册HTML5画布的事件使用Flash CC创作 [英] Touch Events not registering for HTML5 Canvas Authoring using Flash CC
问题描述
我一直在将已有的拖放.fla转换为HTML 5，希望能使iOS和Android兼容。它已经与鼠标功能，但我已经打了砖墙试图添加触摸支持。
我能够注册触摸事件的唯一方法是通过听整个窗口，这是不是很有用，当我有多个片段，我想移动。
这是我到目前为止所有这些代码都位于主场景时间轴的第一帧，场景由5个片段和5个目标组成这些作品，以及一个弹出式任务完成框和一个重置按钮。
this.stop（）;
MainStage = this; //声明
// *********************
//实际拖动和Dropping
//初始化：
var numPieces = 5; //< ---------------地方数量HERE --- ------------
var homePosX = [];
var homePosY = [];
var correctAns = 0;
var isClickableAry = [];
var whoAmI = []; //声明为全局，这样我就可以识别后面抓取的是哪一块
（var i = 0; i< numPieces; i ++）
{
var pieceName =p+（i + 1）;
var piece = this [pieceName];
//设置每个片段的起始位置
homePosX [i + 1] = piece.x; //（i + 1）是这样的：片名与目标名称和MC名称对齐
homePosY [i + 1] = piece.y;
whoAmI [i] = piece;
isClickableAry [i] = 1; //使它成为可点击的
$ b if（piece）{
piece.name = pieceName;
piece.on（mousedown||touchstart，function（evt）
{
evt.preventDefault（）;
// Debug
console.log （checkPiece（this））;
//不是添加和移除事件侦听器，只是检查是否可点击
if（isClickableAry [checkPiece（this）] == 1）{
this.parent.addChild（this）; //碰到顶部
this.offset = {x：this.x - evt.stageX，y：this.y - evt.stageY};
// Debug
console.log（piece +PICKED UP，X+ piece.x +，Y+ piece.y +is Clickable？）;
// Set家庭坐标（在哪里被拿起）
homeX = this.x;
homeY = this.y;
}
}）;
piece.on（touchmove，function（evt）
{
console.log（touch moved！+ touchobj）;
evt.preventDefault（）;
}）;
$ b piece.on（pressmove，function（evt）
{
if（isClickableAry [checkPiece（this）] == 1）{
this.x = evt.stageX + this.offset.x;
this.y = evt.stageY + this.offset.y;
// Mouse Cursor change
document.body。 style.cursor ='move';
}
}）;
piece.on（pressup||touchend||touchcancel，function（evt）
{
var target = this.parent [t+ this.name。 substr（1）];
//复位游标
document.body.style.cursor ='auto';
if（target& hitTestInRange（target，60 ）&& isClickableAry [checkPiece（this）] == 1）{
this.x = target.x;
this.y = target.y;
//如果是正确添加一个
correctAns ++;
//使该按钮不可点击
isClickableAry [checkPiece（this）] = 0;
if（correctAns> = numPieces）{
//如果他们已经正确回答了等于
的次数$ MainStage.complete_mc.parent.addChild（MainStage.complete_mc）; //碰到最高
MainStage。 complete_mc.gotoAndStop（1）;
//重置应答计数器并使拖动块和按钮不可点击
correctAns = 0;
// Debug
console.log（correctAns +CORRECT！;）
}
} else {
//返回主页坐标（初始位置）
if（isClickableAry [checkPiece（this）] == 1）{
this.x = homePosX [checkPiece（this）+1];
this.y = homePosY [checkPiece（this）+1];
}
}
}）;
piece.on（mouseover，function（evt）
{
if（isClickableAry [checkPiece（this）] == 1）{
//使光标成为指针
document.body.style.cursor ='pointer';
}
}）;
$ b $ piece.on（'mouseout'，function（evt）
{
//设置光标恢复正常
document.body.style.cursor ='auto ';
}）;
$ b function hitTestInRange（target，range）
{
if（target.x> stage.mouseX - range&&
target.x< stage.mouseX + range&&
target.y> stage.mouseY - range&&
target.y< stage.mouseY + range ）
{
return true;
}
返回false;
//检查哪一块是
函数checkPiece（checkName）
{
for（var i = 0; i< numPieces; i ++）
{
if（checkName == whoAmI [i]）{
return i;
//复位功能
this.complete_mc.reset_btn.addEventListener（click ，resetPos.bind（this））;
函数resetPos（）{
for（var i = 0; i< numPieces; i ++）
{
var pieceName =p+（i + 1）;
var piece = this [pieceName];
correctAns = 0;
//让件再次抓取
isClickableAry [i] = 1;
//这会将每件作品返回原来的起始位置
piece.x = homePosX [i + 1];
piece.y = homePosY [i + 1];
//控制弹出窗口，当用户正确回答所有内容时弹出窗口
this.complete_mc.exitComplete_btn.addEventListener（click， closePopUp.bind（本））;
this.complete_mc.exitComplete_btn_alt。 addEventListener（click，closePopUp.bind（this））;
function closePopUp（）{
MainStage.complete_mc.gotoAndStop（0）;
$ b在我自己的问题解决中，做任何函数或变量的作用域，因为当闪存导出文件时，它会生成自己的.js文件，并将您的所有影片剪辑转换为代码，并将您编写的任何帧所写的代码分开。
任何帮助都将不胜感激。
编辑：经过多一点研究，我认为这个问题可能与触摸事件有关，只能够目标单独的元素？所以它不能抓取画布元素中的对象，只是画布元素本身？
解决方案原来，添加触摸支持非常简单。我所缺少的只是一行代码
createjs.Touch.enable（stage）;
这使得所有的触摸事件都作为鼠标事件响应。并解决了我所有的问题。
I have been having some issues when it comes to authoring HTML 5 Canvas in Flash CC, mostly as a result of the lack of information on writing JavaScript inside Flash.
I have been converting an existing drag and drop .fla into HTML 5 with the hope of making it iOS and Android compatible. It is already functioning with mouse, but I have hit a brick wall on trying to add touch support.
The only way I have been able to even register the touch events is by listening to the entire window, which isn't very useful when I have multiple pieces that I want to move around.
This is what I have so far, all this code is located on the first frame of the main Scene Timeline, and the scene is composed of 5 pieces and 5 targets for those pieces, as well as a pop up task completed box and a reset button.
this.stop();
MainStage = this;//Declare
//*********************
//Actual Drag and Dropping
// Initialize:
var numPieces = 5;//<---------------Place number of pieces HERE---------------
var homePosX = [];
var homePosY = [];
var correctAns = 0;
var isClickableAry = [];
var whoAmI = [];//Declared "Globally" so that I can identify which piece is being grabbed later
for (var i = 0; i < numPieces; i++)
{
var pieceName = "p" + (i + 1);
var piece = this[pieceName];
//This sets the starting position for each piece
homePosX[i+1] = piece.x;//(i+1) is so that Piece names line up with Target names and MC names
homePosY[i+1] = piece.y;
whoAmI[i] = piece;
isClickableAry[i] = 1;//Makes it so each pieces is set as clickable
if( piece ){
piece.name = pieceName;
piece.on("mousedown" || "touchstart", function(evt)
{
evt.preventDefault();
//Debug
console.log(checkPiece(this));
//Rather than adding and removing event listeners, just check to see if piece is clickable
if(isClickableAry[checkPiece(this)] == 1){
this.parent.addChild(this);// Bump to top
this.offset = {x:this.x - evt.stageX, y:this.y - evt.stageY};
//Debug
console.log(piece + "PICKED UP, X " + piece.x + ", Y " + piece.y + " is Clickable? ");
//Set Home Coordinates (Where it was picked up)
homeX = this.x;
homeY = this.y;
}
});
piece.on("touchmove",function(evt)
{
console.log("touch moved! " + touchobj);
evt.preventDefault();
});
piece.on("pressmove", function(evt)
{
if(isClickableAry[checkPiece(this)] == 1){
this.x = evt.stageX + this.offset.x;
this.y = evt.stageY + this.offset.y;
//Mouse Cursor change
document.body.style.cursor='move';
}
});
piece.on("pressup" || "touchend" || "touchcancel", function(evt)
{
var target = this.parent["t"+this.name.substr(1)];
//Reset Cursor
document.body.style.cursor='auto';
if( target && hitTestInRange( target, 60) && isClickableAry[checkPiece(this)] == 1 ){
this.x = target.x;
this.y = target.y;
//If it is correct add one
correctAns++;
//Make that button Unclickable
isClickableAry[checkPiece(this)] = 0;
if(correctAns >= numPieces){
//If they have answered correctly equal to the the number of pieces
MainStage.complete_mc.parent.addChild(MainStage.complete_mc);//Bump to top
MainStage.complete_mc.gotoAndStop(1);
//reset answer counter and make drag pieces and buttons unclickable
correctAns = 0;
//Debug
console.log(correctAns + "CORRECT!";)
}
}else{
//Return to home Coordinates (Where it was on intialization)
if(isClickableAry[checkPiece(this)] == 1){
this.x = homePosX[checkPiece(this)+1];
this.y = homePosY[checkPiece(this)+1];
}
}
});
piece.on("mouseover", function(evt)
{
if(isClickableAry[checkPiece(this)] == 1){
//Makes cursor a pointer finger
document.body.style.cursor='pointer';
}
});
piece.on('mouseout',function(evt)
{
//sets cursor back to normal
document.body.style.cursor='auto';
});
}
}
function hitTestInRange( target, range )
{
if( target.x > stage.mouseX - range &&
target.x < stage.mouseX + range &&
target.y > stage.mouseY - range &&
target.y < stage.mouseY + range )
{
return true;
}
return false;
}
//Check which piece it is
function checkPiece(checkName)
{
for (var i = 0; i < numPieces; i++)
{
if (checkName == whoAmI[i]){
return i;
}
}
}
//Reset Functionality
this.complete_mc.reset_btn.addEventListener("click", resetPos.bind(this));
function resetPos(){
for (var i = 0; i < numPieces; i++)
{
var pieceName = "p" + (i + 1);
var piece = this[pieceName];
correctAns = 0;
//Makes Pieces Grabable again
isClickableAry[i] = 1;
//This returns each piece to their Original Starting Positions
piece.x = homePosX[i+1];
piece.y = homePosY[i+1];
}
}
//Controlling the Pop Up Window, window pops up when user answers everything correctly
this.complete_mc.exitComplete_btn.addEventListener("click", closePopUp.bind(this));
this.complete_mc.exitComplete_btn_alt. addEventListener("click", closePopUp.bind(this));
function closePopUp(){
MainStage.complete_mc.gotoAndStop(0);
}
In my own troubleshooting with other problems that have come up generally the issue has to do with scope of either functions or variables, since when flash exports the files it generates its own .js file and turns all of your movie clips into code and separates the code that you have written by whichever frame you wrote it on.
Any help at all would be appreciated.
EDIT: After a bit more research I think the problem might have something to do with touch events only being able to target separate elements? So it isn't able to grab objects inside the canvas element just the canvas element itself?
解决方案 Turns out that adding touch support is incredibly easy. All I was missing was one line of code
createjs.Touch.enable(stage);
this makes all the touch events respond as mouse events. and fixed all my issues.
这篇关于触摸没有注册HTML5画布的事件使用Flash CC创作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
