2 Replies Latest reply on Oct 21, 2011 11:31 AM by FM_Flame

    How to make Group clip it's content ?

    FM_Flame Level 1

      Currently I've done this by using the clipAndEnableScrolling="true" property and my case scenario is simple:

       

      <s:Group width="100%" height="100%" clipAndEnableScrolling="true">

           <s:Group id="bgOver" width="100%" height="100%">

       

              <s:Group y="-4" height="{bgOver.height+4}">

       

                <s:Rect width="100%" height="100%">

                   <s:fill>

                       <s:SolidColor color="0x000000" />

                   </s:fill>

               </s:Rect>

              </s:Group>

       

              <s:filters>

                  <s:GlowFilter blurX="4" blurY="4" color="0xbcc2ca" alpha="0.70" inner="true" knockout="true" />

              </s:filters>

       

          </s:Group>

      </s:Group>

       

      When you have an inner Glow but you want to have it on left right and bottom but not top for example case like tab bar above, what I do is increase the height of the background by the blurX/Y value and move it y = - blurX/Y value. So it gets outside of the container and gets cut off.

       

      It's not cut off till I set clipAndEnableScrolling="true", although I don't want to scroll anything, I just want to clip. I could also mask for example...

       

      That's why I am asking what's the right way to clip? Anyone?