can anyone please help me on this.
attached is the fla which has a part of code i am working on for a project.
with help of mouse you can draw a circle on the image, but for some reasons the mouse up event does not work. it works fine when the eventlisteners is attached to the stage, but does not work when its attached to the movieclip.
also how can i restrict the circle to be drawn only inside the movieclip which is a rectangle.
here is the code
const CANVAS:Sprite = new Sprite();
var _dragging:Boolean = false;
var _corner:Point;
var _corner2:Point;
menFront.addEventListener(MouseEvent.MOUSE_DOWN, setAnchor);
menFront.addEventListener(MouseEvent.MOUSE_UP, completeRect);
function setAnchor(e:MouseEvent):void{
trace("mouse down");
if(!_dragging){
CANVAS.graphics.clear();
_corner = new Point(e.stageX, e.stageY);
_dragging = true;
menFront.addEventListener(MouseEvent.MOUSE_MOVE, liveDrag);
}
}
function completeRect(e:MouseEvent):void{
trace("mouse up");
if(_dragging){
_dragging = false;
menFront.removeEventListener(MouseEvent.MOUSE_MOVE, liveDrag);
CANVAS.graphics.lineStyle(0, 0, 0);
CANVAS.graphics.beginFill(0x222222,.5)
_corner2 = new Point(e.stageX, e.stageY);
trace(Point.distance(_corner,_corner2).toFixed(2));
CANVAS.graphics.drawCircle(_corner.x, _corner.y, Point.distance(_corner,_corner2));
addChild(CANVAS);
}
}
function liveDrag(e:MouseEvent):void{
CANVAS.graphics.clear();
CANVAS.graphics.lineStyle(0, 0x999999);
_corner2 = new Point(e.stageX, e.stageY);
//trace(Point.distance(_corner,_corner2).toFixed(2));
CANVAS.graphics.drawCircle(_corner.x, _corner.y, Point.distance(_corner,_corner2));
addChild(CANVAS);
}
If you add the MouseEvent.MOUSE_UP to the object that you are dragging, the event will only fire if the item is underneath the mouse at the moment the MOUSE_UP happens, but since you're updating the item with MOUSE_MOVE, that's a race-condition between when the MOUSE_UP happens and when the MOUSE_MOVE happens.
To avoid such problems you want to guarantee that you receive the MOUSE_UP whenever MOUSE_UP fires, during your live-update cycle. To do that, add the event listener to the stage just when it's needed, something like this:
menFront.addEventListener(MouseEvent.MOUSE_DOWN, setAnchor);
function setAnchor(event:MouseEvent):void
{
stage.addEventListener(MouseEvent.MOUSE_UP, completeRect);
// your other functionality
}
function completeRect(event:MouseEvent):void
{
stage.removeEventListener(MouseEvent.MOUSE_UP, completeRect);
// your other functionality
}
so that your completeRect doesn't get called inadvertently if you're clicking elsewhere.
Hope This Helps
Related
I have a puzzle and 9 pictures, so when I Start Drag any picture i want it to come above of the all remaining.
How I can do it on Action Script 3.0?
this is for example:
import flash.events.Event;
Puz3_Level7A.addEventListener (MouseEvent.MOUSE_DOWN, StartPuz3);
function StartPuz3 (e:Event):void
{
Puz3_Level7A.startDrag();
}
Puz2_Level7A.addEventListener (MouseEvent.MOUSE_DOWN, StartPuz2);
function StartPuz2 (e:Event):void
{
Puz2_Level7A.startDrag();
}
Puz1_Level7A.addEventListener (MouseEvent.MOUSE_DOWN, StartPuz1);
function StartPuz1 (e:Event):void
{
Puz1_Level7A.startDrag();
}
Try following.
import flash.events.Event;
Puz3_Level7A.addEventListener (MouseEvent.MOUSE_DOWN, StartPuz3);
function StartPuz3 (e:Event):void
{
this.setChildIndex(Puz3_Level7A, this.numChildren - 1);
Puz3_Level7A.startDrag();
}
Puz2_Level7A.addEventListener (MouseEvent.MOUSE_DOWN, StartPuz2);
function StartPuz2 (e:Event):void
{
this.setChildIndex(Puz2_Level7A, this.numChildren - 1);
Puz2_Level7A.startDrag();
}
Puz1_Level7A.addEventListener (MouseEvent.MOUSE_DOWN, StartPuz1);
function StartPuz1 (e:Event):void
{
this.setChildIndex(Puz1_Level7A, this.numChildren - 1);
Puz1_Level7A.startDrag();
}
This code assume all the above sprites are children of same sprite.
you can just do
this.parent.addChild(this);
to put 'this' on the top of all parent's children
There are some perfectly good answers already, but in the interest of DRY (don't repeat yourself) and completeness, here is my take on this.
A clean way of doing this, including stopping the drag. No inline functions or unnecessarily repeated code.
//add the mouse down listener to all objects you want to be able to drag.
//if you have a lot, you could also do this in a loop to make it more concise.
Puz3_Level7A.addEventListener(MouseEvent.MOUSE_DOWN, dragPuzzlePiece, false, 0, true);
Puz2_Level7A.addEventListener(MouseEvent.MOUSE_DOWN, dragPuzzlePiece, false, 0, true);
Puz1_Level7A.addEventListener(MouseEvent.MOUSE_DOWN, dragPuzzlePiece, false, 0, true);
var currentPiece:Sprite; //a var to hold a reference to item last mouse downed (to use in the mouse up handler)
//the mouse down handler to drag a piece
function dragPuzzlePiece(e:Event):void
{
currentPiece = e.currentTarget as Sprite; //the event's current target is a reference to the item you added the listener to. We are casting it as a Sprite so the compiler knows what kind of object it is.
addChild(currentPiece); //this will bring it to the top.
//setChildIndex(currentPiece, numChildren-1); //this would do the same as above
//swapChildren(currentPiece, getChildAt(numChildren-1); //this would do the same as above
currentPiece.startDrag(); //start dragging the piece that was clicked
//now listen for the mouse up event to stop dragging the piece
//we listen on the stage, as sometimes dragging can lag when moving the mouse quickly and the mouse may not be over the item when you release the button
stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
}
function mouseUpHandler(e:Event):void {
//remove the mouse up listener
stage.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
//stop the drag:
if(currentPiece) currentPiece.stopDrag();
//do something with currentPiece now that the drag is done.
//like make sure the piece is in a valid spot
//check if the puzzle is complete now
puzzleDone(); //let's say you call this function at some point
}
function puzzleDone():void {
currentPiece = null; //clear this var so objects can be garbage collected
//!important
//when you use setChildIndex, or AddChild, or SwapChildren
//or anything that modifies the parentage of a object
//that object will no longer be removed by timeline keyframes
//it will stick around until it's parent is removed, or you explicitly remove it.
//to that end, you'll want to manually remove your puzzle pieces when done
removeChild(Puz3_Level7A);
removeChild(Puz2_Level7A);
removeChild(Puz1_Level7A);
//you can use some of patterns below for this as well.
}
In regards to adding the mouse down listeners to all your puzzle pieces, here are some other options to scale better if you have a whole lot of pieces:
If the pieces are all FlashPro instance names, you could do this:
//loop three times
for(var i:int=1;i<=3;i++){
//get the child dynamically from the name (
var piece:DisplayObject = getChildByName("Puz" + i + "_Level7A");
if(piece){
piece.addEventListener(MouseEvent.MOUSE_DOWN, dragPuzzlePiece, false, 0, true);
}
}
If your puzzle pieces are the sole children of a common parent (let's say this code is on the timeline of that parent), you could do this:
//loop backwards through all children of this
var i:int = this.numChildren;
while(i--){
this.getChildAt(i).addEventListener(MouseEvent.MOUSE_DOWN, dragPuzzlePiece, false, 0, true);
}
If you have your pieces in an array:
var allPieces:Array = [Puz3_Level7A, Puz2_Level7A, Puz3_Level7A];
for(var i:int=0;i<allPieces.length;i++){
allPieces[i].addEventListener(MouseEvent.MOUSE_DOWN, dragPuzzlePiece, false, 0, true);
}
I upvoted #SameerJain's answer, it will do what you want. Taking it a little further, you can reduce all your repeated code with a simple function that makes your puzzle pieces draggable:
function makeDraggable(target:Sprite):void {
target.addEventListener(MouseEvent.MOUSE_DOWN, dragStart);
}
function dragStart(e:MouseEvent):void {
var target:Sprite = e.currentTarget as Sprite;
target.startDrag();
setChildIndex(target, numChildren - 1);
stage.addEventListener(MouseEvent.MOUSE_UP, dragEnd);
}
function dragEnd(e:MouseEvent):void {
stopDrag();
stage.removeEventListener(MouseEvent.MOUSE_UP, dragEnd);
}
makeDraggable(Puz3_Level7A);
makeDraggable(Puz2_Level7A);
makeDraggable(Puz1_Level7A);
I have hundreds of movieclips constantly being created on a timer, each with a mouseDown event listener which will remove the movieclip on mouseDown. For nearly all the movieclips the mouseDown event seems to fire correctly, however sometimes I notice that the mouseDown event does not fire for a movieclip (i.e. it is not removed).
This is function creating the movieclip:
public function pickShape():MovieClip {
//possible shapes
var shapes:Array = [new triangle(), new rectangle(), new square()];
var randomCol:int = Math.floor(Math.random()*colours.length);
var randomShape:int = Math.floor(Math.random()*shapes.length);
var chosenShape:MovieClip = shapes[randomShape];
//change shape to random colour
var shapeCol:ColorTransform = chosenShape.transform.colorTransform;
shapeCol.color = colours[randomCol];
chosenShape.transform.colorTransform = shapeCol;
chosenShape.addEventListener(MouseEvent.MOUSE_DOWN, destroyShape); //remove mc
return chosenShape;
}
pickShape() is called from another function which is called on a timerEvent, in this other function the scaleX, scaleY and rotation of chosenShape are altered. chosenShape will be moving across the screen in an EnterFrame, when it is offscreen it is removed.
What would cause this?
thanks for any help
Does your destroyShape function looks like this:
function destroyShape(e:MouseEvent):void
{
e.currentTarget.parent.removeChild(e.currentTarget);
}
?
I am having trouble with the controls showing up for my transform tool. When I click my image I get the bounding box (to scale or rotate the image), but when I hover over the corner I do not get the cursor to transform it.
I am using these files:
TransformTool.as
TransformToolControl.as
TransformToolCursor.as
This is my code to call the transform tool:
var tool:TransformTool = new TransformTool();
addChild(tool);
And this later on to make the tool show up when the image is clicked and make the tool disappear when the stage is clicked:
tmpImage.addEventListener(MouseEvent.CLICK, select);
function select(e:MouseEvent):void {
tool.target = e.currentTarget as Sprite;
stage.addEventListener(MouseEvent.MOUSE_DOWN, deselect);
}
function deselect(e:MouseEvent):void {
tool.target = null;
tmpImage.addEventListener(MouseEvent.CLICK, select);
}
My image selection for the bounding box to appear and disappear work perfectly. All my code works as expected.... except the actual controls on the bounding box. Please help!
Edit
The concept is the user can click an image from a menu and drag a new instance of that image to the stage. Then the user can click the new instance and should be able to rotate or scale it. Then they can click off the image to make the bounding box disappear. (They can add as many images to the stage that they want).
Here is some code that shows the basic click, create new instance, and drag process I have implemented.
//sb1 is the menu area that contains a group of images
//hill is one of the images the user can add to the stage
sb1.hill.addEventListener(MouseEvent.MOUSE_DOWN, createCopy);
var i:int=0;
var tmpImage:Sprite; //to store which image is being dragged currently
function createCopy(e:MouseEvent):void {
tmpImage = new Hill_mc();
tmpImage.name = "hillChild"+(i++); //increment every copy
container.addChild(tmpImage);
tmpImage.x = mouseX-470;
tmpImage.y = mouseY-270;
tmpImage.startDrag();
tmpImage.addEventListener(MouseEvent.MOUSE_DOWN, onDown); //add the mouse down to this new object
stage.addEventListener(MouseEvent.MOUSE_UP, onUp); //since the mouse is currently down, we need to listen for mouse up to tell the current copy to stop dragging
}
//this will be called when click a copy
function onDown(e:MouseEvent):void {
tmpImage = Sprite(e.currentTarget); //get a reference to the one that was clicked, so we know which object to stop dragging on the global mouse up.
container.addEventListener(MouseEvent.MOUSE_UP, onUp); //listen for the mouse up
tmpImage.startDrag();
}
function onUp(e:MouseEvent):void {
container.removeEventListener(MouseEvent.MOUSE_UP,onUp);
if (tmpImage.hitTestObject(thesubmenu1)) {
container.removeChild(tmpImage);
}
else {
tmpImage.stopDrag();
}
tmpImage.addEventListener(MouseEvent.CLICK, select);
}
function select(e:MouseEvent):void {
tool.target = e.currentTarget as Sprite;
tmpImage.addEventListener(MouseEvent.MOUSE_DOWN, deselect);
}
function deselect(e:MouseEvent):void {
tool.target = null;
tmpImage.addEventListener(MouseEvent.CLICK, select);
}
EDIT
I found this code and placed it in my TransformTool.as. I feel like it's so close and that there must be something called incorrectly because I get an error for a null object reference:
public function select(event:Event):void {
// the selected object will either be the
// event target or current target. The current
// target is checked first followed by target.
// The parent of the target must match the
// parent of the tool to be selected this way.
if (event.currentTarget != this
&& event.currentTarget.parent == parent){
setTarget(event.currentTarget as DisplayObject, event);
}else if (event.target != this
&& event.target.parent == parent){
setTarget(event.target as DisplayObject, event);
}
}
/**
* Helper selection handler for deselecting target objects. Set this
* handler as the listener for an event that would cause the
* deselection of a target object.
* It is not required that you use this event handler. It is only a
* helper function that can optionally be used to help ease
* development.
*/
public function deselect(event:Event):void {
if (_target != null && event.eventPhase == EventPhase.AT_TARGET){
setTarget(null, null);
}
}
You give too little information to determine what exactly is wrong.
However, there is a very good sample code that does exactly what you want here :
http://www.senocular.com/demo/TransformToolAS3/TransformTool.html
(Click on the link at the bottom of the image.)
I am sure that you are going to make it with this.
EDIT :
Try to use the built-in handlers. I would do something like this :
Instead of this :
tmpImage.addEventListener(MouseEvent.CLICK, select);
function select(e:MouseEvent):void {
tool.target = e.currentTarget as Sprite;
stage.addEventListener(MouseEvent.MOUSE_DOWN, deselect);
}
function deselect(e:MouseEvent):void {
tool.target = null;
tmpImage.addEventListener(MouseEvent.CLICK, select);
}
Do this :
tmpImage.addEventListener(MouseEvent.MOUSE_DOWN, tool.select);
stage.addEventListener(MouseEvent.MOUSE_DOWN, tool.deselect);
EDIT :
If you do not have the handlers, I am not sure :) but I would recommand removing event listeners in each method as they might be interfering with each other.
tmpImage.addEventListener(MouseEvent.CLICK, select);
function select(e:MouseEvent):void {
tmpImage.removeEventListener(MouseEvent.CLICK, select);
tool.target = e.currentTarget as Sprite;
stage.addEventListener(MouseEvent.MOUSE_DOWN, deselect);
}
function deselect(e:MouseEvent):void {
stage.removeEventListener(MouseEvent.MOUSE_DOWN, deselect);
tool.target = null;
tmpImage.addEventListener(MouseEvent.CLICK, select);
}
I am attempting to build a drag and drop game where a user can build something using the images I provide. I will have images in a menu that the user can click and drag to the building area. The user will be able to add however many instances of that image as they want.
I was able to get part of it working. So far, I can click the image and drag it around, and create as many instances as I want. However, I cannot click and drag the image once I have placed it.
When I do a trace to see what the name is, it says that all the new instances are named hillChild1. I tried to make them named hillChild1, hillChild2, etc., but that doesn't seem to work either... not sure that is an issue, though.
Here's my code:
thesubmenu1.hill.addEventListener(MouseEvent.MOUSE_DOWN, onDown);
stage.addEventListener(MouseEvent.MOUSE_UP, onUp);
var myImage:Sprite = Sprite(new Hill_mc());
var i:Number=0; i++;
function onDown(e:MouseEvent):void {
var myImage:Sprite = Sprite(new Hill_mc());
myImage.name = "hillChild"+i;
addChild(myImage);
myImage.x = mouseX;
myImage.y = mouseY;
myImage.startDrag();
myImage.buttonMode = true;
}
function onUp(e:MouseEvent):void {
var myImage:Sprite = Sprite(new Hill_mc());
myImage.stopDrag();
myImage.name = "hillChild";
}
stage.addEventListener(MouseEvent.CLICK, traceName);
function traceName(event:MouseEvent):void { trace(event.target.name); }
myImage.getChild(myImage).addEventListener("mouseDown", mouseDownHandler);
stage.addEventListener("mouseUp", mouseUpHandler);
function mouseDownHandler (e:MouseEvent):void{
myImage.startDrag();
}
function mouseUpHandler (e:MouseEvent):void{
myImage.stopDrag();
}
I am new to StackOverflow and also Actionscript 3, if it isn't apparent.
Your issue is likely that you are creating a new instance on mouse up (when what you want is a reference to instance that was already created on mouse down). Also, you never add a click listener to you new objects. Add the mouse up listener to stage only after the mouse down (then remove the listener in the mouse up).
thesubmenu1.hill.addEventListener(MouseEvent.MOUSE_DOWN, createCopy);
var i:int=0;
var tmpImage:Sprite; //to store which image is being dragged currently
function createCopy(e:MouseEvent):void {
tmpImage = new Hill_mc();
tmpImage.name = "hillChild"+(i++); //increment every copy
addChild(tmpImage);
tmpImage.x = mouseX;
tmpImage.y = mouseY;
tmpImage.startDrag();
tmpImage.buttonMode = true;
tmpImage.addEventListener(MouseEvent.MOUSE_DOWN, onDown); //add the mouse down to this new object
stage.addEventListener(MouseEvent.MOUSE_UP, onUp); //since the mouse is currently down, we need to listen for mouse up to tell the current copy to stop dragging
}
//this will be called when click a copy
function onDown(e:MouseEvent):void {
tmpImage = Sprite(e.currentTarget); //get a reference to the one that was clicked, so we know which object to stop dragging on the global mouse up.
stage.addEventListener(MouseEvent.MOUSE_UP, onUp); //listen for the mouse up
tmpImage.startDrag();
}
function onUp(e:MouseEvent):void {
stage.removeEventListener(MouseEvent.MOUSE_UP,onUp); //now that the mouse is released, stop listening for mouse up
tmpImage.stopDrag(); //stop dragging the one that was clicked
}
Is there any way to detect if the user click outside a MovieClip?
For instance, I need to detect it to close a previously opened menu (like Menu bar style: File, Edition, Tools, Help, etc).
How can I detect this kind of event? Thanks!
Add a listener to stage and check if stage is the target of the event.
Example of code here:
http://wonderfl.net/c/eFao
package
{
import flash.display.Sprite;
import flash.events.MouseEvent;
public class FlashTest extends Sprite
{
private var _menu : Sprite;
public function FlashTest()
{
_menu = new Sprite();
_menu.x = 100;
_menu.y = 100;
_menu.alpha = 0.5;
with(_menu.graphics)
{
beginFill(0xFF0000, 1);
drawRect(0, 0, 300, 300);
endFill();
}
addChild(_menu);
_menu.addEventListener(MouseEvent.CLICK, onClickHandler);
stage.addEventListener(MouseEvent.CLICK, onClickHandler);
}
private function onClickHandler(event : MouseEvent) : void
{
switch(event.target)
{
case _menu:
_menu.alpha = 0.5;
break;
case stage:
_menu.alpha = 1;
break;
}
}
}
}
You can add a listener to the click event of the root element:
MovieClip(root).addEventListener(MouseEvent.CLICK, clickObject);
then in the function clickObject, you can check to see what you are clicking.
function clickObject(e:Event):void
{
var hoverArray:Array = MovieClip(root).getObjectsUnderPoint(new Point(stage.mouseX, stage.mouseY));
var hoverOverObject:* = hoverArray[hoverArray.length - 1];
}
hoverOverObject references the element that you are clicking on. Often this will be the shape within the movie clip, so you'll need to look at it's parent then compare it to your movie clip. If the click wasn't on the drop down movie clip, trigger the close.
var container:MovieClip = new MovieClip();
var mc:MovieClip = new MovieClip();
with(mc.graphics){
beginFill(0xff0000,1);
drawCircle(0,0,30);
endFill();
}
mc.name = "my_mc";
container.addChild(mc);
addChild(container);
stage.addEventListener(MouseEvent.CLICK, action);
function action (e:MouseEvent):void
{
if(e.target.name != "my_mc"){
if(container.numChildren != 0)
{
container.removeChild(container.getChildByName("my_mc"));
}
}
}
Use capture phase:
button.addEventListener(MouseEvent.CLICK, button_mouseClickHandler);
button.stage.addEventListener(MouseEvent.CLICK, stage_mouseClickHandler, true);
//...
private function button_mouseClickHandler(event:MouseEvent):void
{
trace("Button CLICK");
}
private function stage_mouseClickHandler(event:MouseEvent):void
{
if (event.target == button)
return;
trace("Button CLICK_OUTSIDE");
}
Note that using stopPropagation() is good for one object, but failed for several. This approach works good for me.
Use a stage and a sprite (menu) click listener with the sprite listener executing first and apply the stopPropagation() method to the click handler of the sprite. Like this:
menu.addEventListener(MouseEvent.CLICK, handleMenuClick);
stage.addEventListener(MouseEvent.CLICK, handleStageClick);
private function handleMenuClick(e:MouseEvent):void{
// stop the event from propagating up to the stage
// so handleStageClick is never executed.
e.stopPropagation();
// note that stopPropagation() still allows the event
// to propagate to all children so if there are children
// within the menu overlay that need to respond to click
// events that still works.
}
private function handleStageClick(e:MouseEvent):void{
// put hide or destroy code here
}
The idea is that a mouse click anywhere creates a single MouseEvent.CLICK event that bubbles from the stage, down through all children to the target, then back up through the parents of the target to the stage. Here we interrupt this cycle when the target is the menu overlay by not allowing the event to propagate back up to the parent stage, ensuring that the handleStageClick() method is never invoked. The nice thing about this approach is that it is completely general. The stage can have many children underneath the overlay and the overlay can have its own children that can respond to clicks and it all works.