Skip to main content
McCoy.sarah
Participant
Apr 12, 2024 6:52 AM UTC
Question

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

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 is closed to new replies. Start a new post to keep the conversation going.

    5 replies

    JoãoCésar17023019
    Community Expert
    JoãoCésar17023019Community Expert
    Community Expert
    Apr 12, 2024 12:20 PM UTC

    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

    Translate
    McCoy.sarahAuthor
    Participant
    Apr 12, 2024 12:45 PM UTC

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

    Translate
    JoãoCésar17023019
    Community Expert
    JoãoCésar17023019Community Expert
    Community Expert
    Apr 12, 2024 12:54 PM UTC

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

     

    Or you can just use static text fields.

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