Highlighted

tlfTextField - Highlight a part of text with "Code"

Contributor ,
Aug 03, 2019

Copy link to clipboard

Copied

Hello All,

I wonder how to change the text "Highlight" with the code?

highlight.png

For instance, I can change the contents inside Parenthesis by this code:

private function decorate():void {

    var tf:TextFormat = new TextFormat();

    tf.color = 0x990000;

    var startPoint:int = 0;

    while (startPoint != -1) {

        var n1:int = textMc.tlfText.text.indexOf("(", startPoint);

        var n2:int = textMc.tlfText.text.indexOf(")", n1 + 1);

        if (n1 == -1 || n2 == -1) {

            return;

        }

       textMc.tlfText.setTextFormat(tf, n1 + 1, n2);

       startPoint = n2 + 1;

    }

}

So I know "tf.color = 0x990000;" will change the Font color, however, don't know how to "highlight" some text, with code, as I do inside Flash manually.

My closest guess based on documentation was "backgroundColor" property, but if I add this line of code in the above function:

tf.color = 0x990000;

tf.backgroundColor = 0x990000;

Nothing happens.

Thanks for reading and will appreciate any help.

I finally found it!!

You need to use "getCharBoundaries" method of the tlfTextField to draw a rectangle as the "highlight".

So you find the first and last character in the string that needs to be Highlighted and then use this method:

     //i.e first Char is 3 and last Char is 7

     addHil(3, 7);

     function addHil(chrFrm:uint, chrTo:uint):void {

          var hil:Shape = new Shape();

          var fstChr:Rectangle = tlfTxt.getCharBoundaries(chrFrm);

          var lstChr:Rectangle = tlfTxt.getCharBoundaries(chrTo);

          hil.graphics.clear();

          hil.graphics.beginFill(0xFF0000, .35);

          hil.graphics.drawRect((lstChr.x + 5), (lstChr.y + 5), fstChr.x + 5 - lstChr.x + 5, fstChr.height);

          hil.graphics.endFill();

          addChild(hil);

     }

And here is the sample output (RTL - Persian text):

highlight.png

TOPICS
ActionScript

Views

105

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

tlfTextField - Highlight a part of text with "Code"

Contributor ,
Aug 03, 2019

Copy link to clipboard

Copied

Hello All,

I wonder how to change the text "Highlight" with the code?

highlight.png

For instance, I can change the contents inside Parenthesis by this code:

private function decorate():void {

    var tf:TextFormat = new TextFormat();

    tf.color = 0x990000;

    var startPoint:int = 0;

    while (startPoint != -1) {

        var n1:int = textMc.tlfText.text.indexOf("(", startPoint);

        var n2:int = textMc.tlfText.text.indexOf(")", n1 + 1);

        if (n1 == -1 || n2 == -1) {

            return;

        }

       textMc.tlfText.setTextFormat(tf, n1 + 1, n2);

       startPoint = n2 + 1;

    }

}

So I know "tf.color = 0x990000;" will change the Font color, however, don't know how to "highlight" some text, with code, as I do inside Flash manually.

My closest guess based on documentation was "backgroundColor" property, but if I add this line of code in the above function:

tf.color = 0x990000;

tf.backgroundColor = 0x990000;

Nothing happens.

Thanks for reading and will appreciate any help.

I finally found it!!

You need to use "getCharBoundaries" method of the tlfTextField to draw a rectangle as the "highlight".

So you find the first and last character in the string that needs to be Highlighted and then use this method:

     //i.e first Char is 3 and last Char is 7

     addHil(3, 7);

     function addHil(chrFrm:uint, chrTo:uint):void {

          var hil:Shape = new Shape();

          var fstChr:Rectangle = tlfTxt.getCharBoundaries(chrFrm);

          var lstChr:Rectangle = tlfTxt.getCharBoundaries(chrTo);

          hil.graphics.clear();

          hil.graphics.beginFill(0xFF0000, .35);

          hil.graphics.drawRect((lstChr.x + 5), (lstChr.y + 5), fstChr.x + 5 - lstChr.x + 5, fstChr.height);

          hil.graphics.endFill();

          addChild(hil);

     }

And here is the sample output (RTL - Persian text):

highlight.png

TOPICS
ActionScript

Views

106

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Aug 03, 2019 0
Adobe Community Professional ,
Aug 03, 2019

Copy link to clipboard

Copied

use:

tf.background=true;

tf.backgroundColor=0x990000;

but that will change the entire textfield's background.  you can't change different regions of the textfield to different colors.  you could use different textfields with different background colors.  or you could use some other way to 'highlight' text.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 03, 2019 0
Contributor ,
Aug 03, 2019

Copy link to clipboard

Copied

Thank you for your prompt reply.

Well, I checked that and noted "TextFormat" does not have any of these properties:background

backgroundColor

I may use another method like this:

    function setFont(tlfTxt:TLFTextField):void {

    var tlf:TextLayoutFormat = new TextLayoutFormat();

    var textFlow:TextFlow;

    tlf.color = 0xffee66;

    tlf.backgroundColor = 0xff66ee;

    //set new format to tlfTxt

    textFlow = tlfTxt.textFlow;

    textFlow.hostFormat = tlf;

    textFlow.flowComposer.updateAllControllers();

    }

Then "TextLayoutFormat" have the property "backgroundColor". But still, it does not have "background" property so that I set it to true (even for the whole text). So nothing happens when I add/remove that line.

I wonder how this is possible inside Flash CS6, but not with actionscript?

In Flash:

- You Double click on any part of text inside "TLF Text" to select it.

- Then you click on "Highlight" and select a color.

- You change different regions of the textfield to different colors. 

highlight.png

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 03, 2019 0
Adobe Community Professional ,
Aug 03, 2019

Copy link to clipboard

Copied

Well, I checked that and noted "TextFormat" does not have any of these properties:background

backgroundColor

the textfield class has those properties.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 03, 2019 2
Contributor ,
Aug 03, 2019

Copy link to clipboard

Copied

I finally found it!!

You need to use "getCharBoundaries" method of the tlfTextField to draw a rectangle as the "highlight".

So you find the first and last character in the string that needs to be Highlighted and then use this method:

     //i.e first Char is 3 and last Char is 7

     addHil(3, 7);

     function addHil(chrFrm:uint, chrTo:uint):void {

          var hil:Shape = new Shape();

          var fstChr:Rectangle = tlfTxt.getCharBoundaries(chrFrm);

          var lstChr:Rectangle = tlfTxt.getCharBoundaries(chrTo);

          hil.graphics.clear();

          hil.graphics.beginFill(0xFF0000, .35);

          hil.graphics.drawRect((lstChr.x + 5), (lstChr.y + 5), fstChr.x + 5 - lstChr.x + 5, fstChr.height);

          hil.graphics.endFill();

          addChild(hil);

     }

And here is the sample output (RTL - Persian text):

highlight.png

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 03, 2019 1