[F8] Logic/Project Approach question..

[whispers]

I have a project idea Ive been toying around with for a buddy, for a while now..

and today I opened Flash and was gonna tackle it.. but had a question..

I dont play with Masks much.. learned to stay away back in the older Flash days.

but I basically want to create a simple system were you can create a dynamic mask..

summary:

1.) upload an image (FilerReference() ...fine, fine).. and have it be displayed on the stage/canvas

2.) draw (open to suggestions on this portion) using some drawing API effect to color/fill in certain areas on the image.

3.) hit a button and have that 'fill' become a mask and essentially 'knock out' the colored in areas.. revealing the (whatever) underneath the uploaded/displayed image.


so Im at a loss on how to even approach this..

would I first get the bounding area of the image uploaded... and somehow draw() or invert the bitmap areas to get a 'reverse' mask?

then setMask() on that?

hope this is making sense..LOL

thanks

[whispers]

bump.....

just looking for discussion on approach..

[dawsonk]

Something like a scratch off card that reveals a picture underneath?

[whispers]

well...sorta..except you dont get the MASK effect everytime you 'scratch'..


think of it as.. you take the PEN tool.. draw/fill in some area, hit button..converts it to a mask..

sorta like a 'scratch off' except you just fill in the area you want to reveal underneath... does that make sense? (god Im bumbling for words today) LOL

ok.. let me try to clarify..

1.) application loads, you choose MALE OR FEMALE HEAD (face)
(this part would be eventually replaced with you being able to upload an image of your own face..but I guess thats a late time..and should be to difficult..just wanted to add it in the scenario just in case it proves to be a problem with this mask situation I'm asking about)

2.) I click on the "FILL TOOL" we make availabel in the project..and they DRAW/FILL in the area where their TEETH are..

3.) hit 'DONE' button... and it crops out the teeth/fill you created. (leaing the FACE and the MOUTH/TEETH area blank/empty now revealing the layer/clip/whatever underneath


quick and dirty overview with some more details.

so its like making you masking/knockout area..and the making a REVERSE mask using the MALE/FEMALE head bounding area MINUS the fill area....lol


outside of doing this (what Im calling a reverse mask from your fill).., Im not sure if a 'draw your own mask' is even the right approach?

the only other way to approach the same masking effect is to maybe have a 'mask' that the user can have 'handles' to drag/stretch/move the mask into place? (although I have never played around with such code before..so it would be new)

hopefully this a better explanation now..LOL

thanks

[Lexicon]

Here is a quick example, it basically allows you to draw some red shapes into a movieClip. The red shapes are copied onto a blue bitmapData object and the blue channel of this is then copied to the alpha channel. This creates an inverse mask of what is drawn.

You can just show/hide the draw_mc whenever suits you and you can use the maskee_mc.setMask(mask_mc) at any time to turn on the masking effect.

import flash.display.BitmapData;
import flash.geom.Rectangle;
import flash.geom.Point;

// image width/height
var imgW:Number = 300;
var imgH:Number = 300;

// create bitmap && movieClip that is the mask (has blue background)
var mask_bmp:BitmapData = new BitmapData(imgW, imgH, true, 0xFF0000FF);
var mask_mc:MovieClip = createEmptyMovieClip("mask_mc", getNextHighestDepth());
mask_mc.attachBitmap(mask_bmp, 0);

// create a clip to draw in
var draw_mc:MovieClip = createEmptyMovieClip("draw_mc", getNextHighestDepth());

// cacheAsBitmap needs to be true for mask and maskee, so you can use alpha channel in the mask
mask_mc.cacheAsBitmap = maskee_mc.cacheAsBitmap = true;

maskee_mc.setMask(mask_mc);

// you can toggle the draw_mc visibility to hide/reveal the highlighted area etc.
draw_mc._visible = false;


// start draw
function onMouseDown()
{
	// draw red fill
	draw_mc.beginFill(0xFF0000);
	draw_mc.moveTo(_xmouse, _ymouse);
	onMouseMove = drawShape;
}

// end draw
function onMouseUp()
{
	draw_mc.endFill();
	delete onMouseMove;

	mask_bmp.draw(draw_mc);
	// copy the blue channel to the alpha channel (red bits will have 0 alpha)
	mask_bmp.copyChannel(mask_bmp, new Rectangle(0,0,imgW,imgH), new Point(0,0), 4, 8);
}

// do draw
function drawShape()
{
	draw_mc.lineTo(_xmouse, _ymouse);
}

[whispers]

awesome.. thats more or less it..

totally appreciate the help.

my questions are:

1.) want to make sure.. it wont matter what the 'BLUE' clip is eventually in the end will it? mask_bmp can be an actual image (.jpg..etc) that I load and as long as I 'attachBitmap' to mask_mc it will knock out the drawn shape...correct? (I guess Im just clarifying that its not like a 'color' knock-out where if the the masked clip has the same colors in the mask they will be 'masked/knocked out' no matter where they are located in the image) like a green screen sorta...

this:
// copy the blue channel to the alpha channel (red bits will have 0 alpha)
bmp.copyChannel

has me thinking it is.. which Im afraid wont work. its basically ONLY the part/fill area.. (regardless of color)..

in the example/scenario given above.. if I color in the TEETH of a persons face.. and hit the KNOCK OUT button.. only the area I colored in should be knocked out...

if (for example) the color Im using to color in my 'knock out area' is BLUE..

and I scribble on his teeth in BLUE..and hit KNOCK OUT button.. I dont want is blue eyes to be knocked out as well..

sorry.. trying to communicate it best I can..LOL I fear I may not being clear?


2.) (lastly)... does the 'drawing' portion of this example required? its not very smooth an does a LINE to....not like a 'drawboard' type smoothness I was panning on doing (an older style flash drawing/color board type)


thanks

[mneil]

It seems like you've got it figured out some. Just wondering, because this is a little more than I know, but have you seen senocular's fla that does this? It doesn't really do the mask, but it allows you to erase or re-draw an area of a bitmap on stage. Thought it might help get you started if you don't already know about it.

http://senocular.com/flash/source.php?id=0.175
right on front of his homepage, not updated for awhile, sits this swf demo. And, you can download the fla there. I think it's done in mx so the code is a little outdated but it might help.

Oops, it f8, not old really, says it right there. Maybe I should read ha ha.

[Lexicon]

Whispers,

The mask_bmp is a generated bitmap, and is totally independant of the maskee_mc. The maskee_mc (the clip that gets masked) can contain anything you want, any colours etc. The maskee_mc will be your loaded image.

You can use any drawing technique you like, I just used the most simple method possible in the example to show you the technique to create the inverse mask.

The mask that the user draws is basically some shapes of pure colour in an empty movieClip. In my example the user draws red shapes onto a blue background. By copying the blue channel to the alpha channel, it means that wherever there is a red pixel (a:255, r:255, g:0, b:0) that pixel now has an alpha value of 0. It just becomes a quick and easy way of inverting the area of the mask.

You never actually see mask_bmp, it just keeps track of which pixels need to be visible or not. Visible areas are blue, invisible are red (so you see whatever is underneath the maskee_mc).

Of course a more simple approach might be to reverse your thinking alltogether. You could just have whatever is supposed to be behind your loaded image actually sit above the loaded image instead; and just use the clip that you draw shapes into as a mask for the "behind_mc". There is no actual need to create the inverted mask if you do this.