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

7 replies
1147 views
Translate

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 is closed to new replies. Start a new post to keep the conversation going.

JoãoCésar17023019Correct answer

Community Expert

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

Translate

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 };
}

Translate

JoãoCésar17023019

Correct answer

Community Expert

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

Translate