This content requires Flash

To view this content, JavaScript must be enabled, and you need the latest version of the Adobe Flash Player.

Download the free Flash Player now!

Please open the file NaturalExperiences_wt5.mxml, run the application so we get a visual sense of where we are beginning before any filters are added. Look at the fonts used in our logo, Natural and Experiences, well, there is color applied to them, white and a yellowish color. At the moment there are no filters, no Blur, Shadows, Bevels, etcetera, Alt+Tab back in to Flex Builder, and place your cursor in the IMPORT CLASSES section, as you would expect in Flex, our filters are available to us as classes from which we create objects with particular filter properties, and we then apply them to visual objects, and that's what we are going to do here.

First however we have to import our filter classes so that we can use them. I am going to import from the filters package of the flash package, first the DropShadowFilter class, and then I will import the GlowFilter class, then I will move to the end of my script block to find a comment Create Filters. We are going to take the approach of applying the filters within an event handler so that the same set of filters could be applied easily to multiple different visual elements. Within this section I am going to declare a new function, you could think of it as a method, because an application is a class file, private function addFilters, and this event handler will receive an event object, and like most all event handlers the return type will be Void. Within the body of the function, I want to create an instance of each of my filter classes. First, I will declare local variable typed as a DropShadowFilter, and then I will assign a new instance of DropShadowFilter to this particular name.

Note that when you open the parenthesis of the Drop Shadow Filter constructor function, you will see a list of the properties which could be configured for a drop shadow filter, these properties can be assigned during the constructor function, or you could separately create your filter object, and assign the properties separately. Here we will assign them to the constructor function. First I will set the distance from the filtered element where the drop shadow should appear, as 5 pixels, then I will set the angle which will be 45, then I will set the color. I am going to set the color as 0x000000, which is the hexadecimal code for black. Note however that I am using 0x as a prefix and not a #pound. When you are assigning values in CSS or through Inline styles, you can use the pound# notation which is common to CSS. However, when you are working directly in ActionScript as we are here, you should use scientific notation for hexadecimal numbers, which is a 0x prefix, but otherwise the numbering remains the same.

Next, we are going to add an alpha property, which is the transparency which we will apply. Set an alpha of .5, in Flex alpha values are set as a value between 0 and 1, and so a .5 alpha would equate to what you might otherwise think of as a 50% transparency.

Next, set a Blur of 8, both for the X and for the Y, then complete the constructor, and complete the statement. On the next line, clear a new instance of the GlowFilter Class named Glow. Declare new variable Glow typed as a GlowFilter, and then assign to it a new instance of the GlowFilter class. Open the constructor function with the parenthesis, again, you will see code hinting for this particular class will only assign a color, the color should be white. Recall it when we looked at Adobe Flash 8, we noted that potentially multiple filters could be applied to a single object. The way achieve that effect through code, is that all filters to be applied to an object must be contained within an array. If there are multiple filters within the array, then all of those filters will be applied to the object which has that set of filters applied to it.

So first declare a local variable called the filters typed as an array, and assign a new instance of the array class to it. Next, use the push method of the array class to push the shadow object into this array. Next, use the push method to add, or push the Glow object into the array. Last we want

Please open the file NaturalExperiences_wt5.mxml, run the application so we get a visual sense of where we are beginning before any filters are added. Look at the fonts used in our logo, Natural and Experiences, well, there is color applied to them, white and a yellowish color. At the moment... click to read more