Highlighted

HTML5 canvas issue when I test on mobile's browser

New Here ,
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

 

Adobe Community Professional
Correct answer by ClayUUID | Adobe Community Professional

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.

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

Views

161

Likes

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

HTML5 canvas issue when I test on mobile's browser

New Here ,
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

 

Adobe Community Professional
Correct answer by ClayUUID | Adobe Community Professional

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.

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

Views

162

Likes

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
Feb 03, 2020 0
Adobe Community Professional ,
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.

Likes

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
Reply
Loading...
Feb 03, 2020 0
TomKl LATEST
New Here ,
Feb 03, 2020

Copy link to clipboard

Copied

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

 

Likes

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
Reply
Loading...
Feb 03, 2020 0