Highlighted

HTML5 Canvas / using html code in dynamic textfield

Participant ,
Feb 11, 2019

Copy link to clipboard

Copied

Hello, and first sorry for mu english
I am trying o make a animation with dynamic text field, everything work with simple text, but when I want to manipulate a text with html code it doesn't work

My code

info = "<b>Hello</<b>";

myTextField.text = info; ///doesn't format my text

myTextField.htmlTxt = info; ///doesn't format my text

I am making that in a HTML5 Canvas

Thanks for your help !

Adobe Community Professional
Correct answer by JoãoCésar | Adobe Community Professional

Hi.

Animate regular text fields are canvas based. So you cannot style text using HTML tags.

This is a canvas limitation.

And that html option for text field is greyed out because it only works in AS3 documents.

If you want HTML formatting, you can use a Label component (Window > Components).

Then you can change the text like this:

setTimeout(function()

{

    dom_overlay_container.children[0].innerHTML = "<b>Hello</<b>";

}, 0);

Then you wrap this label component inside of a Graphic or Movie Clip symbol for animation.

I hope this helps.

Regards,

JC

Views

2.1K

Likes

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

HTML5 Canvas / using html code in dynamic textfield

Participant ,
Feb 11, 2019

Copy link to clipboard

Copied

Hello, and first sorry for mu english
I am trying o make a animation with dynamic text field, everything work with simple text, but when I want to manipulate a text with html code it doesn't work

My code

info = "<b>Hello</<b>";

myTextField.text = info; ///doesn't format my text

myTextField.htmlTxt = info; ///doesn't format my text

I am making that in a HTML5 Canvas

Thanks for your help !

Adobe Community Professional
Correct answer by JoãoCésar | Adobe Community Professional

Hi.

Animate regular text fields are canvas based. So you cannot style text using HTML tags.

This is a canvas limitation.

And that html option for text field is greyed out because it only works in AS3 documents.

If you want HTML formatting, you can use a Label component (Window > Components).

Then you can change the text like this:

setTimeout(function()

{

    dom_overlay_container.children[0].innerHTML = "<b>Hello</<b>";

}, 0);

Then you wrap this label component inside of a Graphic or Movie Clip symbol for animation.

I hope this helps.

Regards,

JC

Views

2.1K

Likes

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
Feb 11, 2019 0
Engaged ,
Feb 11, 2019

Copy link to clipboard

Copied

Hi,

You can't style dynamic text like that in Animate. The code used in Actions is JS (CreateJS) and not HTML.

Click on your text field on the stage and select your typeface you want in the Properties panel. Click on the small ball (world?) to the right of the Family drop-down and choose from Adobe Fonts or Google Fonts if you like.

Likes

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
Reply
Loading...
Feb 11, 2019 0
Participant ,
Feb 11, 2019

Copy link to clipboard

Copied

Thanks a lot Greg!
When I click on the ball it show me TypeKit/google Fonts, I can see in this panel that you can turn on the <> button certainly to use html tag for my text, but I can not acces to this button (My text field is on Dynamic) any idea ?

thanks!

Likes

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
Reply
Loading...
Feb 11, 2019 0
Engaged ,
Feb 11, 2019

Copy link to clipboard

Copied

No worries.

Yeah, unfortunately that is greyed out/not accessible as it is not available when you work in HTML5 Canvas mode. Sorry I cant be of more help.

Cheers.

Likes

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
Reply
Loading...
Feb 11, 2019 0
Participant ,
Feb 11, 2019

Copy link to clipboard

Copied

ok thanks a lot Greg for you help, it is a very bad news
I feel desperate!

Likes

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
Reply
Loading...
Feb 11, 2019 0
Engaged ,
Feb 11, 2019

Copy link to clipboard

Copied

Yeah, it is restrictive when using dynamic text (though I use it all the time). Have a look in Google Fonts or Adobe Fonts as you will get a decent font family that will give you the option to bold the text in the text field through the Properties panel.

Cheers.

Likes

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
Reply
Loading...
Feb 11, 2019 0
Adobe Community Professional ,
Feb 11, 2019

Copy link to clipboard

Copied

Depending on what you are doing and though Edge Animate is not developed any more, it allow you to format text with html5 tags and css.  You can still use it if you project needs it.

Likes

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
Reply
Loading...
Feb 11, 2019 0
Participant ,
Feb 11, 2019

Copy link to clipboard

Copied

Thanks a lot for you answers and help.

I use to do everything in edge animate, but I am managing a campaign on Amazon and they don't want my previous banners...that work everywhere else !

So no solution on my side, need to deal with Amazon  

Again thanks for your help

Likes

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
Reply
Loading...
Feb 11, 2019 1
Adobe Community Professional ,
Feb 11, 2019

Copy link to clipboard

Copied

Hi.

Animate regular text fields are canvas based. So you cannot style text using HTML tags.

This is a canvas limitation.

And that html option for text field is greyed out because it only works in AS3 documents.

