Jump to content
Search Community

Drag and throw effect

Leo75 test
Moderator Tag

Recommended Posts

Hello everyone!

I am struggling with the smooth movement of my MC.

I am able to move it around, but want to make it smooth, like google maps or something like that. Right now, it looks very "abrupt" at the end. I am looking for something called drag and throw, i guess. Where when the user releases the mc, it still moves a bit until stops. But i cant use on EnterFrame, since i dont want to keep calling it over and over. I saw the Club GreenSock and its tweening platform and was wondering if it can help me.

Here is the code that i am using:

stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
mc_square.addEventListener(MouseEvent.MOUSE_DOWN, start_drag);
mc_square.addEventListener(MouseEvent.MOUSE_UP, stop_drag);
function mouseMoveHandler(evt:MouseEvent):void
{
   //Here i have my own cursor.
	    //mc_my_cursor.x = evt.stageX;
	    //mc_my_cursor.y = evt.stageY;
}
function start_drag(e:MouseEvent):void
{
    mc_square.startDrag();
}

function stop_drag(e:MouseEvent):void
{
    mc_square.stopDrag();
}

 

Kind regards,

Leo.

Link to comment
Share on other sites

Sure, it'd probably look something like this (untested):

 

TweenPlugin.activate([ThrowPropsPlugin]);

var bounds:Rectangle = new Rectangle(0, 0, 800, 600);
var t1:uint, t2:uint, y1:Number, y2:Number, x1:Number, x2:Number, xOverlap:Number, xOffset:Number, yOverlap:Number, yOffset:Number;

mc_square.addEventListener(MouseEvent.MOUSE_DOWN, start_drag);

function mouseMoveHandler(event:MouseEvent):void {
//Here i have my own cursor.
//mc_my_cursor.x = event.stageX;
//mc_my_cursor.y = event.stageY;

var y:Number = this.mouseY - yOffset;
//if mc's position exceeds the bounds, make it drag only half as far with each mouse movement (like iPhone/iPad behavior)
if (y > bounds.top) {
	mc_square.y = (y + bounds.top) * 0.5;
} else if (y < bounds.top - yOverlap) {
	mc_square.y = (y + bounds.top - yOverlap) * 0.5;
} else {
	mc_square.y = y;
}
var x:Number = this.mouseX - xOffset;
if (x > bounds.left) {
	mc_square.x = (x + bounds.left) * 0.5;
} else if (x < bounds.left - xOverlap) {
	mc_square.x = (x + bounds.left - xOverlap) * 0.5;
} else {
	mc_square.x = x;
}
var t:uint = getTimer();
//if the frame rate is too high, we won't be able to track the velocity as well, so only update the values 20 times per second
if (t - t2 > 50) {
	x2 = x1;
	x1 = mc_square.x;
	y2 = y1;
	t2 = t1;
	y1 = mc_square.y;
	t1 = t;
}
event.updateAfterEvent();

}
function start_drag(e:MouseEvent):void {
TweenLite.killTweensOf(mc_square);
x1 = x2 = mc_square.x;
xOffset = this.mouseX - mc_square.x;
xOverlap = Math.max(0, mc_square.width - bounds.width);
y1 = y2 = mc_square.y;
yOffset = this.mouseY - mc_square.y;
yOverlap = Math.max(0, mc_square.height - bounds.height);
t1 = t2 = getTimer();
mc_square.stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
mc_square.stage.addEventListener(MouseEvent.MOUSE_UP, stop_drag);
}

function stop_drag(e:MouseEvent):void {
mc_square.stage.removeEventListener(MouseEvent.MOUSE_UP, stop_drag);
mc_square.stage.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
var time:Number = (getTimer() - t2) / 1000;
var xVelocity:Number = (mc_square.x - x2) / time;
var yVelocity:Number = (mc_square.y - y2) / time;
ThrowPropsPlugin.to(mc_square, {throwProps:{
							 y:{velocity:yVelocity, max:bounds.top, min:bounds.top - yOverlap, resistance:300},
							 x:{velocity:xVelocity, max:bounds.left, min:bounds.left - xOverlap, resistance:300}
						 }, ease:Strong.easeOut
						}, 10, 0.3, 1);
}

 

Notice that I created a "bounds" Rectangle that doesn't let your object go outside a certain area, but you can adjust those values however you please.

Link to comment
Share on other sites

Sure, it'd probably look something like this (untested):

 

TweenPlugin.activate([ThrowPropsPlugin]);

var bounds:Rectangle = new Rectangle(0, 0, 800, 600);
var t1:uint, t2:uint, y1:Number, y2:Number, x1:Number, x2:Number, xOverlap:Number, xOffset:Number, yOverlap:Number, yOffset:Number;

mc_square.addEventListener(MouseEvent.MOUSE_DOWN, start_drag);

