1 Reply Latest reply on Jan 9, 2010 3:55 PM by E M Storm

    Can't get backgroundAlpha to work

    E M Storm

      I'm creating a component, based on Canvas.  The component is to be a menu for this site I'm building.  I want the background to be completely transparent, but putting in backgroundAlpha="0.0" just leaves me with a gray, non-transparent, box for a background.  Here is my code:

       

       

      As you can see, I tried changing the backgroundAlpha both through ActionScript, and through MXML.  (I've tried them each separately, and together.  None of these ways works.)  I have also tried putting the backgroundAlpha="0.0" statement in the place where I call this component, to no effect.

       

      I really need to figure out how to make this thing transparent.  Any ideas?

       

      Alternatively, if anyone knows a good way to make a menu that allows for both top-level items, and submenus, that can be put into a slide-out "drawer", as I'm trying to achieve here (eventually), please let me know that, too.  But I'd REALLY like to know why I'm not getting transparency.

       

      If it matters, this component has been called from an AddChild statement within a State, and has also been called directly from another component.  No difference was observed.  I am using Flex 3.

       

      Please help.  Thanks in advance.

      Eric

        • 1. Re: Can't get backgroundAlpha to work
          E M Storm Level 1

          Sorry, it cut out my code.  Let me try that again.  Here is the code:

          <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
              dropShadowEnabled="false"
              backgroundColor="0x0000FF"
              backgroundAlpha="0.0"
              creationComplete="init()">

           

              <mx:Script>
                  <![CDATA[
                     
                      import mx.controls.Alert;
                     
                      private function accordionChangeHandler():void
                      {
                          if( menu.selectedChild.label == "Welcome Page" )
                          {
                              Alert.show( "You have just activated the " + menu.selectedChild.label + " menu item." );
                          }
                      }
                     
                      private function init():void
                      {
                          setStyle("backgroundAlpha", 0.0 );
                      }
                     
                     
                  ]]>
              </mx:Script>

           

              <mx:Accordion id="menu" change="accordionChangeHandler()" resizeToContent="true" width="170" backgroundAlpha="0.0" >
                  <mx:VBox label="Welcome Page">
                  </mx:VBox>
                  <mx:VBox label="Submenu 1" verticalGap="2" paddingLeft="8" >
                      <mx:Button label="Menu Item 1-1" width="160" />
                      <mx:Button label="Menu Item 1-2" width="160" />
                      <mx:Button label="Menu Item 1-3" width="160" />
                      <mx:Button label="Menu Item 1-4" width="160" />
                  </mx:VBox>
                  <mx:VBox label="Submenu 2" verticalGap="2" paddingLeft="8" >
                      <mx:Button label="Menu Item 2-1" width="160" />
                      <mx:Button label="Menu Item 2-2" width="160" />
                      <mx:Button label="Menu Item 2-3" width="160" />
                  </mx:VBox>
                  <mx:VBox label="Menu Item 4" >
                  </mx:VBox>
              </mx:Accordion>

           

              <mx:Button label="*" x="172" />   

           

          </mx:Canvas>