Mac Style Button Skin for Flash Builder 4 (Flex Gumbo)

September 15th, 2009 · 5 Comments

I had to create some mock-ups for a project the other day and I did a quick skin of a button that I thought  I’d share. Thanks to Zach O. for the graphic assets.  Feel free to use this in any projects, personal or commercial, I just ask that you send me an e-mail and let me know that you got some use out of it.  This button is a good example of using Scale 9 and embedding assets in a Flex 4 skin file.  In the Skin component file of type <s:Skin> I have 4 <s:BitmapImage> tags.  Each tag is displayed on one of the four states: up, down, over, and disabled.  The tag uses the @Embed syntax to set its source property.   The scale 9 information is also set in this line:

  1. <s:BitmapImage left="0" right="0" top="0" bottom="0" source="@Embed(‘assets/button_up.png’, scaleGridTop=’13’, scaleGridLeft=’12’, scaleGridRight=’68’, scaleGridBottom=’14’)" resizeMode="scale" includeIn="up" />

Also notice the includeIn property, this tells the player which state the image is visible in.  Below are a few screen shots of the buttons along with links to the example project and source code.

View the Project in Action
View and Download the Source Code

Tags: ActionScript · Flash · Flash Builder 4 · Flex · Gumbo