1 Reply Latest reply on May 30, 2011 7:42 PM by Shongrunden

    How to 9scale a Flex group?

    Lior Bruder Level 1

      Hi All,

       

      I got a graphic element from flash catalyst (that is not scalable - done with path) and i want to use 9scale in order to scale it without touching the corners.

       

      When i use this: _com.scale9Grid = new Rectangle(20,0,100,100); i get this error:

       

      Error: ScaleGrid properties can not be set on this Group since at least one child element is a DisplayObject.

       

      Is there an easy way to make 9scale on spark components?

        • 1. Re: How to 9scale a Flex group?
          Shongrunden Adobe Employee

          Scale grids are only supported on Group when there is no child DisplayObjects. This means that every element in the Group must be a GraphicElement and none of those elements can have properties set on them that require its own DisplayObject (like rotation).

           

          From the Group documentation:

          Note: The scale grid might not function correctly when there are DisplayObject children inside of the Group, such as a component or another Group. If the children are GraphicElement objects, and they all share the Group's DisplayObject, then the scale grid works properly.

          Setting any of the following properties on a GraphicElement child requires that GraphicElement to create its own DisplayObject, thus negating the scale grid properties on the Group.

            alpha
            blendMode other than BlendMode.NORMAL or "auto"
            colorTransform
            filters
            mask
            matrix
            rotation
            scaling
            3D properties
            bounds outside the extent of the Group

           

          So something like this should work:

          <s:Group scaleX="2" scaleY="2" scaleGridLeft="20" scaleGridTop="20" scaleGridBottom="80" scaleGridRight="80">

              <s:Rect width="20" height="20" x="0" y="0"><s:fill><s:SolidColor color="green" /></s:fill></s:Rect>

              <s:Rect width="20" height="20" x="0" y="80"><s:fill><s:SolidColor color="green" /></s:fill></s:Rect>

              <s:Rect width="20" height="20" x="80" y="0"><s:fill><s:SolidColor color="green" /></s:fill></s:Rect>

              <s:Rect width="20" height="20" x="80" y="80"><s:fill><s:SolidColor color="green" /></s:fill></s:Rect>

           

              <s:Rect x="20" y="20" width="60" height="60">

                  <s:fill>

                      <s:SolidColor color="blue" />

                  </s:fill>

              </s:Rect>

          </s:Group>

           

          But this won't be supported since Button extends from DisplayObject:

           

          <s:Group scaleX="2" scaleY="2" scaleGridLeft="20" scaleGridTop="20" scaleGridBottom="80" scaleGridRight="80">

              <s:Rect width="20" height="20" x="0" y="0"><s:fill><s:SolidColor color="green" /></s:fill></s:Rect>

              <s:Rect width="20" height="20" x="0" y="80"><s:fill><s:SolidColor color="green" /></s:fill></s:Rect>

              <s:Rect width="20" height="20" x="80" y="0"><s:fill><s:SolidColor color="green" /></s:fill></s:Rect>

              <s:Rect width="20" height="20" x="80" y="80"><s:fill><s:SolidColor color="green" /></s:fill></s:Rect>

           

              <s:Button label="Is DisplayObject" />

          </s:Group>

           

          And Group also extends from DisplayObject so this won't work either:

           

          <s:Group scaleX="2" scaleY="2" scaleGridLeft="20" scaleGridTop="20" scaleGridBottom="80" scaleGridRight="80">

              <s:Rect width="20" height="20" x="0" y="0"><s:fill><s:SolidColor color="green" /></s:fill></s:Rect>

              <s:Rect width="20" height="20" x="0" y="80"><s:fill><s:SolidColor color="green" /></s:fill></s:Rect>

              <s:Rect width="20" height="20" x="80" y="0"><s:fill><s:SolidColor color="green" /></s:fill></s:Rect>

              <s:Rect width="20" height="20" x="80" y="80"><s:fill><s:SolidColor color="green" /></s:fill></s:Rect>

           

              <s:Group />

          </s:Group>

           

          This post might be useful for learning about the difference between children and elements.