What is the best way to share assets - icons/images - across multiple Flex applications?

Question

I am in the process of creating a new - "lite" - version of a Flex application I created a while ago. I have been porting over many of the Classes and Components to a Flex Library Project that compiles an SWC file. Because both are Cairngorm applications, I'm not able to completely eradicate duplicate code, but it seems logical that I should be able to share assets - such as icons (PNG files). What is the best way to do this? I have tried including them in the SWC, but I can't figure out how to access them in the application. If you can help me figure that out, then my question will be answered. Any thoughts?

Here is and example of how I currently embed icons/images in my Flex application:

<mx:Script>
    <![CDATA[
        [Bindable]
        [Embed(source="assets/icons/cancelIcon.png")]
        private var cancelIcon:Class;

        [Bindable]
        [Embed(source="assets/icons/saveIcon.png")]
        private var saveIcon:Class;
    ]]>
</mx:Script>

Thanks.

Answer 1

This section of the livedocs would be interesting to you:

http://livedocs.adobe.com/flex/3/html/help.html?content=building_overview_5.html.

Do you have a specific example of how you are embedding the assets and trying to use them in the resulting swc that isn't working? Do you think your problem is in the embedding them into the swc or using them from the swc in the actual application?

Answer 2

0) First, looking at the code above - I recommend some minor changes:

// Actionscript instead of MXML:
public class ResourceClasses
{
        Bindable]
        [Embed(source="assets/icons/cancelIcon.png")]
        public static var CancelIconClass:Class;

        // make your variable public and static without public no one 
        // outside the class can access AND bindable won't matter
}

---- Now, compile your library. ---- If the assets aren't in the right place the compiler will complain

1) In your application, you need to reference the library project / swc

---- You should be able to get code hints / intellisense in Flex Builder / eclipse from classes in your Application to classes in the library project

2) In your Application - Do some code like this:

var image:Image = new Image();
image.source = ResourceClasses.CancelIconClass;

// more image property setting... 

someCanvas.addChild(image);

3) This will get you going - using a Library project to hold images, etc...

*** DO NOTE: If the images need to be loaded multiple times, reused, etc -- There are other steps to take to squeeze out the best performance, etc...

Answer 3

Well, using @Gabriel's advice, here's what I ended up with:

package
{
    [Bindable]
    public class ResourceClasses
    {
        [Embed(source="assets/icons/cross.png")]
        public static var CancelIconClass:Class;
    }
}

Referenced in my application like this:

<?xml version="1.0" encoding="utf-8"?>
<mx:Box xmlns:mx="http://www.adobe.com/2006/mxml"&gt;
    <mx:Button label="Cancel Changes" icon="{ResourceClasses.CancelIconClass}" />
</mx:Box>

Thanks!