[Solved] Rich Text (How to?)

(kodi) #1

Hello, im trying to create a string with multiple colors inside, i’ve seen that there is a richtext to the Text class that would accept “markups” from what’ I’ve read inside the class. Sounds like it is what I am looking for, but I tried HTML markup without success (it displays it all, the string raw , not proceced) I’m wondering if anyone could help me on this subject, I didnt find much help on google but I did find a core flash way to do it using Textfield’s “htmltext”… however i prefer to achieve it in Flashpunk if possible

any example using richtext, or explanations would help me a lot thanks

(Ultima2876) #2

I’ve never messed with rich text before but I can hazard a guess! So, to start with, use the richText property of your Text graphic to set your text as normal:

myText.richText = "red big text";

Then use the setStyle() method of the same Text graphic to set properties on specific substrings:

myText.setStyle("red", { color = 0xFF0000 } );
myText.setStyle("big", { size = text.size * 1.5 } );

Documentation here. Let me know how it goes! :slight_smile:

(azrafe7) #3

Almost correct, just don’t forget to enclose the actual text in html-like tags. :smiley:

From Text.setStyle() docs:

/**
 * Set the style for a subset of the text, for use with
 * the richText property.
 * Usage:
	   text.setStyle("red", {color: 0xFF0000});
	   text.setStyle("big", {size: text.size*2});
	   text.richText = "<big>Hello</big> <red>world</red>";
 */
public function setStyle(tagName:String, params:*):void

So:

myText.richText = "<red>red</red> <big>big</big> text";

EDIT: Ah… I see the online docs have issues with angular brackets so the important part of the example has been stripped. They should probably be replaced with html-entities in the .as to make them work online too.

(kodi) #4

Thx a lot to both of you for your fast replies! Its works

Here is exactly what I’ve done to achieve it with your support,

public var t: Text = new Text();
t.setStyle("r", { color : 0xff0000 } );
t.richText = "Levels : <r> 1-4 </r>";
addGraphic(t);

It was not working at first because I was writting something like

t.setStyle("<r>", {color : 0xff0000});

but u need to write them without the <> inside that fonction, and then use the <> inside the t.richText

thx again

(Ultima2876) #5

Ahaha, I was wondering about the richText = “” bit…

(Jonathan Stoler) #6

Just submitted a pull request that will fix the documentation, showing what the example is supposed to show rather than nothing. :wink: