Skip to main content
W
WatsonjWT2013
Inspiring
June 24, 2013
Question

Changing color of String based off text?

  • June 24, 2013
  • 2 replies
  • 2321 views

So I have a input box and an output box.

I was thinking about adding "codes" into the input box, that if you put them in, it would change the color of the text in the output box based off it. Now, that wouldn't be hard, except if they put 2 or more codes into it.

Example:

Say the code was <color=HexHere>Your Text </color>

and the user put this into the input box: <color=FF0000>Super Cool Text</color>

It would display as:

Super Cool Text

That wouldn't be hard. But if they did this:

<color=FF0000>Super </color><color=00FF00>Cool </color><color=0000FF>Text</color>

It would have to output like this:

Super Cool Text

The issue is I don't know how to modify the output's colors in strings like that. I know how to make it one solid color. But not multiple.

Edit:

I need to know how to get items out of the string between two various points. If someone could help me, that'd be nice.

This topic has been closed for replies.

2 replies

A
Andrei1-bKoviI
Inspiring
June 26, 2013

Perhaps the easiest way would be to re-purpose input tags and convert them into html tags.

Here is a working example - just put this script on timeline, compile and enter data the way you specified:

stop();
var input:TextField;
var output:TextField;
init();
function init():void
{
          input = new TextField();
          input.defaultTextFormat = new TextFormat("Arial", 12);
          input.type = TextFieldType.INPUT;
          input.multiline = input.wordWrap = false;
          input.width = 500;
          input.height = 22;
          input.border = true;
          input.x = input.y = 20;
          input.addEventListener(Event.CHANGE, onInput);
  
          output = new TextField();
          output.defaultTextFormat = new TextFormat("Arial", 12);
          output.multiline = input.wordWrap = false;
          output.border = true;
          output.width = 500;
          output.height = 22;
          output.x = input.x;
          output.y = input.y + input.height + 10;
  
          addChild(input);
          addChild(output);
}
function onInput(e:Event):void
{
          var tags:Array = input.text.match(/<color=\w+>(\w|\s)+<\/color>/g);
          for (var i:int = tags.length - 1; i >= 0; i--)
          {
                    tags = String(tags).replace(/<color/g, "<font color").replace(/\/color/g, "/font").replace(/((?<=\=)\w+)/g, "'#$1'");
          }
          output.htmlText = tags.join("");
}
W
WatsonjWT2013Author
Inspiring
June 27, 2013

Simply amazing!

Now, I'm going to be using more than just text coloring.

How would I go about using AS3's glow element with text? - It'd work just like how I'm working with the color's, but it would be a glow.

A
Andrei1-bKoviI
Inspiring
June 27, 2013

Filters is a trickier task.

Since filters cannot be applied to a partial text in the same TextField (or this is what I know) but to entries TextField - you will need to split text and write into different instances of TextField with subsequent application of filters to each individual instance.

kglad
Community Expert
kgladCommunity Expert
Community Expert
June 24, 2013

use:

<font color='#FF0000'>Super </font><font color='#00FF00'>Cool </font><font color='#0000FF'>Text</font>

W
WatsonjWT2013Author
Inspiring
June 24, 2013

The idea is to get the user of this swf to enter the codes in decimal format (It's what we use normally), and that would be converted by my code and it would only spit out the end product.

So far I've got it to work like so:

<color>123456</color>

and it converts from decimal to hex, so it shows the color correctly.

Edit: Got it to remove the color text from the string, but I still don't know how to make it use more than one color

Edit:

I've changed it so you type <col=123456>And This would be the colored text.

The issue is, that it doesn't remove the ending: >

Does anyone see an issue with this code:


var txString:String = typeText.text;

if(txString.indexOf("<col=") >= 0){

   var newColor:int;

   var endCol:int = txString.indexOf(">");

   var colString:String = txString.substr(5, txString.indexOf(">")-1);

   newColor = uint(colString);

   trace(colString);
}

I've tried playing with the indexOf("<")-1

and nothing works.

kglad
Community Expert
kgladCommunity Expert
Community Expert
June 24, 2013

i'm not sure what the code you showed is supposed to do but if you want to search a string, with the format you showed, for decimal colors and convert those into hex colors, you can use:

function hexColorF(s:String):Array{

var colorA:Array = s.split('<col=');

colorA.shift()

for(var i:int=0;i<colorA.length;i++){

colorA = Number(colorA.split(">")[0]).toString(16);

}

return colorA;

}

Firefly Community Gallery
Adobe Firefly

Remix with Firefly Community Gallery

Thousands of free creations to fall in love with and remix in Firefly.

Explore now
Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices