flex 3 embedding images and then displaying them

Question

I have 2 images that are used hundreds of times throughout my application. Although they are only ~2.5 kilobytes each, they're multitude is causing the browser to load nearly 7 megs of data if reference them like this:

<mx:Image id="foo" source="images/addRed.png" ... />

Instead of having this issue, I would like to embed the image once, and then repeatedly reference the embedded object. I'm not exactly sure how to do this. From what I've read online, doing the following should work:

<mx:Image id="foo" source="@Embed(source='images/addRed.png')" ... />

Is this the correct way to do it, or should I first embed it like this:

[Embed(source="images/minusRed.png")] public var minusRed:Class;

and then somehow call that reference from the ?

Thanks in advance, Brds

Answer 1

After you embed it, do something like this:

[Embed(source="images/minusRed.png")] 
public var minusRed:Class;

Reference it like this:

<mx:Image id="foo" source="{minusRed}" ... />

I believe that should work.