The wrong kind of hat-hair.

February 11, 2011 8:53 AM

How, in Flash AS3, would I implement a sort of forced-transparency?

I'm working on a dress-up game at the moment - when some haircuts are combined with certain hats, the hair pokes through the hat - as in this picture.

I don'r want to just not display the hair, because it looks good below the hat-line - instead I'd ideally like to put some sort of hard-coding in to the effect that if this all particular hat is chosen, all pixels in the hair object above a particular y-value should be treated as instead being transparent.

But I don't even really know how to think about this - I guess this must be a masks issue, but I can't get my head around it. Can a hive help me out?

posted by piato to Computers & Internet (5 answers total)

I wouldn't do it that way. I'd create another object, consisting just of the pieces of hair you want to stick through, and put it on a layer above that of the hat.

Then use code to turn that object on and off as a function of whether that hat is in place.
posted by Chocolate Pickle at 9:21 AM on February 11, 2011

Just put the hat on a higher level than the hair, then turn that visible or invisible.

Well, if you're hard coding stuff, just make a copy of the hat and make that a mask layer. Then put the hat above it. You can then turn the hat and the mask visibility on and off.
posted by lumpenprole at 10:11 AM on February 11, 2011

Is it all bitmap images?

Maybe you could make a special colour in the hat image that represents areas where the person bitmap should be cleared.

Sort of similar to chroma-keying seen here:
http://www.quasimondo.com/archives/000615.php

That's using video, but I think it uses a bitmapData as an intermediary.


Or yeah, make some kind of mask layer that you somehow tie into each hat, and apply that to the hair when you put it on.
posted by RobotHero at 12:36 PM on February 11, 2011

Assigning a mask is just a matter of
hair.mask=hatHairMask;

So that might be the simplest.
posted by RobotHero at 12:38 PM on February 11, 2011

Best answer: So.. assuming the hat is a movieclip and your background will remain white..

Why not just put another MC that contains a white shape on the second layer of the hat MC (so, behind the hat) that would cover the hair parts you don't want to show. Have it's alpha set to 0 while it's being moved by the mouse so people don't see the box when you're moving it around with the mouse.

mcHat.addEventlistener(MouseEvent.MOUSE_DOWN, alphaDown);
mcHat.addEventlistener(MouseEvent.MOUSE_UP, alphaUp);

function alphaDown(e:MouseEvent):void { hatWhiteShape.alpha = 0 }
function alphaUp(e:MouseEvent):void { hatWhiteShape.alpha = 1 }

You could also code it in such a way that the alpha of the white shape is only 1 when the hat is on the person. Might be significantly more code, depending on how you're doing the drag and drop.
posted by royalsong at 2:53 PM on February 11, 2011