brokenImageSkin dimensions in Flex

Question

I am trying to implement a custom "broken image" icon to appear if I cannot load an image. To accomplish this, I used the brokenImageSkin parameter, but it renders the image at its true resolution, which ends up cutting off the image if the size of the control is constrained.

 <mx:Image brokenImageSkin="@Embed('/assets/placeholder.png')" source="http://www.example.com/bad_url.png"/&gt;

How can I scale the brokenImageSkin to a custom width and height?

Answer 1

I see that in this example, http://blog.flexexamples.com/2008/03/02/setting-a-custom-broken-image-skin-for-the-image-control-in-flex/#more-538, there is an IO error event where you could set the width and height of the image.

Answer 2

1. Make a new class that extends ProgrammaticSkin. Embed your image using the [Embed] meta keyword and associate it with a variable of type Class (see the documentation for this)

2. Override updateDisplaylist.

3. Call graphics.clear() in this function.

4. Call graphics.beginBitmapFill and then apply the appropriate dimensions and scaling based on the unscaledWidth and unscaledHeight passed in.

This is way more complicated but it's the only way I know of to get more control out of a custom skinning operation like that.