Changing color of String based off text?

[WatsonjWT2013]

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.

[kglad]

use:

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

[WatsonjWT2013]

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]

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;

}

[Andrei1-bKoviI]

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("");
}

[WatsonjWT2013]

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.

[Andrei1-bKoviI]

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.

[Andrei1-bKoviI]

Here is one of the ways you can deal with filters:

stop();
import flash.display.Sprite;
import flash.events.Event;
import flash.filters.BitmapFilterQuality;
import flash.filters.GlowFilter;
import flash.text.TextField;
import flash.text.TextFieldAutoSize;
import flash.text.TextFieldType;
import flash.text.TextFormat;
var input:TextField;
var outputs:Array = [];
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);
          addChild(input);
}
function onInput(e:Event):void
{
          while (outputs.length > 0)
          {
                    removeChild(outputs[0] as TextField);
                    outputs.shift();
          }
          var tags:Array = input.text.match(/<color=\w+>(\w|\s)+<\/color>/g);
          for each (var tag:String in tags)
                    outputs.push(textField(tag.match(/(?<=\>)(\w|\s)+/g)[0], uint("0x" + tag.match(/(?<=\=)\w+/))));
          placeOutputs();
}
function placeOutputs():void
{
          var nextX:Number = input.x;
          var nextY:Number = input.y + input.height + 10;
          for each (var t:TextField in outputs)
          {
                    addChild(t);
                    t.x = nextX;
                    t.y = nextY;
                    nextX += t.width;
          }
}
function textField(text:String, color:uint = 0):TextField
{
          var t:TextField = new TextField();
          t.defaultTextFormat = new TextFormat("Arial", 12, color);
          t.multiline = t.wordWrap = false;
          t.autoSize = TextFieldAutoSize.LEFT;
          t.text = text;
          t.filters = [new GlowFilter(color, .3, 5, 5, 3, BitmapFilterQuality.HIGH)];
          return t;
}

Made it a bit tighter.