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.

One such an improvement is the fact that you can now create your own custom components with skin parts in Flash Builder and use that component in the HUD (Heads-Up Display) in Flash Catalyst. That means that you’re no longer only working from Flash Catalyst towards Flash Builder, but you can go the other way around as well. Let me show you how.

First, you need to create a Flash Catalyst Compatible Project, which is just another option from the File > New menu. In the project you have to create an ActionScript Skinnable Component, which can again be found in the File > New menu. When you do this, make sure that you have the Generate Comments option checked in the popup dialog, because it will help you a lot in creating your first components.

In the ActionScript file, you define a couple of skin states using the [SkinState] metadata tag. In this example, we are going to create an “open” and “closed” state. Then you also need to define the skin parts. This is done by using the [SkinPart] metadata tag. Optionally you can make skin parts required by defining the metadata tag as follows: [SkinPart(required:"true")]. When we define a button, text input field and a label in the skin, the resulting file will look like this.

package
{
	/* For guidance on writing an ActionScript Skinnable Component please refer to the Flex documentation: 
	www.adobe.com/go/actionscriptskinnablecomponents */
 
	import spark.components.Button;
	import spark.components.RichText;
	import spark.components.TextInput;
	import spark.components.supportClasses.SkinnableComponent;
 
 
	/* A component must identify the view states that its skin supports. 
	Use the [SkinState] metadata tag to define the view states in the component class. 
	[SkinState("normal")] */
	[SkinState("open")]
	[SkinState("closed")]
 
	public class MyCustomComponent extends SkinnableComponent
	{
		/* To declare a skin part on a component, you use the [SkinPart] metadata. 
		[SkinPart(required="true")] */
		[SkinPart(required="true")]
		public var input:TextInput;
		[SkinPart(required="true")]
		public var button:Button;
		[SkinPart(required="false")]
		public var label:RichText;
		[SkinPart(required="true")]
		public var resizeButton:Button;
 
		public function MyCustomComponent()
		{
			//TODO: implement function
			super();
		}
 
		/* Implement the getCurrentSkinState() method to set the view state of the skin class. */
		override protected function getCurrentSkinState():String
		{
			return super.getCurrentSkinState();
		} 
 
		/* Implement the partAdded() method to attach event handlers to a skin part, 
		configure a skin part, or perform other actions when a skin part is added. */	
		override protected function partAdded(partName:String, instance:Object) : void
		{
			super.partAdded(partName, instance);
		}
 
		/* Implement the partRemoved() method to remove the even handlers added in partAdded() */
		override protected function partRemoved(partName:String, instance:Object) : void
		{
			super.partRemoved(partName, instance);
		}
 
	}
}

Once you’ve completed the ActionScript Skinnable Component you then have to export the project by choosing Project > Flash Catalyst > Export Flash Catalyst Project. In Flash Catalyst you then have to open the FXP file to work on the project. Then you create some graphics to represent the component. You may end up with something like this.

The next step is where the magic happens, because when you select all of the graphics and you look in the HUD, you’ll notice that you can now convert those graphics into a Skinnable Component. This is the last option in the conversion dropdown. Once you’ve selected that option you’ll get a popup dialog which allows you to choose which component if you have more than one skinnable component available.

In this dialog you also have the option to load an FXPL library project in case the component you want is not yet loaded into the project. But since we’ve created the component inside of the project, we’re already having the component available. So, select that custom component and click OK. Once you’ve done that, you’ll notice that Flash Catalyst indicates that the component still needs some work, since you need to indicate all of the different skin parts you’ve defined earlier in Flash Builder.

Digging into the component, you’ll also notice the two skin states you’ve defined earlier on as well, which allows you to work with these different view states for your custom component. Now, assign the different skin parts and make some changes to the closed state to have two distinct states. For example, you can remove the label, resize the colored rectangle and change the label of the resize button in the closed state. Don’t forget to capture the click on the resize button to change view states at runtime.

