Patrick Hansen.com

I’m just going to throw down a quick tutorial on how to create a custom skin for a Spark Button for Flex 4 using Flash Builder.

Everyone has their own folder structure for their projects, so mine may differ slightly from yours.

Assuming you already have a project started in Flex and a place to put your skins and/or CSS, we can start.

In Flash Builder, go to the directory where you want your skin (mine is src/assets/skins). Right-click to open the contextual menu or click File and go to “New>MXML skin.”

This will prompt a dialog to choose the name and type of skin you want to create.

Go ahead and call the skin what you want, in my example it will be called “Button_custom_skin”
(you don’t have to put the extension which is .mxml)

Now choose the “Host Component,” which is essentially the default component type you want to base this skin off of. You can search for it in the search field, and in this case we are looking for  simple “Button.”

Now after the Host Component is selected, you have the option to have it create a copy of the Spark skin template in your new file or you can deselect the CheckBox and start from scratch. If you’re unfamiliar with all of the pieces of a Button skin, I recommend you create a copy and then strip out the unnecessary items.

Open your new skin mxml file (it should open automatically upon creation).

You can see that Adobe has some comments in this file from the template and some script*. For the button we are creating you can remove all of the comments and the script tag and everything in between.

*Most of the script items provide the customization style properties for use with CSS and also some resizing and scaling management for all of the various pieces of the default Spark skin, like shadow, borders, highlights, etc., so if you did make a change to one item like the corner radius, you don’t have to worry about changing the radius for every single graphic element.

Now we still have all of  the graphical pieces, you can strip out all of this too, but leave the text layer near the bottom of the file. This is the label of the button which we will leave intact.

<?xml version="1.0" encoding="utf-8"?>
 
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" 
             xmlns:fb="http://ns.adobe.com/flashbuilder/2009" 
			 minWidth="21" minHeight="21" 
			 alpha.disabled="0.6">
 
    <!-- host component -->
    <fx:Metadata>
        <![CDATA[ 
        /** 
         * @copy spark.skins.spark.ApplicationSkin#hostComponent
         */
        [HostComponent("spark.components.Button")]
        ]]>
    </fx:Metadata>
 
    <!-- states -->
    <s:states>
        <s:State name="up" />
        <s:State name="over" />
        <s:State name="down" />
        <s:State name="disabled" />
    </s:states>
 
    <!-- top layer: text -->
    <!--- @copy spark.components.supportClasses.ButtonBase#labelDisplay -->
    <s:Label id="labelDisplay"
             textAlign="center"
             verticalAlign="middle"
             maxDisplayedLines="1"
             horizontalCenter="0" verticalCenter="1"
             left="14" right="14" top="2" bottom="2">
		<s:filters>
			<s:DropShadowFilter distance="1" blurX="0" blurY="0" color="#000000" alpha=".4" angle="270"/>
		</s:filters>
    </s:Label>
 
</s:SparkSkin>

Now, we have a pretty empty file to start our skin. We’re going to make a button like the one shown below. Nothing fancy, but enough for this post.

Let’s break down the button into the parts we will need to create:
1) Border
This design has a small border around the edge that has a gradient. You can accomplish this with a “stroke” with a gradient fill. By default, strokes are set inside, so they won’t effect your component’s size. But the issue I have experienced with using strokes with rounded corners is that the corners get a little screwed up as if the stroke is on a fractional pixel. So, for our border, we will draw another rectangle behind the inner fill, and set the fill 1px in all around.

2) Fill
This is a rounded rectangle with a gradient from top to bottom. This will be drawn with a Rect and we will apply a corner radius (xRadius) property to it. No matter what size the button is in the layout, that radius will maintain the same value. Who needs scale 9 when you go this?

3) Label
We already left the Label from the Spark skin copy, but we need to add a shadow filter to give that inset look.

4) States
We need to ensure we have the correct appearance for all of the stats of a button: up, over, down, and disabled.

* You will also notice in the SparkSkin tag, there is a “minHeight”, “minWidth” and an “alpha.disabled” property. These are global parameters for this skin and you can adjust these if desired.