If you want HTML formatting, you can use a Label component (Window > Components).

Then you can change the text like this:

setTimeout(function()

{

    dom_overlay_container.children[0].innerHTML = "<b>Hello</<b>";

}, 0);

Then you wrap this label component inside of a Graphic or Movie Clip symbol for animation.

I hope this helps.

Regards,

JC

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Likes

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
Reply
Loading...
Feb 11, 2019 2
Adobe Community Professional ,
Feb 11, 2019

Copy link to clipboard

Copied

Awesome JC, you know your stuff!

Likes

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
Reply
Loading...
Feb 11, 2019 1
Adobe Community Professional ,
Feb 11, 2019

Copy link to clipboard

Copied

Using the label component just to put some styled text on the screen is an incredibly "heavy" solution, because using any component triggers inclusion of the entire jQuery library. The lightweight solution is to create a DIV layer floated over the the stage yourself. A general purpose function for doing this is described here:

Re: How can I add video

The one advantage of using a component is that they're first-class timeline objects. When creating your own DIVs you have to manually manage their visibility.

Likes

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
Reply
Loading...
Feb 11, 2019 1
Participant ,
Feb 12, 2019

Copy link to clipboard

Copied

Thanks JC !
It is the first time I use Animate CC, I believe in your solution. It doesn't work for the moment on my side, but I will fixe that
I will keep you inform

Likes

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
Reply
Loading...
Feb 12, 2019 1
Participant ,
Feb 12, 2019

Copy link to clipboard

Copied

It works!!!

Likes

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
Reply
Loading...
Feb 12, 2019 2
Adobe Community Professional ,
Feb 12, 2019

Copy link to clipboard

Copied

Excellent!

You're welcome!

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Likes

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
Reply
Loading...
Feb 12, 2019 0
Participant ,
Feb 13, 2019

Copy link to clipboard

Copied

Hello,

back to my probleme, the solution work, but when I add a new movie clip with a the text component, I can not add a new HTML text inside(only the first the first is load), and when the animation loop, the text doesn't want to load anymore in any movie clip   any idea to solve that problem?

Thanks for your help

Likes

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
Reply
Loading...
Feb 13, 2019 0
Adobe Community Professional ,
Feb 13, 2019

Copy link to clipboard

Copied

Hi.

Can you provide a sample showing this issue?

Regards,

JC

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Likes

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
Reply
Loading...
Feb 13, 2019 0
Participant ,
Feb 14, 2019

Copy link to clipboard

Copied

Hello JC, thanks a lot!

Here is my source : https://we.tl/t-FRnGjInHFH

My mains problems is that :

- when I try to insert two texts for two Components at the same moment, only one is insert

- when the animation loop, there is no text anymore

thanks!

Likes

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
Reply
Loading...
Feb 14, 2019 0
Advocate ,
Feb 14, 2019

Copy link to clipboard

Copied

Hi Spout

If I may, let me comment on this case which I follow with a certain interest.

It is JC's mission to comment on your Animate file, wasn't it him who suggested using the Label component in the frist place. I do not agree with this method, but you said "I believe in your solution", voilà, here we are .

Nevertheless, a few quick things about your file:

  • You instance-named almost all of the labels as "dom_overlay_container".

Alright, JC suggested this:

  1. setTimeout(function() 
  2.     dom_overlay_container.children[0].innerHTML = "<b>Hello</<b>"
  3. }, 0
  4. ); 

The dom_overlay_container is an HTML <div> within the animation_container <div> in your index.html. The children[0] refers to the first label within dom_overlay_container which you set up by adding a label component to the stage (or to a movieclip instance on the stage i.e. "Text_09").

Because you gave almost all labels the instance-name "dom_overlay_container", this becomes the id of a all HTML <label> elements within your dom_overlay_container <div>. You know that an id="unique_name" in HTML must be unique.

Additionally because you code in all cases

setTimeout(function()  { 

    dom_overlay_container.children[0].innerHTML = parent.Text_06.toUpperCase();

}, 0); 

You are always refering to the same child <label> with children[0]. When you open up the Inspector in your browser when testing your index.fla you can get an impression what is happening:

Screenshot 2019-02-14 at 12.03.44.png

The thing is, that using something like the label component without really knowing what and where everything is happening is not a good way of working.

...sorry.

But the main purpose of my writing here is to question the entire method. i agree with ClayUUID's comment "Using the label component just to put some styled text on the screen is an incredibly "heavy" solution...". Yeah, that's right!

When I look at your original motivation to style text with HTML and see what you are actually styling this way, I think that could be done differently and much simpler.

For instance take this formatting from your code in frame 1:

Text_01=centrage+"<font face='gotham_bookregular' style='font-size:50px'color='FFFFFF' >rien que<br>pour vous !</font><br><font face='gotham_boldregular' color='"+ColorText+"' style='font-size:18pt' >#OFFREFINAL</font>";

