3 Replies Latest reply on Dec 8, 2010 9:18 AM by Shongrunden

    Placing an image behind a border container

    linrsvp Level 1

      Hi,

      This is how my application is structured :

      1. one main outer border container(BC) which is like a wrapper for the whole application. I did this mainly to set a background image for the whole appln. the layout for this BC is Vertical Layout. The appl. layout is also vertical

      2. Within this BC i have another BC, whose layout is Basic i.e absolute.

      3. Now within my 2nd BC I have 4 BCs and each of these BCs contains an image. I havent set any layout for each of these 4 BCs. The image is a red bar, which I want to slide in and out when the user rolls over its parent BC.

       

      Now my problem is this :

      In the initial state, I want these sliding images to be positioned BEHIND its parent BC. so that when i roll over it slides out.

       

      I tried giving negative x coordinates, but the image dsnt hide behind the BC... im guessing its got smthing to do with the layouts. Please help.

        • 1. Re: Placing an image behind a border container
          Shongrunden Adobe Employee

          The depth property might be useful for you, for example:

           

          <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

                            xmlns:s="library://ns.adobe.com/flex/spark">

               

               <s:controlBarContent>

                    <s:Button label="increase green depth" click="greenRect.depth = 1; redRect.depth = 0" />

                    <s:Button label="increase red depth" click="greenRect.depth = 0; redRect.depth = 1" />

               </s:controlBarContent>

                         

               <s:Rect id="greenRect" width="100" height="100">

                    <s:fill>

                         <s:SolidColor color="green" />

                    </s:fill>

               </s:Rect>

                         

               <s:Rect id="redRect" width="100" height="100" x="50" y="50">

                    <s:fill>

                         <s:SolidColor color="red" />

                    </s:fill>

               </s:Rect>

               

          </s:Application>

          • 2. Re: Placing an image behind a border container
            linrsvp Level 1

            hey to use this "depth" property, is it necessary that I have an absolute layout? and does it work for images ?

            • 3. Re: Placing an image behind a border container
              Shongrunden Adobe Employee

              It should work with any spark layout.