The answer to my Flex 3 / Flash CS4 skinning question

Thanks to Juan Sanchez for providing me the solution when he commented on my previous blog post. He wrote...

"Try using a ClassReference for the Image source that references the skin class name in your SWC instead: http://scalenine.com/blog/2008/07/08...r-flash-skins/
source: ClassReference("Image_source");"

It worked perfectly!!!

So the CSS now looks like this:

Button { skin: Embed(skinClass="Button_skin"); }
Canvas { backgroundImage: Embed(skinClass="Canvas_backgroundImage"); }
Image  { source: ClassReference("Image_source"); }

And the MXML now looks like this:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:com="com.*">
    <mx:Style source="skins.css"/>
    <!--- Canvas background is set using CSS --->
    <Canvas>    
        <!--- Button skin is set using CSS  --->
        <mx:Button />  
        <!--- Now the image is set using CSS  --->
        <mx:Image source="{Image_source}"/>   
    </Canvas>
</mx:Application>

I need help with Flex skinning using Flash CS4

I am learning how to create skins for my Flex apps in Flash CS4 and I'm finding there's multiple ways to do so.

In Flex 2 you would use ActionScript to embed a SWF that contains the skins for you app. You can do the same in Flex 3, but Adobe added the "Import Skin Artwork" feature which imports a SWC, not a SWF.

What I am trying to figure out is how to set the source of an <image> tag to the image symbol found in an "imported SWC."

To clarify my issue I'll elaborate further...

First I read...

• Designing Flex 3 skins and styles using Creative Suite 3 and Flex Builder 3 
• Importing Skins into Flex Builder
• Importing Flash CS3 Assets into Flex

They were all very helpful, but they showed a couple of ways to achieve the same thing, and most of the examples focused on skinning a button.

Here are the the basics that I learned:
1) Create your skin in Flash CS4.
2) Convert the skin to a symbol.
3) Publish the SWF or SWC...

• For Flex 2:
  • Set the each symbols linkage to "Export for Actionscript."
  • Publish to a SWF that's embeded into the Flex 2 app.
• For Flex 3:
  • Use "Convert Symbol to Flex component" (which is a available after installing the "Flex Component Kit for Flash CS3").
    Or, you could also set the each symbols linkage to "Export for Actionscript."
    I don't fully understand the difference yet.
  • Publish to a SWC and use the Flex "Import Skin Artwork" feature.

Where they differ is how to get the skin assets into flex probably due to differences between Flex 2 and 3.

In Flex 2 you would use code similar to this...

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
   <mx:Script>
   <![CDATA[
   [Embed(source="assets/skins.swf", symbol="Canvas_backgroundImage")]
   [Bindable]
   public var test_background:Class;

   [Embed(source="assets/skins.swf", symbol="Image_source")]
   [Bindable]
   public var test_image:Class;

   [Embed(source="assets/skins.swf", symbol="Button_skin")]
   [Bindable]
   public var test_button:Class;
   ]]>
   </mx:Script>

   <mx:canvas backgroundImage="{test_background}" />
   <mx:Image source="{test_image}" />
   <mx:Button icon="{test_button}" />
</mx:Application>

You can use the same code in Flex 3, however Adobe introduced a new feature - "Import Skin Artwork." It's found under the File menu: File > Import > Skin Artwork...


When you "Import Skin Artwork" you have to:

1) Use a specific naming convention when creating your symbols in Flash.

2) Publish to a SWC (not a SWF).


Why publish to a SWC? The "Import Skin Artwork" functionality looks for a SWC which it will add to the library path of your Flex project. It also parses the symbol names found in the .SWC to create the CSS file used to apply the skins to your flex components.


First I created a Flash CS4 project named "skins," and I added three images and created the following symbol names:

• Button_skin


• Canvas_backgroundImage


• Image_source

When I was done, I published my project creating the "skins.swc" file.


In Flex Builder 3 I imported "skins.swc" and Flex created the following "skins.css" File:

Button { skin: Embed(skinClass="Button_skin"); }
Canvas { backgroundImage: Embed(skinClass="Canvas_backgroundImage"); }
Image  { source: Embed(skinClass="Image_source"); }
		

Note how the symbol names were parsed into the css:

• Button_skin >> Button { skin: ...
  
  where "skin" is a style member of the Flex <mx:Button> component
  


• Canvas_backgroundImage >> Canvas { backgroundImage: ...
  
  where "backgroundImage" is a style member of the Flex <mx:Canvas> component


• Image_source >> Image { source: ...
  
  where "source" is a property (not a style member) of the Flex <mx:Image> component.
  
  This is where I believe my problem is, "source" is a property not a style member.

For more on this, read "Naming skin assets" on page 3 of the pdf "Importing Skins into Flex Builder"


Now for the MXML:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:com="com.*">
<mx:Style source="skins.css"/>
<!--- Canvas background is set from the CSS --->
<Canvas>
<!--- Button skin is set from the CSS  --->
<mx:Button />
<!--- Image does not displayed --->
<mx:Image />
</Canvas>
</mx:Application>
	

I think because "source" is a property of the Flex <mx:Image> component and not a style member, it is being ignored.

However, I cannot code: [Embed(source="assets/skins.swc", symbol="Image_source")] because this throws compile error.


So, Is there a way to do this with an imported SWC?

Or do I have to create an imported SWC for skinning components and embed a SWF for image assets?


Thanks and I hope you may have learned something after reading all this as well!


Chris from flexdojo

---

Unable to transcode xxx.swf

Let me start by saying I’m an experienced Flex developer, but a Flash CS4 newbie.

I want to begin using Flash CS4 to create asset libraries that will be used to skin my flex apps. After creating a test swf containing some assets, I tried embedding the swf in a Flex 3 app and kept getting this error - “Unable to transcode xxx.swf.” I spent an entire day trying to resolve the problem. I searched the web for hours, but found nothing helpful.

Earlier, I installed the "Flex Skins" template into Flash CS4. I went back to that project hoping it would provide a clue. It was then I noticed the "linkage" column in the library panel. And that's how I learned the linkage on each individual symbol must be set as “Export for ActionScript” for Flex to find the symbol definitions.

Here's what messed me up...

Instead of just reporting that it can’t find the symbol definitions, Flex also reports that it can’t transcode the SWF. That led me to believe there was something wrong with the SWF. And off I went, on a wild goose chase looking for anything that would explain why flex could not embed the SWF. But in the end it was just a symbol definition problem.

I hope this helps save others hours of frustration!