i'd like to add all or most of my mouse events to stage, but in order to do that i need to be able to tell what is the type of the sprite being clicked.
i've added two sprites to the display list, one of which is from a class called Square, the other from a class called Circle.
var mySquare:Sprite = new Square();
var myCircle:Sprite = new Circle();
addChild(mySquare);
addChild(myCircle);
now when i click on these sprites, i'd like to know from which class they are from, or which type of sprite it is.
//mousePoint returns mouse coordinates of the stage
var myArray:Array = stage.getObjectsUnderPoint(mousePoint());
if (myArray[myArray.length - 1] is Sprite)
...
so far i know how to do is determine if it IS a sprite display object, but since i'll only be working with sprites i need something more specific. rather than checking "is Sprite", is there a way i can check "is Square" or "is Circle"?
if (myArray[myArray.length - 1] is Square)
You've answered your own question.
if (myArray[myArray.length - 1] is Square)
If this doesn't work, then it should, so something else is wrong.
Related
This seems like it should be so easy that I'm embarrassed to ask, but I just can't get it.
I have a large round MovieClip (being used as a button). This MovieClip contains a PNG with a transparent background inserted into the MovieClip.
Due to its size there are large empty registration areas on the 4 corners (the bounding box).
How can I have the mouse register as being over only the circle pixels and not the blank space (of Alpha channel pixels) in the square boundary box?
Simple sample code:
public function simpleSample () : void
{
mc1.buttonMode = true;
mc1.addEventListener(MouseEvent.CLICK, doStuff);
}
public function doStuff (event:MouseEvent) : void
{
mc2.gotoAndStop(2);
}
Here are 3 different ways to accomplish this.
EDIT Since you've later explained that your button is an image, this first option won't work for you
If the shape flag on hitTestPoint works with your button (eg it's a shape), you can use hitTestPoint inside your mouse click handler to figure out if the click is actually over the object:
public function doStuff(event:MouseEvent){
//only continue if hit test point is true,
//the x and y values are global (not relative to the mc your testing as one might suppose)
//the third parameter should be true, so it takes into account the shape of object and not just it's bounds
if(mc1.hitTestPoint(stage.mouseX, stage.mouseY, true)){
mc2.gotoAndStop(2);
}
}
If the above doesn't work because you have bimtap data in your button, then an easy way to accomplish this is to just add a shape mask to the button.
So, either inside your button using FlasPro, mask everything with a circle shape, or, do it via code by doing the following when you first show the button:
var s:Shape = new Shape();
s.graphics.beginFill(0);
s.graphics.drawCircle(mc1.x + (mc1.width * .5), mc1.y + (mc1.height * .5), mc1.width / 2);
addChild(s);
mc1.mask = s;
If using an image as the button, or you want to set a threshold of how transparent to consider a click, then you can check the transparency of the pixel under the mouse:
function doStuff(event:MouseEvent){
//only continue if pixel under the mosue is NOT transparent
//first, you need a bitmap to work with
//if you know for sure the position of your bitmap, you can do something like this:
var bm:Bitmap = mc1.getChildAt(0) as Bitmap;
//annoyingly though, FlashPro makes timeline bitmaps shapes,
//so the above won't work UNLESS you take your bitmap in the FlashPro Library
//and export it for actionscript, giving it a class name, then it will be an actual bitmap on the timeline.
//As an alternative, you could (very CPU expensively) draw the whole button as a bitmap
var bmd:BitmapData = new BitmapData(mc1.width,mc1.height,true,0x00000000);
bmd.draw(mc1);
var bm:Bitmap = new Bitmap(bmd);
//we get the 32bit pixel under the mouse point
var pixel:uint = bm.bitmapData.getPixel32(bm.x + event.localX,bm.y + event.localY);
//then we grab just the Alpha part of that pixel ( >> 24 & 0xFF ).
//if the value is 0, it's totally transparent, if it's 255, it's totally opaque.
//for this example, let's say anything greater than 0 is considered good to be a click
if((pixel >> 24 & 0xFF) > 0){
mc2.gotoAndStop(2);
}
}
I am trying to give my "buttons" a bounce in effect using the tween class. I am also trying to make my code more efficent by using a function to handle this effect for all my buttons.
var MusicClip:MovieClip = new music_mc();
var MoviesClip:MovieClip = new movie_mc();
var GameClip:MovieClip = new game_mc();
MusicClip.y = 63;
MusicClip.x = 577;
MoviesClip.y = 87;
MoviesClip.x = 401;
GameClip.y = 75;
GameClip.x = 151;
addChild(MusicClip);
addChild(MoviesClip);
addChild(GameClip);
This is where I am having a hard time. I thought I had to tween both the
scaleX and scaleY for all three MovieClips, but the button just appears on the
stage and doesn't animate in. Also if I can put this code in a function so I
don't have to write it for every button (and future buttons) that would be great.
var scaleTween:Tween=new Tween(MusicClip,"scaleX",Elastic.easeOut,0,1,1,true);
var scale2Tween:Tween=new Tween(MusicClip,"scaleY",Elastic.easeOut,0,1,1,true);
I am not getting any error but there is no bouncing in effect.
You need to assign listeners to your MovieClips that will perform an action when you do something. You can use a single event handler for all of your MovieClips:
MusicClip.addEventListener(MouseEvent.MOUSE_OVER,bounceButton);
MusicClip.addEventListener(MouseEvent.MOUSE_OVER,bounceButton);
MoviesClip.addEventListener(MouseEvent.MOUSE_OVER,bounceButton);
function bounceButton(event:MouseEvent):void
{
var scaleTween:Tween=new Tween(event.target,"scaleX",Elastic.easeOut,0,1,1,true);
var scale2Tween:Tween=new Tween(event.target,"scaleY",Elastic.easeOut,0,1,1,true);
}
Note that rather than specifying any one MovieClip as the tween target, you are using event.target, which will refer to the MovieClip you have rolled over.
On an unrelated note, it is good practise to start instance names with a lower case letter. This helps to distinguish them from class names which by convention have uppercase letters to start each word:
var myVariable:MyClass;
I have a problem and I have potential solution. But I wanted to confirm if there is an easy and simple way to solve my problem.
App type:
Isometric Game
Problem statement:
I am loading images in my flash app and have mouse events attached to them.
The images I load are prop images like vehicles, trees, buildings etc., and all of them are transparent.
Example: Red ball asset (please ignore the yellow background which I applied to describe the problem)
If I click on the actual image area (colored in red), then every thing works perfect
I don't want to trigger mouseevent when I click on empty image part (or transparent area, which I have shown in yellow color)
There is one way I know by creating masks in flash. I don't want to do it unless that is the final option left because I load image assets instead of flash assets and I don't want to create a new mask asset for all the assets
There is another method I was going to adopt by using getPixel method of Bitmap. Which is discussed here.
But there is another problem with this method.
I might be able to ignore the click event when I click on the empty part of the asset but if there is some other asset is behind the image in the same location, then I need to process the click event for the occluded image.
Well, thinking of solution to this problem takes me to the getObjectsUnderPoint where I can scan the occluded assets
Well, what you proposed as a solution is 100% valid. Just move the logic of determining what game object is clicked outside of that object.
Listen for MOUSE_DOWN/MOUSE_UP events at container which contains your game objects.
Catch an event
Check if the game object which is the target of this event is transparent at this point using BitmapData.getPixel32
If it is use getObjectsUnderPoint to find out all other game objects at this point
Find in a loop the first object which is not transparent at this point
Now you got the actual object which is hit.
One interesting solution is to use Sprite objects with the individual non-transparent pixels burnt onto them.
Suppose this is your Loader "complete" handler:
private function loaderCompleteHandler(event:Event):void
{
// Loader is not our child, we use a Sprite instead (below).
var loader:Loader = Loader(event.target);
var sprite:Sprite = new Sprite();
addChild(sprite);
var w:Number = loader.content.width;
var h:Number = loader.content.height;
// Use transparent bitmap.
var bitmapData:BitmapData = new BitmapData(w, h, true, 0);
bitmapData.draw(loader.content);
// Now burn the image onto the Sprite object, ignoring
// the transparent pixels.
for (var xPos:int = 0; xPos < w; xPos++) {
for (var yPos:int = 0; yPos < h; yPos++) {
var pixel32:uint = bitmapData.getPixel32(xPos, yPos);
var alpha:int = pixel32 >>> 24;
if (alpha != 0) {
sprite.graphics.beginFill(pixel32 & 0xFFFFFF, alpha / 0xFF);
sprite.graphics.drawRect(xPos, yPos, 1, 1);
sprite.graphics.endFill();
}
}
}
}
Essentially you want "empty" pixels that aren't clickable, and fully transparent pixels aren't quite the same thing. With this solution you get empty pixels.
Only problem is that this might be slow. Give it a shot.
I created two empty Sprites to serve as layers, bottom_spr and top_spr
When clicking a button, a MovieClip appears and follows your mouse, untill you click, then its position is fixed.
As soon as the button is clicked, I addChild the MovieClip to the correct Sprite.
Unfortunately, the layer system doesn't see to work, because they are layered in the order I place them, the Sprites don't seem to influence it.
How is this possible?
private var ground_spr:Sprite;
private var units_spr:Sprite;
public function Game() {
addEventListeners();
ground_spr = new Sprite();
units_spr= new Sprite();
addChild(ground_spr);
addChild(units_spr);
}
private function addEventListeners(){
groundBtn.addEventListener(MouseEvent.CLICK, clickGroundBtn);
unitBtn.addEventListener(MouseEvent.CLICK, clickUnitBtn);
}
private function clickGroundBtn(event:MouseEvent){
var ground = new Ground_mc();
follow();
ground_spr.addChild(ground);
}
private function clickUnitBtn(event:MouseEvent){
var unit = new Unit_mc();
follow();
units_spr.addChild(unit);
}
Your question is very vague but I will attempt to answer it. If you clarify how you want your objects ordered exactly, I can better answer your question. It is fine to add layer of abstraction over the depth handling, if you need it. In this case I dont see much of a need, but I will show you a few things you could do.
To add an object to the back of the screen:
this.setChildIndex(objName, 0);
To add an object to the front of the screen:
this.setChildIndex(objName, this.numChildren - 1);
To swap the depths of two objects:
this.swapChildren(objA, objB);
//Note this is expecting two DisplayObjects so you may have to do:
this.swapChildren(objA as DisplayObject, objB as DisplayObject);
In my Actionscript program, I draw a polygon using the methods:
this.graphics.moveTo()
and
this.graphics.lineTo()
In the update function of the polygon model I change it a bit, and then draw it all over again. Eventually, every call to the update() function draws the updated polygon and I can see it changes.
On some point of the program, I want to be able to use this polygon as a movieclip, so I
can attach a mask to it - so as the polygon drawn over and over again, I could see a nice
background in the form of that polygon, fills it inside.
Problem is - I do not know how to take this array of points I have, which is my polygon representation, and turn it into a movieclip ( if possible at all... )
If you have any other recommendations how to implement the above, It would be great.
You can just create a new MovieClip and use it's graphics for drawing. So instead of using this.graphics.moveTo / lineTo, try this:
var mc:MovieClip = new MovieClip();
mc.graphics.moveTo(...);
mc.graphics.lineTo(...);
this.addChild(mc);
A convenient way of drawing, if you want to type less, is to do something like this:
var mc:MovieClip = new MovieClip();
with(mc.graphics) {
clear();
lineStyle(...);
moveTo(...);
lineTo(...);
...
ect.
}
this.addChild(mc);
I suggest you take a look at Point class. For example,
var p1:Point = new Point(100,150);
Then you can have an array of points
var arrPoints:Array = new Array(p1,p2,p3);
With a for loop, you can decide if i==0 you use moveTo and for the rest use lineTo. You can have a special condition at the end to close your polygon, i==arrPoints.length-1.
So, basically create a movieclip object, use its graphic property to fill it with the points you defined in your array. As long as your points are in a movieclip, you can mask it. Finally, that "this" notation you used is probably referring to the main movieclip which is the stage.
var mc:MovieClip = new MovieClip();
mc.graphics.moveTo(p1.x,p1.y);
will draw your graphics into your mc.