Change the text color or background color of a specific line in a text field

Forum|Forum|2 years ago
May 9, 2023
3 replies
1102 views

The textfield contains multiple lines of text.
Is there a way to change the text color of a specific row where the mouse is positioned or change the background color of that row whenever the mouse is moved over the textfield?
I am unable to find a solution for that.
Example code would be appreciated.
Thank you

This topic has been closed for replies.

Correct answer JoãoCésar17023019

Hi.

Here is a simple approach. You can elaborate it more to change the highlight color or you can also use the setTextFormat method to change the character colors instead.

AS3 code:

import flash.display.DisplayObject;
import flash.display.InteractiveObject;
import flash.events.MouseEvent;
import flash.text.TextField;

function main():void
{
	var i:int;
	var child:DisplayObject;
	
	for (i = numChildren - 1; i > -1; i--)
	{
		child = getChildAt(i);
		child.addEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler);
		child.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
	}
}

function mouseOverHandler(e:MouseEvent):void
{
	stage.focus = e.currentTarget as InteractiveObject;
}

function mouseMoveHandler(e:MouseEvent):void
{
	var edges:Object = getLineEdges(e.currentTarget as TextField, e.localX, e.localY);
	e.currentTarget.setSelection(edges.firstIndex, edges.firstIndex + edges.lineLength);
}

function getLineEdges(tf:TextField, pointerX:Number, pointerY:Number):Object
{
	var charIndex:int = tf.getCharIndexAtPoint(pointerX, pointerY);
	
	if (charIndex == -1)
		return {};
	
	var lineIndex:int = tf.getLineIndexOfChar(charIndex);
	var firstIndex:int = tf.getLineOffset(lineIndex);
	var lineLength:int = tf.getLineLength(lineIndex);
	
	return { firstIndex: firstIndex, lineLength: lineLength };
}

main();

Files / source / code / download:

https://bit.ly/454awMD

I hope it helps.

Regards,

JC

kglad

Community Expert

and learn to use the as3 api. none of us (i don't believe) have it memorized.

https://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/index.html

C

Choi24652308akbgAuthor

Inspiring

Thanks for the great sample code.
But, the problem that "bottomScrollV" is not highlighted
When move the mouse to an empty space in the text field or at "MOUSE_OUT"
I have a problem with the list getting back to the top.
Is there any way to solve this problem?

sm.sort();

for (var i: uint = 0; i < sm.length; i++) {
	musicList.appendText(sm[i]+"\n");
}

var mLine:Number = musicList.textHeight/musicList.numLines/2;

DisplayObject(musicList);
addChild(musicList);
DisplayObject(mScrollBar);

musicList.visible = false;
mScrollBar.visible = false;
musicList_btn.border = true;
musicList_btn.borderColor = 0x666666;

musicList_btn.addEventListener(MouseEvent.CLICK, musicListSelect);
var musicListOK: Boolean = false;

function musicListSelect(evt: MouseEvent): void {

	musicListOK = !musicListOK;
	if (musicListOK) {
		musicList.border = true;
		musicList.borderColor = 0x003366;
		musicList.mouseWheelEnabled = true;
		musicList.visible = true;
		mScrollBar.visible = true;
		musicList.addEventListener(MouseEvent.CLICK, selectMusic);
		lineColor();
	} else {
		musicList.border = false;
		musicList.visible = false;
		mScrollBar.visible = false;
		musicList.removeEventListener(MouseEvent.CLICK, selectMusic);
	}
}

function selectMusic(e: MouseEvent): void {

	var index: uint = musicList.getLineIndexAtPoint(e.localX, e.localY-mLine);
	
	if (index >= musicList.bottomScrollV) return;
	if ((index != -1) && (index != n)) {
		n = index;
		musicPlay(sm[n]);
	}
}

function lineColor():void {

	for (var i:int = musicList.numLines - 1; i > -1; i--)  {
		musicList.addEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler);
		musicList.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
	}
}

function mouseOverHandler(e:MouseEvent):void {
	stage.focus = e.currentTarget as InteractiveObject;
}

function mouseMoveHandler(e:MouseEvent):void {
	var edges:Object = getLineEdges(e.currentTarget as TextField, e.localX, e.localY);
	e.currentTarget.setSelection(edges.firstIndex, edges.firstIndex + edges.lineLength);
}

function getLineEdges(tf:TextField, pointerX:Number, pointerY:Number):Object {
	var charIndex:int = tf.getCharIndexAtPoint(pointerX, pointerY-mLine);
	
	if (charIndex == -1) return {};

	var lineIndex:int = tf.getLineIndexOfChar(charIndex);
	var firstIndex:int = tf.getLineOffset(lineIndex);
	var lineLength:int = tf.getLineLength(lineIndex);
	
	return { firstIndex: firstIndex, lineLength: lineLength };
}

JoãoCésar17023019

Correct answer