As a final step, you just have to save the project and import it again in Flash Builder. You can overwrite the existing project now and when you run it, you’ll notice that the component is fully functioning now, as you can see below. Just hit the resize button to see it in action.

The design

At the bottom of the navigation sidebar you are going to add yet another section. This time the section will contain a dropdown combobox that contains the categories in which the pictures from the photo gallery are divided. You could opt to get the categories list from the database, but since we only have four categories to add in this combobox, you might as well do it hard coded this time. So, add the following items to the combobox dropdown section which has a light gray background color:

• All
• Waterfalls
• Reflections
• Lakes
• Mountains

I’ve deliberately chosen not to place them in an alphabetical order because I’m assuming that the top items will be the ones users are going to look for the most. Of course, you can place the items in an alphabetical order if you find this more suitable.

The combobox itself will get a focus color gradient indicating when it has the input focus. Use the same green-ish gradient colors for all gradients in the application. And next to the rectangle that holds the selected item, you draw a smaller square with an arrow in it. This will act as the trigger to open the dropdown list for the combobox component. Underneath the combobox there also has to be a button that allows the user to actually confirm the selection he’s made for filtering the photos he wants to view inside of the photo gallery.

Bringing the component to life

If you really think about it, you have to break down the combobox into basic parts and what I’ve come up with is the idea that a combobox is really nothing more than a Toggle Button with an additional Data List component in the toggled state. But that doesn’t make it an easy component to create from scratch. Also the fact that the selected item must be displayed in the collapsed combobox state means that we are going to have to do some custom programming in Flash Builder later on to dynamically fill out that value depending on the selected item in the Data List part of the component.

So let’s start working on this component by selecting the “Dropdown” and “Dropdown values” layer groups in the Layers panel and convert it into a Custom/Generic Component. Rename that component to “SearchComboBox”. Double click the newly created component, select the combobox rectangle, the selected value and the arrow button and convert that into a Toggle Button. Double click that component again and assign the label for the button, making it as wide as possible to fit the entire component and sharing this change with the other states again. Render the Focus color layer invisible for the Up and Disabled states. Before continuing with the other states you first have to convert the Dropdown values layer group into a Data List component. So, select that group and choose Convert Artwork to Component > Data List from the right click popup menu. In the component you still have to indicate the list items and their states. Double click the new component and select the selected item in the design to create the Repeated Item part. Space the items 2 pixels from each other, fill out the Design-Time Data panel to contain the five possible selection items and remove the other values in the design layer. Double click the repeated item component to dive into it. Remove the background color for the Up state. For the Over state, select the background layer and set the Opacity level to 50 in the Common section of the Properties panel. This will show a difference between the selected item and the one the user is hovering to possibly select. That’s it for the Data List component, so go back up one level using the bread crumbs at the top of the artboard. Rename the list component to “SearchValuesList” in the Library panel.

Again, go up one level so you reach the SearchComboBox level again.In this component you still need to make that list component visible in the proper state. In fact, you still need to make the proper states in the component. So, go ahead and duplicate the state in the Pages/States panel three times and name the states appropriately

• Up
• Over
• Down
• Disabled

In the Up and Disabled states, you make the data list invisible, because this will be the normal state. In the Over state, you need to set the toggle button’s Selected property to true by checking the checkbox in the Common section of the Properties panel. This will show the selection color for the combobox. You do the same thing for the Down state. Additionally you have to make the SerchValuesList component visible. In the Disabled state you need to set the button component disabled by unchecking the Enabled checkbox in the Common section of the Properties panel.

Now you have defined the states for the component, but you still have to define how the application will go from one state to another. Let’s start with the Data List part since this is the easy one. You select the SearchValuesList component in the Layers panel and add the following interaction:

• Event: On Select
• Action: Play Transition to State
• State: Over
• When: When any item is selected

Going back to the Over state keeps the focus rectangle displayed after a selection has been made in the list component.

