First thing to do, and this is what I always tend to do, is to export your Flash Catalyst components as a Flex library project. This allows you to get around the roundtripping issue, because this library project only contains Flash Catalyst generated components and will therefore remain compatible with Flash Catalyst when you need to alter the design at some point in the future.

Skinning your actual project is then done by linking the SWC file from the library project to your actual project and applying the proper skin to the component using the skinClass property. Now to be able to work with this properly, you’ll need to create a manifest file for that library as well. This will allow you to use only one single namespace for every component/skin in the library, even though the components/skins may reside in a number of packages.

Now, this approach will definitely work, but you still have to apply the skinClass property to every component in your application. However, you can apply all the styling on your application by defining a theme CSS that accompanies the SWC file containing the skins. Let me briefly explain this process by creating a very small example.

In this example I’m going to create a skin for a single component, namely the HSlider component. I want to make it look a little bit like the iOS slider, where you have a colored fill of the slider bar that follows the slider thumb position. To make things easier, I’m going to start out in Flash Catalyst. I simply create a new project with the default settings and I’m going to create the skin from scratch. Of course, you can certainly start out with an Illustrator or a Photoshop file. The process of creating the skin will remain exactly the same.

First I need to create the track and duplicate that layer to have the fill color as a separate item. Next, I’m creating the thumb for the slider by drawing two concentric circles with opposite gradients, one a little smaller than the other, to create a semi 3D lighting effect. The result looks like the image below.

The next step is to convert that design into a working component. Now, in Flash Catalyst, unless you’re putting components on the artboard, you actually just create some skin files. So, using the Heads-Up Display (HUD) I convert the artwork into a horizontal slider. After indicating the track and thumb, my skin file is now ready to be imported into Flash Builder.

Since I’m going to be creating a Flex theme, I don’t just save the Flash Catalyst project and open it in Flash Builder. I’m actually going to export the library components as a Flex library project (FXPL), as shown below. When you import the FXPL file into Flash Builder it will automatically create the library project for you.

If you look at the code now, you’ll see that the size of the slider skin is fixed. But since I want to create a theme that can be used in any circumstance and in any project, I need to make a few adjustments to the generated code to make the skin more dynamic. For that I’m going to make use of the [HostComponent] metadata tag. This gives me a reference to the actual component that this skin is applied to. Therefore I can get the size of that component and adjust the skin accordingly. The adjusted code for the main HSlider skin looks like this.

<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:s="library://ns.adobe.com/flex/spark"
		xmlns:fx="http://ns.adobe.com/mxml/2009"
		width="300" height="17">
	<fx:Metadata>[HostComponent("spark.components.HSlider")]</fx:Metadata>
	<s:states>
		<s:State name="normal"/>
		<s:State name="disabled"/>
	</s:states>
	<s:Button id="track" x="0" y="5" skinClass="components.IOSSliderTrackSkin" width="{hostComponent.width}"/>
	<s:Rect x="1" y="6" width="{thumb.x + (thumb.width / 2)}" height="6" radiusX="10">
		<s:fill>
			<s:LinearGradient rotation="90">
				<s:GradientEntry alpha="1.0" color="#009CFF" ratio="0"/>
				<s:GradientEntry alpha="1.0" color="#002FD1" ratio="1"/>
			</s:LinearGradient>
		</s:fill>
	</s:Rect>
	<s:Button id="thumb" x="134" y="0" skinClass="components.IOSSliderThumbSkin"/>
</s:Skin>

You’ll notice that I’ve bound the colored rectangle’s size to the position of the center point of the thumb. This will assure that the colored section follows the slider thumb position instead of being static and covering the whole component.
Now, the default size for the slider is 300 pixels, but if you specify another width, the component will be resized properly. I didn’t take the height into account for this simple demo, but similarly you can also adjust the height of the component according to the height specified in the application.

Next thing to do is to create a CSS file that attaches this skin to all HSlider components. This is very simple and straightforward, as you can see in the code below.

/* CSS file */
@namespace s "library://ns.adobe.com/flex/spark";
@namespace fc "http://ns.adobe.com/flashcatalyst/2009";
 
s|HSlider {
	skinClass: ClassReference("components.IOSSlider");
}

OK, so now our theme is ready to be used. There are a couple more steps to take before you an actually use it. First of all, you need to compile the library project, so you can link it to the actual project that you are going to apply the theme to. Since I’m using Flash Builder with automatic builds, this is already taken care of.

The next step is to load the CSS file into the theme selector, so you can actually apply the theme to the project using a few very simple clicks. For that, I’m going to the Design view in my project and click on the Current Theme link in the Appearance panel. This brings up the theme selector dialog.

In that dialog I’m importing the new theme by selecting the CSS file that I’ve just created and giving it a proper name. Since I’m going for an iOS look, I’ve simply named it iOS. Now, after the import, you can see the new theme displayed in the list of themes to choose from. So, obviously I choose that theme and click OK.

Now that I have the new theme applied to the project, I can simply use a HSlider component in my application and it will automatically be styled according to the settings in the them. To prove that the theme is dynamically adjustable, I’m creating a component with a width property of 500 pixels.

If you compile the application now, you would get some errors, because the skin files cannot be found. The very last thing I need to do is to link the theme’s SWC file to my project. In this example I’ve just copied the SWC file to the libs folder in my project. However, you could create a RSL (Runtime Shared Library) even to have your theme deployed separately and only once for all your projects. The big advantage is that your resulting project SWF file doesn’t get affected by the theme and when you alter your theme, you can just deploy that RSL and every project that uses that theme will automatically be updated next time it is started up.

The result is a working slider bar that has dynamic content and is styled via a Flex theme inside of Flash Builder. Just try out the example below to see the result.

Hey guys,

I know it has been rather quiet on my site lately. The reason for this is the fact that I’m currently writing a book. Now, what is it going to be about? Some of you may know this already by reading my Twitter posts or by following my LinkedIn status messages. For the others, I can say for now that it is about Flash Builder and Flash Catalyst and how those products are going to change the way you work on Flex projects as a developer. As a designer (or interaction designer) you are going to be more closely involved in creating and maintaining Flex 4 applications when using these products.

So, basically, it is not going to be a manual about Flash Builder, nor is it a manual about Flash Catalyst. But it is a guideline with general best practices and designer-developer workflow situations, explained in a very practical way.

You can now already pre-order the book on Amazon.com or by clicking on the cover image. Don’t mind the cover image for now. This is just a preliminary image, which will change by the time it is going to be released. The release date should be somewhere around April 2010.

Hopefully, you’ll like it…