Applying Tiling Pattern to MovieClip

programming flash
1

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!

2

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

Enjoy.


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);
}
3

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.

4

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!

5

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

6

No, the bitmap is not square.

7

Use it as a mask?

8

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.

9

Try this out:

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);
}
10

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.

11

read up on BitmapData.getColorBoundsRect();

12

[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:

	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));
		}
	}
13

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.)