Skip to main content
M
McCoy.sarah
Participant
April 12, 2024
Question

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

  • April 12, 2024
  • 1 reply
  • 498 views

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.

    This topic has been closed for replies.

    1 reply

    JoãoCésar17023019
    Community Expert
    JoãoCésar17023019Community Expert
    Community Expert
    April 12, 2024

    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

    M
    McCoy.sarahAuthor
    Participant
    April 12, 2024

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

    JoãoCésar17023019
    Community Expert
    JoãoCésar17023019Community Expert
    Community Expert
    April 12, 2024

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

     

    Or you can just use static text fields.

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices