Problem:
We need a TextField of type TextFieldType.INPUT that has embedFonts set to true and has an inner drop shadow filter. Sounds easy enough right? The first problem is that DropShadowFilter’s don’t work correctly with TextFields created using ActionScript. The second problem is that setting embedFonts to TRUE and leaving default text empty on a TextField with type TextFieldType.INPUT causes the field not to be selectable.
Solution:
Lets tackle the DropShadowFilter first. After many failed attempts at getting filters to render correctly on TextFields the next best solution was to create a sprite that sites right behind the text field that renders the filter.
Filters for Input Text Fields
package { import flash.display.Sprite; import flash.filters.DropShadowFilter; import flash.text.TextField; import flash.text.TextFieldType; [SWF(pageTitle="Text Field Filter", backgroundColor="#FFFFFF", frameRate="30")] public class TextFieldFilter extends Sprite { public function TextFieldFilter() { var myTextField:TextField = new TextField(); myTextField.type = TextFieldType.INPUT; myTextField.width = 100; myTextField.height = 20; myTextField.border = true; myTextField.borderColor = 0x000000; var sprite:Sprite = new Sprite(); sprite.graphics.beginFill(0xFFFFFF, 1); sprite.graphics.drawRect(0, 0, myTextField.width, myTextField.height); sprite.filters = [new DropShadowFilter(4, 45, 0x666666, .4, 6, 6, 1, 1, true)]; this.addChild(sprite); this.addChild(myTextField); } } }
Filters for Input Text Fields Sample
Next lets create an TextField with type TextFieldType.INPUT and set the embed property to TRUE. Lets set the TextFormat using the setTextFormat function of the TextField and see what happens. The text is not selectable and the input field can not be used. Instead use the defaultTextFormat property of TextField to set the format. Everything works great! My best guess at the reasoning behind this is that when the TextField class is set to type INPUT the set focus attempts to reset the format to the default format. Since the setTextFormat function only sets the initial format subsequent calls break the TextField.
Embed Input Text Issue
package { import flash.display.Sprite; import flash.text.AntiAliasType; import flash.text.TextField; import flash.text.TextFieldType; import flash.text.TextFormat; [SWF(pageTitle="Embed Input Text", backgroundColor="#FFFFFF", frameRate="30")] public class EmbedInputText extends Sprite { [Embed(mimeType='application/x-font', source="assets/arial.ttf", fontName="Arial")] private var Arial:Class; public function EmbedInputText() { var myTextFormat:TextFormat = new TextFormat('Arial', 12, 0x000000); var myTextField:TextField = new TextField(); myTextField.x = 3; myTextField.y = 1; myTextField.text = ""; //<---SET TEXT HERE (*CURSOR FIX*) myTextField.type = TextFieldType.INPUT; myTextField.embedFonts = true; myTextField.antiAliasType = AntiAliasType.ADVANCED; myTextField.width = 100; myTextField.height = 20; myTextField.border = true; myTextField.borderColor = 0x000000; myTextField.selectable = true; //myTextField.text = ""; //<---THIS PREVENTS THE CURSOR FROM WORKING (*CURSOR ISSUE*) //myTextField.setTextFormat(myTextFormat); //<---THIS WILL NOT WORK (*EMBED ISSUE*) myTextField.defaultTextFormat = myTextFormat; //<---THIS DOES WORK (*EMBED FIX*) this.addChild(myTextField); } } }
Comment out the FIX lines above and un-comment the ISSUE lines if you would like to see the fail cases.
Cursor Issue:
Another interesting quirk. If you set the default text to an empty string AFTER setting the TextField properties when you initially click the input box the cursor is not displayed. The order of operations for setting properties of TextFields in ActionScript is VERY important.
Resources:
Flash Voodoo link
John Blanco’s RIA Developer’s Corner link
Adobe Livedocs DropShadowFilter link
Adobe Livedocs TextField link
it stop working if you use the .autoSize property.
Hi Luis – would an autoSize for Input text make sense anyway?
Hi Christopher Black – just want to thank a lot for this little useful line! After days and nights of trials to avoid empty input fields – this made me really happy today.
Thanks for that, it was starting to drive me a little bit nuts.
“The order of operations for setting properties of TextFields in ActionScript is VERY important. ” – I was planning to write a guide on exactly that. The problem is I still haven’t figured it out.
I generally start off with something really basic, then set properties one by one, then when a new property breaks something or doesn’t work, I try it in different places. Hardly a good use of my time.
thank you so much!
You are real hacker Thanks.
Awesome work dude. The textfield problem has been breaking my ass for hours now and setting the defaultTextFormat has fixed it for me. Nice one
Thank you everyone for the great feedback! Nigel, your comment marks the 100th comment on my blog
I had someone else ask on the .autosize property. Autosizing an empty text field will effectively shrink the size down to 1px by 1px. Which basically makes it invisible. Like Joe mentioned above, it doesn’t really make sense to set this property for an input text field.
the displayaspassword is not working with this one.
You would not need to embed the text when using display as password. When using this property the text is never shown, it’s replaced with asterisks. Does your embedded font contain a character for asterisk? Are you including the special character with the embed code?
I am using CSS – it is not working for me, really, painful stuff.