function mouseMoveHandler(event:MouseEvent):void {
//Here i have my own cursor.
//mc_my_cursor.x = event.stageX;
//mc_my_cursor.y = event.stageY;

var y:Number = this.mouseY - yOffset;
//if mc's position exceeds the bounds, make it drag only half as far with each mouse movement (like iPhone/iPad behavior)
if (y > bounds.top) {
	mc_square.y = (y + bounds.top) * 0.5;
} else if (y < bounds.top - yOverlap) {
	mc_square.y = (y + bounds.top - yOverlap) * 0.5;
} else {
	mc_square.y = y;
}
var x:Number = this.mouseX - xOffset;
if (x > bounds.left) {
	mc_square.x = (x + bounds.left) * 0.5;
} else if (x < bounds.left - xOverlap) {
	mc_square.x = (x + bounds.left - xOverlap) * 0.5;
} else {
	mc_square.x = x;
}
var t:uint = getTimer();
//if the frame rate is too high, we won't be able to track the velocity as well, so only update the values 20 times per second
if (t - t2 > 50) {
	x2 = x1;
	x1 = mc_square.x;
	y2 = y1;
	t2 = t1;
	y1 = mc_square.y;
	t1 = t;
}
event.updateAfterEvent();

}
function start_drag(e:MouseEvent):void {
TweenLite.killTweensOf(mc_square);
x1 = x2 = mc_square.x;
xOffset = this.mouseX - mc_square.x;
xOverlap = Math.max(0, mc_square.width - bounds.width);
y1 = y2 = mc_square.y;
yOffset = this.mouseY - mc_square.y;
yOverlap = Math.max(0, mc_square.height - bounds.height);
t1 = t2 = getTimer();
mc_square.stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
mc_square.stage.addEventListener(MouseEvent.MOUSE_UP, stop_drag);
}

function stop_drag(e:MouseEvent):void {
mc_square.stage.removeEventListener(MouseEvent.MOUSE_UP, stop_drag);
mc_square.stage.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
var time:Number = (getTimer() - t2) / 1000;
var xVelocity:Number = (mc_square.x - x2) / time;
var yVelocity:Number = (mc_square.y - y2) / time;
ThrowPropsPlugin.to(mc_square, {throwProps:{
							 y:{velocity:yVelocity, max:bounds.top, min:bounds.top - yOverlap, resistance:300},
							 x:{velocity:xVelocity, max:bounds.left, min:bounds.left - xOverlap, resistance:300}
						 }, ease:Strong.easeOut
						}, 10, 0.3, 1);
}

 

Notice that I created a "bounds" Rectangle that doesn't let your object go outside a certain area, but you can adjust those values however you please.

 

 

Amazing! Will work on the payment right away.

Thanks again.

Regards,

Leo.

Link to comment
Share on other sites

You can get the plugins pretty much immediately when your payment is processed (should only take a few seconds). Did you not get redirected to the https://www.greensock.com/account/ page yet? You can log in there now and download the bonus zip file.

 

Thanks, just got the bonus zip file.

Is this a 24/7 forum? I will start working on it and will come back later.

Kind regards,

Leo.

Link to comment
Share on other sites

Well, the forums is online 24/7, of course, but we don't guarantee a certain response time (although you generally get a response within 48 hours, typically much less).

 

Good luck with your project. And welcome to the club!

 

Thanks!

Link to comment
Share on other sites

Are you asking how to unpack the bonus files and make sure your FLA can find the ThrowPropsPlugin? Or are you asking how to build your project completely?

 

In the bonus zip that you downloaded, just make sure you put the "com" folder in the same folder as your .fla file and then publish it from Flash.

 

If you're still having trouble, please try to be a little more specific and maybe post an .fla file that we can publish on our end to clearly see what's happening. Don't forget to zip it before posting it in the forums.

Link to comment
Share on other sites

Are you asking how to unpack the bonus files and make sure your FLA can find the ThrowPropsPlugin? Or are you asking how to build your project completely?

 

In the bonus zip that you downloaded, just make sure you put the "com" folder in the same folder as your .fla file and then publish it from Flash.

 

If you're still having trouble, please try to be a little more specific and maybe post an .fla file that we can publish on our end to clearly see what's happening. Don't forget to zip it before posting it in the forums.

 

Thanks a lot... the com folder is already in my fla folder...

i am just wondering about the imports... which one to import... i am using the example that u pasted here that was from the code that i am trying to make drag and throw...

Thanks for the attention and quick reply...

Regards,

Leo.

Link to comment
Share on other sites

I just tested it... Looking nice BUT its coming back to a certain position. I need it to just go and then stop smoothly... I am able to move it around, but keeps comming back to a certain position...

Here is the code:

 

import com.greensock.*;
import com.greensock.plugins.*;
import com.greensock.easing.*;
import flash.display.*;
import flash.geom.*;
import flash.events.*;
import flash.utils.*;

TweenPlugin.activate([ThrowPropsPlugin]);

var bounds:Rectangle = new Rectangle(0, 0, 800, 600);
var t1:uint, t2:uint, y1:Number, y2:Number, x1:Number, x2:Number, xOverlap:Number, xOffset:Number, yOverlap:Number, yOffset:Number;

