The Flex Drop Shadow

Shadows are all the rage right now in user interfaces - Vista and Leopard both have shadows underneath opened dialogs. They provide a really quick way to give your flat application the feeling of depth. Apparently the makers of Flex knew this, since they made adding shadows to pretty much anything very easy. By the end of this tutorial you'll know how to add drop shadows to Flex components and how to configure their appearance.

The first thing you need to know about shadows is that they have a lot of options. To help you decide what options you want for your drop shadows, I threw together a little Flex app that lets you adjust the appearance of shadows in real-time. Just drag around the sliders in the application below and the result will appear immediately on the right.

If you're done playing around, let's look at how to create some shadows. I'm going to first show you how to add drop shadows using MXML then we'll look at how to add them using ActionScript.

Adding Drop Shadows using MXML

For the first example, here's the simplest way to add a drop shadow. In this example, the shadow will be using all of the default options.

As you can see, the application is just a white box with a drop shadow applied. Filters are applied simply by adding them to Flex component's filters arrays. If you wanted to add more filters other than a drop shadow, they would be added in the same manner. Here's what the above application looks like:

Normally, the default shadow settings will work for most applications, but sometimes you need to change them. Here's the same example with the distance and angle changed.

And here's what that looks like:

Adding Drop Shadows using ActionScript

If MXML isn't your tour du jour, drop shadows can also be added using ActionScript. Below is the code required to produce the exact same application as the first MXML example.

The syntax for adding filters is a little funky, but it's necessary. What's even worse is if you want to change the properties of a shadow on the fly, you have to do all of that code every time - remaking and reassigning the filter array. If anyone knows a way around that, please let me know. So now let's look at the ActionScript code required to make the second example.

That's it for Flex drop shadows. As you can see, the good people over at Adobe made it very easy for us developers to create and use them. If you want more specific information on drop shadows, check out the Adobe live docs on the DropShadowFilter. You can also download the source code for the applications here.