Having problems using Drawing API to mask

1

Hey guys,

I’m trying to get a better handle on creating dynamic content, so I made a little experimental Flash file to test out programming with more robust and portable code to accomplish it (:worried:). I have two functions, one creates rounded rectangles and the other regular rectangles. I’m planning on using the regular rectangle to hold an image (which it does), and the rounded rectangle as a mask to give the appearance of a rectangle with uh, rounded corners. I’ve run into a couple problems with this:

1. The mask doesn’t apply to the image. The regular rectangle (pictureHolder_mc) will appear and the picture (a .JPG file) will load into it; the rounded rectangle (pictureHolderMask_mc) will even appear on top of the picture. But as soon as I use the setMask() method, the mask disappears and not in the cool applying-to-the-movie way.

2. Both the rounded rectangle function and regular rectangle function have parameters for X and Y coordinates that worked fine when I was testing without trying to load an image. As soon as I did, it’d put the image at (0,0) for some reason, even with 300 passed for X and 50 for Y.

3. I’ve set up an onRelease() function for the image-holding movieclip that calls a tweening function, just to test out functionality. It doesn’t work so hot; the mouse doesn’t even turn into the clicky button cursor when the movieclip’s rolled over.

Here’s the code; I apologize for the length, but I think it’s organized pretty well so it shouldn’t be too hard to understand:


import mx.transitions.Tween;
import mx.transitions.easing.*;

stop();


//function roundedRectangle(target_mc:MovieClip, boxWidth:Number, boxHeight:Number, cornerRadius:Number, fillColor:Number, fillAlpha:Number):Void
function roundedRectangle(target_mc:MovieClip, xCoord:Number, yCoord:Number, boxWidth:Number, boxHeight:Number, cornerRadius:Number, fillColor:Number, fillAlpha:Number):Void 
{
 	with (target_mc) 
 	{
   		beginFill(fillColor, fillAlpha);
   		moveTo(cornerRadius + xCoord, yCoord);
   		lineTo((boxWidth - cornerRadius) + xCoord, yCoord);
   		curveTo((boxWidth + xCoord), yCoord, (boxWidth + xCoord), cornerRadius + yCoord);
   		lineTo((boxWidth + xCoord), cornerRadius);
   		lineTo((boxWidth + xCoord), (boxHeight-cornerRadius) + yCoord);
   		curveTo((boxWidth + xCoord), (boxHeight + yCoord), ((boxWidth-cornerRadius) + xCoord), (boxHeight + yCoord));
   		lineTo((boxWidth-cornerRadius) + xCoord, (boxHeight + yCoord));
   		lineTo(cornerRadius + xCoord, (boxHeight + yCoord));
   		curveTo(xCoord, (boxHeight + yCoord), xCoord, (boxHeight-cornerRadius) + yCoord); //Bad one
   		lineTo(xCoord, (boxHeight-cornerRadius) + yCoord);
   		lineTo(xCoord, cornerRadius + yCoord);
   		curveTo(xCoord, yCoord, cornerRadius + xCoord, yCoord); //bad one
   		lineTo(cornerRadius - xCoord, yCoord);
   		endFill();
 	}
};


function regRectangle(target_mc:MovieClip, xCoord:Number, yCoord:Number, boxWidth:Number, boxHeight:Number, fillColor:Number, fillAlpha:Number):Void
{
	with (target_mc) 
 	{
   		beginFill(fillColor, fillAlpha);
   		moveTo(xCoord, yCoord);
   		lineTo(boxWidth + xCoord, yCoord);
   		lineTo(boxWidth + xCoord, boxHeight + yCoord);
   		lineTo(xCoord, boxHeight + yCoord);
   		lineTo(xCoord, yCoord);
   		endFill();
 	}
};			  



function createLineSeparator(target_mc:MovieClip, strokeWidth:Number, lineColor:Number, lineOpacity:Number):Void
{
	target_mc.createEmptyMovieClip("lineTest_mc", this.getNextHighestDepth());

	with(target_mc.lineTest_mc)
	{
		//NOTE: "7" and "30" below should maybe be modifiable through the function's parameters...
		lineStyle(strokeWidth, lineColor, lineOpacity, true, "none", "none");
		moveTo((target_mc._x + 7), (target_mc._y + 30));
		lineTo(((target_mc._x + target_mc._width) - 7), (target_mc._y + 30));
	}
};

function createMask(toBeMasked_mc:MovieClip):Void
{
	this.createEmptyMovieClip("pictureHolderMask_mc", toBeMasked_mc.getNextHighestDepth());
	roundedRectangle(pictureHolderMask_mc, toBeMasked_mc._x, toBeMasked_mc._y, toBeMasked_mc._width, toBeMasked_mc._height, 8, 0x00FF00, 100);
	//trace(this);
	toBeMasked_mc.setMask(pictureHolderMask_mc);
};

function genericTween(object:MovieClip, propertyToTween:String, beginValue:Number, endValue:Number, duration:Number):Void
{
	var genericTween:Tween = new Tween(object, propertyToTween, Strong.easeInOut, beginValue, endValue, duration, true);
};


////////////////////////////////////
//
////////////////////////////////////


this.createEmptyMovieClip("pictureHolder_mc", this.getNextHighestDepth());
regRectangle(pictureHolder_mc, 50, 50, 150, 300, 0x0000FF, 100);

pictureHolder_mc.createEmptyMovieClip("pictureHolderMask_mc", pictureHolder_mc.getNextHighestDepth());
roundedRectangle(pictureHolder_mc.pictureHolderMask_mc, pictureHolder_mc._x, pictureHolder_mc._y, pictureHolder_mc._width, pictureHolder_mc._height, 8, 0x00FF00, 100);
	
pictureHolder_mc.setMask(pictureHolder_mc.pictureHolderMask_mc);
	
//createMask(pictureHolder_mc);


pictureHolder_mc.loadMovie("testPic.jpg");

pictureHolder_mc.onRelease = function()
{
	genericTween(this, "_xscale", this._xscale, 0, 2);
}

Thanks in advance for any help provided.