The following example shows how you can easily create a drop shadow effect on a TextInput control using the dropShadowEnabled style (instead of creating a DropShadowFilter), as well as control the drop shadow effect’s color, direction, and distance (using the dropShadowColor, shadowDirection, and shadowDistance styles, respectively).
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/30/creating-drop-shadows-on-the-flex-textinput-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:ApplicationControlBar dock="true">
<mx:Grid>
<mx:GridRow>
<!-- dropShadowEnabled -->
<mx:GridItem>
<mx:CheckBox id="checkBox"
label="dropShadowEnabled:"
selected="true"
labelPlacement="left" />
</mx:GridItem>
<!-- dropShadowColor -->
<mx:GridItem>
<mx:Label text="dropShadowColor:" />
<mx:ColorPicker id="colorPicker" />
</mx:GridItem>
</mx:GridRow>
<mx:GridRow>
<!-- shadowDirection -->
<mx:GridItem>
<mx:Label text="shadowDirection:" />
<mx:ComboBox id="comboBox" selectedIndex="1">
<mx:dataProvider>
<mx:String>left</mx:String>
<mx:String>center</mx:String>
<mx:String>right</mx:String>
</mx:dataProvider>
</mx:ComboBox>
</mx:GridItem>
<!-- shadowDistance -->
<mx:GridItem>
<mx:Label text="shadowDistance:" />
<mx:HSlider id="slider"
minimum="-10"
maximum="10"
value="2"
liveDragging="true"
snapInterval="1"
tickInterval="1"
dataTipPrecision="0" />
</mx:GridItem>
</mx:GridRow>
</mx:Grid>
</mx:ApplicationControlBar>
<mx:TextInput id="textInput"
dropShadowEnabled="{checkBox.selected}"
dropShadowColor="{colorPicker.selectedColor}"
shadowDirection="{comboBox.selectedItem}"
shadowDistance="{slider.value}" />
</mx:Application>
View source is enabled in the following example.





0 Responses to “Creating drop shadows on the Flex TextInput control”
Leave a Reply