SWFLoader quirks

Two issues regarding the SWFLoader / Image component are highlighted here. One of which has already been floating around forums with no concrete solution.

1. Image resizing: While resizing images in both components if the iamge size is too large to be accomodated in the conrtol’s display area and scaleContent is enabled, using horizontalAlign and verticalAlign properties displace the image from its expected location. Workaround/hack: check the contentWidth / contentHeight after loading the image through code. You’re out of luck if you’re trying to do this through MXML alone.

2. No control over audio: After unloading a swf with embedded video the audio channel continues playing. Using flash.media.SoundMixer.stopAll() might do the trick but only if the loader and the loaded swf belong ot the same security sandbox. For a swf loaded from filesystem loading a remote swf, it fails miserably. Thanks to no control over the loaded content when using the SWFLoaded and Image components there’s little that can be done to avoid this. Workaround/hack: use a Loader object to load the swf if you’re willing to give up the ease of component usage. Not sure as to whether it completely resolves the problem. Adobe is still silent about it … I’m off to look for a registered bug report.

HTML <img> Bug confirmed in mx:Text component

Just in case you haven’t read my initial post where I unearthed a “quirk” in the mx:Text component in flex, have a look at this post. Adobe’s dev team has confirmed the bug and have been able to successfully reproduce it as well. For a glimpse into what goes wrong have a look at the following image.

Updates on this issue are available here.

Well atleast now you won’t have to fret about it until Adobe comes up with a solution.

I did come across a more complete component for HTML display within flex by Drumbeat Insight. Unfortunatly the component is no longer free, and the $149 proce tag may put any developer off unless you can get your organization to pay for it.

Change mx:Button component’s icon at runtime

This solution isn’t about using an external SWF to use assets embedded in it as icons. This is about using an image file sitting on the filesystem or on a web server. Flex is very rigid about the use of embedded assets converted to a “Class” when assigning icons to icon based controls such as buttons and accordion. This greatly limits the possibilities of changing visual elements on the fly at runtime.

Ben Stucki has come up with a cool IconUtility class that lets you overcome this limitation. I just used it in a project and it works great. The MXML example can be found on his blog entry on IconUtility class. The source code can be found there as well.

Just one quirk when suing it through code though, the icons don’t end up in the center of the button when the buttons are created through ActionScript. No worries though because by forcing the height and width of the icon you can get around this problem. The following code demonstrates the use of the class in ActionScript.


import com.benstucki.utilities.IconUtility;
private var myButton:Button = new Button();
myButton.width = 100;
myButton.height = 75;
myButton.icon = IconUtility.getClass( myButton, 'http://www.yourdomain.com/images/test.jpg', 48, 48);

Note that the first argument to the static getClass method of the IconUtility class is the instance name of the button on which the icon needs to be placed.

TADA: yet another flex problem revealed and thank heavens FIXED this time.