# Mask help for AS drawing board

**URL:** <https://forum.kirupa.com/t/mask-help-for-as-drawing-board/9685>\
**Category:** Uncategorized\
**Created:** [December 16, 2002, 4:52pm UTC](https://forum.kirupa.com/t/mask-help-for-as-drawing-board/9685 "2002-12-16T16:52:23Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![jcs](https://avatars.discourse-cdn.com/v4/letter/j/439d5e/32.png) [@jcs](https://forum.kirupa.com/u/jcs)\
**Post date:** [December 16, 2002, 4:52pm UTC](https://forum.kirupa.com/t/mask-help-for-as-drawing-board/9685/1 "2002-12-16T16:52:23Z")

</div>

Howdy all,

Using pom’s [drawing board tute](http://www.kirupa.com/developer/actionscript/drawingboard.asp) and I need help masking/bounding it.

I am making a geography tutorial in which I want users to be able to draw inside a circle, but not outside it.

Tried making a mask on a layer above the frame w/ AS and tried adjusting the z-index of the AS but think I did it wrong. Is there additional code that can bound the drawing parameters to a circle or another way to mask it?

Thanks much, jc

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [December 16, 2002, 5:14pm UTC](https://forum.kirupa.com/t/mask-help-for-as-drawing-board/9685/2 "2002-12-16T17:14:07Z")

</div>

Put an empty clip on a layer, and mask the layer. Then draw INSIDE that empty clip.

pom 🙂

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [December 16, 2002, 5:32pm UTC](https://forum.kirupa.com/t/mask-help-for-as-drawing-board/9685/3 "2002-12-16T17:32:38Z")

</div>

pom, to my rescue again! Need clarification:

1. added another layer above a layer containing your code
2. masked it
3. added this code to the masking layer (in best amateur fashion):

\_root.createEmptyMovieClip(“circle”, 1);  
circle.\_x = 150;  
circle.\_y = 150;

Know I am missing something easy. Thanks.

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [December 16, 2002, 11:27pm UTC](https://forum.kirupa.com/t/mask-help-for-as-drawing-board/9685/4 "2002-12-16T23:27:44Z")

</div>

The code we have is

```auto
// 1. SETTING THINGS
_root.createEmptyMovieClip("line",1);

// 2. EVENTS IN _ROOT:
_root.onMouseDown = function(){
	line.moveTo(_xmouse,_ymouse);
	line.lineStyle(2,0x000000,100);
	this.onMouseMove = function(){
		line.lineTo(_xmouse,_ymouse);
		updateAfterEvent();
	}
}
_root.onMouseUp = function(){
	this.onMouseMove = null;
}

```

Now if there’s a circle movie clip on the scene, instance name circle, all you have to do is

```auto
line.setMask(circle);

```

pom :moustache

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [December 17, 2002, 12:28am UTC](https://forum.kirupa.com/t/mask-help-for-as-drawing-board/9685/5 "2002-12-17T00:28:33Z")

</div>

right. Got it and worked it.  
now, once I’ve drawn a shape in this circle, I want to fill it with the same color. Read up on the drawing api in the AS tute section and was trying to use the beginFill, endFill with limited success.

Any thoughts?

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [December 17, 2002, 9:20am UTC](https://forum.kirupa.com/t/mask-help-for-as-drawing-board/9685/6 "2002-12-17T09:20:23Z")

</div>

I don’t understand what you’re trying to do :-\ If it’s just filling the shape, it’s beginFill all right.

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [December 17, 2002, 2:41pm UTC](https://forum.kirupa.com/t/mask-help-for-as-drawing-board/9685/7 "2002-12-17T14:41:30Z")

</div>

Not sure where to put endFill() or what its syntax should be. Have this code right now:

// 2. EVENTS IN \_ROOT:  
\_root.onMouseDown = function(){  
line.setMask(circle);  
line.beginFill(0x666633,100);  
line.moveTo(\_xmouse,\_ymouse);  
line.lineStyle(2,0x666633,100);  
this.onMouseMove = function(){  
line.lineTo(\_xmouse,\_ymouse);  
updateAfterEvent();

```
}

```

}  
\_root.onMouseUp = function(){  
this.onMouseMove = null;  
}

I’ve attached the .fla if you want to see where I’m going.

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [December 18, 2002, 1:46pm UTC](https://forum.kirupa.com/t/mask-help-for-as-drawing-board/9685/8 "2002-12-18T13:46:27Z")

</div>

I couldn’t figure it out, I asked my chinese master :beam:

```auto
// thanks to Gorlim from flashxpress.net for the code
this.onMouseDown=function(){
	this.lineStyle(0,0,100);
	this.moveTo(_xmouse,_ymouse);
	tabY=new Array;
	tabX=new Array;
	tabX.push(_xmouse);
	tabY.push(_ymouse);
	this.onMouseMove=function(){
		tabX.push(_xmouse);
		tabY.push(_ymouse);
		this.lineTo(_xmouse,_ymouse);
		}
	}
this.onMouseUp=function(){
	delete this.onMouseMove;
	this.moveTo(tabX[0],tabY[0]);
	this.beginFill(0xffcc66,100);
	for(var i=1;i < tabX.length;i++){
		this.lineTo(tabX*,tabY*);
	}
	delete tabY;
	delete tabX;
	this.endFill();
}

```

pom 🙂

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [December 18, 2002, 2:43pm UTC](https://forum.kirupa.com/t/mask-help-for-as-drawing-board/9685/9 "2002-12-18T14:43:26Z")

</div>

Thanks, pom! and Gorlim!

2 things:

1. I am using this code to replace the “// 2. EVENTS IN \_ROOT:” section of your original code, yes?

2. getting a number of syntax errors when testing?

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [December 18, 2002, 3:00pm UTC](https://forum.kirupa.com/t/mask-help-for-as-drawing-board/9685/10 "2002-12-18T15:00:57Z")

</div>

I’m sorry, there are problem with code display on the forum because of \< and \>.

Anyway, here’s the complete code

```auto
// 1. SETTING THINGS
_root.createEmptyMovieClip("line",1);
line.setMask(circle);

// 2. EVENTS IN _ROOT:
// thanks to Gorlim from flashxpress.net for the code
line.onMouseDown=function(){
	this.lineStyle(0,0,100);
	this.moveTo(_xmouse,_ymouse);
	tabY=new Array;
	tabX=new Array;
	tabX.push(_xmouse);
	tabY.push(_ymouse);
	this.onMouseMove=function(){
		tabX.push(_xmouse);
		tabY.push(_ymouse);
		this.lineTo(_xmouse,_ymouse);
		}
	}
line.onMouseUp=function(){
	delete this.onMouseMove;
	this.moveTo(tabX[0],tabY[0]);
	this.beginFill(0xffcc66,100);
	for(var i=1;i < tabX.length;i++){
		this.lineTo(tabX*,tabY*);
	}
	delete tabY;
	delete tabX;
	this.endFill();
}
// 3. BUTTON "ERASE":
// --------------------
reset.onPress = function(){
	_root.line.clear();
}

```

And I really like your ideas, man :beam:

pom :cowboy:

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [December 18, 2002, 3:36pm UTC](https://forum.kirupa.com/t/mask-help-for-as-drawing-board/9685/11 "2002-12-18T15:36:00Z")

</div>

Whoa.

That is even cooler than I thought. Thanks, pom (and Gorlim) for the compliment and for your patience. Awesome work. \<:}

To see it in context, go here:  
[http://www.chile2002.org/curriculum/lessonplans/culture/draw\_earth.html](http://www.chile2002.org/curriculum/lessonplans/culture/draw_earth.html)

and click the “interactive” button

JC