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

Works fine in animate but when I test html5 in browser text slides out of stage

New Here ,
Apr 11, 2024 Apr 11, 2024

Copy link to clipboard

Copied

I'm new to adobe animate. I made a simple animation:
• Layer 1: same background with logo stays on stage the whole time- no problem this works throughout
• Layer 2: Text block #1 set alpha 0% fades to 100% (just the alpha changing so type will "fades in."), easing is turned off; works fine in animate; but when I test html5 it slides off the stage down and to the right. It isn't supposed to move on the stage, just stay in place and fade in; go blank and fade to the next text.
• Layer 3:  Text block #2 set alpha 0% fades to 100% (just the alpha changing so type will "fades in."), easing is turned off; works fine in animate; but when I test html5 it slides off the stage down and to the right. It isn't supposed to move on the stage, just stay in place and fade in; go blank and fade to the next text.
• Layer 4: Button set alpha 0% fades to 100%; works fine in animate; easing is turned off; works fine in animate; but when I test html5 it slides off the stage down and to the right. It isn't supposed to move on the stage, just stay in place and fade in; go blank and fade to the next text.
I have it on loop and I only have 15 seconds. 

Please advise.

Views

90

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 Expert ,
Apr 12, 2024 Apr 12, 2024

Copy link to clipboard

Copied

Hi.

 

Possible reasons would include:
- The browser is using a different font. If you have dynamic text fields, make sure to use web fonts;

- Not enough space left in the text field's bounding box. Make sure to leave a little padding horizontally;
- Difference in line heights between browsers. Generally the code below, shared here in the forums a few years ago, works very well. You just need to open up the Actions Panel in the first frame of the main timeline and place it in there.

function fixText()
{
	var chrome = navigator.userAgent.toLowerCase().indexOf("chrome") > -1;
	var firefox = navigator.userAgent.toLowerCase().indexOf("firefox") > -1;
	
	if ((chrome || firefox) && createjs)
	{
		createjs.Text.prototype._drawTextLine = function(ctx, text, y)
		{
			if (this.textBaseline === "top")
				y += (this.lineHeight || this.getMeasuredLineHeight()) * 0.14;
			
			ctx[this.outline ? "strokeText" : "fillText"](text, 0, y, this.maxWidth || 0xFFFF);
		};
	}
}

fixText();

 

Please let us know if you still have issues.

 

Regards,

JC

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 ,
Apr 12, 2024 Apr 12, 2024

Copy link to clipboard

Copied

Thanks JC, Even if I have text converted to outlines, would that be an issue? 

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 Expert ,
Apr 12, 2024 Apr 12, 2024

Copy link to clipboard

Copied

If you convert text fields to fill shapes you should be fine.

 

Or you can just use static text fields.

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 Expert ,
Apr 12, 2024 Apr 12, 2024

Copy link to clipboard

Copied

@JoãoCésar 

 

how can fixText() be tested? eg, how do you create the problem?

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 Expert ,
Apr 12, 2024 Apr 12, 2024

Copy link to clipboard

Copied

LATEST

Check if text fields' offset in Chrome and Firefox will be smaller on the y axis.

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