Using your own components to convert artwork in Flash Catalyst

Published on: October 31, 2010
Comments: 1 Comment

With the new versions of both Flash Builder “Burrito” and Flash Catalyst “Panini” you get a whole lot of new possibilities. Well, to be honest, these possibilities should have been included from the start, but unfortunately they weren’t. But it has to be said that the development teams are working very hard on improving the products in a lot of ways.

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.

	/* For guidance on writing an ActionScript Skinnable Component please refer to the Flex documentation: */
	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")] */
	public class MyCustomComponent extends SkinnableComponent
		/* To declare a skin part on a component, you use the [SkinPart] metadata. 
		[SkinPart(required="true")] */
		public var input:TextInput;
		public var button:Button;
		public var label:RichText;
		public var resizeButton:Button;
		public function MyCustomComponent()
			//TODO: implement function
		/* 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.

This movie requires Flash Player 9

1 Comment - Leave a comment
  1. [...] This post was mentioned on Twitter by tony murphy, fmchicago, FMC Washington DC, karannnnnnnnnnn3, aikisteve and others. aikisteve said: Just blogged about roundtripping between FB and FC using ActionScript skinnable components: #burrito #panini [...]

Leave a comment

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Welcome , today is Monday, April 21, 2014