CODEWITHSUNDEEP
apache-flex
a.s.t.r.o
a.s.t.r.o

Reputation: 3338

How to skin mx:Image source through CSS?

For example, it is possible to embed an image...

[Embed("myImage.png")]
public var myImage:Class;

and assign it to the mx:Image's source property like this :

<mx:Image source="{myImage}" />

but what if I want to be able to load the image from a compiled CSS file, something like:

.myImage {some-property: Embed("myImage.png"); }

What is the cleanest way to assign this kind of styled image to the mx:Image's source property ?

Upvotes: 0

Views: 1548

Answers (1)

a.s.t.r.o
a.s.t.r.o

Reputation: 3338

Alright, I found a solution:

You can load images in a component, spark Panel in this case :

s|Panel {
    myImage: Embed(source="assets/images.swf", symbol="simple_image");
    myOtherImage: Embed(source="assets/images.swf", symbol="other_image");
}

and then, when you change styles at runtime, you can react on StyleEvent.COMPLETE event:

var css:CSSStyleDeclaration = StyleManager.getStyleManager(null).getStyleDeclaration("spark.components.Panel");
var myImage:Object = css.getStyle("myImage");
var myOtherImage:Object = css.getStyle("myOtherImage");

From there you can easily assign those custom styled images to your mx:Image component's source.

Upvotes: 1

Related Questions