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.

Now, I love Fireworks for UI design. Some people are shocked when I mentioned that I, and most of our team, use FW. Some thought it was extinct after the Adobe / Macromedia acquisition, but it’s still alive and kicking and I highly recommend evaluating it if you do UI design. It a very powerful tool for web and software design, with a lot of features catered to the work flow, including pages, states (frames), shared layers, symbols and rich symbols and many more. However, this is not why I’m writing this post unfortunately.

As with any design tool, there will be some pros and cons, bugs and inefficiencies, FW is not immune to any of these.

One major annoying bug is the pixel snapping issue. If you have worked with FW CS3 or CS4, you are probably well aware of this painful issue and will be unhappy to know that it is still happening in CS5.

The problem is that FW will at times, make an object not snap on a whole pixel and it will appear blurry. This usually occurs when you move an object, sometimes when you close and reopen a document, and frequently when creating symbols. Another frustrating aspect is that the values of x,y position inputs display whole numbers and make you think everything is correct, like 300, 400, when in actuality, it is at 300.5, 399.5 or something like that. A quick fix is to focus on the x,y input sand simply press “enter” on those values, but that’s not very efficient and more so, you shouldn’t have to do that, especially with a pricey app like FW.

I just installed CS5 and I wanted to see if that problem has been corrected, and within a few minutes, I was surprised to see that it is NOT corrected. I was able to recreate it easily by creating a symbol and simply moving and scaling the object. Another interesting thing is that it appears differently when viewing the symbol on stage vs. digging into the symbol and viewing it inside. Very strange and frustrating, and I wish Adobe would address this issue.

I have looked in the preferences to see if there was anyway to turn on “pixel snapping” or if there was any other parameter that might fix this, but had no luck.

Here is a screenshot of the object and the issue involved.

Don’t get me wrong, this issue does suck, but it is not enough to drive me away from using Fireworks. I constantly work with various other formats such as Photoshop and Illustrator, and those tools have their issues too. Especially designing for interfaces, since those tools were not intended for that purpose originally. This is a whole other post though, so I’m out.

*Update: June 01, 2010:
There was a great comment (Michel) with mention to “Snap to Pixel” feature which is under Modify>Snap to Pixel or command+k (mac), control+k (Windows). This is great for working with “raw” shapes on the stage, but once you start working with symbols, this feature is not available and does not resolve the issue. Michel also wrote a great review about FW CS5 on Smashing Magazine.

Here is a quick video screencast of the issue.

1. I have a symbol on stage and appears shifted and blurry and Snap to Pixel is not available.
2. I double click the symbol to go inside, you will notice it appears to shift as I go inside. I select the green square, and I can Snap to Pixel.
3. Once I exit the symbol and go back to the canvas, the symbol shifts again and becomes blurry.

Adobe has been spreading the word of their support for “Openness” in the creative and technology industries, primarily focused around the web (HTML 5) and Flash.

This is obviously a response to Apple’s recent lack of support for Flash on their mobile devices such as iPhone, iPad and iPod Touch, and their recent posts on their stand.

Watch for this ad popping up around the series of tubes…

View their perspective here:

http://www.adobe.com/choice/?sdid=GXRVG

There has been a lot of controversy revolving around Apple’s position not to support Flash on the iPod Touch, iPhone and iPad. This article from Apple has a detailed explanation of Apple’s position.

http://www.apple.com/hotnews/thoughts-on-flash/

Here is another great, and humorous, article about Apple’s history with Adobe and how some of the past may have lead to Apple’s current position.

http://www.roughlydrafted.com/2010/04/14/chronicles-of-conflict-the-history-of-adobe-vs-apple/

It was announced late last year that Flash can run on the iPhone. This was of course, as an application using a special iPhone conversion plugin for your Flash application, and still isn’t as optimal as creating an app directly in Cocoa or local iPhone OS platform.

A developer named Tobey Schneider ( @tobeytailor ) has release an early version of Gordon, an open source Flash runtime written purely in JavaScript.

This means you can run a SWF in the browser (Safari).

Check demos here:

http://paulirish.com/work/gordon/demos/

(Yes, the swf’s demo’ed run on the iPhone via Safari)

You can view details and the source here:

http://github.com/tobeytailor/gordon

This is just an early version of Gordon which has some limitations, I’m not sure on its capabilities to run Action Script, so complex flash apps/sites may experience issues. It appears that it will play a SWF or simple animation based on the demos, but I haven’t seen anything really complex yet. This does however, open up a big door not only for Flash on iPhones, but other ways to run Flash on various devices that support Javascript and not Flash… or is that only an iPhone?

I think we’re all familiar with the yellow bordered magazines, be it in your current subscription lists, parent’s collection, library exposure, or the scrap book collection in art class. I am referring to the iconic National Geographic Magazine.

National Geographic has brought their entire collection, from 1888 to 2008 into the digital world with the recent version of the Complete National Geographic Software experience which includes the past 120 years of National Geographic accessible through your desktop computer!

The company I work for, Effective UI, was the UX agency behind creating this year’s version o the collection. Our team did an excellent job bringing this unique software experience to life and making it an enjoyable and exciting adventure throughout the past 120 years of magnificent National Geographic content, including the intriguing articles from around the world and of course, I must mention the visual thrill ride of their amazing photography. The other cool aspect is that this presents the issues an volumes exactly how they were originally published including the advertisements dating back to their first volumes in the late 19th century (1888).

Not only can you go through the volumes in a digital page by page metaphor, but the application also offers other features such as trivia and Geobrowse which allows you to search, correspond and relate articles geographically with an interactive global map.

The software was built with Adobe Flex (AS3.0) and wrapped in Adobe AIR, and is a cross-platform compatible software package with the Adobe Air Install.

For more info visit:

http://www.nationalgeographic.com/completeng/

Purchase from Amazon:

http://www.amazon.com/Complete-National-Geographic-Every-Issue/dp/1426296355/ref=dp_cp_ob_sw_title_0

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.

I’ve had a couple questions come at me lately about what is Flash Builder and how does it relate to Flex now.

This is nothing too technical, just a simple explanation.

Flash builder is just Adobe’s Tool to develop Flex applications. It was formerly Flex Builder, but Adobe is attempting to unify the Flash name and branding across its tools so they changed the name. It is built on Eclipse which is a general IDE, but again, the focus is that it is simply the tool, and the Flex framework is still Flex.

The Flex framework primarily is based on MXML, a mark up language developed by Adobe. You can also use AS 3.0 to supplement the MXML. And yes, you can even tie it into other frameworks and languages such as Rails, Cold Fusion, PHP and a quite a bit more, especially if you need some server side tasks.

Flex compiles to a swf, similar to Flash, and utilizes the Flash Player in order to render it, or you can wrap it into an AIR desktop application.

An analogy is like HTML. It is a mark up language based framework for web pages. You can use a variety of tools to construct an HTML page(s), such as adobe Dreamweaver, Esspresso, Taco Edit, TextEdit, and even Notepad. You can also supplement it with Javascript. Of course, you can also tie it into the other frameworks and languages such as Rails, Cold Fusion, PHP, ASP.NET, and more. You can also use Flex and Flash to create components to embed into your web page such as video players and widgets. You can also wrap a web page into an AIR desktop application.

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.