For the combobox part itself it is slightly more complicated and there are a couple of interactions you have to define. Let’s handle them in the same order as the chain of events that take place when a visitor uses this component. The first event that will happen is the user hovering over the component. So, add the following interaction for the combobox component:

• Event: On Roll Over
• Action: Play Transition to State
• State: Over
• When: When in Up

The next event that will occur is the fact that the user click on the combobox to open it. That means that you have to go from the Over state (not the Up state) to the Down state for the component by adding the interaction:

• Event: On Click
• Action: Play Transition to State
• State: Down
• When: When in Over

Then the user can go in two directions. Either he selects an item in the list, which you’ve already covered by capturing the event on the SearchValuesList component. Or he can cancel the selection choice. In this last case the user actually clicks on the combobox component again. That is why you needed to add a condition to the view state change before. Now you need to add a similar interaction, but the other way around:

• Event: On Click
• Action: Play Transition to State
• State: Over
• When: When in Down

Now the combobox is closed again, but the hover color is still visible. That means there is only one more possible event and that is the user moving the mouse cursor away from the combobox component. So, on the combobox component you need to add one last interaction to go back to the normal state:

• Event: On Roll Out
• Action: Play Transition to State
• State: Up
• When: When in Over

Adding all of these events to the component will render your generic component into a working combobox. If you like, you can still add a couple of transitions to the view state changes to make the (dis)appearing of the data list a little smoother, but it is not strictly necessary for our user experience.

I know it’s a bit of work to get this far, butat the time of writing there is no Spark equivalent for the ComboBox component, so you can use this method to easily create such a component directly from within Flash Catalyst. But at this point you’re done with the component for now and you go back to the main design level and rename the component to “SearchCombobox”.

Adding interaction in Flash Builder

Once you’ve imported the project into Flash Builder, you can find the custom combobox component in the components package under the name SearchComboBox.mxml. The first thing that isn’t working yet is the fact that when you select a certain value in the dropdown list part of the component, the label in the button part is not automatically updated. By default all items should be visible in the photo gallery. That means that you have to initialize the component to have that item selected. On the <s:List> component in the source, you simply set the selectedIndex property to zero. That will initialize the component when it’s first created. For the <s:ToggleButton> tag you simply change the value of the label property to “ALL”.Just run the application and you’ll see the component properly initialized this time.

Next up is solving the setting of the label when a certain item has been selected in the dropdown list. So, on the <s:List> component you see that an event handler for the change event has already been declared for going back to the Over state. This handler will react both to a mouse click and a selection made by using the arrow keys. Now, locate that event handler and inside of it you need to set the label of the button component to the selected item in the list component. You may need to add some identifiers for the components before you can refer to them in your ActionScript code. Don’t forget the fact that you are dealing with a complex data structure as list items, so you should reference only the text part of the item to assign it to the labelproperty of the <s:ToggleButton>component.

protected function list_changeHandler():void {
 
  currentState='Over';
 
  button.label = list.selectedItem.text1;
 
}

Naturally you could choose to implement this functionality upon the click event or the <ENTER> key for example. The principle stays the same. It’s just a different event that is triggering the selection.

(This post was also previously published on http://cookbooks.adobe.com)

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…

A quick overview of the new features:

• Changed Heads-Up-Display (HUD)
• Smoother transitions
• Better animations
• More events available in a separate actions panel
• More Spark components available
• Better grouping in the lauers panel
• …

But Ryan Stewart has made an excellent screencast about this on his site, so I’ve included the video below as well.Just take a look a what’s different and what makes this a great tool…

So it’s really worth upgrading to the next bèta version. Go and download it from the Adobe Labs site or follow this url: http://labs.adobe.com/technologies/flashcatalyst/. Have fun…

Well, he actually did this very well and he has recorded the first part in a video. He even was kind enough to answer my question about round-tripping between Flash Catalyst and Flash Builder. Thanks Lee!

Just click here to go directly to the answers to all our questions. Or at least part of them…