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

Strange issue with HTML5 export

Community Beginner ,
Jan 25, 2019 Jan 25, 2019

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:

  • 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>

Views

1.7K

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

Engaged , Jan 25, 2019 Jan 25, 2019

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

...

Votes

Translate

Translate
Engaged ,
Jan 25, 2019 Jan 25, 2019

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

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
Community Beginner ,
Jan 25, 2019 Jan 25, 2019

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

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
Engaged ,
Jan 25, 2019 Jan 25, 2019

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

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
Community Beginner ,
Jan 25, 2019 Jan 25, 2019

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

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
Engaged ,
Jan 25, 2019 Jan 25, 2019

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

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
LEGEND ,
Jan 25, 2019 Jan 25, 2019

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.

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
Engaged ,
Jan 25, 2019 Jan 25, 2019

Copy link to clipboard

Copied

Agreed! It's getting frustrating!

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
Community Beginner ,
Jan 28, 2019 Jan 28, 2019

Copy link to clipboard

Copied

LATEST

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!

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