Copy link to clipboard
Copied
Hello All,
This is my first time posting here, I am trying to not overshare, but this is quite a complex situation. Please bear with me.
About the project:
canvas.style.width = dom_overlay_container.style.width = anim_container.style.width = w*sRatio+'px';
canvas.style.height = anim_container.style.height = dom_overlay_container.style.height = h*sRatio+'px';
with
const ratio = window.screen.width / 4096;
canvas.style.width = dom_overlay_container.style.width = anim_container.style.width = w*sRatio * ratio+'px';
canvas.style.height = anim_container.style.height = dom_overlay_container.style.height = h*sRatio * ratio+'px';
$('#canvas').css({
top: ($('#canvas').height() - window.innerHeight) / -2,
left: ($('#canvas').width() - window.innerWidth) / -2
});
Issues:
- After exporting to HTML5, the captions are being placed at a slightly lower position when opening in Chrome and Firefox, however in Edge it works perfectly (the issue comes up when not using custom template, too)
- After exporting to HTML5, the panning at first works perfectly, but whenever I navigate BACK to the page (with the browser's back button), it just falls apart in Chrome and Firefox, however in Edge it works perfectly (obviously this issue is not present when not using the custom template, as that is what makes panning possible)
- All of this used to work perfectly in Chrome (back in Oct 2018 when I last exported), had not tried with other browsers back then
Any ideas why is this going on? Weirdly enough, I just experienced it, I had no issues until recently. At first I thought the problem was on my side, as the issues came up after I did a clean install (Windows 10). Also that time I upgraded to the latest version of Animate CC (19.1 build 349) so I figured this must be some bug in this version. But I have an export, done around Oct 2018, where the same issues appear. This is why I am suspecting there are some compatibility issues with latest versions of Chrome and Firefox.
As I said, I don't want to overshare, thus I did not post screenshots, but if you think it would help understand the problem, I am happy to post them.
Had a chat with Adobe Support (big up to Satakshi!), they are investigating. They also advised me to post my issues here as well.
Any advice or idea would be very much appreciated.
Export: Hotel
Custom template I am using:
<!DOCTYPE html>
<!--
NOTES:
1. All tokens are represented by '$' sign in the template.
2. You can write your code only wherever mentioned.
3. All occurrences of existing tokens will be replaced by their appropriate values.
4. Blank lines will be removed automatically.
5. Remove unnecessary comments before creating your template.
-->
<html>
<head>
<meta charset="UTF-8">
<meta name="authoring-tool" content="$VERSION">
<title>$TITLE</title>
<!-- write your code here -->
$CENTER_STYLE
$CREATEJS_LIBRARY_SCRIPTS
$ANIMATE_CC_SCRIPTS
$SCRIPT_START
var canvas, stage, exportRoot, anim_container, dom_overlay_container, fnStartAnimation;
function init() {
canvas = document.getElementById("$CANVAS_ID");
anim_container = document.getElementById("$ANIM_CONTAINER_ID");
dom_overlay_container = document.getElementById("dom_overlay_container");
$CREATE_LOADER
$LOAD_MANIFEST
$PRELOAD_ASSETS
}
$HANDLE_FILE_LOAD_START
$HANDLE_FILE_LOAD_BODY
$HANDLE_FILE_LOAD_END
$HANDLE_COMPLETE_START
//This function is always called, irrespective of the content. You can use the variable "stage" after it is created in token create_stage.
$CREATE_STAGE
//Registers the "tick" event listener.
$START_ANIMATION
//Code to support hidpi screens and responsive scaling.
$RESP_HIDPI
$HANDLE_COMPLETE_END
$PLAYSOUND
$SCRIPT_END
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
const ratioX = window.screen.width / 4096;
const ratioY = window.screen.height / 2160;
let offsetX = 0;
let offsetY = 0;
let drag = {
elem: null,
x: 0,
y: 0,
state: false
};
let delta = {
x: 0,
y: 0
};
pan();
mobilePan();
Number.prototype.clamp = function (min, max) {
return Math.min(Math.max(this, min), max);
};
function getOffsetValues(){
if (offsetX == 0){
offsetX = $('#canvas').width() - window.innerWidth;
}
if (offsetY == 0){
offsetY = $('#canvas').height() - window.innerHeight;
}
}
function mobilePan() {
'use strict';
document.addEventListener("touchstart", touchStart, false);
document.addEventListener("touchend", touchEnd, false);
document.addEventListener("touchmove", touchMove, false);
function touchStart(e) {
if (!drag.state) {
getOffsetValues();
drag.elem = $('#animation_container');
drag.x = e.touches[0].pageX;
drag.y = e.touches[0].pageY;
drag.state = true;
}
return false;
}
function touchMove(e) {
'use strict';
if (drag.state) {
delta.x = e.touches[0].pageX - drag.x;
delta.y = e.touches[0].pageY - drag.y;
var cur_offset = $(drag.elem).offset();
$(drag.elem).offset({
left: (cur_offset.left + delta.x).clamp(-offsetX / 2, offsetX / 2),
top: (cur_offset.top + delta.y).clamp(-offsetY / 2, offsetY / 2)
});
drag.x = e.touches[0].pageX;
drag.y = e.touches[0].pageY;
}
}
function touchEnd(e) {
'use strict';
if (drag.state) {
drag.state = false;
}
}
}
function pan() {
'use strict';
$(document).mousedown(function (e) {
if (!drag.state && e.which == 1) {
getOffsetValues();
drag.elem = $('#animation_container');
drag.x = e.pageX;
drag.y = e.pageY;
drag.state = true;
}
return false;
});
$(document).mousemove(function (e) {
if (drag.state) {
delta.x = e.pageX - drag.x;
delta.y = e.pageY - drag.y;
var cur_offset = $(drag.elem).offset();
$(drag.elem).offset({
left: (cur_offset.left + delta.x).clamp(-offsetX / 2, offsetX / 2),
top: (cur_offset.top + delta.y).clamp(-offsetY / 2, offsetY / 2)
});
drag.x = e.pageX;
drag.y = e.pageY;
}
});
$(document).mouseup(function () {
if (drag.state) {
drag.state = false;
}
});
}
</script>
</head>
<body onload="init();" style="overflow:hidden; margin:0px;">
<div id="$ANIM_CONTAINER_ID" style="background-color:$BG; width:$WTpx; height:$HTpx">
<canvas id="$CANVAS_ID" width="$WT" height="$HT" style="position: absolute; display: $CANVAS_DISP; background-color:$BG;"></canvas>
<div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; width:$WTpx; height:$HTpx; position: absolute; left: 0px; top: 0px; display: $CANVAS_DISP;">
</div>
</div>
$PRELOADER_DIV
</body>
</html>
Hi,
when you said 'captions' where you referring to the text? There are issues with Firefox and Chrome if you are using dynamic text?
JS fixes for the dynamic text moving up or down in Chrome and Firefox are as follows (place in first frame in Animate)...
FIREFOX FONT FIX
var firefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
if (firefox && createjs)
{
createjs.Text.prototype._drawTextLine = function(ctx, text, y)
{
// Adjust text position only if textBaseline is "top"
if (this.t
...Copy link to clipboard
Copied
Hi,
when you said 'captions' where you referring to the text? There are issues with Firefox and Chrome if you are using dynamic text?
JS fixes for the dynamic text moving up or down in Chrome and Firefox are as follows (place in first frame in Animate)...
FIREFOX FONT FIX
var firefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
if (firefox && createjs)
{
createjs.Text.prototype._drawTextLine = function(ctx, text, y)
{
// Adjust text position only if textBaseline is "top"
if (this.textBaseline === "top")
{
var lineHeight = this.lineHeight || this.getMeasuredLineHeight();
y += lineHeight * 0.1; // decrease number to move font up and increase to move down
}
// Chrome 17 will fail to draw the text if the last param is included but null, so we feed it a large value instead:
if (this.outline) { ctx.strokeText(text, 0, y, this.maxWidth||0xFFFF); }
else { ctx.fillText(text, 0, y, this.maxWidth||0xFFFF); }
};
}
CHROME FONT FIX
var chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
if (chrome && createjs)
{
createjs.Text.prototype._drawTextLine = function(ctx, text, y)
{
// Adjust text position only if textBaseline is "top"
if (this.textBaseline === "top")
{
var lineHeight = this.lineHeight || this.getMeasuredLineHeight();
y += lineHeight * 0.1; // decrease number to move font up and increase to move down
}
// Chrome 17 will fail to draw the text if the last param is included but null, so we feed it a large value instead:
if (this.outline) { ctx.strokeText(text, 0, y, this.maxWidth||0xFFFF); }
else { ctx.fillText(text, 0, y, this.maxWidth||0xFFFF); }
};
}
Sorry but I'm not sure what is causing the panning problem when using the back button on the browser. Maybe create your own nav for this functionality?
Cheers
Greg
Copy link to clipboard
Copied
Hello Greg,
Thanks for your reply.
Yes, I am using dynamic text, sorry for being ambiguous. And your solution works perfectly! I cannot be grateful enough.
Could you please elaborate further what do you mean by creating my own nav? I am not familiar with the term in this case.
Have my million thanks,
Ambrus
Copy link to clipboard
Copied
Hi embraiz,
sorry I should have typed 'navigation' instead of just 'nav'.
To me personally I'd rather have full control of what I am doing so I'd maybe put my own 'Back' buttons in the application rather than relying on the browser control of going back. I also think it is good user experience while improving usability (i.e. the user doesnt have to look and wonder how to get back) and feels more slick in my opinion. Make the user feel totally in control of the environment and remove as much confusion.
Though you may be intending to add this functionality at a later date?
Plus, as you see with dynamic text (grrrr!!! It's frustrating a lot of people including myself) that browsers can be a bit unpredictable with what they will add/take away with each update/new version.
Just food for thought. Others might disagree.
Cheers
Greg
Copy link to clipboard
Copied
Hi Greg,
Ahhh, it is clear now. I am definitely planning on implementing custom navigation. I just think that if something worked previously, then it should work now as well.
With regards to Dynamic texts - do you have a recommendation as alternative?
Anyways, I am marking your first reply as a solution.
Thanks again!
embraiz
Copy link to clipboard
Copied
Hi embraiz,
I'm glad I was some help, just wish I could have been more help with the panning. Someone might jump in with the solution.
But I think the problem is more browser related. As you mentioned it worked before, just like the text was in the correct place before. But some versions later we have to add code to fix text placement. So I'm thinking once you get your own navigation that this will help a lot and help reduce (it wont eliminate) further browser versions messing up your application (which is looking good!).
Regarding dynamic text I have no real recommendations, sorry. I use it all the time as it helps keep file sizes down, plus I love the crispness of it on the screen rather than static text. Apparently Firefox has had a problem with dynamic text for years but no fix yet. Chrome just recently started playing up for me. My thoughts are that if they ever do fix it then we will need to go through all our applications that we have added it to and remove it. Not good if you have a lot. But it's working for the meantime with the added code.
Good luck with your application!
Cheers
Greg
Copy link to clipboard
Copied
You would think that these browser developers would get some things standardized and I know that the HTML specs are documented but still we get all these different browsers with different problems and WE have to work around this mess!!! ANNOYING!
I remember when Edge Animate was in version 1 or 2, FF did an update that totally messed up our publishing and the dev team had to scramble to make an update so people could continue to work. It was a nightmare for everyone except the FF dev team that just probably rolled their eyes.
Copy link to clipboard
Copied
Agreed! It's getting frustrating!
Copy link to clipboard
Copied
I am currently re-exporting all assets with the font fix code (sigh). But hey at least we have this awesome community!
Thank you so much again, you spared me a lot of headaches!