How to style/skin Canvas Components ?

Forum|Forum|9 years ago
January 16, 2017
3 replies
1899 views

Couldn´t find any source how to style/skin the new canvas components.

New features summary for the 2017 release of Animate CC

The provided code snippets are not very helpful.

Could anyone point me in the right direction?

I´m especially interested in setting fonts, colors for the input box component and the button component.

This topic has been closed for replies.

Correct answer kglad

after posting i saw how to use that. you can use the instance name of the component instance and style with an id (#) and you can change the components class name and style the class (.)

but there are some significant limitations. eg, i can't see any way to make a textinput multiline.

Joseph Labrecque

Community Expert

You should be able to use the CSS Component to point to a .css file which provides all style information for skinning HTML5 Canvas components. Is this what you mean?

Refer to the class names of various components in your custom CSS:

kglad

Correct answer

Community Expert

after posting i saw how to use that. you can use the instance name of the component instance and style with an id (#) and you can change the components class name and style the class (.)

but there are some significant limitations. eg, i can't see any way to make a textinput multiline.

C

ClayUUID

Legend

kglad wrote
but there are some significant limitations. eg, i can't see any way to make a textinput multiline.

Yes, because the textinput component is just a wrapper around an HTML input element, which does not support multiline input, full stop.

For multiline input you use a textarea element. So, you can roll your own overlay, or wait for Adobe to add a textarea component.

kglad

Community Expert

did you ever find a way to do that?

Preran

Legend

Not the exact answer, but all possibilities for HTML5 canvas in Adobe Animate are documented in this article.

Create HTML5 Canvas documents in Animate CC

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.