• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

HTML5 canvas issue when I test on mobile's browser

New Here ,
Feb 03, 2020 Feb 03, 2020

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):

My apps link 

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

 

TOPICS
Code , Error , Other , Performance , Product issue , Tablet

Views

930

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

LEGEND , Feb 03, 2020 Feb 03, 2020

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.

Votes

Translate

Translate
LEGEND ,
Feb 03, 2020 Feb 03, 2020

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Feb 03, 2020 Feb 03, 2020

Copy link to clipboard

Copied

LATEST

Yes, exactly. Thanks, bro. it was a big help.

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines