Mask help for AS drawing board

1

Howdy all,

Using pom’s drawing board tute 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

2

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

pom :slight_smile:

3

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.

4

The code we have is

// 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

line.setMask(circle);

pom :moustache

5

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?

6

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

7

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.

8

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

// 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 :slight_smile:

9

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?

10

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

Anyway, here’s the complete code

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

11

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

and click the “interactive” button

JC