For a start font face is so depricated, that's not in use in proper HTML since the use of CSS (≈20 years). Then color, you can do that with regular textfields in Animate. No need for HTML or CSS. The same is to say about style='font-size:18pt'.

My honest suggestion to you: Forget HTML and CSS. Use for all your texts static textfield. And format those textfields with gusto. Color, boldness, font-size, font family .. it's all yours. Then make sure that in Publish Settings your have Export document as texture selected. This will make sure that your texts will be saved as bitmaps in spritesheets. This makes sure that all your typographic styles are save and you can animate them and everything.

It's a bit expensive in file size but it will look great and it will be easy to work with.

Klaus

Likes

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
Reply
Loading...
Feb 14, 2019 2
Adobe Community Professional ,
Feb 14, 2019

Copy link to clipboard

Copied

Hi.

I fixed for you.

The two main problems were:

- You named the label instances as dom_overlay_container. This is probably my fault because I didn't explain to you. But dom_overlay_container is a div element that Animate CC creates to contain all components because components aren't canvas based objects.

To reference labels by the instance name it should be like this:

setTimeout(function()

{

    dom_overlay_container.children[label].innerHTML = exportRoot[text].toUpperCase();

}, 0);

- Your labels texts were not set after the first time because the way Movie Clips work in canvas mode. By default, when the timeline goes back to a previous frame, the code inside of a Movie Clip instance is not executed again. There are some properties, like mode, that should change this behavior, but I struggled making it work. So my workaround was to add a second frame to each text movie clip and add a simple this.stop() instruction. This way forces the code to be executed again.

Another thing I did was to move your set text calls to a handy function in the main timeline so it's easier to manage and debug because you don't have code spread everywhere.

FLA download:

animate_cc_html5_banner_html_text.zip - Google Drive

I hope this helps.
Regards,
JC
__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Likes

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
Reply
Loading...
Feb 14, 2019 0
Adobe Community Professional ,
Feb 14, 2019

Copy link to clipboard

Copied

Thanks for your feedback, Klaus.

I understand Clay's and your point of view.

I would certainly use regular text fields for this case.

"Using the label component just to put some styled text on the screen is an incredibly "heavy" solution...".

But I partially agree with this comment.

Yeah, it may be a "heavy" solution. But this is not a game or a complex app. It's a simple banner.

Also, solving this case by coding floating elements to follow what's going on in the main timeline is basically turn Animate CC into a code editor.

The big advantage of ANCC is, among other things, its amazing IDE and animation workflow.

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Likes

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
Reply
Loading...
Feb 14, 2019 1
Participant ,
Feb 14, 2019

Copy link to clipboard

Copied

Thanks so much JC, I really appreciate, it works and it will be more easy for me to understand by looking at your code

@Klaus, thanks for your explanation and you time too, I don't have your level in Animate CC, and in html in general, your explaination are rellay helpfull

Regards

Likes

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
Reply
Loading...
Feb 14, 2019 2
Adobe Community Professional ,
Feb 14, 2019

Copy link to clipboard

Copied

JoãoCésar  wrote

Yeah, it may be a "heavy" solution. But this is not a game or a complex app. It's a simple banner.

You seem to have taken the opposite sense of what "heavy" means in this context. It means adding a large chunk of code to what's required to run the page. That's exactly what any reasonable developer would NOT want for their simple banner.

Likes

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
Reply
Loading...
Feb 14, 2019 0
Adobe Community Professional ,
Feb 14, 2019

Copy link to clipboard

Copied

Sometimes you do what you have to do even if it is "heavy". I appreciate JoãoCésar and anyone who takes the time to find a solution for a post. Sometimes several solutions are possible and the original poster can decide what he wants to do.

So thank you JoãoCésar for your solution!

BTW Edge Animate was better for text formatting and there are many other apps out there that allow just that. Sometimes ANCC is not the right product.

Likes

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
Reply
Loading...
Feb 14, 2019 1
Adobe Community Professional ,
Feb 14, 2019

Copy link to clipboard

Copied

resdesign  wrote

BTW Edge Animate was better...

That reminds me, I've been meaning to ask why you're always bringing up Edge Animate. This is the Adobe Animate CC forum. People come here to ask how to do things in Adobe Animate CC. Edge Animate is not relevant. Edge Animate is discontinued. It's not coming back.

Likes

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
Reply
Loading...
Feb 14, 2019 0
Adobe Community Professional ,
Feb 14, 2019

Copy link to clipboard

Copied

We are here to serve the user as far as I am concerned.

So I brought up EA because it is relevant is this discussion about HTML5 text formatting.

I understand you are very protective of ANCC and I understand this is the ANCC forum. Still I think it is OK to bring up something that may help the user.

Likes

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
Reply
Loading...
Feb 14, 2019 0
Adobe Community Professional ,
Feb 14, 2019

Copy link to clipboard

Copied

BTW As one of the top contributors on the Edge Animate forum. I am obviously Aware of anything Edge Animate.

Likes

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
Reply
Loading...
Feb 14, 2019 0