6 Replies Latest reply on Mar 14, 2011 10:17 AM by dherten

    Desktop AIR 2.5 application with transparency and embedded Flash with wmode transparency error

    dherten

      I'm working on a desktop AIR project using the 2.5 SDK (ADT) to create an application that combines html and flash content. My application is using systemChrome none and transparent true. I have an swf element in my html file that I have set to wmode transparent. Instead of the swf rendering with a transparent background and showing the desktop like the html content does, I'm seeing a black box that fills the area where the Flash element is embedded.

       

      Can someone please assist me in removing this black square so that my flash content is rendered within the html file with a transparent background instead of a black background?

       

      When the AIR application is set to transparent, the Flash content must have it's wmode set to either transparent or opaque. Opaque gives it a white background (the stage background color), but transparent seems to just give it a black background.

       

      Thanks!

        • 2. Re: Desktop AIR 2.5 application with transparency and embedded Flash with wmode transparency error
          dherten Level 1

          I've tried a number of combinations of setting that property but it does not appear to work. Also, if I print out window.htmlLoader.paintsDefaultBackground without setting it, it prints it as being false, which would mean that it is already set to false from the application xml file being set to transparent?

           

          If I load in just the swf as the initial window content, the swf file is show with a transparent background as desired. It's when I have the swf as an element within the html page that is set as the initial window content that I am having the issue. Whether the swf is embedded statically or dynamically also makes no difference.

           

          I've also been trying to load the swf into the stage of the nativeWindow using the Loader class and I've tried loading the swf using the HTMLLoader class in a new native window. Nothing appears to be working...

           

          Help would be appreciated!

          • 3. Re: Desktop AIR 2.5 application with transparency and embedded Flash with wmode transparency error
            macromedical

            are you using the embed or the object tag to include the flash object ?

            • 4. Re: Desktop AIR 2.5 application with transparency and embedded Flash with wmode transparency error
              dherten Level 1

              I've tried using both the object and the embed tags.I've also tried using the swfobject javascript library. It appears that there is an issue with AIR not wanting to place the Flash object in the same buffer as the application window or something, which means that it isn't rendering the pixels unerneath the application (which in my case is the windows desktop) through the flash application.

               

              This a particularly troubling situation because I would like to have my application floating windowless. However, my flash content in the page has a massive black background area where it should be transparent...

               

              If I set just the swf as the initialWindow content in my application xml, then the Flash elemnt floats as desired, but then I don't have the html content that I would like. I think this appears to be an AIR runtime rendering issue that needs to be resolved by Adobe as opposed to something that I need to set myself...

               

              Given that possibility, I'm looking into how I might be able to seperate my content into seperate windows, or add the Flash element into the display list of my main window. At present, the Flash Loader class doesn't seem to work for me to load in my swf and add it to the main window display list underneath my html content. Similarly, I haven't yet figured out how to load the swf file into a new native window either. I can create a new window, but I can't seem to load the swf into it for some reason using the HTMLLoader class either.

               

              I'm somewhat new to AIR development for HTML. Does anyone have any suggestions for loading this swf in, or getting it to have a transparent background. The only remaining idea I have is to load the swf in the root application then create a new window for the html on top. I'm not sure if this will allow me to communicte between the two however. I'd like to be able to use externalInterface.

               

              Thanks!

              • 5. Re: Desktop AIR 2.5 application with transparency and embedded Flash with wmode transparency error
                macromedical Level 1

                I didn't go as deep as you to figure stuff out, but it is good to know

                that the object tag is as problematic. I can totally imagine that flash

                can be totally underneath stuff, as I had problems before in the

                opposite direction: flash in an htmlcomponent breaking out of flash

                depth stack and totally overlaying / hindering the rest of the content

                of my flash air app.

                Indeed serious depth issue...

                I'll be happy to read about your future findings.

                Cheers,

                Latcho

                • 6. Re: Desktop AIR 2.5 application with transparency and embedded Flash with wmode transparency error
                  dherten Level 1

                  Ok fellas,

                   

                  It appears that I have indeed answered my own question. So thanks... uh, me As I've now figured out, the entire AIR application is basically still a Flash based Display Object, one that can render html using webkit. That means that even though my main application is written in HTML I can still load swf files into the display list of the root applications native window using the Loader class.

                   

                  I had mentioned earlier that this didn't work, but actually it did work I was just having an error. In my flash file I had a reference error because I was referencing stage.stageWidth in actionscript. This produces a typeError in the AIR runtime when I add this to the root display list. I was able to finally see this error by add the -nodebug command to my adl testing script (adl app.xml -nodebug). For whatever reason my AIR 2.5 adl would not produce air.trace calls to the cmd console without that -nodebug command, which is extremely ironic. So adding in the -nodebug command actually gave me my debug traces! Welcome to the world we live in folks... I also found out that my traces in the swf also trace out to the console when you add this command in there.

                   

                  In addition, the reason I was not able to get the Loader class to work from javascript was because I was not using the correct addEventListener call. If you are familiar with Actionscript 3.0 (which luckily I am) you will recall that you have to add the event listener to the "contentLoaderInfo" object of the Loader variable you instanciate.

                   

                  Here's a snippet of how I was able to do this as well as another link that is buried in the documentation that's useful:

                   

                  var loader;

                  loader = new air.Loader();

                  var file = air.File.applicationDirectory.resolvePath("test.swf");
                           
                  loader.contentLoaderInfo.addEventListener(air.Event.COMPLETE, swfLoaded);
                  loader.load( new air.URLRequest(file.url) );

                   

                  function swfLoaded(evt) {

                       air.trace(" SWF LOADED! Woohoo! ");
                       air.trace( loader.numChildren );
                       loader.width = 1000;
                       loader.height = 800;
                       loader.x = 0;
                       loader.y = 0;
                       window.nativeWindow.stage.addChild(loader);

                  }

                   

                  This is a very useful article on creating nativeWindows and other things, such as creating Flash based display objects and adding them to the stage:

                   

                  http://help.adobe.com/en_US/air/html/dev/WS5b3ccc516d4fbf351e63e3d118666ade46-7e0a.html

                   

                   

                  Woohoo!