First, we will create a rectangle with corner radius (xRadius) and give it these attributes which I have pulled from the design:

<!-- border -->
   	<s:Rect height="100%" width="100%" radiusX="6"
			top="0" right="0" bottom="0" left="0">
	   <s:fill>
		   <!-- gradient fill colors - default ratios are 0,1 -->
		   <s:LinearGradient rotation="90">
			   <s:GradientEntry color="#ffcc00"
								/>
			   <s:GradientEntry color="#ff9900"/>
		   </s:LinearGradient>
	  </s:fill>
   	</s:Rect>

Next, we will draw the inner fill rectangle which will need to be 1px from top, right, bottom, left to ensure the border is exposed underneath and “appear” that it is a 1px stroke. Note that I am making the xRadius 5 – 1 less than the fill since it reside 1px inside. You could write some script to make this a variable to be shared across any object with this attribute if it was the same.

<!-- inner fill -->
	<s:Rect height="100%" width="100%" radiusX="5"
			top="1" right="1" bottom="1" left="1">
		<s:fill>
			<!-- gradient fill colors - default ratios are 0,1 -->
			<s:LinearGradient rotation="90">
				<s:GradientEntry color="#ff9900"
								 color.over="#fabe00"
								 color.down="#cc6600"/>
				<s:GradientEntry color="#cc6600"
								 color.over="#e17b00"
								 color.down="#ff9900"/>
			</s:LinearGradient>
		</s:fill>
	</s:Rect>

We have the base state of our button (up). Now let’s go back and add the color variances in the states. You do this by adding color.state=”#XXXXXX” as needed. Our border does not change and the disabled state we ahve already declared in the SparkSkin tag to be alpha.disabled=”.6″

So here is our code so far for the graphics.

<!-- border -->
   	<s:Rect height="100%" width="100%" radiusX="6"
			top="0" right="0" bottom="0" left="0">
	   <s:fill>
		   <!-- gradient fill colors - default ratios are 0,1 -->
		   <s:LinearGradient rotation="90">
			   <s:GradientEntry color="#ffcc00"
								/>
			   <s:GradientEntry color="#ff9900"/>
		   </s:LinearGradient>
	  </s:fill>
   	</s:Rect>
 
	<!-- inner fill -->
	<s:Rect height="100%" width="100%" radiusX="5"
			top="1" right="1" bottom="1" left="1">
		<s:fill>
			<!-- gradient fill colors - default ratios are 0,1 -->
			<s:LinearGradient rotation="90">
				<s:GradientEntry color="#ff9900"
								 color.over="#fabe00"
								 color.down="#cc6600"/>
				<s:GradientEntry color="#cc6600"
								 color.over="#e17b00"
								 color.down="#ff9900"/>
			</s:LinearGradient>
		</s:fill>
	</s:Rect>

Now, here is our full skin mark up code. I am going to reserve some attributes to be handled in the CSS to pull in this button, like the font-size and font-weight, but you could also hard code this int the skin as part of the Label attributes.

<?xml version="1.0" encoding="utf-8"?>
 
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" 
             xmlns:fb="http://ns.adobe.com/flashbuilder/2009" 
			 minWidth="21" minHeight="21" 
			 alpha.disabled="0.6">
 
    <!-- host component -->
    <fx:Metadata>
        <![CDATA[ 
        /** 
         * @copy spark.skins.spark.ApplicationSkin#hostComponent
         */
        [HostComponent("spark.components.Button")]
        ]]>
    </fx:Metadata>
 
    <!-- states -->
    <s:states>
        <s:State name="up" />
        <s:State name="over" />
        <s:State name="down" />
        <s:State name="disabled" />
    </s:states>
 
	<!-- border -->
   	<s:Rect height="100%" width="100%" radiusX="6"
			top="0" right="0" bottom="0" left="0">
	   <s:fill>
		   <!-- gradient fill colors - default ratios are 0,1 -->
		   <s:LinearGradient rotation="90">
			   <s:GradientEntry color="#ffcc00"
								/>
			   <s:GradientEntry color="#ff9900"/>
		   </s:LinearGradient>
	  </s:fill>
   	</s:Rect>
 
	<!-- inner fill -->
	<s:Rect height="100%" width="100%" radiusX="5"
			top="1" right="1" bottom="1" left="1">
		<s:fill>
			<!-- gradient fill colors - default ratios are 0,1 -->
			<s:LinearGradient rotation="90">
				<s:GradientEntry color="#ff9900"
								 color.over="#fabe00"
								 color.down="#cc6600"/>
				<s:GradientEntry color="#cc6600"
								 color.over="#e17b00"
								 color.down="#ff9900"/>
			</s:LinearGradient>
		</s:fill>
	</s:Rect>
 
    <!-- top layer: text -->
    <s:Label id="labelDisplay"
             textAlign="center"
             verticalAlign="middle"
             maxDisplayedLines="1"
             horizontalCenter="0" verticalCenter="1"
             left="14" right="14" top="2" bottom="2">
		<s:filters>
			<s:DropShadowFilter distance="1" blurX="0" blurY="0" color="#000000" alpha=".4" angle="270"/>
		</s:filters>
    </s:Label>
 
