Pivot an obect in the direction of the mouse as3 - actionscript-3

I am trying to have an object pivot in the direction of the mouse while being dragged. For example i would like the car to point in the direction it is being dragged. All I have right now is the drag and drop code.
car.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);
car.addEventListener(MouseEvent.MOUSE_UP, dropIt);
function pickUp(event:MouseEvent):void {
event.target.startDrag(true);
event.target.parent.addChild(event.target);
}
function dropIt(event:MouseEvent):void {
event.target.stopDrag();
}

Once you start dragging the object, you can start listening for MouseMove events. As you do so, you compare the current mouse position to the previous mouse position and determine the angle between the two. Then, use that angle as the rotation for the object:
car.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);
car.addEventListener(MouseEvent.MOUSE_UP, dropIt);
var oldPoint:Point;
function pickUp(event:MouseEvent):void
{
event.target.startDrag(true);
event.target.parent.addChild(event.target);
oldPoint = new Point(mouseX, mouseY);
// start listening to mouse move events
stage.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);
}
function dropIt(event:MouseEvent):void
{
oldPoint = null;
event.target.stopDrag();
// stop listening to mouse move events
stage.removeEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);
}
function onMouseMove(event:MouseEvent):void
{
if(!oldPoint)
{
return;
}
var newPoint:Point = new Point(mouseX, mouseY);
// get the angle between the two points and set it as the rotation
car.rotation = point_direction(oldPoint, newPoint);
}
function point_direction(p1:Point, p2:Point):Number
{
return Math.atan2(p2.y - p1.y, p2.x - p1.x) * (180 / Math.PI);
}
NOTE: (Per #Vesper's comment) When the mouse is going left to right, this will produce a rotation of 0. This means that you'll want the graphics of your car object facing towards the right.

Related

How can I use "ease" for smoother dragging?

I have dragging mc called "box" but the dragging is not smooth at all.
So how can I make it smoother by using "ease" var.
I'm trying to use "/ease" anywhere but not work.
var topY:int = stage.stageHeight - box.height;
var botY:int = 0;
box.addEventListener(MouseEvent.MOUSE_DOWN, onDown);
box.addEventListener(MouseEvent.MOUSE_UP, onUp);
var constrainY:Rectangle = new Rectangle(box.x, topY ,0, box.y+ (box.height-stage.stageHeight) );
var dragxy:String = "";
function onDown(e:MouseEvent):void
{
dragxy = mouseX + "_" + mouseY;
e.currentTarget.startDrag(false, constrainY);
removeEventListener(MouseEvent.MOUSE_DOWN, onDown);
addEventListener(MouseEvent.MOUSE_UP, onUp);
}
function onUp(e:MouseEvent):void
{
e.currentTarget.stopDrag();
addEventListener(MouseEvent.MOUSE_DOWN, onDown);
removeEventListener(MouseEvent.MOUSE_UP, onUp);
}
a simple example of an easing function would be:
private function easeTo(obj:MovieClip,currentGoalx:Number,currentGoaly:Number,easeFac:Number):void{
obj.x += (currentGoalx-obj.x)/easeFac;
obj.y += (currentGoaly-obj.y)/easeFac;
}
first you will need a timer or enter frame loop such as this added to the stage:
addEventListener(Event.ENTER_FRAME,enterFrame);
then in your enterFrame function do this:
private function enterFrame(e:Event):void{
easeTo(box,stage.mouseX,stage.mouseY,3);
}
an easeFac of 3 is a slower and smoother ease-in than an easeFac of 2, and 4 is even smoother and buttery-er.
or something like that. The idea is that the obj goes half the distance to the goal on each function call. So if this function is getting called on every frame, you'll get a smooth "ease in" effect. If you set currentGoal as the mouse position, then the obj will follow the mouse wherever it goes, but not in a 1:1 matching, rather it will trail behind and smoothly catch up.

How to prevent a drag action to affect the childrens of a MovieClip

My problem is: I have a MovieClip (obj) that users can drag to both sides to navigate, the code I use for this:
import flash.events.MouseEvent;
import flash.geom.Point;
import flash.events.Event;
import flash.geom.Rectangle;
var destination: Point = new Point();
var dragging: Boolean = false;
var speed: Number = 10;
var offset: Point = new Point();
var bounds: Rectangle = new Rectangle(0, 0, stage.stageWidth, stage.stageHeight);
obj.addEventListener(MouseEvent.MOUSE_DOWN, startdrag);
stage.addEventListener(MouseEvent.MOUSE_UP, stopdrag);
obj.addEventListener(Event.ENTER_FRAME, followmouse);
function startdrag(e: MouseEvent): void {
offset.x = obj.mouseX * obj.scaleX;
dragging = true;
}
function stopdrag(e: MouseEvent): void {
dragging = false;
}
function followmouse(e: Event): void {
if (obj) {
if (dragging) {
destination.x = mouseX;
}
obj.x -= (obj.x - (destination.x - offset.x)) / speed;
if (obj.x > bounds.left) {
obj.x = bounds.left;
}
if (obj.x < -obj.width + bounds.right) {
obj.x = -obj.width + bounds.right;
}
}
}
So far so good, the problem comes up when I put some clickable elements inside that MovieClip (obj), here are the code for the clickable elements:
objA.addEventListener(MouseEvent.CLICK, objATrigger);
objB.addEventListener(MouseEvent.CLICK, objBTrigger);
objC.addEventListener(MouseEvent.CLICK, objCTrigger);
function objATrigger(event: MouseEvent): void {
MovieClip(this.parent).gotoAndPlay(1, "Main");
}
function objBTrigger(event: MouseEvent): void {
MovieClip(this.parent).gotoAndPlay(1, "Main");
}
function objCTrigger(event: MouseEvent): void {
MovieClip(this.parent).gotoAndPlay(1, "Main");
}
The problem is: When I drag the MovieClip (obj) there is a conflict with the event, when release the mouse after the drag, the event Click of MovieClips inside the MovieClip (obj) is fired, how can I fix this? They should only be triggered when there is no drag action.
This is how I handle dragging a parent that has clickable children. The benefit of this method, is that you don't need to do anything to the children (no extra conditions in their click handlers etc), the click event simply doesn't reach them.
You can also hopefully gleam some efficiency tips from the code/comments below:
var wasDragged:Boolean = false;
var dragThreshold:Point = new Point(10,10);
// ^ how many pixels does it need to move before it's considered a drag
//this is good especially on touchscreens as it's easy to accidentally drag the item a couple pixels when clicking.
var dragStartPos:Point = new Point(); //to store drag origin point to calculate whether a drag occured
var dragOffset:Point = new Point(); //to track the gap between the mouse down point and object's top left corner
obj.addEventListener(MouseEvent.MOUSE_DOWN, startdrag);
obj.addEventListener(MouseEvent.CLICK, dragClick, true); //listen on the capture phase of the event.
//the only reason we listen for click on the draggable object, is to cancel the click event so it's children don't get it
function dragClick(e:Event):void {
//if we deemed it a drag, stop the click event from reaching any children of obj
if(wasDragged) e.stopImmediatePropagation();
}
function startdrag(e: MouseEvent): void {
//reset all dragging vars
wasDragged = false;
dragStartPos.x = obj.x;
dragStartPos.y = obj.y;
//set the offset so the object doesn't jump when first clicked
dragOffset.x = stage.mouseX - obj.x;
dragOffset.y = stage.mouseY - obj.y;
//only add the mouse up listener AFTER the mouse down
stage.addEventListener(MouseEvent.MOUSE_UP, stopdrag);
//mouse_move is more efficient that enter_frame, and only listen for it when dragging
stage.addEventListener(MouseEvent.MOUSE_MOVE, followmouse);
}
function stopdrag(e:MouseEvent = null): void {
//remove the dragging specific listeners
stage.removeEventListener(MouseEvent.MOUSE_UP, stopdrag);
stage.removeEventListener(MouseEvent.MOUSE_MOVE, followmouse);
}
function followmouse(e:MouseEvent): void {
if (obj) {
//do what you need to move the object
obj.x = stage.mouseX - dragOffset.x;
obj.y = stage.mouseY - dragOffset.y;
//check if the obj moved far enough from the original position to be considered a drag
if(!wasDragged
&& (Math.abs(obj.x - dragStartPos.x) > dragThreshold.x
|| Math.abs(obj.y - dragStartPos.y) > dragThreshold.y)
){
wasDragged = true;
}
}
}
I don`t know if this is the best approach, but it was possible to check using the code below:
stage.addEventListener(MouseEvent.MOUSE_DOWN, setmousepos);
brose_trigger.addEventListener(MouseEvent.MOUSE_UP, broseTrigger);
denso_trigger.addEventListener(MouseEvent.MOUSE_UP, densoTrigger);
honda_trigger.addEventListener(MouseEvent.MOUSE_UP, hondaTrigger);
var mousePos: Point = new Point();
function setmousepos(e:MouseEvent): void {
mousePos.x = mouseX;
}
function broseTrigger(e:MouseEvent): void {
if(mousePos.x == mouseX){
MovieClip(this.parent).gotoAndPlay(1, "Main");
}
}
function densoTrigger(event:MouseEvent): void {
if(mousePos.x == mouseX){
MovieClip(this.parent).gotoAndPlay(1, "Main");
}
}
function hondaTrigger(event:MouseEvent): void {
if(mousePos.x == mouseX){
MovieClip(this.parent).gotoAndPlay(1, "Main");
}
}
When MOUSE_DOWN event is triggered, I store the mouse.x position in a variable, after that in the MOUSE_UP event, I compare the stored position with the actual position, if equals, TÃDÃ!
Do add condition in objATrigger function to check if dragging is false
function objATrigger(event: MouseEvent): void {
if(!MovieClip(root).dragging){
MovieClip(this.parent).gotoAndPlay(1, "Main");
}
}

as3 draw with mouse and erase lines when hitTestObject is reached

I am trying to create a simple hitTestObject and see the lines that are being drawing on screen hit with a Ball. If it does it will erase all lines and start fresh. I am very close. The checkIt() function is where the code needs to happen and its clearing the lines but not making a new shape.
How can I erase the lines the mouse drew and start fresh when a hit test is reached?
var myshape:Shape;
myshape = new Shape();
myshape.graphics.lineStyle(12, 0xC807DE);
var alreadyDrawn:Shape;
alreadyDrawn = new Shape();
stage.addEventListener(MouseEvent.MOUSE_DOWN, activateDraw);
function activateDraw(event:MouseEvent):void
{
myshape.graphics.moveTo(mouseX,mouseY);
addChild(myshape);
stage.addEventListener(MouseEvent.MOUSE_MOVE, lineDraw);
function lineDraw(myevent:MouseEvent):void
{
stage.addEventListener(MouseEvent.MOUSE_UP, stopDraw);
function stopDraw(endevent:MouseEvent):void
{
alreadyDrawn = myshape;
stage.removeEventListener(MouseEvent.MOUSE_MOVE, lineDraw);
}
myshape.graphics.lineTo(mouseX,mouseY);
myevent.updateAfterEvent();
checkIt();
}
}
function checkIt()
{
if (alreadyDrawn.hitTestObject(Ball) == true)
{
trace("Hit The Balls");
myshape.graphics.clear();
myshape.graphics.lineStyle(12, 0xC807DE);
}
}
You actually have ONE shape instead of two, because once you do alreadyDrawn=myshape you lose whatever object you attached there. You should instead do alreadyDrawn.graphics.copyFrom(myshape.graphics); this will copy all the strokes from argument to object without losing the other instance.
Next, you seemingly need to also stop drawing if you've detected a hit vs alreadyDrawn, for this, call stopDraw(null); from checkIt().
And next, you are not clearing all the listeners off stage while adding more and more. See, if you draw several lines in quick succession (press-drag-release), the stopDraw listener is added multiple times and not removed even once. To do this, use removeEventListener(MouseEvent.MOUSE_UP, stopDraw); inside stopDraw function and move the adding line into activateDraw, because there are multiple "mouse move" events while you drag the mouse, and another listener is added each time you process the event.
And finally, PLEASE don't nest functions without actual need!
The fixed code should be this:
var myshape:Shape;
myshape = new Shape();
myshape.graphics.lineStyle(12, 0xC807DE);
var alreadyDrawn:Shape;
alreadyDrawn = new Shape();
stage.addEventListener(MouseEvent.MOUSE_DOWN, activateDraw);
function activateDraw(event:MouseEvent):void
{
myshape.graphics.moveTo(mouseX,mouseY);
addChild(myshape);
stage.addEventListener(MouseEvent.MOUSE_MOVE, lineDraw);
stage.addEventListener(MouseEvent.MOUSE_UP, stopDraw);
}
function lineDraw(event:MouseEvent):void
{
myshape.graphics.lineTo(mouseX,mouseY);
event.updateAfterEvent();
checkIt();
}
function stopDraw(event:MouseEvent):void
{
alreadyDrawn.graphics.copyFrom(myshape.graphics);
stage.removeEventListener(MouseEvent.MOUSE_MOVE, lineDraw);
stage.removeEventListener(MouseEvent.MOUSE_UP, stopDraw);
}
function checkIt()
{
if (alreadyDrawn.hitTestObject(Ball) == true)
{
trace("Hit The Balls");
myshape.graphics.clear();
myshape.graphics.lineStyle(12, 0xC807DE);
alreadyDrawn.graphics.clear(); // clear this too
stopDraw(null); // stop active draw, if any
}
}
copyFrom() manual reference
Interesting question~
I think the problem may be you forgot to moveTo after clear.
Here is my fix:
Pass mouseX, mouseY to checkIt.
checkIt( mouseX, mouseY );
function checkIt( mouseX:Number, mouseY:Number ):void
{
if (alreadyDrawn.hitTestObject(Ball))//you don't need == true here
{
trace("Hit The Balls");
myshape.graphics.clear();
myshape.graphics.lineStyle(12, 0xC807DE);
myshape.graphics.moveTo(mouseX,mouseY);
}
}

AS3: why does the MC "tremble" when selected?

I'm trying to make a simple function to select and drag a MovieClip, without using the startDrag() function.
I have a few MCs on the stage, when mouse down on a MC, I want the MC to move with the mouse. But when I hold the mouse down, the MC starts to "tremble" and I'm not sure why.
I have the code inside each MC for other reasons. Here is what I have so far:
var selectX:Number; //x coordinate of mouse click (to select right point on mc on mouse down)
this.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
this.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
function mouseDownHandler(e:MouseEvent):void {
selectX = this.x - mouseX;
addEventListener(Event.ENTER_FRAME, onEnterFrameHandler);
}
function mouseUpHandler(e:MouseEvent):void {
mouseX2 = mouseX;
removeEventListener(Event.ENTER_FRAME, onEnterFrameHandler);
}
function onEnterFrameHandler(e:Event):void {
this.x = mouseX + selectX + stage.x;
}
This is happening because you are using mouseX of the inside of the movieclip. but when you are trying to set the x of the movieClip it sets the x on the parent movieclip.
e.g.:
mainClip
|-- DragableButton
when you adding DragableButton.x = 100, it is x position insided of the mainClip.
and when your code is taking mouseX inside of the DragableButton, the real mouseX = x + mouseX. and since mouseX inside of the DragableButton is equals e.g. 20, and you adding: selectX = this.x - mouseX -> if you have selectX = 100 - 20. but not 100 - 120 as it should be.
so if you still want to keep to your code change it a bit:
var selectX:Number; //x coordinate of mouse click (to select right point on mc on mouse down)
var mouseX2:Number;
this.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
this.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
function mouseDownHandler(e:MouseEvent):void {
selectX = this.x - parent.mouseX;
// selectX = this.x - stage.mouseX;
addEventListener(Event.ENTER_FRAME, onEnterFrameHandler);
}
function mouseUpHandler(e:MouseEvent):void {
mouseX2 = parent.mouseX;
removeEventListener(Event.ENTER_FRAME, onEnterFrameHandler);
}
function onEnterFrameHandler(e:Event):void {
this.x = parent.mouseX + selectX;
// this.x = stage.mouseX + selectX;
}
p.s. stage.x = 0, it will be always. unless you change the property.
p.s.s. stage is only one and same instance no matter from which MC you are trying to get it.
my suggestion draging would be:
this.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
function mouseDownHandler(e:MouseEvent):void
{
this.startDrag();
stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
}
function mouseUpHandler(e:MouseEvent):void
{
this.stopDrag();
stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
}
I think the movieclip is trembling because during your drag, your application keeps calling mouseDownHandler, changing the selectX.
Try removing the MOUSE_DOWN event listener. In mouseDownHandler, make that the first thing you do (this is also a good practice for preventing memory leaks). You can add the listener back when you mouse up (and then remove the mouse up listener).
why are you using Event.ENTER_FRAME event (costly), try to use MouseEvent.MOUSE_MOVE like this.
function mouse_move(e:Event)
{
this.x = mouseX + selectX + stage.x;
}
and remove this event handler on mouse up.

startDrag - stop diagonal movement

Is there a way to have a MovieClip with startDrag, but to force only horizontal and vertical (i.e. not diagonal) movement?
Here is my solution. It tracks the mouseX and mouseY on click and compares it to last position. Finds out which direction the mouse is mainly moving then moves the object there. You may want to add some extra logic to lock the object to the nearest 10th unit or whatever unit size you want to form a snap grid for use in games or organized placement of the object.
Update: I went ahead and added a snapNearest function to help control the movement.
import flash.events.MouseEvent;
import flash.events.Event;
dragObj.addEventListener(MouseEvent.MOUSE_DOWN, dragIt);
var curX:Number = 0;
var curY:Number = 0;
var oldX:Number = 0;
var oldY:Number = 0;
var gridUnit:Number = 25;
function dragIt(e:MouseEvent):void
{
// set x,y on down
oldX = mouseX;
oldY = mouseY;
// add mouse up listener so you know when it is released
stage.addEventListener(MouseEvent.MOUSE_UP, dropIt);
stage.addEventListener(Event.ENTER_FRAME, moveIt);
trace("Start Drag")
}
function moveIt(e:Event):void
{
// figure out what the main drag direction is and move the object.
curX = mouseX;
curY = mouseY;
// figure out which is the larger number and subtract the smaller to get diff
var xDiff:Number = curX > oldX ? curX - oldX : oldX - curX;
var yDiff:Number = curY > oldY ? curY - oldY : oldY - curY;
if(xDiff > yDiff) {
dragObj.x = snapNearest(mouseX, gridUnit);
}else{
dragObj.y = snapNearest(mouseY, gridUnit);
}
oldX = mouseX;
oldY = mouseY;
}
function dropIt(e:MouseEvent):void
{
//remove mouse up event
stage.removeEventListener(MouseEvent.MOUSE_UP, dropIt);
stage.removeEventListener(Event.ENTER_FRAME, moveIt);
trace("Stop Drag")
}
// snap to grid
function snapNearest(n:Number, units:Number):Number
{
var num:Number = n/units ;
num = Math.round(num);
num *= units;
return num;
}
yes. there are a few options.
A. you can choose to use the startDrag() function and supply it's 2nd parameter with a bounds rectangle for your draggable object. something like;
dragSprite.startDrag(false, new Rectangle(0, 0, 20, stage.stageHeight));
B. you can set your draggable object to listen for mouse events, moving it according to the mouse movements. something like:
dragSprite.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownEventHandler);
function mouseDownEventHandler(evt:MouseEvent):void
{
stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveEventHandler);
stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpEventHandler);
}
function mouseMoveEventHandler(evt:MouseEvent):void
{
//only move dragSprite horizontally
//dragSprite.y = evt.stageY;
dragSprite.x = evt.stageX;
}
function mouseUpEventHandler(evt:MouseEvent):void
{
stage.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveEventHandler);
stage.removeEventListener(MouseEvent.MOUSE_UP, mouseUpEventHandler);
}
You could use a modifier key, for instance normal behavior would be horizontal & press down the shift key to move vertically.
function mouseMoveEventHandler(evt:MouseEvent):void
{
if(!evt.shiftKey)
dragSprite.x = evt.stageX;
else
dragSprite.y = evt.stageY;
}
You can only constrain to one axis or the other (using a constraint rectangle) But diagonal movement would be possible in the method you propose, unless you also define some other limits... for example a grid.