1 Correct answer
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
...
25
Replies
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
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:
- setTimeout(function()
- {
- dom_overlay_container.children[0].innerHTML = "<b>Hello</<b>";
- }, 0
- );
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:
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
AdChoices