Transparent background for SWFLoader

Question

I created a "Loading" spinner in a SWF. I display this spinner in my main application SWF using SWFLoader. How do I make the SWFLoader transparent? Currently it uses Flex's default background color even though I've set backgroundAlpha="0".

My spinner SWF's main MXML: (Note the use of backgroundAlpha)

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:Controls="Controls.*" width="30" height="30" backgroundAlpha="0">
    <Controls:Spinner id="ctrlSpinner" />  <!-- spinner logic encapsulated in a component -->
</mx:Application>

My application SWF's main MXML:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" height="801">
    <mx:SWFLoader x="10" y="173" id="swfSpinner" autoLoad="true" scaleContent="true" >
        <mx:source>SWFs/LoadingSpinnerApp.swf</mx:source>
    </mx:SWFLoader>
</mx:Application>

Note that the Spinner control itself is transparent. There's just something about the SWFLoader that causes it to ignore my backgroundAlpha setting. Any ideas?

Answer 1

I think your problem is within the Spinner component you must be setting the background color or alpha in there and that's causing your loader to have a background color. if you not setting it then set it because it probably defaults to an alpha of 1. when I do the following I don't get any background but when I change the alpha to 1 the black background appears.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
layout="absolute" backgroundAlpha="1" 
backgroundColor="#000000">
    <mx:Text id="textBox" text="Hey World"/>
</mx:Application>

and

<?xml version="1.0" encoding="utf-8"?>
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
layout="absolute" backgroundColor="#ffffff">

    <mx:Canvas backgroundColor="#ff0000" width="200" 
height="200" verticalCenter="0" horizontalCenter="0">
        <mx:SWFLoader x="10" y="173" id="swfSpinner" 
autoLoad="true" scaleContent="true" source="DebuggerTest.swf"/>
    </mx:Canvas>

    </mx:Application>

Answer 2

It turns out that I was doing the correct thing -- Flex just wasn't copying the latest version of my spinner SWF to the bin of my main app. Instead it had been holding on to a previous version built before I added the transparency.

I manually copied the new spinner SWF to the main app's bin and then it worked!