Strange issue with HTML5 export
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:
- I have a stage with 4K+ resolution (5448px x 2873px - this is 4096 * 1.33 x 2160 * 1.33)
- PNG background, animated captions, scripted in Animate CC
- Captions consist of:
- Folding out animation
- Folding in animation
- Click/hover area, which is a Movie clip symbol, containing a shape with 1% alpha
- I am using custom HTML template to be able to pan the screen
- I replace some code to make the HTML document responsive (not using Animate CC's responsive option because that way it "shrinks" the canvas to the actual screen size, while I need some parts to be out of screen for the purpose of panning the screen - panning is what my commissioners are clearly insisting on, so it can't be just one screen). I replace
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>
AdChoices