Skip to main content
Inspiring
October 26, 2018
解決済み

as3 how to set a transparent hole in opaque MovieClip

  • October 26, 2018
  • 返信数 1.
  • 1283 ビュー

Hi,

I'm trying to create a dark overlay layer on top of some graphics, but want to "cut" a transparent circular hole in that dark layer so only that circular part will be seen, and the rest will seem dark (similar to method used to explain a game or an app in Android, which hides most of the screen by a dark layer, and reveals only parts I want to highlight). I've been trying to use BlendModes, specifically the ALPHA or ERASE modes, but this is not working for me...

This is what I have so far:

I created a black rectangle of the size of the stage and gave it the LAYER bland mode (as i read was needed for the ALPHA blend mode to work), then I added my circle and gave it ALPHA blend mode and set alpha = 0 to be transparent. I see the black layer, but not the transparent circle inside it...

Any help would be appreciated!

var mc:MovieClip = new MovieClip();

var rectangle:Shape = new Shape; // initializing the variable named rectangle

rectangle.graphics.beginFill(0x000000); // choosing the colour for the fill, here it is red

rectangle.graphics.drawRect(0, 0, stage.stageWidth,stage.stageHeight); // (x spacing, y spacing, width, height)

rectangle.graphics.endFill(); // not always needed but I like to put it in to end the fill

rectangle.blendMode = BlendMode.LAYER;

rectangle.alpha = 0.8;

mc.addChild(rectangle); // adds the rectangle to the stage

           

var circle:Shape = new Shape(); // The instance name circle is created

circle.graphics.beginFill(0xFFFFFF, 1); // Fill the circle with the color 990000

circle.graphics.lineStyle(2, 0x000000); // Give the ellipse a black, 2 pixels thick line

circle.graphics.drawCircle(stage.stageWidth/2, stage.stageHeight/2, 200); // Draw the circle, assigning it a x position, y position, raidius.

circle.graphics.endFill(); // End the filling of the circle

circle.blendMode = BlendMode.ALPHA;

circle.alpha = 0;

mc.addChild(circle); // Add a child

stage.addChild(mc); // Add a child

このトピックへの返信は締め切られました。
解決に役立った回答 JoãoCésar17023019

Hi.

You should set the parent Movie Clip to LAYER and the inner circle to ERASE.

Like this:

var mc:MovieClip = new MovieClip();

var rectangle:Shape = new Shape; // initializing the variable named rectangle

var circle:Shape = new Shape(); // The instance name circle is created

mc.blendMode = BlendMode.LAYER;

rectangle.graphics.beginFill(0x000000); // choosing the colour for the fill, here it is red

rectangle.graphics.drawRect(0, 0, stage.stageWidth, stage.stageHeight); // (x spacing, y spacing, width, height)

rectangle.graphics.endFill(); // not always needed but I like to put it in to end the fill

rectangle.alpha = 0.8;

mc.addChild(rectangle); // adds the rectangle to the stage

circle.graphics.beginFill(0xFFFFFF, 1); // Fill the circle with the color 990000

circle.graphics.lineStyle(2, 0x000000); // Give the ellipse a black, 2 pixels thick line

circle.graphics.drawCircle(stage.stageWidth / 2, stage.stageHeight / 2, 200); // Draw the circle, assigning it a x position, y position, raidius.

circle.graphics.endFill(); // End the filling of the circle

circle.blendMode = BlendMode.ERASE;

mc.addChild(circle); // Add a child

stage.addChild(mc); // Add a child

I hope this helps.

Regards,

JC

返信数 1

JoãoCésar17023019
Community Expert
Community Expert
October 26, 2018

Hi.

You should set the parent Movie Clip to LAYER and the inner circle to ERASE.

Like this:

var mc:MovieClip = new MovieClip();

var rectangle:Shape = new Shape; // initializing the variable named rectangle

var circle:Shape = new Shape(); // The instance name circle is created

mc.blendMode = BlendMode.LAYER;

rectangle.graphics.beginFill(0x000000); // choosing the colour for the fill, here it is red

rectangle.graphics.drawRect(0, 0, stage.stageWidth, stage.stageHeight); // (x spacing, y spacing, width, height)

rectangle.graphics.endFill(); // not always needed but I like to put it in to end the fill

rectangle.alpha = 0.8;

mc.addChild(rectangle); // adds the rectangle to the stage

circle.graphics.beginFill(0xFFFFFF, 1); // Fill the circle with the color 990000

circle.graphics.lineStyle(2, 0x000000); // Give the ellipse a black, 2 pixels thick line

circle.graphics.drawCircle(stage.stageWidth / 2, stage.stageHeight / 2, 200); // Draw the circle, assigning it a x position, y position, raidius.

circle.graphics.endFill(); // End the filling of the circle

circle.blendMode = BlendMode.ERASE;

mc.addChild(circle); // Add a child

stage.addChild(mc); // Add a child

I hope this helps.

Regards,

JC

kobygold作成者
Inspiring
October 26, 2018

Thank you JC so much !

It works now!

I was so close... but close is not enough...

I had to give the LAYER blend mode to the containing MC and not to the lower graphic element like I did.

BTW, how did you format the code you added as a "code"? I couldn't find where to style it as a "code" instead of just plain text.

Thank you very much!

Koby

JoãoCésar17023019
Community Expert
Community Expert
October 26, 2018

You're welcome!

There is a link in the upper right corner that says "Use advanced editor".

Once inside this editor, look for a double arrow icon on the right, select Syntax Highlighting > javascript.

Most of time it won't tab the code for you. So you'll have to do it manually.