1 Reply Latest reply on Nov 7, 2010 10:23 PM by Shongrunden

    Creating a Custom Border Using Images

    dillydadally

      What is the best methodology to create a custom border using images?  I have 4 corner images and then 4 repeatable images for the sides so the container can be any size and then resize without adjusting the images. 

       

      Is there some sort of custom border class or methodology adobe created, or is the only way to anchor the corner images in the corners and then place the sides in individual containers and dynamically assign their size?  Can I repeat an image in a section of a container without putting it in its own new container?  What is the best methodology to create a custom border with images?  Thanks for your advice.

        • 1. Re: Creating a Custom Border Using Images
          Shongrunden Adobe Employee

          One approach might be to use a bunch of BitmapImages in a Group and take advantage of the repeat fillMode for repeating images:

           

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

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

           

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

                  <s:BitmapImage id="topLeftCorner" left="0" top="0" width="10" height="10" source="corner.jpg" />

                  <s:BitmapImage id="topRepeating" top="0" left="10" right="10" source="repeating.jpg" fillMode="repeat" />

                  <s:BitmapImage id="topRightCorner" right="0" top="0" width="10" height="10" source="corner.jpg" />

                  <s:BitmapImage id="rightRepeating" top="10" right="0" bottom="10" source="repeating.jpg" fillMode="repeat" />

                  <s:BitmapImage id="bottomLeftCorner" left="0" bottom="0" width="10" height="10" source="corner.jpg" />

                  <s:BitmapImage id="leftRepeating" top="10" left="0" bottom="10" source="repeating.jpg" fillMode="repeat" />

                  <s:BitmapImage id="bottomRightCorner" right="0" bottom="0" width="10" height="10" source="corner.jpg" />

                  <s:BitmapImage id="bottomRepeating" bottom="0" left="10" right="10" source="repeating.jpg" fillMode="repeat" />

           

                  <!-- the rest of the content here... -->

           

                  <s:Label text="content ..." x="20" y="20" />

           

              </s:Group>

           

          </s:Application>

           

          Given this approach you could then create a custom SkinnableContainer skin that puts the contentGroup where the Label is in the example above.