</s:SparkSkin>

Now create a CSS file or add your CSS directly in your page. If you make an external stylesheet, make sure to reference the file in your main application.

I am using Button as my Class, and my selector is customButton, but you can name it anything.

s|Button.customButton {
	skinClass: ClassReference('assets.skins.Button_custom_skin');
	color: #ffffff;
	font-size: 12px;
	font-weight: bold;
}

Now in my application, I have 3 buttons on the stage.

1. Spark Button with no styles
2. Custom Button
3. Custom Button made to look like the design.

Here is the markup of the Application.

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" 
			   minWidth="955" minHeight="600">
	<!--
	******************************************************************************************************
	// ** Project info: Custom Skin for Spark Button Demo **
	//	Author: Patrick Hansen | http://wwww.patrickhansen.com
	******************************************************************************************************
	-->
 
	<!-- default fx declations tag (not really needed for this example) -->
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
 
	<!--Styles -->
	<fx:Style source="assets/css/base.css"/>
 
	<!-- VGroup Container -->
	<s:VGroup gap="20">
		<!-- button example -->
		<s:Button label="Unstyled Spark Button"/>
 
		<!-- custom button example -->
		<s:Button height="24" label="Custom Skin Button" styleName="customButton"/>
 
		<!-- custom button example as design noted -->
		<s:Button height="24" label="MY BUTTON" styleName="customButton"/>
	</s:VGroup>
 
</s:Application>

Note: I left the height attribute (height=”24″) to be applied in the layout, in case this style may be used on other sized buttons, but you could had code this into the skin if you prefer.

View the demo here (right click to view Source):
http://www.patrickhansen.com/demos/flex/SparkButton/

Download the Source:
http://www.patrickhansen.com/demos/flex/SparkButton.zip

By the way, tools like Fireworks, Photoshop and Illustrator have export to FXG options where you can obtain most of this mark-up easily, but I wanted to demonstrate creating this skin from scratch.

Explanation of Stateless and Stateful skins
There are several approaches to style and skin Flex applications. Adobe has also been nice enough to provide some special skinning extensions and kits to work in conjunction with the CS3-CS4 tools such as Flash, Fireworks, Photoshop and Illustrator.

These extensions provide templates and some export commands to assist the workflow of creating graphical skin and exporting them out to bring into your Flex application. Most of these workflows consist of using a “stateless” approach. This means there is an individual asset for each state of a component, such as an image for the up, over, down, and disabled states of a basic Button. The stateless approach can be used with AI, PS, FW and Flash. The nice thing about using it with AI and Flash, is that you can keep the graphics vector within a SWF, if that is your preference. In FW and PS, they will export as bitmaps.

As for the stateful approach, this had been my preferred choice for the past year or so. This requires the Flex skinning extension kit for Flash where it provides a Make Flex Component Command and provides the FlexComponentBase to your file which allows Flex to communicate and translate with the state and transition frame labels without having to write any additional script within Flash or Flex. This approach also utilizes the Embed Skin Class approach within the CSS v. the Embed Source as with stateless.

