Solved

Black Text Input needs opposite color highlight

Posted on 2011-03-16
19
930 Views
Last Modified: 2013-11-11
I have an input box that has white text set within flash with a black box layered behind it.
Is there a way to modify the highlight and font color of the input text when selected with white bkgd/ black text  instead of the default black bkgd /white text?

I have show border unselected so I can show the black box from behind.
0
Comment
Question by:pixystk
  • 9
  • 8
  • 2
19 Comments
 
LVL 20

Expert Comment

by:ChristoferDutz
Comment Utility
0
 
LVL 29

Expert Comment

by:dgofman
Comment Utility
I can suggest advanced solution.
You can get full control on your TextInput component by implementing custom skin.

For example this code will remove borders and background color

<mx:TextInput borderSkin="{null}" text="Hello"/>

By default TextInput borderSkin is "mx.skins.halo.HaloBorder"

You can create your custom class and extends from HaloBorder and override updateDisplayList(w:Number, h:Number):void function.
0
 
LVL 20

Expert Comment

by:ChristoferDutz
Comment Utility
Well I agree @dgofman but as far as I understood the question, the author doesn't use Flex but native Flash.
0
 

Author Comment

by:pixystk
Comment Utility
Yep, I'm strictly using flash/actionscript 3, so I'm still playing with the solution suggested first.
Unfortunately it doesn't look like there's an "easy" fix for this. This suggestion tho works for regular text and not necessarily input text.

Just for confirmation, I need to create a /com folder and inside it a /digitalflipbook folder then a /text folder and that will be where the .as file resides? Once it's actually there, do I need to modify the path within the .as file that references com.digitalflipbook.text and just call the class??

Thanks
0
 
LVL 29

Expert Comment

by:dgofman
Comment Utility
Are you using ActionScript codding or TextInput from "Component" libraries?
0
 

Author Comment

by:pixystk
Comment Utility
I'm not using components. I've added a textInput to the stage and gave it an instance name and I'm calling it in AS.
0
 
LVL 29

Expert Comment

by:dgofman
Comment Utility
Last question, are you using Adobe Flash CS3/4 Professional or Eclipse ActionScript Project?
0
 

Author Comment

by:pixystk
Comment Utility
Flash CS4 Pro
0
 
LVL 29

Expert Comment

by:dgofman
Comment Utility
In this case you can use TextInput from fl library

import fl.controls.TextInput;

var textFmt:TextFormat = new TextFormat();
textFmt.color = 0xFFFFFF;
textFmt.font = "Arial"
textFmt.size = 12;

var myTextInput:TextInput = new TextInput();
myTextInput.text = "HELLO WORLD";
myTextInput.textField.background = true;
myTextInput.textField.backgroundColor = 0x000000;
myTextInput.setStyle("textFormat", textFmt);
myTextInput.move(10, 10);
addChild(myTextInput);
0
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 

Author Comment

by:pixystk
Comment Utility
I'm getting errors on fl.controls.TextInput

1172: Definition fl.controls:TextInput could not be found.

is there a library I need to update?
0
 
LVL 29

Expert Comment

by:dgofman
Comment Utility
FL library by default exisits in your Flash Player project.
Click File->Publish Settings..
Click Flash Tab
Click on Settings... button
Pick "Library Path" tab
You should add line

$(AppConfig)/ActionScript 3.0/libs
0
 

Author Comment

by:pixystk
Comment Utility
that's in there already... any other suggestions?
0
 

Author Comment

by:pixystk
Comment Utility
ah!! I got it... I added a textInput component to the stage and deleted it so it's now in my library. Voila, no errors.

So would I then create an if statement that checks to see if the text is selected then change the backgroundcolor and text color???
0
 
LVL 29

Expert Comment

by:dgofman
Comment Utility
Add Classpath manually point to

C:\Program Files (x86)\Adobe\Adobe Flash CS4\Common\Configuration\Component Source\ActionScript 3.0\User Interface
0
 
LVL 29

Expert Comment

by:dgofman
Comment Utility
What do you mean?

So would I then create an if statement that checks to see if the text is selected then change the backgroundcolor and text color???
0
 

Author Comment

by:pixystk
Comment Utility
Wow I really fooked my initial question. I was actually trying to ask this:
( i mistook highlight for selection color)

How do I get the background and text to change to it's opposite when you select the input text if it's on a black background.

( black bkgd w/ white text... selected is white bkgd with black text.)

Sorry for the confusion.

Moderators... please let me know if I should start over.
0
 
LVL 29

Accepted Solution

by:
dgofman earned 500 total points
Comment Utility
In this case you should invert colors

import fl.controls.TextInput;
import flash.geom.ColorTransform;

var color:Number = 0xFFFFFF;
var backgroundColor:Number = 0x000000;

var myTextInput:TextInput = new TextInput();
myTextInput.text = "HELLO WORLD";
myTextInput.textField.background = true; 
myTextInput.textField.backgroundColor = invert(backgroundColor);
myTextInput.move(10, 10);
addChild(myTextInput);

var colorTrans:ColorTransform = new ColorTransform();
colorTrans.color = color;
colorTrans.redMultiplier = -1;
colorTrans.greenMultiplier = -1;
colorTrans.blueMultiplier = -1;
myTextInput.textField.transform.colorTransform = colorTrans;

var textFmt:TextFormat = new TextFormat();
textFmt.color = invert(color);
textFmt.font = "Arial"
textFmt.size = 12;
myTextInput.setStyle("textFormat", textFmt);

function invert(color:uint):uint
{
	var colorTrans:ColorTransform = new ColorTransform();
	colorTrans.color = color;
	return invertColorTransform(colorTrans).color;
}

function invertColorTransform(colorTrans:ColorTransform):ColorTransform
{
	with(colorTrans)
	{
		redMultiplier = -redMultiplier;
		greenMultiplier = -greenMultiplier;
		blueMultiplier = -blueMultiplier;
		redOffset = 255 - redOffset;
		greenOffset = 255 - greenOffset;
		blueOffset = 255 - blueOffset;
	}
	
	return colorTrans;
}

Open in new window

0
 

Author Closing Comment

by:pixystk
Comment Utility
YES! Sorry it took so long to explain. I was thinking "highlight:" as in hightlighter pen.

Where is the button to give extra points for patience and understanding?!

Thanks so much!
0
 
LVL 29

Expert Comment

by:dgofman
Comment Utility
I only can suggest to open a new ticket and give points to ChristoferDutz.
He first submitted an answer about ColorTransform / invert. :)
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

There are times in your Flash CS4 application when you want more than a simple pointer or a hand, and it's hard to find an ideal walk-through to tell you what to do.  I spent a few days recently learning my way around making custom cursors in Flash,…
Here are some practices and techniques that can be adopted into your Flash/Flex application development process. Note: Not all "performance tips" provide an immediately-recognizable benefit.   This article does not include timing validation data,…
The goal of the tutorial is to teach the user how to use the auto adjust feature and what the different options do. When your video is not working right you can choose the auto adjust feature to help choose your settings.
The goal of the tutorial is to teach the user how to select which audio input to use. Once you have an audio input plugged into the laptop or computer, you will go into the audio input settings and choose which audio input you want to use.

771 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now