Robert Bak – Notes

Some programming tips – updated sometimes

From photoshop design to a Flex 4 skin

When looking at some old project folders I’ve found one of the first skins I’ve created while starting with the Flex 4 skinning model, and I thought it might be an interesting case to look at, source code is included at the end of the post. It’s based on a really nice design done by Adrian Pelletier. What we’ll try to do is create a button which looks more or less like one of his button designs:

What makes it a good design is not only the way it looks but also the way the Photoshop file is created – it’s mostly based on shapes and layer effects which are easy to translate to Flex skin code.

Styling a Flex 4 Button

The Flex 4 skinning model is different from the one used in Flex 3, to keep the introduction short, let’s just say it’s now much easier to create programmatic skins, and you can do it with newly introduced MXML tags. If you ever used Degrafa to skin your components it’s should be fairly familiar, if not please check the example code. The basic usage is straight forward – you need to create a mxml file and you can start putting the new tags to design the skin.

Let’s start with the shadow behind the button, as you can see on the picture above it has 3 parts – a gradient fill, a stroke and an inner shadow, and all of them thrown on a shape of a rounded rectangle. Let’s translate this to graphic tags. First of we need that rounded rectangle, so we define a Rectangle with the corner radius using the new tags:

<s:Rect radiusY="24"
        radiusX="24"/>

That’s how easy it is to create shapes using the new syntax. Next we need to define a fill, which according to the Photoshop design is a linear gradient starting from color 0x0f2835 and ending with color 0x153445. We also need an inner drop shadow on it, so let’s add it. We also need a stroke above all this, so we need to add another rectangle which will not have the drop shadow on it, and will define that gradient stroke, just like the design. A few minutes later we have:

<s:Rect radiusY="24"
            radiusX="24"
            x="0"
            y="0"
            width="{this.width}"
            height="{this.height}"
        >
        <s:filters>
            <s:DropShadowFilter inner="true"
                                distance="0"  
                                strength="1"/>
        </s:filters>
        <s:fill>
            <mx:LinearGradient rotation="90">
                <mx:GradientEntry color="0x0f2835"/>
                <mx:GradientEntry color="0x153445"/>
            </mx:LinearGradient>
        </s:fill>
    </s:Rect>
    <s:Rect radiusY="24"
            radiusX="24"
            x="0"
            y="0"  alpha="0.8"
            width="{this.width}"
            height="{this.height}" >
        <s:stroke>
            <mx:LinearGradientStroke rotation="90"
                                     weight="2"
                                     pixelHinting="true">
                <mx:GradientEntry color="0x102a39"/>
                <mx:GradientEntry color="0x20516c"/>
            </mx:LinearGradientStroke>
        </s:stroke>
    </s:Rect>

It’s not the shortest listing, but remember that I’m only copying the settings from the design. The final flash result looks like this:

It’s almost a easy to create the rest of the design, take a look a the working button with some Flex magic thrown in to get nice transitions between states (viewsource enabled), and after the jump, I’ll quickly point to different parts of the design which are used in the ButtonSkin.mxml

Result

What makes a skin – looking at ButtonSkin.mxml

First of you should define a component for which the skin is designed.

 [HostComponent("spark.components.Button")]

Next you need to define all the states which are defined by the host component (you can check this info on livedocs) which is done in this code:

    <s:states>
        <mx:State name="up"/>
        <mx:State name="down"/>
        <mx:State name="over"/>
        <mx:State name="disabled"/>
    </s:states>

After that’s done you also need to put the parts of the skin that the host components assumes your skin will have (this is called skinning contract and I’ll write a post about it when I have some time). In the case of Button we need to display a single string (the button label as stated in livedocs) we’re going to use a Label for that and give it an id of labelDisplay according to the contract.

<s:Label left="17" right="17" color="0xffffff"
    height="{this.height}" verticalAlign="middle" id="labelDisplay" >

Than we can start putting in the graphics, using the same tags we used while creating the shadow. The only additions is that the values of the gradients change depending on the state, thanks to the new state syntax in Flex 4 it’s much more readable – there’s a different color when the button is in an over state (color.over) and a different one when the button is in the down state (color.down)

<mx:GradientEntry id="ge1" color="0x387dda"
        color.over="0x3e81de" color.down="0x88bafe" />

To add the smooth color fades between states we also define a bunch of transitions which work on our gradient entries.

<s:Transition   fromState="up" toState="over" autoReverse="true" >
   <s:AnimateColor targets="{[ge1, ge2, ge3, ge4]}"  duration="250"/>
 </s:Transition>

Feel free to download the source code and play with it, hopefully it will be a good starting point.

Download source code.

7 thoughts on “From photoshop design to a Flex 4 skin

  • Vince Genovese says:

    Hi Robert,

    I like this article on Flex 4 Skins. It clearly describes what

    We’re trying to add more links in our docs so that Flex developers are made aware of the great community content out there. I’m wondering whether you would consider adding a comment with a link to your post to the following page:

    * Your page: http://www.robertbak.com/wordpress/2010/03/from-photoshop-design-to-a-flex-4-skin/

    * Our page: http://help.adobe.com/en_US/Flex/4.0/UsingSDK/WSC8DB0C28-F7A6-48ff-9899-7957415A0A49.html

    Integration of customer-generated content is a key component in the success of the Flash platform documentation, so we really appreciate your contribution. FYI, here’s a blog post with a little more information about community help contributions: http://blogs.adobe.com/actionscriptdocs/2009/08/developers_and_writers_adobe_w.html. This post specifically mentions Adobe AIR but we’re doing this across the entire Adobe Flash Platform.

    Vince Genovese
    Senior Technical Writer
    Adobe Systems Incorporated

  • Dave says:

    Hmm…

    My main concern was, how big this thing (skinned component) maybe. Now according to the FireBug Net tab it’s – 226.5 KB (oh my!). It’s way bigger then jQuery+jQuery UI and all my raw sliced pngs all togeter. Why on earth should I use this instead of pure JS/CSS/HTML approach? Or maybe your version just isn’t optimized?

    • Robert Bak says:

      It’s not about creating buttons for web pages, but about creating skins for Adobe Flex applications (which don’t have much to do with small Flash projects). So to answer you shortly – using HTML is not even an option. Also, the size of the download here is the size of the application + a small addition for the skin classes.

  • Dave says:

    “Also, the size of the download here is the size of the application + a small addition for the skin classes.”

    In other words just every compiled flex project, no matter how simple it is will weight somewhere around 200KB?

  • Yes, frankly it is fantastic, goooogled for lot, but couldn’t find clear article relative to PSD to Skinning.

  • Ansury says:

    “My main concern was, how big this thing (skinned component) maybe. Now according to the FireBug Net tab it’s – 226.5 KB ”

    Probably because you’re not comparing apples to apples. If you’re comparing a Flash *application* with a jpg and some javascript, it’s like comparing a Java Swing application with an HTML page.

  • Art says:

    “In other words just every compiled flex project, no matter how simple it is will weight somewhere around 200KB?”

    Not exactly, but yes, all Flex apps do have a core weight, regardless of the simplicity.

    But that initial weight pays off. You can have very powerful apps that are very light. Flex works best with Applications, not so much with simple websites that all they need are rollover effects.

Leave a Reply

Your email address will not be published. Required fields are marked *