Resize text inside textbox

[SiUsPlauTancat]

What i would like to do is :

I have a textbox with this text "CARL FISH".

I would like to change the color and the size only for "CARL"

Something like that :

CARL FISH

Someone can help me please?

Thanks a lot

[JoãoCésar]

Hi.

AS3 or HTML5 Canvas?

Regards,

JC

[SiUsPlauTancat]

Sorry of course HTML 5....

[JoãoCésar · Accepted solution]

Thanks.

Unfortunately dynamic text fields are canvas based and canvas text fields cannot be formatted like this.

You're gonna have to either use two text fields or create a DOM text using code or a component.

Regards,

JC

[SiUsPlauTancat]

Thanks a lot JC,

do you have any idea (maybe a link) where i can find a code for do that? i am not so familiar with HTML5, in the past i do this on AS3 and was not so complicate to do.

Thanks 

[JoãoCésar]

Sure.

If you use a Label component (Window > Components > Label), you can format its text using a very cheap workaround like this:

stage.on('drawend', function() // components cannot be accessed immediately
{
	var label = document.getElementById("label"); // "label" is the instance name in the Properties panel
	
	label.style.cssText = "font-size: 3rem; text-align: center;";
	label.innerHTML = "<p><span style='color:red; font-size: 1.5rem;'>CARL</span> FISH</p>";
}, this, true);

Of course if you need a more complex UI, you're probably gonna need to use an external CSS file.

I hope it helps.

Regards,

JC

[SiUsPlauTancat]

Understand but normally i use a dynamic textbox, because i read an external XML and write the value into the textbox, so i need a code that do this kind of work for any kind of couple Name+Surname..

thanks for your help. 

[JoãoCésar]

You can dynamically change the innerHTML property using external data. For example:

var people =
[
	{ firstName: "CARL", lastName: "FISH" },
	{ firstName: "JOHN", lastName: "DOE" },
	{ firstName: "JANE", lastName: "DOE" }
];

stage.on("drawend", function() // components cannot be accessed immediately
{
	var label = document.getElementById("label"); // "label" is the instance name in the Properties panel
	var innerHTML = "<p>";
	
	label.style.cssText = "font-size: 3rem; text-align: center;";
	
	people.forEach(function(person)
	{
		innerHTML = innerHTML + "<span style='color:red; font-size: 1.5rem;'>" + person.firstName + "</span> " + person.lastName + "<br>";
	});

	label.innerHTML = innerHTML + "</p>";
}, this, true);

But if you still need/want to use the regular text field, then you're gonna need at least two of them for each pair of names.

Regards,

JC

[SiUsPlauTancat]

Thanks JC,

understand what you are saying. I will try to adapt your code to my needed.

thanks you so much very helpfull