mc_square.addEventListener(MouseEvent.MOUSE_DOWN, start_drag);

function mouseMoveHandler(event:MouseEvent):void {
   var y:Number = this.mouseY - yOffset;
   //if mc's position exceeds the bounds, make it drag only half as far with each mouse movement (like iPhone/iPad behavior)
   if (y > bounds.top) {
    mc_square.y = (y + bounds.top) * 0.5;
   } else if (y < bounds.top - yOverlap) {
    mc_square.y = (y + bounds.top - yOverlap) * 0.5;
   } else {
    mc_square.y = y;
   }
   var x:Number = this.mouseX - xOffset;
   if (x > bounds.left) {
    mc_square.x = (x + bounds.left) * 0.5;
   } else if (x < bounds.left - xOverlap) {
    mc_square.x = (x + bounds.left - xOverlap) * 0.5;
   } else {
    mc_square.x = x;
   }
   var t:uint = getTimer();
   //if the frame rate is too high, we won't be able to track the velocity as well, so only update the values 20 times per second
   if (t - t2 > 50) {
    x2 = x1;
    x1 = mc_square.x;
    y2 = y1;
    t2 = t1;
    y1 = mc_square.y;
    t1 = t;
   }
   event.updateAfterEvent();

}
function start_drag(e:MouseEvent):void {
   TweenLite.killTweensOf(mc_square);
   x1 = x2 = mc_square.x;
   xOffset = this.mouseX - mc_square.x;
   xOverlap = Math.max(0, mc_square.width - bounds.width);
   y1 = y2 = mc_square.y;
   yOffset = this.mouseY - mc_square.y;
   yOverlap = Math.max(0, mc_square.height - bounds.height);
   t1 = t2 = getTimer();
   mc_square.stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
   mc_square.stage.addEventListener(MouseEvent.MOUSE_UP, stop_drag);
}

function stop_drag(e:MouseEvent):void {
   mc_square.stage.removeEventListener(MouseEvent.MOUSE_UP, stop_drag);
   mc_square.stage.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
   var time:Number = (getTimer() - t2) / 1000;
   var xVelocity:Number = (mc_square.x - x2) / time;
   var yVelocity:Number = (mc_square.y - y2) / time;
   ThrowPropsPlugin.to(mc_square, {throwProps:{
							 y:{velocity:yVelocity, max:bounds.top, min:bounds.top - yOverlap, resistance:300},
							 x:{velocity:xVelocity, max:bounds.left, min:bounds.left - xOverlap, resistance:300}
						 }, ease:Strong.easeOut
					    }, 10, 0.3, 1);
}

 

Amazing work u guys are doing!

Thanks.

Leo.

Link to comment
Share on other sites

Sure, you can just remove the code that handles the bounds. Something like this:

 

import com.greensock.*;
import com.greensock.plugins.*;
import com.greensock.easing.*;
import flash.display.*;
import flash.geom.*;
import flash.events.*;
import flash.utils.*;

TweenPlugin.activate([ThrowPropsPlugin]);

var t1:uint, t2:uint, y1:Number, y2:Number, x1:Number, x2:Number, xOffset:Number, yOffset:Number;

mc_square.addEventListener(MouseEvent.MOUSE_DOWN, start_drag);

function mouseMoveHandler(event:MouseEvent):void {
   mc_square.y = this.mouseY - yOffset;
   mc_square.x = this.mouseX - xOffset;
   var t:uint = getTimer();
   //if the frame rate is too high, we won't be able to track the velocity as well, so only update the values 20 times per second
   if (t - t2 > 50) {
    x2 = x1;
    x1 = mc_square.x;
    y2 = y1;
    t2 = t1;
    y1 = mc_square.y;
    t1 = t;
   }
   event.updateAfterEvent();

}
function start_drag(e:MouseEvent):void {
   TweenLite.killTweensOf(mc_square);
   x1 = x2 = mc_square.x;
   xOffset = this.mouseX - mc_square.x;
   y1 = y2 = mc_square.y;
   yOffset = this.mouseY - mc_square.y;
   t1 = t2 = getTimer();
   mc_square.stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
   mc_square.stage.addEventListener(MouseEvent.MOUSE_UP, stop_drag);
}

function stop_drag(e:MouseEvent):void {
   mc_square.stage.removeEventListener(MouseEvent.MOUSE_UP, stop_drag);
   mc_square.stage.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
   var time:Number = (getTimer() - t2) / 1000;
   var xVelocity:Number = (mc_square.x - x2) / time;
   var yVelocity:Number = (mc_square.y - y2) / time;
   ThrowPropsPlugin.to(mc_square, {throwProps:{
							 y:{velocity:yVelocity, resistance:300},
							 x:{velocity:xVelocity, resistance:300}
						 }, ease:Strong.easeOut
					    }, 10, 0.3, 1);
}

Link to comment
Share on other sites

Would u mind if i send u the entire code that i am using so u can have a look why it is not working?

It worked like a charm with the example that i gave. But with the main app that i am working with as a hobbie, it just didnt work.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...