Copy link to clipboard
Copied
Hi
I'm working on an Animate cc project to make an HTML5 canvas page.
The issue will appear when I see the page on my mobile's browser. the issue is when I click any buttons in it then a blue transparent overlay will appear on all around of the screen and suddenly disappear. I searched about it on the internet but I couldn't find an answer to fix it. you can check the issue from the following address(please check it on your mobile browser):
This is the codes that I used for its click event:
thisMc=this;
dialogsArr=[thisMc.ivanDialog,thisMc.akilDialog,thisMc.xiaDialog,thisMc.maxDialog,thisMc.mariaDialog,thisMc.observeTxt];
//disapear dialogs
function disapearDialogs()
{
dialogsArr[0].alpha=0;
dialogsArr[1].alpha=0;
dialogsArr[2].alpha=0;
dialogsArr[3].alpha=0;
dialogsArr[4].alpha=0;
dialogsArr[5].alpha=0;
}
disapearDialogs();
dialogsArr[5].alpha=1;
//persons events
thisMc.ivanBtn.on('click', function()
{
createjs.Sound.stop();
disapearDialogs();
createjs.Sound.play('my_name_is_ivan');
dialogsArr[0].alpha=1;
stage.update();
});
thisMc.akilBtn.on('click', function()
{
createjs.Sound.stop();
disapearDialogs();
createjs.Sound.play('my_name_is_akil');
dialogsArr[1].alpha=1;
stage.update();
});
thisMc.xiaBtn.on('click', function()
{
createjs.Sound.stop();
disapearDialogs();
createjs.Sound.play('my_name_is_xia');
dialogsArr[2].alpha=1;
stage.update();
});
thisMc.maxBtn.on('click', function()
{
createjs.Sound.stop();
disapearDialogs();
createjs.Sound.play('my_name_is_max');
dialogsArr[3].alpha=1;
stage.update();
});
thisMc.mariaBtn.on('click', function()
{
createjs.Sound.stop();
disapearDialogs();
createjs.Sound.play('my_name_is_maria');
dialogsArr[4].alpha=1;
stage.update();
});
I wondered if anyone knows how to fix this issue.
Please let me know if you know anything about it.
Thank you very much.
Tom
Let me guess, on an iPhone? Add this to your CSS:
canvas {
-webkit-tap-highlight-color: transparent;
}
Also, learn to use loops. Your disapearDialogs() function above could be replaced with:
// hide every dialog except the requested one
function showDialog(d) {
for (var i = 0; i < dialogsArr.length; i++) {
dialogsArr[i].visible = i === d;
}
}
And you don't need all the stage.update()s. The stage automatically updates itself every tick.
Copy link to clipboard
Copied
Let me guess, on an iPhone? Add this to your CSS:
canvas {
-webkit-tap-highlight-color: transparent;
}
Also, learn to use loops. Your disapearDialogs() function above could be replaced with:
// hide every dialog except the requested one
function showDialog(d) {
for (var i = 0; i < dialogsArr.length; i++) {
dialogsArr[i].visible = i === d;
}
}
And you don't need all the stage.update()s. The stage automatically updates itself every tick.
Copy link to clipboard
Copied
Yes, exactly. Thanks, bro. it was a big help.