I got the following question.
i added the following elements to the stage:
homeBg = new HomeBg();
homeMask = new HomeDrawBg();
addChild(homeBg);
addChild(homeMask);
I allready instantiated them in the beginning of the document. But my problem is the following. the homeBg layer is a image, the homeMask layer is the same image but it has a pencil scetch look. What i want is that wherever i move my mouse, the homemask layer should be erased so the bottom layer becomes visible(only where the mask is erased). So how can i tell the mask layer to erase itself if the mouse is over it?
Answer attempt 2
You can use the blendMode property of a display object to achieve this. Here's the code (tested):
// set the eraser width (diameter)
var eraserWidth:int = 20;
//get the HomeMask library item
var homeMask:HomeMask = new HomeDrawBg();
homeMask.blendMode = BlendMode.LAYER;
addChild(homeMask);
// create the eraser shape
var eraser:Shape = new Shape();
eraser.graphics.beginFill(0x000000);
eraser.graphics.drawCircle(0,0,eraserWidth/2);
eraser.blendMode = BlendMode.ERASE;
homeMask.addChild(eraser);
homeMask.addEventListener(MouseEvent.MOUSE_MOVE,mouseOverMask);
function mouseOverMask(evt:MouseEvent):void
{
eraser.x = homeMask.mouseX;
eraser.y = homeMask.mouseY;
}
There are a couple of important bits here.
Firstly, you must set the blendMode of the thing you want to erase to BlendMode.LAYER.
Secondly (and this is what has tricked me before) your eraser, with BlendMode.ERASE, must be a child of the object you're wanting to erase.
Have a look on the following:http://www.piterwilson.com/personal/2008/05/07/bitmapdata-erasing-in-as3-with-custom-brush-shape/
Related
In short, I have clickable objects with varying colours. I want these colours upon being clicked to appear in my placeholders (there will be 6). I currently have managed to code so that upon clicking any colour it is placed in the first placeholder.
In what way am I able to code to recognise that the first placeholder has been filled and that once filled, the second placeholder should become the target?
Preferably until the 6th has been filled and then stopped, so that the user can see all 6.
I am thinking something like a for loop would be fitting, but I am not sure how to go about it.
So far it's looking something like this:
//Placeholder
var placeHolder1:MovieClip = new MovieClip();
placeHolder1.x = 20;
placeHolder1.y = 245;
stage.addChild(placeHolder1);
//Placeholder2 (UNUSED CURRENTLY)
var placeHolder2:MovieClip = new MovieClip();
placeHolder2.x = 60;
placeHolder2.y = 245;
stage.addChild(placeHolder2);
//Click and select colours
var newBlue:cBlue = new cBlue();
numBlue.addEventListener(MouseEvent.CLICK, fBlue)
function fBlue(e:MouseEvent){
placeHolder1.addChild(newBlue);
}
var newRed:cRed = new cRed();
numRed.addEventListener(MouseEvent.CLICK, fRed)
function fRed(e:MouseEvent){
placeHolder1.addChild(newRed);
}
First, you probably want to learn about Arrays (or Vectors). Arrays/Vectors are lists, so you would put all your placeholders into an array:
var placeHolders:Array = [placeHolder1, placeHolder2];
Though, since there is a formula to your place holder creation, you probably would want to do this in a loop to make it DRYer (Don't Repeat Yourself)
This loop would create 10 place holders and add them to the array:
var placeholders:Array = new Array();
for(var i:int=0; i < 10; i++){
var placeHolder = new Sprite(); //if your not using timelines, just use Sprite instead of MovieClip as it's less overhead
placeHolder.x = 20 * (i + 1); //i starts at 0, and goes to 9
placeHolder1.y = 245;
stage.addChild(placeHolder); //add it to the display list
placeholders.push(placeHolder); //add it to the array
}
Now (continuing to be DRY), attached the same event listener to all your color buttons:
numBlue.addEventListener(MouseEvent.CLICK, selectColor);
numRed.addEventListener(MouseEvent.CLICK, selectColor);
In that event handler I've called 'selectColor' (see code comments)
function selectColor(e:Event):void {
//get the first element in the array
var placeHolder:Sprite = placeholders.shift(); //shift removes the first item from the array, and returns it
placeHolder.addChild(e.currentTarget); //e.currentTarget refers to item that you attached the event listener to, in this case either numBlue or numRed
}
So to summarize, this gets the first placeholder in the array, remove that item from the array, then adds color button that was clicked as a child of that placeholder.
I am trying to mask an image on another so that I only view the specific portion of the unmasked image through the masked one. My problem is that I cannot see anything on the screen.. no Image, no effect at all
cardMask = new Image(Root.assets.getTexture("card_mask"));
cardMask.y = Constants.STAGE_HEIGHT*0.40;
cardMask.x = Constants.STAGE_WIDTH *0.48;
trace("it's add mask");
cardLight = new Image(Root.assets.getTexture("card_light_mask"));
cardLight.y = Constants.STAGE_HEIGHT*0.46;
cardLight.x = Constants.STAGE_WIDTH *0.48;
cardLight.mask=cardMask;
maskedDisplayObject = new PixelMaskDisplayObject(-1,false);
maskedDisplayObject.addChild(cardLight);
maskedDisplayObject.x=cardLight.x;
maskedDisplayObject.y=cardLight.y;
maskedDisplayObject.mask=cardMask;
maskedDisplayObject.blendMode = BlendMode.SCREEN;
addChild(maskedDisplayObject);
First, for masking an object the mask object should also be added to the display list. Your code does not add cardMask to display list anywhere. Second, if your maskedDisplayObject should be visible at all times, the mask should be assigned not to it, but to some other object which displayed part you desire to control. And third, it is also possible that this.stage is null, therefore the entire tree (this -> maskedDisplayObject -> cardLight) is plain not rendered. You need to check all three of these conditions to get something displayed.
Also, if you desire cardLight as an object to move independently of maskedDisplayObject, you should add it to this instead, and check that it's displayed on top of maskedDisplayObject (call addChild(cardLight) after addChild(maskedDisplayObject)).
This all totals to this code:
trace("Stage is null:", (this.stage==null)); // if this outputs true, you're out of display
cardMask = new Image(Root.assets.getTexture("card_mask"));
cardMask.y = Constants.STAGE_HEIGHT*0.40;
cardMask.x = Constants.STAGE_WIDTH *0.48; // mask creation unaltered
trace("it's add mask");
cardLight = new Image(Root.assets.getTexture("card_light_mask"));
cardLight.y = Constants.STAGE_HEIGHT*0.46;
cardLight.x = Constants.STAGE_WIDTH *0.48;
cardLight.mask=cardMask; // this is right
maskedDisplayObject = new PixelMaskDisplayObject(-1,false);
// maskedDisplayObject.addChild(cardLight); this is moved to main part of display list
maskedDisplayObject.x=cardLight.x;
maskedDisplayObject.y=cardLight.y;
// maskedDisplayObject.mask=cardMask; NO masking of this, you're only masking cardLight
cardLight.blendMode = BlendMode.SCREEN; // display mode is also changed
addChild(maskedDisplayObject);
addChild(cardLight);
I am a rookie to AS3 and i'm creating a small painting application. If I wanted to apply a blur affect to lines drawn, how would i go about that?
graphics.lineStyle(size, color, alpha);
as you can see there is no parameter for it, any help? Thanks
You got to use the BlurFilter in order to blur graphics.
var myFilter:BitmapFilter = new BlurFilter(10, 10, BitmapFilterQuality.HIGH);
var lineFilters:Array = new Array();
lineFilters.push(myFilter);
lineContainer.filters = lineFilters;
As far as I know, it is not possible to apply filter to lines or graphics, only containers.
EDIT:
Test program:
var lineContainer:Sprite = new Sprite();
lineContainer.graphics.beginFill(0x000000);
lineContainer.graphics.lineStyle(5);
lineContainer.graphics.lineTo(150,150);
lineContainer.graphics.endFill();
addChild(lineContainer);
var myFilter:BitmapFilter = new BlurFilter(10,10,BitmapFilterQuality.HIGH);
var lineFilters:Array = new Array();
lineFilters.push(myFilter);
lineContainer.filters = lineFilters;
How to perform event on flex line objects.so i can able to move or re-size the line using mouse.I am using flexline as shown in below code:-
spark.primitives.Line;
var st:Stroke =new Stroke(0x345654,1,1);
var obj:Line = new Line();
obj.stroke =st;
obj.xFrom =0;
obj.yFrom=0;
obj.xTo = 500;
obj.yTo = 500;
obj.addEventListener =????? //how to resize this line using mouse??
please explain how to addeventlistner on line or give any other idea to achieve this.
It is not possible. Line is not an InteractiveObject.
You can add it to a group and then listen to its events,
or draw a line with graphics on Sprite and listen to sprite events(this is more lightweight).
Or you may add all graphic primitives like Line to group and calculate by code which line appeared under group click.
I'm creating a memory like game. I built all the desktop, the cards generation. I now have two cards of each.
I'm trying to do the pairs delete system.
my function to show the color to find looks like this :
private function onClick(e:MouseEvent):void
{
if (vueDos)
{
vueDos = !vueDos;
faceCarte = new Sprite();
faceCarte.graphics.lineStyle(2,0x000000,.5);
faceCarte.graphics.beginFill(clr);
faceCarte.graphics.drawRoundRect(8,8,this.width - 16, this.height - 16, 10,10);
faceCarte.graphics.endFill();
var _t:TextField = new TextField();
_t.selectable = false;
_t.antiAliasType = "advanced";
_t.autoSize = "left";
_t.defaultTextFormat= new TextFormat(maFont.fontName,24,0x000000);
_t.text = couleur;
_t.x = (this.width - _t.width)/2
_t.y = (this.height - _t.height) >> 1;
faceCarte.addChild(_t);
faceCarte.cacheAsBitmap = true;
this.addChild(faceCarte);
}
if(!vueDos)
}
Does it exist a function wich see if the color of the card is visible (faceCarte), and limit the visibles carte to two then removeChild faceCart.
Thank you in advance
You have to make such a function yourself. It'll be better to assign a couleur property to the card itself, instead of putting it into the TextField and forgetting. This way you'll be able to open first card, get that property, then open second card and compare that one's property with what you received, if match, both cards will be removed.