I am creating an android presentation app for a tablet that is projected on a screen. I have created a TouchEvent the adds a circle sprite so the audience can see where the presenter clicked on the screen. Here are the functions:
public function onTouchBegin(e:TouchEvent):void
{
var dot:Sprite = this.getCircle();
dot.x = e.stageX;
dot.y = e.stageY;
stage.addChild(dot);
dot.startTouchDrag(e.touchPointID, true);
dots[e.touchPointID] = dot;
}
public function onTouchEnd(e:TouchEvent):void
{
var dot:Sprite = this.dots[e.touchPointID];
stage.removeChild(dot);
delete this.dots[e.touchPointID];
}
private function getCircle(circumference:uint = 20):Sprite
{
var circle:Sprite = new Sprite();
circle.graphics.beginFill(0x00AFF0, .3);
circle.graphics.drawCircle(0, 0, circumference);
circle.mouseChildren = true;
return circle;
}
This works great, but I have some movieclips on the stage that cannot be clicked because the touch event is hijacking the click event. How do I get the click event assigned to the movieclips to fire through the dynamically added sprite?
circle.mouseEnabled = false;
You can simply disable mouse interaction with the circle.
Related
I'm trying a flash actionscript project to include a custom seekbar for timeline frame navigation. Now i could get dragger moving across the seekbar with respect to the totalframes. But dragging the seekbar brings error. Also i want to include timer to show the minute and seconds passed.
var ratio = 0;
ratio = this.totalFrames/main.line.width;
var go = 0;
var isComplete = false;
var tFrame = this.totalFrames;
var isPress = false;
stage.addEventListener(Event.ENTER_FRAME, drag);
function drag(event:Event):void {
if(main.dragger.x<=main.line.width){
main.dragger.x = this.currentFrame/ratio;
}
}
main.dragger.addEventListener(MouseEvent.MOUSE_DOWN, drag1);
function drag1(event:MouseEvent):void {
main.dragger.startDrag(false, new Rectangle(0, 9.2, main.line.width, 9.2));
isPress = true;
main.dragger.addEventListener(Event.ENTER_FRAME, frame);
}
function frame(event:Event):void
{
trace (this.currentFrame);
if(this.currentFrame < tFrame){
gotoAndPlay(Math.round(main.x*ratio));
}else{
gotoAndPlay(tFrame-1);
}
}
main.dragger.addEventListener(MouseEvent.MOUSE_UP,release);
function release(event:MouseEvent):void {
main.dragger.stopDrag();
main.dragger.removeEventListener(MouseEvent.MOUSE_DOWN, drag1);
}
when i click the dragger to move, it automatically jumps to starting position and also the gotoAndPlay jumps to that position and continuously stays there..
Attachment:
https://drive.google.com/open?id=0B4UOEUQTrhB0a21EaUpaUE52MGM
UPDATE
This is an other method found in adobe forum, But this also gives the same dragging problem.
var tl:MovieClip=this;
tl.addEventListener(Event.ENTER_FRAME,enterframeF);
paramF(tl,1,0,tl.totalFrames,slider.line.width); // create a horizontal slider movieclip that contains a track movieclip and a thumbscroll movieclip that do the obvious and have left-sided reg point
paramF(slider,0,1,slider.line.width-slider.thumbscroll.width,tl.totalFrames);
var scrollRect1:Rectangle=new Rectangle(0,0,slider.line.width-slider.thumbscroll.width,0);
function enterframeF(e:Event):void{
slider.thumbscroll.x=tl.m*tl.currentFrame+tl.b;
}
slider.thumbscroll.addEventListener(MouseEvent.MOUSE_DOWN,scrolldownF);
slider.thumbscroll.addEventListener(MouseEvent.MOUSE_UP,scrollupF);
function scrolldownF(e:MouseEvent):void{
tl.removeEventListener(Event.ENTER_FRAME,enterframeF);
slider.thumbscroll.startDrag(false,scrollRect1);
slider.addEventListener(Event.ENTER_FRAME,scrollF);
}
function scrollupF(e:MouseEvent):void{
tl.addEventListener(Event.ENTER_FRAME,enterframeF);
slider.thumbscroll.stopDrag();
slider.removeEventListener(Event.ENTER_FRAME,scrollF);
}
function scrollF(e:MouseEvent):void{
tl.gotoAndStop(Math.round(slider.thumbscroll.x*slider.m+slider.b));
}
function paramF(mc:MovieClip,x1:Number,y1:Number,x2:Number,y2:Number):void{
mc.m=(y1-y2)/(x1-x2);
mc.b=y2-mc.m*x2;
}
I have a game that allows the user to create their own picture. They can choose different elements from the menu I have created. When they click an element, an instance is created that they can drag to the working area above. The picture they are creating is in a circular shape, therefore, if the user drags the element near the edge of the circle, it should get cut off. *(Imagine a rectangular image with a transparent circle in the middle that you can see all the elements through)
Currently, I can drag an element to the working area and it will only show within the circle (and be cut off if it is outside the circle), but once I am done dragging it, I can not click and drag it again because it is under the image.
How do I get the rectangular image to display on top of all the elements, while still allowing the user to click and drag the elements they have already placed?
(I made a diagram to make this easier to follow, but I don't have enough rep points to post it)
var sb1:sbMenu1 = new sbMenu1();
var sb2:sbMenu2 = new sbMenu2();
var sb3:sbMenu3 = new sbMenu3();
var sb4:sbMenu4 = new sbMenu4();
backgrounds.addEventListener(MouseEvent.CLICK, fl_MouseClickHandler_5);
function fl_MouseClickHandler_5(event:MouseEvent):void
{
this.addChild(sb1);
sb1.visible = true;
sb2.visible = false;
sb3.visible = false;
sb4.visible = false;
sb1.x = 0
sb1.y = 550
}
nature.addEventListener(MouseEvent.CLICK, fl_MouseClickHandler_4);
function fl_MouseClickHandler_4(event:MouseEvent):void
{
this.addChild(sb2);
sb2.visible = true;
sb1.visible = false;
sb3.visible = false;
sb4.visible = false;
sb2.x = 0
sb2.y = 550
}
animals.addEventListener(MouseEvent.CLICK, fl_MouseClickHandler_6);
function fl_MouseClickHandler_6(event:MouseEvent):void
{
this.addChild(sb3);
sb3.visible = true;
sb1.visible = false;
sb2.visible = false;
sb4.visible = false;
sb3.x = 0
sb3.y = 550
}
objects.addEventListener(MouseEvent.CLICK, fl_MouseClickHandler_7);
function fl_MouseClickHandler_7(event:MouseEvent):void
{
this.addChild(sb4);
sb4.visible = true;
sb1.visible = false;
sb2.visible = false;
sb3.visible = false;
sb4.x = 0
sb4.y = 550
}
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);
if (tmpImage.hitTestObject(thesubmenu1)) {
removeChild(tmpImage);
}
else {
tmpImage.stopDrag();
}
}
thesubmenu1.foreground.addEventListener(MouseEvent.MOUSE_DOWN, createCopy2);
function createCopy2(e:MouseEvent):void {
tmpImage = new Foreground_mc();
tmpImage.name = "foregroundChild"+(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
}
stage.addChild(seal);
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.
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