Inspiring

Answered

Font size for TextInput component in Animate CC HTML5 Canvas

11 replies
3541 views
Translate

I'm converting Flash animations to HTML5 Canvas in Animate CC. How do I change the font size and font for a TextInput component?

This topic is closed to new replies. Start a new post to keep the conversation going.

JoãoCésar17023019Correct answer

Community Expert

Hi.

Here is one way of doing it:

- You use a setTimeout method to make sure the component it's ready to be referenced in the beginning;

- Access the div element called dom_overlay_container created by Animate CC that holds all DOM based components (e.g.: TextInput and CheckBox).

- Then use bracket notation to reference the instance name of your component in the children property;

- Finally, you can set any valid CSS property through the JavaScript style property.

Like this:

var textInput;
setTimeout(function()
{
    // dom_overlay_container is a global reference to a div element created by Animate CC. "txt" is the instance name of your component
    textInput = dom_overlay_container.children["txt"];
    textInput.style.fontSize = "28px";
    textInput.style.fontFamily = "'Comic Sans MS', cursive, sans-serif";
}, 0);

Regards,

JC

Dr. Ayman Raafat Ph.D

Inspiring

Also try to check this form answers

vFont/Text looks pixelated HTML5 Canvas output. Any way to fix this?

it may be helpful for you .

Ayman

Translate

avid_body16B8

Legend

since jquery loads when you add a component, I use CSS to set the text input component like this:

$("#answer1").css({
        "color": "teal",
        "font-size": 18,
        "text-align": "center"
    });

answer1 is the instance name of the component.

Translate

JoãoCésar17023019

Correct answer

Community Expert

Hi.

Here is one way of doing it:

- You use a setTimeout method to make sure the component it's ready to be referenced in the beginning;

- Access the div element called dom_overlay_container created by Animate CC that holds all DOM based components (e.g.: TextInput and CheckBox).

- Then use bracket notation to reference the instance name of your component in the children property;

- Finally, you can set any valid CSS property through the JavaScript style property.

Like this:

var textInput;
setTimeout(function()
{
    // dom_overlay_container is a global reference to a div element created by Animate CC. "txt" is the instance name of your component
    textInput = dom_overlay_container.children["txt"];
    textInput.style.fontSize = "28px";
    textInput.style.fontFamily = "'Comic Sans MS', cursive, sans-serif";
}, 0);

Regards,

JC

Translate

C

Chemistry guyAuthor

Inspiring

Thanks for the help, but I'm sorry it didn't work. I still get the tiny font size I was getting without your code.

Translate

JoãoCésar17023019

Community Expert

Are you getting any error in the browser console?

Translate

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.