Flex Chronicles #13: One Way to Skin a Button

I haven’t figured out how to get this dyanamic yet, meaning, loading an image externally that isn’t compiled in. I know it can be done, but alpha bits are tough. Best excuse I have, sorry.

There some new styles that correspond to skins. I’m still reading and learning, and have seen a CSS example Dirk posted somewhere, but the setStyle way is nice since I’m familiar with the syntax, and if it’s a style, it can be set in CSS, and bound to, etc.

Here’s an example that uses a PNG, a GIF, and a JPG.

The key is the style names, as shown here. skin_pb is the name of the Button, img is the pointer to one of the embeded images, and the the rest are the skin style names.

skin_pb.setStyle("upSkin", img);
skin_pb.setStyle("selectedUpSkin", img);
skin_pb.setStyle("selectedOverSkin", img);
skin_pb.setStyle("selectedDownSkin", img);
skin_pb.setStyle("selectedDisabledSkin", img);
skin_pb.setStyle("overSkin", img);
skin_pb.setStyle("downSkin", img);
skin_pb.setStyle("disabledSkin", img);

Flex 2 Button Skin – Source ZIP