Example CSS for a Button
Stateful CSS:
Button.
{
skin: Embed(skinClass=”Button_skin”);
}

Stateless CSS:
Button
{
disabledSkin: Embed(source=”flex_skins.swf”,symbol=”Button_disabledSkin”);
downSkin: Embed(source=”flex_skins.swf”,symbol=”Button_downSkin”);
overSkin: Embed(source=”flex_skins.swf”, symbol=”Button_overSkin”);
upSkin: Embed(source=”flex_skins.swf”, symbol=”Button_upSkin”);
}

As you can see, in the stateful skin, you only need one symbol for all of your states of that particular component. The states are designed within the timeline of the individual symbol within Flash. Inside that symbol, there are two informative layers for Flex to communicate with and to be able to assign the appropriate state/transition to that particular component.

Those layers are states and transitions. A typical button would have frame labels of: up, over, down, disabled, selectedUp, selectedOver, selectedDown, selectedDisabled.

The stateless approach would require creating a separate symbol for each state of that particular component.

Now, for the main point of this post…

Issues with Stateful skins
The stateful skin approach was a channel later introduced by Adobe as one of their recommended workflows, and had seemed to be the most optimal in regards to efficiency and workflow in my opinion. Unfortunately, we (Project Team @ EffectiveUI) have discovered a major flaw with performance using stateful skins within a large Flex application where there are many instances of a component using a graphical skin. In smaller applications with minimal instances of a graphical skin, the performance hit is minimal and may not be noticeable, so it is proportional to the amount of objects using a graphical skin.

On a recent project, we saw a rather large percentage increase in CPU usage when using a stateful skin on a CheckBox and other components. There appears to be an OnEnterFrame recursion on UIMovieClip, which is the Base Class for a stateful skin. We weren’t sure if it was part of the swc, or how Flex was pulling it in and reading it, so we decided to run a quick test. We swapped out the stateful skin with a stateless version using the same exact graphical information in the fla, but just designed as stateless and compiled to a swf. Once the developer threw that into the app, the CPU usage dropped dramatically! It dropped to the expected percentage which should be almost identical to not using any CSS or external styling in your Flex application, since skins should not hit the CPU usage. So, it seems like we have narrowed down the issue to the use of stateful skins.
(note: There were issues on more than just the CheckBox, but this was one of the components we used to try to narrow down the issue)

The Test
A fellow coworker, Greg Owen – Lead Developer @ EffectiveUI, help me create a test environment Flex application (wrapped in AIR), which will instantiate several hundred CheckBoxes, this should provide enough performance in the app to see a hit on the CPU usage while using the stateful skin swc.

In the test app, we did some variations with stateful skins and here are the results:
Running 100 CheckBoxes + stateful skins – CPU usage = 19%
Running 250 CheckBoxes + stateful skins – CPU usage = 30%
Running 500 CheckBoxes + stateful skins – CPU usage = 50%
Running any # of CheckBoxes*—————- CPU usage = 10%
(*no added styles/skins)

You can download the source if you would like to try the test it yourself. You can go into the MXML and alter the amount of instances of the CheckBox, and you can swap the style sheets used between the stateful and stateless skins.

I have created two sets of skins for this CheckBox to swap out and review the difference in performance. One skin is a stateful symbol within a swc, and the other stateless skin is comprised of eight symbols, one for every state of a CheckBox, within the swf.

Download the source files here:

http://www.patrickhansen.com/demos/flex/SkinningTest.zip

Click below to view Greg Owen’s post about this issue:

http://behindtheui.blogspot.com/2009/03/flex-component-kit-cpu-black-hole.html

As a result, I plan on working with stateless skins from here on out until there is a resolution to this issue.I’m also planning on working with Degrafa and FX-G in FB4 more for skinning as well.

updated: March 2009
Here is the post for: Stateless vs. Stateful vs. Degrafa

*On a Mac, you can open the Activity Monitor under Applications/Utilities and you can check the CPU usage.

This is kind of old news as I neglected to post about this project for Adobe Flex Builder 4 (Gumbo). Prior to Max 2008 in October, I was on a team at EffectiveUI that was called upon to create some themes to be packaged with Flex Builder 4. They wanted preview the feature and the designs during Max, so we were on a pretty tight schedule.

