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