Here’s a Button sub-class that will allow you to tint your Button icons when you interact with them. The tinting is all controlled via CSS. The example below also uses a Degrafa stateful skin (see previous article here).

The Button component creates an icon for each state even if you only have one image and the icons are added to the Buttons Display list as required. As you can see in the sub-class below the tinting of the icons is handled in the ‘added’ event handler. The Button component has set names for each of the icons it creates for each state. You can use the mx_internal namespace to access the classes CurrentIcon property but this is dodgy and the method shown works well and is future-proof. Well, saying that this entire example can probably be done much easier using FXG in Flex 4 but for all of you still battling it out in Flex 3 this technique should save you the trouble of saving out lots of different images for all your button states so long as your icon is a flat single-coloured symbol.

… and here’s the Application class with the styles for the icon tinting:

you don’t need to use Degrafa to do the skinning of the button and the icon tinting will work without any skins but I threw one in just because I’m enjoying using them at the moment. Here it is :

Download the Source

UPDATE: In the Source doc generated by Flex the Metadata for the Styles seems to have been written incorrectly. The correct way to assign custom style metadata to your class is like so …

[Style(name="iconUpTint", type="uint", format="Color", inherit="yes")]

Not sure why the doc was mis-read.

I’ve been using Degrafa lately to build programmatic skins for a Flex theme. Degrafa is a ‘Declarative Graphics Format’ that allows you to draw graphics using MXML. This isn’t all it does though. You can use binding to dynamically adapt the graphics and it also extends your ability to change the styles of skins with CSS. I’ll be looking closely at that next as it does look rather interesting.

Degrafa is very powerful and I think I will continue to use it even when I’m deep into Flex 4 and FXG which uses very similar syntax.

The latest version of Degrafa allows you to add states to a skin so you can easily change the visual appearance based on the state of the skinned object. Here’s an example …

If you view the source (right-click in the iFrame) and take a look at the PopButtonSkin class you can see how this simple PopMenuButton component was skinned without any graphics files.

And here’s the Application file for you to look over. You can also grab the source from the example above by right-clicking and ‘viewing the source’.

The main thing to know about PopButton components in Flex is that they have extra button states that you need to know about. They are the pop-up-over and pop-up-down states. It is these states that are triggered when the user is interacting with the ‘arrow’ part of the popButton although this symbol is only part of the default halo skin. Also, the arrow can be changed for any icon. Remember that the skin for these states covers the entire button and isn’t an overlay over the hit area. In my example I’m drawing a backslash where my arrow should be until you roll over and it prompts the interaction.

Notice in the skin file that the fills and strokes are created separately from the Geometry. This is very useful as it means you could create a completely separate file to manage the palette of your app. I don’t just mean the colour scheme though. You can set out all your grads, stroke weights and fills and then reference them in different skins to ensure consistency.

The geometry is very straightforward and the skinWidth and skinHeight properties ensure the skin fits the component perfectly. Notice my borders are comprised of three rectangles overlaid and I’m offsetting them to create a border around my button. I could have used two rectangles with strokes to get the same result. The strokes use gradients too.

Before Degrafa introduced states you would have a whole bunch of objects declared in your geometry and would differentiate each object with the button state by using the objects state property. This could get quite messy. Now you will notice that the states are set separately and work in just the same way that you would expect. You can adjust the properties of objects, add and remove children and you can base one state on another to avoid any duplication of code. Overall this is a very neat way of creating skins.

Notice I add the IsocelesTriangle AutoShape to the geometry only on the over state. The down state is based on the over state so it will retain the arrow. This arrow could also be animated when you click by creating a tween and effecting the RotateTransform angle property.

The next step is to add filter support and transitions. I’ve seen some animation done with Degrafa that seemed very easy to implement … it’s time to play some more.