# Applying Tiling Pattern to MovieClip

**URL:** <https://forum.kirupa.com/t/applying-tiling-pattern-to-movieclip/265234>\
**Category:** flash\
**Created:** [July 6, 2008, 7:31pm UTC](https://forum.kirupa.com/t/applying-tiling-pattern-to-movieclip/265234 "2008-07-06T19:31:05Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![Sage\_of\_Fire](https://avatars.discourse-cdn.com/v4/letter/s/e95f7d/32.png) [@Sage\_of\_Fire](https://forum.kirupa.com/u/Sage_of_Fire)\
**Post date:** [July 6, 2008, 7:31pm UTC](https://forum.kirupa.com/t/applying-tiling-pattern-to-movieclip/265234/1 "2008-07-06T19:31:05Z")

</div>

Hey, everybody, is there a standard way to apply a tiling pattern to a display object with AS3, or will I have to write a custom class for it? If there is, I’d appreciate an example. Thanks!

---

<div class="post-metadata">

**Author:** ![sekasi](https://avatars.discourse-cdn.com/v4/letter/s/5f8ce5/32.png) [@sekasi](https://forum.kirupa.com/u/sekasi)\
**Post date:** [July 6, 2008, 8:05pm UTC](https://forum.kirupa.com/t/applying-tiling-pattern-to-movieclip/265234/2 "2008-07-06T20:05:48Z")

</div>

I simplified a bghandler class I was working on at the same time I read this post.

Enjoy.

```auto

import flash.display.Graphics;
import flash.display.BitmapData;
import flash.display.Sprite;

private var _gfx:Graphics;
private var _pattern:bgPattern = new bgPattern(1,1); // in your library
private var _solid:Sprite = new Sprite(); // the sprite that gets filled

public function Constructor():void {
	addChild(_solid);
	redrawBg();
};

private function redrawBg(e:Event = null):void {
	_gfx = _solid.graphics;
	_gfx.clear();
	_gfx.beginBitmapFill(_pattern);
	_gfx.moveTo(0, 0);
	_gfx.lineTo(this.stage.stageWidth,0);
	_gfx.lineTo(this.stage.stageWidth, this.stage.stageHeight);
	_gfx.lineTo(0, this.stage.stageHeight);
	_gfx.lineTo(0, 0);
}

```

---

<div class="post-metadata">

**Author:** ![sekasi](https://avatars.discourse-cdn.com/v4/letter/s/5f8ce5/32.png) [@sekasi](https://forum.kirupa.com/u/sekasi)\
**Post date:** [July 6, 2008, 8:06pm UTC](https://forum.kirupa.com/t/applying-tiling-pattern-to-movieclip/265234/3 "2008-07-06T20:06:51Z")

</div>

note that everywhere else you’ll see examples that always end with “endfill” but you really don’t have to do that when you’re completely filling something. Just waste of cpu.

---

<div class="post-metadata">

**Author:** ![Sage\_of\_Fire](https://avatars.discourse-cdn.com/v4/letter/s/e95f7d/32.png) [@Sage\_of\_Fire](https://forum.kirupa.com/u/Sage_of_Fire)\
**Post date:** [July 8, 2008, 5:50pm UTC](https://forum.kirupa.com/t/applying-tiling-pattern-to-movieclip/265234/4 "2008-07-08T17:50:45Z")

</div>

Okay, that would work for filling a stage or a rectangle (or any other shape drawn by actionscript), but it wouldn’t work for filling a pre-existing bitmap. How can I apply that to a bitmap? Thanks!

---

<div class="post-metadata">

**Author:** ![Anogar](https://avatars.discourse-cdn.com/v4/letter/a/ed655f/32.png) [@Anogar](https://forum.kirupa.com/u/Anogar)\
**Post date:** [July 8, 2008, 6:15pm UTC](https://forum.kirupa.com/t/applying-tiling-pattern-to-movieclip/265234/5 "2008-07-08T18:15:46Z")

</div>

If the bitmap is a square, just fill the same size as it and slap it on top, eh?

---

<div class="post-metadata">

**Author:** ![Sage\_of\_Fire](https://avatars.discourse-cdn.com/v4/letter/s/e95f7d/32.png) [@Sage\_of\_Fire](https://forum.kirupa.com/u/Sage_of_Fire)\
**Post date:** [July 8, 2008, 9:00pm UTC](https://forum.kirupa.com/t/applying-tiling-pattern-to-movieclip/265234/6 "2008-07-08T21:00:30Z")

</div>

No, the bitmap is not square.

---

<div class="post-metadata">

**Author:** ![Anogar](https://avatars.discourse-cdn.com/v4/letter/a/ed655f/32.png) [@Anogar](https://forum.kirupa.com/u/Anogar)\
**Post date:** [July 8, 2008, 9:20pm UTC](https://forum.kirupa.com/t/applying-tiling-pattern-to-movieclip/265234/7 "2008-07-08T21:20:14Z")

</div>

Use it as a mask?

---

<div class="post-metadata">

**Author:** ![Sage\_of\_Fire](https://avatars.discourse-cdn.com/v4/letter/s/e95f7d/32.png) [@Sage\_of\_Fire](https://forum.kirupa.com/u/Sage_of_Fire)\
**Post date:** [July 8, 2008, 9:54pm UTC](https://forum.kirupa.com/t/applying-tiling-pattern-to-movieclip/265234/8 "2008-07-08T21:54:48Z")

</div>

I was thinking that might be where this was going… I have two questions about masks. First, is there a way to convert the transparent areas of a bitmap into a mask (with AS3)? Second, does a mask affect all the things below it or only the ones it shares a display object with? I need something I can stack. If both of those questions return true, could you post an example of how to make and apply a mask (like I was talking about)? Thanks much.

---

<div class="post-metadata">

**Author:** ![TheCanadian](https://avatars.discourse-cdn.com/v4/letter/t/67e7ee/32.png) [@TheCanadian](https://forum.kirupa.com/u/TheCanadian)\
**Post date:** [July 9, 2008, 3:16am UTC](https://forum.kirupa.com/t/applying-tiling-pattern-to-movieclip/265234/9 "2008-07-09T03:16:28Z")

</div>

Try this out:

```auto
var bd:BitmapData = new BitmapData(stage.stageWidth / 2, stage.stageHeight, true, 0);
//
var b:Bitmap = new Bitmap(bd);
b.x = stage.stageWidth / 2;
addChild(b)
//
var p:BitmapData = new BitmapData(10, 10, true, 0xFFFF0000);
p.fillRect(new Rectangle(0, 0, 5, 5), 0xFFFFFF);
p.fillRect(new Rectangle(5, 5, 5, 5), 0xFFFFFF);
//
stage.addEventListener(MouseEvent.MOUSE_DOWN, startDraw);
stage.addEventListener(MouseEvent.MOUSE_UP, stopDraw);
//
graphics.lineStyle(30);
//
function startDraw(evt:MouseEvent):void {
	graphics.moveTo(mouseX, mouseY);
	addEventListener(Event.ENTER_FRAME, draw);
}
function stopDraw(evt:MouseEvent):void {
	removeEventListener(Event.ENTER_FRAME, draw);
	bd.draw(this, null, null, null, new Rectangle(0, 0, stage.stageWidth / 2, stage.stageHeight));
	var wr:Number = b.width / p.width;
	var hr:Number = b.height / p.height;
	for(var i:Number = 0; i < wr; i++) {
		for(var j:Number = 0; j < hr; j++) {
			bd.copyPixels(p, p.rect, new Point(i * p.width, j * p.height), bd, new Point(i * p.width, j * p.height));
		}
	}
}
function draw(evt:Event):void {
	if(mouseX < stage.stageWidth / 2) graphics.lineTo(mouseX, mouseY)
	else graphics.moveTo(stage.stageWidth / 2, mouseY);
}

```

---

<div class="post-metadata">

**Author:** ![Sage\_of\_Fire](https://avatars.discourse-cdn.com/v4/letter/s/e95f7d/32.png) [@Sage\_of\_Fire](https://forum.kirupa.com/u/Sage_of_Fire)\
**Post date:** [July 9, 2008, 1:29pm UTC](https://forum.kirupa.com/t/applying-tiling-pattern-to-movieclip/265234/10 "2008-07-09T13:29:37Z")

</div>

Okay, I guess I’m not being specific enough. I need to fill an oddly-shaped bitmap dynamically with a user-chosen bitmap pattern. If somebody can tell me how to turn the transparent areas of a bitmap into a mask or how to turn a png image into a flash-recognized vector, I can figure the rest out for myself.

---

<div class="post-metadata">

**Author:** ![sekasi](https://avatars.discourse-cdn.com/v4/letter/s/5f8ce5/32.png) [@sekasi](https://forum.kirupa.com/u/sekasi)\
**Post date:** [July 9, 2008, 1:46pm UTC](https://forum.kirupa.com/t/applying-tiling-pattern-to-movieclip/265234/11 "2008-07-09T13:46:56Z")

</div>

read up on BitmapData.getColorBoundsRect();

---

<div class="post-metadata">

**Author:** ![TheCanadian](https://avatars.discourse-cdn.com/v4/letter/t/67e7ee/32.png) [@TheCanadian](https://forum.kirupa.com/u/TheCanadian)\
**Post date:** [July 10, 2008, 2:20am UTC](https://forum.kirupa.com/t/applying-tiling-pattern-to-movieclip/265234/12 "2008-07-10T02:20:38Z")

</div>

[QUOTE=Sage\_of\_Fire;2355688]Okay, I guess I’m not being specific enough. I need to fill an oddly-shaped bitmap dynamically with a user-chosen bitmap pattern. If somebody can tell me how to turn the transparent areas of a bitmap into a mask or how to turn a png image into a flash-recognized vector, I can figure the rest out for myself.[/QUOTE]

Did you try the code I posted? Cause that’s exactly what it does.

Especially look at this part:

```auto
	for(var i:Number = 0; i < wr; i++) {
		for(var j:Number = 0; j < hr; j++) {
			bd.copyPixels(p, p.rect, new Point(i * p.width, j * p.height), bd, new Point(i * p.width, j * p.height));
		}
	}

```

---

<div class="post-metadata">

**Author:** ![Sage\_of\_Fire](https://avatars.discourse-cdn.com/v4/letter/s/e95f7d/32.png) [@Sage\_of\_Fire](https://forum.kirupa.com/u/Sage_of_Fire)\
**Post date:** [July 10, 2008, 1:51pm UTC](https://forum.kirupa.com/t/applying-tiling-pattern-to-movieclip/265234/13 "2008-07-10T13:51:35Z")

</div>

I guess I didn’t notice that part; sorry for sounding ungrateful. Anyway, I think I figured out an simpler way to fix my problem. I just outlined my bitmap and saved it as a symbol. Now, I’m gonna use it as a mask on a rectangular sprite which I can fill with whatever bitmap or color I want. I’ll show it to you once it’s up to my standards. Thanks for the help! (and the incredibly obscure methods I learned about.)