We also had to work with some of the new components using FX-G. This was a nice introduction into the FX-G framework and how their new model for components and the styling and skinning of them.
Please note:
These themes were designed to be used with the Gumbo preview release during Max 2008. Since then, there have been some changes to the SDK, most notably the use of namespaces for Gumbo and Spark skins. I will write a post on this soon.

We ended up creating 6 themes, some varying from pure CSS, to some using graphical skins as both bitmaps and Flash symbols.

• Arcade
  
• Blue Steel
  
• Breeze
  
• Cobalt
  
• Graphite
  
• Zen Natural
  

The various themes were created by a few individuals on our production team, including Todd Hebenstreit, Jeremy Graston, Juan Sanchez, and myself (Zen natural).

These themes provide several options for providing your Flex application a little more customized look if you don’t want the basic default set.

Again, please note there have been some changes to the FX-G framework since these themes were created and these were designed to work with the Gumbo Build released during Max 2008, and some new namespaces have been introduced for Gumbo/Spark skins. I’ll be writing a post about this soon.

You can download the themes directly from this link:

http://download.macromedia.com/pub/labs/gumbo/gumbo_samplethemes_111708.zip

or visit:

http://labs.adobe.com/technologies/gumbo/

After finding out that the stateful skinning approach was hitting the CPU pretty hard we had to go back and revise some skin/styling themes. This is can be a very time consuming process pending on the size of your theme and application.

Kevin Skrenes, a coworker and friend of mine who is a Senior Developer here at EffectiveUI, help smooth out the process for the conversion by writing a couple JSFL scripts for Flash. I really want to point out that Kevin Skrenes deserves A LOT of credit for this, but he doesn’t have a site or blog to publicize about it himself.

There are 3 scripts:
1) Create Stateless Symbols.jsfl
2) Remove Linkage Class Names.jsfl
3) Select Stateful Symbols.jsfl

Download the scripts here:

http://patrickhansen.com/resources/flash/StatefulToStatelessScripts_v1-0.zip

Install them in:
user/Library/Application Support/Adobe/Flash/en/Configuration/Commands
* this is on a Mac, not 100% sure what it is on Windows.
Make sure to quit Flash before installing.

Open Flash and you should see these commands under the Commands menu.

To convert:
Select the symbol(s) from the library you want to convert and use Create Stateless Symbols.

Linkage Class correction
Now, you may have some issues with the linkage Class. You should probably run this secondary script just in case to ensure you correct the linkage Class and ID to optimize it for stateless.

Removing old symbols
There is also a script to select any stateful symbols in the library, so you can delete them.

So, if you have some old legacy skins that are holding down your performance, go ahead and use these scripts to convert them, and hopefully save some time.

CSS
Remember, you will also have to correct your CSS for the new stateless skins.

Notes:
This is in its first round and there may be some issues with these scripts, so please let me know if you come across any.

Also, everything is not fully automated, so you may have to do some things manually.

It is possible to consolidate all of this into a single script, but we left them separate for our unique circumstances and scenarios.

Greg Owen posted a nice follow up on the EffectiveUI blog.

We worked with Adobe to see if we could work on something to help alleviate this issue, but even with a custom UIMovieCip Class Adobe provided, we still saw large CPU hit.

So, again, at this point, for larger applications, it is probably best to stick with stateless skins if you are going the graphical approach.

Read more on the post here:
EffectiveUI Blog

I just wrote a post about stateless vs. stateful graphical skins with Flash and Flex. We discovered there are some big performance issues with using stateful skins created in Flash (swc).

Greg Owen, a fellow coworker and lead developer at EffectiveUI, help me create a test app for this. The app is a Flex app wrapped in AIR, and has 3 style sheets which you can swap out to test the various skin options for a CheckBox which is being instantiated 500 times. (if you download the source, you can alter this value). This provides enough load to actually see the CPU hit.

I had a recent comment about using Degrafa and the comparisons, so with the help of Juan Sanchez, I was able to add a skin that is created in Degrafa programmatically and is a very close resemblance to the other skins being used in regards to colors and appearance of states.

