capital H coder

So we have the ability in Flex to select an image as the background of a container. However, the only control we get over this image is the ability to specify its size. From my background in .NET, I am accustomed to being able to specify the layout of a background image as one of four options:

• Centered: shows up as its default size, centered in the container
• Stretched: made to fill all area of the background (causing distortion if necessary)
• Tiled: repeats itself to fill entire background area
• Zoomed: image stretched as large as possible while maintaining aspect ratio & centered

So what I’m providing here (right-click for code) is my method of providing this functionality as a skin in Flex.



I call it the CuSTomiZableImageSkin (for Center, Stretch, Tile, and Zoom), but you can call it whatever you want (feel free to use and modify it to your heart’s content).

This should work for any containers in your app, and all you have to do to use it is specify the class as your borderSkin, provide a backgroundImage, and set the backgroundSize style to center, stretch, tile, or zoom.

HERE IS THE SOURCE

Possible improvements: allowing a border as well as the image. I haven’t needed a border as well as the image yet, so I haven’t done this.

~Shaun