How to create tile wallpaper in flex?

Question

Hi

I am trying to make tile wallpaper in flex. I did stretch or normal use the backgroundSize as 100% and "auto". But i have no idea about how to create tile.

Can someone help me with source, instruction or the best would be a source code.

Regards Zeeshan

Answer 1

Creating a tiled backgound in Flex 3 is not available through the use of of CSS styles or property styles.

However it is possible simply by assigning your component a custom programmatic skin, which handles the drawing of the tiled image through using the raw bitmap data.

Let me further illustrate my point with some code

<mx:Canvas borderSkin="{TiledBackgroundSkin}"
    width="100%" height="100%">
</mx:Canvas>

That is your component with a programmatic border skin applied to it.

Now you just create that border skin by extending the RectangularBorder class. Such as:

public class TiledBackgroundSkin extends RectangularBorder
{
 [Bindable]  
 [Embed(source='tile.jpg')]
 private var tileImageClass :Class;
 private var tileBitmapData :BitmapData;

 public function TiledBackgroundSkin()
 {
  super(); 
  createBitmap()
 }

 /** A private method that handles the drawing of the bitmap **/
 private function createBitmap():void
 {
  var backgroundImage:Bitmap = new tileImageClass();
  tileBitmapData = new BitmapData(backgroundImage.width,backgroundImage.height);
  tileBitmapData.draw( backgroundImage );
 }

 /** Override updateDisplayList to draw the Tiled Background **/
 override protected function updateDisplayList( unscaledWidth:Number,unscaledHeight:Number ):void 
 {
  super.updateDisplayList(unscaledWidth,unscaledHeight );
  graphics.clear();
  graphics.beginBitmapFill( tileBitmapData );
  graphics.drawRect(0,0,unscaledWidth,unscaledHeight);
  graphics.endFill();
 }  
}

The constructor creates the bitmap image for tiling.

Then the updateDisplayList method (called after initial creation and for subsequent resizes of the component) fills the entire component with the tiled background.

If you wish to adjust the offset positioning of the tiled image, you would do so in the updateDisplayList method