We ran some tests today using 500 CheckBoxes and these were the results:

No skin/CSS – CPU = 13.5%
Stateless – CPU = 13.5% to 14%
Stateful – CPU = 47% to 50% Whoa!
Degrafa – CPU = 13.5% to 14.2%

So, it looks like Degrafa does not have that large of a hit on the performance and if you are using it to skin yoru Flex apps, then you should be good to go!

(results are on a MacBook Pro 2.33GHZ Intel Core 2 Duo 2GB RAM.
Please note, to get a true reading, the app should be in focus)

Download the source here:

http://www.patrickhansen.com/demos/flex/SkinningTest_v2.zip

Creating Visual Experiences with Flex 3.0 is out!

Fellow coworkers Juan Sanchez and Andy McIntosh are official authors and have a really great book about the creative side of Flex development and design.

Published under Addison Wesley, this book provides a huge amount of information which is not only helpful to developers, but very well structured and written for designers to begin diving into a little Flex.

Even if you have absolutely no developmental experience, this book covers a lot of general design and visual UI methodologies & techniques for making that Flex application not only look great, but provide a great experience as well. We all know that even if an application looks awesome, it doesn’t necessarily mean the experience or work flow is on point.

The code samples are very easy to follow and complete, even for a novice. It can get very technical in some areas, but the way the information is provided in a clear and concise manner, makes it easy to follow along and get into. Based on the title, it is about visual experiences, and the book itself is also very visual with excellent diagrams, screenshots and attractive examples.

This is targeted for Flex 3.0, and even though Flex 4.0 is right around the corner, I can say that there is still a lot of stuff in this book which will continue to hold and be applied. I have dove into the new Flex 4.0 (gumbo) components and worked on styling/skinning of them, and even though they use a new technique with FXG, there are still many components that are not converted yet and will still use the various technique this book covers.

Another great part of this book, is that since Flex is similar to other development platforms, so are some of its visual aspects. You can explore and apply the concepts in this book towards general UI design and experience for a variety of platforms, although it does take a deeper dive into Flex 3.0.

Of course it sounds biased for me to support this book, but I am being honest when I say that this is a great book for a designer to either begin or advance their skills with the visual experience of Flex design/development. I have been working with this side of the process for about 2 years, and I still learned a lot from this book!

I’d also like to add that developers of all levels would benefit from this book too, even if you’re not very visual or have a sense for great design.

Adobe’s very own Narcisco Jaramillo contributed a great foreword also!

The winners have been decided! This was an awesome contest and the turnout was great. As mentioned in the previous post, the entries were definitely outstanding and creative.

First Place:
Undefined by Alberto Alcaraz

Second Place:
Brownie by Nahuel Foronda

Third Place:
iCandy by Phil Chung

Congratulations to the winners and all of those who entered. It was definitely hard to choose the winners, and there were some honorable mentions too.

Visit scalenine.com/blog for the details

The Adobe, Scalenine, and EffectiveUI Skin to Win Challenge had a great turn out. I reviewed the entries the past few days and was quite impressed! There are some very talented designers and developers who entered and brought their own flavors to the mix.

There was everything from simple and basic, to wild and very creative. A great array of the possibilities that Flex allows for skinning/styling for sure.

I still have no idea who has won, as I am only a single judge, and the winners will be chosen by an accumulative scoring system with the other judges scores.

The winner will be announced soon!

I started messing around in Microsoft Expression Design 2.

After dabbling around in it, I wanted to see if I could do some illustrating in it. I decided to work on a Mighty Mouse image. It is pretty simple and not the most complex subject for a digital illustration, but it is a good first experimental piece.

I will tackle some more complex subjects and designs in the near future, especially with a project I am currently working on for Microsoft.

The tools are fairly easy to get used to based on working in Adobe’s tools. Some of the effects and filters like Gaussian blur and glows behave a little unexpectedly, yet they offer most of the properties that other tools provide. I barely used any in this illustration, since I couldn’t obtain the effect I wanted. I ended up just using shapes, gradients with alphas on the stops and some layering.