Leo75 Posted August 25, 2012 Share Posted August 25, 2012 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 More sharing options...
GreenSock Posted August 25, 2012 Share Posted August 25, 2012 It sounds like this is exactly what you're looking for: http://www.greensock.com/throwprops/ There's even sample code included for dragging/throwing in the interactive example. Does that help? Link to comment Share on other sites More sharing options...
Leo75 Posted August 25, 2012 Author Share Posted August 25, 2012 It sounds like this is exactly what you're looking for: http://www.greensock.com/throwprops/ There's even sample code included for dragging/throwing in the interactive example. Does that help? Thanks for the reply. Yes, it is what i am looking for. Now, next step is to become some kind of premioum member? Kind regards, Leo. Link to comment Share on other sites More sharing options...
GreenSock Posted August 25, 2012 Share Posted August 25, 2012 Yes indeed, the ThrowPropsPlugin is a membership benefit for "Shockingly Green" and corporate members. http://www.greensock.com/club/ Link to comment Share on other sites More sharing options...
Leo75 Posted August 25, 2012 Author Share Posted August 25, 2012 Yes indeed, the ThrowPropsPlugin is a membership benefit for "Shockingly Green" and corporate members. http://www.greensock.com/club/ Thanks again, for the quick reply. Would i also get help on adapting the plugins for that same code that i displayed before. I just need it to be drag and throw. Kind Regards, Leo. Link to comment Share on other sites More sharing options...
GreenSock Posted August 25, 2012 Share Posted August 25, 2012 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 More sharing options...
Leo75 Posted August 25, 2012 Author Share Posted August 25, 2012 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 More sharing options...
Leo75 Posted August 25, 2012 Author Share Posted August 25, 2012 Amazing! Will work on the payment right away. Thanks again. Regards, Leo. I am getting an error. "Pls choose another card" Is there any other way to pay for it? Link to comment Share on other sites More sharing options...
GreenSock Posted August 25, 2012 Share Posted August 25, 2012 You can use PayPal or any major credit card (VISA, MasterCard, Discover or AMEX). Link to comment Share on other sites More sharing options...
Leo75 Posted August 25, 2012 Author Share Posted August 25, 2012 Ok, just used paypal. Cant wait to use those libraries and see it working. Pls let me know when i can start. Kind Regards, Leo. Link to comment Share on other sites More sharing options...
GreenSock Posted August 25, 2012 Share Posted August 25, 2012 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. Link to comment Share on other sites More sharing options...
Leo75 Posted August 25, 2012 Author Share Posted August 25, 2012 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 More sharing options...
GreenSock Posted August 25, 2012 Share Posted August 25, 2012 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! Link to comment Share on other sites More sharing options...
Leo75 Posted August 25, 2012 Author Share Posted August 25, 2012 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 More sharing options...
Leo75 Posted August 25, 2012 Author Share Posted August 25, 2012 I am back... so, using the previous example with the demo zip that i have now... how do i proceed? By the way, i am a newbie on AS3 Flash. Regards, Leo. Link to comment Share on other sites More sharing options...
GreenSock Posted August 25, 2012 Share Posted August 25, 2012 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 More sharing options...
Leo75 Posted August 25, 2012 Author Share Posted August 25, 2012 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 More sharing options...
GreenSock Posted August 25, 2012 Share Posted August 25, 2012 import com.greensock.*; import com.greensock.plugins.*; import com.greensock.easing.*; import flash.display.*; import flash.geom.*; import flash.events.*; import flash.utils.*; Link to comment Share on other sites More sharing options...
Leo75 Posted August 26, 2012 Author Share Posted August 26, 2012 import com.greensock.*; import com.greensock.plugins.*; import com.greensock.easing.*; import flash.display.*; import flash.geom.*; import flash.events.*; import flash.utils.*; Thanks a lot!!! Link to comment Share on other sites More sharing options...
Leo75 Posted August 26, 2012 Author Share Posted August 26, 2012 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 More sharing options...
Leo75 Posted August 26, 2012 Author Share Posted August 26, 2012 Just like google maps... lets say. Throws the mc and it will eventually stop smoothly... Link to comment Share on other sites More sharing options...
GreenSock Posted August 26, 2012 Share Posted August 26, 2012 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 More sharing options...
Leo75 Posted August 26, 2012 Author Share Posted August 26, 2012 Thanks A LOT ! Working great! Regards, Leo. Link to comment Share on other sites More sharing options...
Leo75 Posted August 26, 2012 Author Share Posted August 26, 2012 For some reason that i dont know, it works with the example that i provided but not with what i am doing... Link to comment Share on other sites More sharing options...
Leo75 Posted August 26, 2012 Author Share Posted August 26, 2012 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now