I am trying to understand masks in actionscript..Everything seems to make sense to me but one part of the code
function mouseM(event:MouseEvent):void {
if (mouseclick == 1) {
mask_mc.graphics.beginFill(0x000000);
mask_mc.graphics.drawEllipse(mouseX, mouseY, 70, 60);
mask_mc.graphics.endFill();
}
}
I am not sure how to exactly ask this question but here it goes. why does the mask have "begin fill" with a black color? wouldn't that paint the the image in black (I know it doesn't, it just reveals it)? what is the exact function of beginfill (besides revealing the image lool)? like how does it exactly work? sorry if it sounds ridiculously off.. but that part of the code was really screwing me up in understanding masks
What you are doing is drawing a shape to be used as a mask. In this case, a circle.
It doesn't matter what colour it is as Flash is only interested in the shape of the mask, not the colour.
Once the circle is drawn, Flash checks what part of the circle overlap the object you're masking so that every pixel the circle is not covering will be invisible. I guess it should really be called an anti-mask as the circle dictates which parts of your image wont be masked but it's just become the general convention to call the circle (or whatever shape you use) the mask.
Again, you're just creating a shape to be used as a mask. Setting the colour is just so the object can essentially exist.. because you can't exactly have a transparent circle.
Feel free to change the colour to anything and you'll see it makes no difference, the shape is all that matters.
Related
I'm having difficulty with transforming colour in Flash. It should be easy I think, but for some reason my code isn't working as expected.
I have a bitmap graphic consisting of a colour spectrum from red to yellow to green (you know, like you see in an audio level meter).
I simply want to sample a colour from that bitmap and then tint a movie clip on stage that sampled colour. (the effect I'll be going for is coloured progress - the closer you get to 100% green is displayed, the closer you are to 0% it's red - I haven't implemented that part yet, but I'm not worried about that).
Anyhow, I sample the colour just fine, and tint my clip, but no matter what I tint the clip it comes up a different colour than what I've sampled (the trace is a different colour than what I see on the clip). I can't see where I'm going wrong - I'm hoping it's a stupid mistake and someone can spot it easily.
import flash.display.BitmapData;
var bmd:BitmapData = new BitmapData(mc_colourbar.width, mc_colourbar.height);
bmd.draw(mc_colourbar);
var pixelvalue:uint = bmd.getPixel(0, 1);
trace(pixelvalue.toString(16));
var colourtransform:ColorTransform = mc_box.transform.colorTransform;
colourtransform.color = uint("0xff" + pixelvalue);
mc_box.transform.colorTransform = colourtransform ;
mc_box is the clip on stage I'm trying to tint - it's simply a white square.
Any help is appreciated, thanks in advance!
ColorTransform.color expects an RGB value, and it appears as though you're attempting to give it an ARGB value*.
Change the line:
colourtransform.color = uint("0xff" + pixelvalue);
to just:
colourtransform.color = pixelvalue;
and your code should work as expected.
*Though I don't think the way you're trying to do it here is correct.
I have an hourglass like vector shape and I'd like to use it to mask an image. I'd like to feather the edges - have a soft falloff in transparency that follows the contours of the hour glass. Any ideas how I can do this?
I tried using a gradient fill on a closed shape (using beginGradientFill() and curveTo() functions) but that falloff doesn't follow the contour of the vector shape, it can only go one direction.
Maybe there is a better solution but until somebody comes up with it... I assume you could do the following:
Draw whatever shape you want to use as mask into a transparent bitmap.
Scale a bit the bitmap down (or use a matrix while drawing its bitmapdata).
Apply a blur filter to it.
Put the bitmap's center to the masked clip's center so they are aligned.
Set the masked clip's cacheAsBitmap property to true.
I'm doing some collision detection with a circle and a square and whenever the circle comes in contact with the square it bounces away changing its X coordinate by *-1. However, the Hit Area of the circle is a square, so even when it collides with the white area around the circle , the affect still occurs.
My question is, is there a way to modify the hit area to closer resemble my circle?
Thanks
Bitmap hit testing is pixel based (instead of boundary-based, like Sprite-based hit testing), so it is inherently more precise.
Here are the Adobe docs on it.
Here is a nice tutorial on it.
And here is a nice code snippet on it:
if (firstObjectBitmapData.hitTest(new Point(firstObject.x, firstObject.y), 255, secondObjectBitmapData, new Point(secondObject.x, secondObject.y), 255))
{
trace("hit!");
}
So I know how to shade an image. And I know how to blit a rectangular section of an image. But what about, say, a triangle? Or a trapezoid? (e.g. http://i.imgur.com/Gtwhs.png)
A minute after I asked this, I figured out how to shade, at least. Isn't that always the way?
Anyway, it basically comes down to something as simple as:
surface.blit(image, pos, area)
pygame.draw.polygon(surface, (0,0,0,128), pointlist, 0)
where 128 is whatever alpha value you want and pointlist is a list of the vertices around the section you want.
I have a BitmapData object named myBitmapData. It was loaded of PNG of size 104x104. This PNG represents a red circle on the transparent background.
There is also a Sprite object named myBackground. I want render that red circle into myBackground.
myBackground.graphics.beginBitmapFill(myBitmapData);
myBackground.graphics.drawRect(0, 0, myBitmapData.width, myBitmapData.height);
myBackground.graphics.endFill();
addChild(myBackground);
Everything is fine. I see a red circle in the left top of myBackground.
But when I change the third line to
myBackground.graphics.drawRect(0, 52, myBitmapData.width, myBitmapData.height);
and expect my circle to be translated 52 pixels down, I actually obtain something strange (for me :)): there are two red half-circles (they form like hourglass).
So, the question is: how do I render myBitmapData into the random position of myBackground?
P.S.
In the case of
myBackground.graphics.drawRect(0, 104, myBitmapData.width, myBitmapData.height);
it is circle again :)
This is caused by beginBitmapFill's default repeat = true parameter. There's an example in the docs. Disabling the repetition won't work though, you'd just get a half circle then.
There are several ways to fix this:
Use a Matrix with a translation (displacement) as argument in beginBitmapFill.
Draw the rectangle at 0,0 on another Sprite, and move that sprite to where you want it on the background.
Don't draw directly to the background, but to another bitmap using copyPixels. Then fill the background with that bitmap.