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>