author: Krasimir Tsonev

Hi there, I'm . Senior front-end engineer with over 13 years of experience. I write, speak and occasionally code stuff. Follow me on Twitter, GitHub, Facebook or LinkedIn

Pattern fill with AS3 (repeat-x)

Currently I'm working on an AIR application and in the header of it there is a nice gradient which has to be repeated by the x axis to fill the whole screen area. One way to do it is to use a really wide image, something like 2000px. The other way is to use a simple trick and repeat a small part with the gradient.
function drawBackground(): void {
    var clip: MovieClip = new GradientMovieClip();
    var bd: BitmapData = new BitmapData(clip.width, clip.height, true, 0xFFFFFF);
    // set the color to 0xFFFFFF if you use transparent png file for the pattern
    bd.draw(clip);
    _background.graphics.clear();
    _background.graphics.beginBitmapFill(bd);
    _background.graphics.drawRect(0, 0, widthOfTheScreen, heightOfTheScreen);
    _background.graphics.endFill();
  }
If you enjoy this post, share it on Twitter, Facebook or LinkedIn. Or maybe comment below: