6 Replies Latest reply on Nov 23, 2009 12:55 PM by dgs1

    is it possible to create transparent background in Flex ?

    bocianek

      I created in Flex element with 'transparent' background: http://img196.imageshack.us/my.php?image=09012009160329.png

       

      But the finall result is horrible:

      on the white background: http://img4.imageshack.us/my.php?image=09012009160907.png

      on the yellow background: http://img4.imageshack.us/my.php?image=09012009160937.png

       

       

      I can't make transparent background in Flex ?

        • 1. Re: is it possible to create transparent background in Flex ?
          sirk214

          I m not sure if it helps, but usually you can set transparent in most elements with the  alpha="0".

           

          EDIT:

          -> if parent elements have alpha="0" value, than all thei children aren't visible, except the children have alpha="1"

          -> alpha="0.5" == 50% transparent

          • 2. Re: is it possible to create transparent background in Flex ?
            RUSH-ME Level 3

            Hi

             

            for containers thare is a style 'backGroundAlpha'

            for controls use alpha.

            hope this helps

             

            Regards

            Rush-me

            • 3. Re: is it possible to create transparent background in Flex ?
              RUSH-ME Level 3

              Hi

               

              for containers thare is a style 'backGroundAlpha'

              for controls use alpha.

              hope this helps

               

              Regards

              Rush-me

              • 4. Re: is it possible to create transparent background in Flex ?
                bocianek Level 1

                I have found an article about transparent in flex:

                http://www.morearty.com/blog/2006/10/02/transparent-flex-apps-with-html-showing-through/

                Based on this article - in Flex I have got:

                 

                <?xml version="1.0" encoding="utf-8"?>
                <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="250" height="250"  backgroundGradientAlphas="[0.0, 0.0]">
                   
                    <mx:TabNavigator x="25" y="29" width="200" height="200">
                        <mx:Canvas label="Tab 1" width="100%" height="100%">
                            <mx:TextArea x="19" y="20" height="126">
                                <mx:text>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</mx:text>
                            </mx:TextArea>
                        </mx:Canvas>
                        <mx:Canvas label="Tab 2" width="100%" height="100%">
                            <mx:TextArea x="19" y="20" height="126">
                                <mx:text>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</mx:text>
                            </mx:TextArea>
                        </mx:Canvas>
                    </mx:TabNavigator>
                   
                </mx:Application>

                 

                 

                 

                 

                 

                In file html I have got:

                 

                <!-- saved from url=(0014)about:internet -->
                <html lang="en">


                <!--
                Smart developers always View Source.


                This application was built using Adobe Flex, an open source framework
                for building rich Internet applications that get delivered via the
                Flash Player or to desktops via Adobe AIR.


                Learn more about Flex at http://flex.org
                // -->


                <head>
                <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />


                <!--  BEGIN Browser History required section -->
                <link rel="stylesheet" type="text/css" href="history/history.css" />
                <!--  END Browser History required section -->


                <title></title>
                <script src="AC_OETags.js" language="javascript"></script>


                <!--  BEGIN Browser History required section -->
                <script src="history/history.js" language="javascript"></script>
                <!--  END Browser History required section -->


                <style>
                body { margin: 0px; overflow:hidden; background-color: yellow; }
                </style>
                <script language="JavaScript" type="text/javascript">
                <!--
                // -----------------------------------------------------------------------------
                // Globals
                // Major version of Flash required
                var requiredMajorVersion = 9;
                // Minor version of Flash required
                var requiredMinorVersion = 0;
                // Minor version of Flash required
                var requiredRevision = 124;
                // -----------------------------------------------------------------------------
                // -->
                </script>
                </head>


                <body scroll="no">
                <script language="JavaScript" type="text/javascript">
                <!--
                // Version check for the Flash Player that has the ability to start Player Product Install (6.0r65)
                var hasProductInstall = DetectFlashVer(6, 0, 65);


                // Version check based upon the values defined in globals
                var hasRequestedVersion = DetectFlashVer(requiredMajorVersion, requiredMinorVersion, requiredRevision);


                if ( hasProductInstall && !hasRequestedVersion ) {
                    // DO NOT MODIFY THE FOLLOWING FOUR LINES
                    // Location visited after installation is complete if installation is required
                    var MMPlayerType = (isIE == true) ? "ActiveX" : "PlugIn";
                    var MMredirectURL = window.location;
                    document.title = document.title.slice(0, 47) + " - Flash Player Installation";
                    var MMdoctitle = document.title;


                    AC_FL_RunContent(
                        "src", "playerProductInstall",
                        "FlashVars", "MMredirectURL="+MMredirectURL+'&MMplayerType='+MMPlayerType+'&MMdoctitle='+MMdoctitle+"" ,
                        "width", "250",
                        "height", "250",
                        "align", "middle",
                        "id", "test",
                        "quality", "high",
                        "bgcolor", "#869ca7",
                        "name", "test",
                        "wmode", "transparent",
                        "allowScriptAccess","sameDomain",
                        "type", "application/x-shockwave-flash",
                        "pluginspage", "http://www.adobe.com/go/getflashplayer"
                    );
                } else if (hasRequestedVersion) {
                    // if we've detected an acceptable version
                    // embed the Flash Content SWF when all tests are passed
                    AC_FL_RunContent(
                            "src", "test",
                            "width", "250",
                            "height", "250",
                            "align", "middle",
                            "id", "test",
                            "quality", "high",
                            "bgcolor", "#869ca7",
                            "name", "test",
                            "wmode", "transparent",
                            "allowScriptAccess","sameDomain",
                            "type", "application/x-shockwave-flash",
                            "pluginspage", "http://www.adobe.com/go/getflashplayer"
                    );
                  } else {  // flash is too old or we can't detect the plugin
                    var alternateContent = 'Alternate HTML content should be placed here. '
                      + 'This content requires the Adobe Flash Player. '
                       + '<a href=http://www.adobe.com/go/getflash/>Get Flash</a>';
                    document.write(alternateContent);  // insert non-flash content
                  }
                // -->
                </script>
                <noscript>
                      <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
                            id="test" width="250" height="250"
                            codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">
                            <param name="movie" value="test.swf" />
                            <param name="quality" value="high" />
                            <param name="bgcolor" value="#869ca7" />
                            <param name="wmode" value="transparent" />
                            <param name="allowScriptAccess" value="sameDomain" />
                            <embed src="test.swf" quality="high" bgcolor="#869ca7"
                                width="250" height="250" name="test" align="middle"
                                play="true"
                                loop="false"
                                quality="high"
                                wmode="transparent"
                                allowScriptAccess="sameDomain"
                                type="application/x-shockwave-flash"
                                pluginspage="http://www.adobe.com/go/getflashplayer">
                            </embed>
                    </object>
                </noscript>
                </body>
                </html>

                 

                 

                And no result - no transparent Why ??

                • 5. Re: is it possible to create transparent background in Flex ?
                  bocianek Level 1

                  I have found:

                  http://yfrog.com/38sdsij

                   

                  But now everything is transparate !! Each component on my background is transparent - why ?????? Now I can't give any color for component !!

                  • 6. Re: is it possible to create transparent background in Flex ?
                    dgs1

                    In Flex 4 you have to use a skin to make your application transparent with opaque components on top.  It's been a while, but I think I found the source in sdks/4.0/frameworks/projects/flex4/src/spark/skins/default/applicationSkin.mxml .  I was using a beta version, it may have changed by now.  Just make a new skin and copy that code in and set your application to use your new skin (it should still compile and look the same as before), then change your skin to be transparent (or whatever else you want).  If instead you tried changing a component's transparent attribute it will affect it and all its children.  So if you try that on the application component your entire application will be invisible, or translucent, or whatever.