thanks very much again

I’m lost, bro. Sorry! When I paste this into a new FLA configured for AS3, it works for me. Now … that said, I did see where my suggestion could be improved. AS3 is always turning up sticky points like this.

In AS2, the mouseMove registers even when the mouse isn’t over the object in question (mc, in this case). In AS3, that doesn’t seem to be the case. For that reason, instead of assigning the MOUSE_MOVE handler to mc, it would be better to temporarily associate it with the Stage instead — then remove it later, as shown above. The only change is a revision to two lines, from mc to stage:

function dragHandler(evt:MouseEvent):void {
  stage.addEventListener(MouseEvent.MOUSE_UP, dragStopHandler);
  stage.addEventListener(MouseEvent.MOUSE_MOVE, moveHandler);
};

function dragStopHandler(evt:MouseEvent):void {
  stage.removeEventListener(MouseEvent.MOUSE_UP, dragStopHandler);
  stage.removeEventListener(MouseEvent.MOUSE_MOVE, moveHandler);
};

Heh, totally luck of the draw. I’ve been behind on my blog and on the Adobe forums for a few months. I do answer when I can — ASAP when I can — but sometimes I go for insanely long stretches!

In both AS2 and AS3, the MovieClip class is a dynamic class, which means it can have properties added to it at runtime. These origX and origY variables are properties in the sense that they’re being assigned to an object instance (a MovieClip instance) at runtime, but in practice, they’re no different from timeline variables (the sort you declare with var in keyframe code. But you can only type variables, not properties. So you could do this:

var mcOrigX:Number = some number

but when that variable is a property, no matter what version of ActionScript, it can only be this:

someObjectReference.mcOrigX = some number

Event handling is certainly more wordy in AS3, that’s for sure. In principle, though, you’re doing the same thing you did before — just with different syntax. You’re still associating a function with an event, but in AS3, you use the EventDispatcher.addEventListener() method, which is inherited by movie clips and plenty of other AS3 entities. Let’s step through the conversion (assuming the movie clip’s instance name is still mc):

mc.buttonMode = true;
mc.origX = mc.x;
mc.origY = mc.y;

The only real difference here is that you’re setting the Sprite.buttonMode property of this movie clip to true, so that you get the finger cursor when you mouse over the clip (in AS3, movie clips inherit functionality from the Sprite class). You’ll also notice that the formerly _x and _y properties have lost their underscores.

Here are the first two event handlers, which kick everything off:

mc.addEventListener(MouseEvent.MOUSE_DOWN, dragHandler);
mc.addEventListener(MouseEvent.MOUSE_UP, dragStopHandler);

This isn’t so different from the AS2 approach; it’s just that instead of referencing the object (mc) and then associating a function directly to one of the object’s events …

mc.onPress = function() { ... };

… you’re using that addEventListener() method as an intermediary. In addition, we’re using named functions now, instead of function literals, as shown in the above tutorial. The main reason we need named functions now is because of how AS3 unhooks functions when they’re no longer needed. In AS2, you could just set the event reference in question to null; here, we’ll be using the removeEventListener() method, which needs a name by which to reference the function in question.

Bear in mind, AS2 could use named functions too. It is, in fact, arguably a better practice to give your functions names, in case you need to reference them again later.

Here’s how the AS2 version would look with a named function:

// original
mc.onPress = function():Void {
  this.onMouseMove = function():Void {
    var angle:Number = Math.atan2(
    ...

// named
mc.onPress = dragHandler;

function dragHandler():Void {
  this.onMouseMove = moveHandler;
};

function moveHandler():Void {
    var angle:Number = Math.atan2(
    ...

Please note, these are arbitrary names. You could call your function strudelKicker() if you wanted to. Note, too, that I’m typing my functions with the :Void suffix, which simply lets Flash know that these functions don’t return any values. This sort of post colon suffix is optional in AS1, AS2, and AS3, but it has certain benefits, including code hinting, compile-time error notification, and — in AS3 — even runtime error notification and improved RAM usage. (Note that :Void becomes :void in AS3.)

So, to get back on track, you’ll need the named functions in AS3 because removeEventListener() needs function names. Here are the arbitrarily named functions noted in the event listener hook-ups so far:

function dragHandler(evt:MouseEvent):void {
  stage.addEventListener(MouseEvent.MOUSE_UP, dragStopHandler);
  mc.addEventListener(MouseEvent.MOUSE_MOVE, moveHandler);
};

function dragStopHandler(evt:MouseEvent):void {
  stage.removeEventListener(MouseEvent.MOUSE_UP, dragStopHandler);
  mc.removeEventListener(MouseEvent.MOUSE_MOVE, moveHandler);
};

[Note: See additional comments between Sean and me, following this reply, for a reason to replace mc with stage in two places.]

When the mouse is pressed (MOUSE_DOWN), the Stage will get a MOUSE_UP listener, because none of AS3′s classes has an onReleaseOutside event. When the Stage hears a mouse release, that’ll accomplish the same thing here as an onReleaseOutside would have done in AS2.

Other than that, when mc is pressed, it’ll be assigned a MOUSE_MOVE handler, just like in the AS2 version. When the mouse is released — either over mc or the Stage — that MOUSE_MOVE handler will be removed.

Finally, the brains of the outfit, which is largely the same as it was before:

function moveHandler(evt:MouseEvent):void {
  var angle:Number = Math.atan2(
    stage.mouseY - mc.origY,
    stage.mouseX - mc.origX
  );
  var distance:Number = Math.sqrt(
    Math.pow(stage.mouseX - mc.origX, 2) +
    Math.pow(stage.mouseY - mc.origY, 2)
  );
  if (Math.ceil(distance) >= 100) {
    mc.x = mc.origX + (Math.cos(angle) * 100);
    mc.y = mc.origY + (Math.sin(angle) * 100);
  } else {
    mc.x = stage.mouseX;
    mc.y = stage.mouseY;
  }
};

Look over it carefully, and you’ll see that only minor things have changed, such as a reference to the Stage rather than _root, mouseX instead of _xmouse, and the like.

Hope this helps! Here it is again, all in one shot:

mc.buttonMode = true;
mc.origX = mc.x;
mc.origY = mc.y;

mc.addEventListener(MouseEvent.MOUSE_DOWN, dragHandler);
mc.addEventListener(MouseEvent.MOUSE_UP, dragStopHandler);

function dragHandler(evt:MouseEvent):void {
  stage.addEventListener(MouseEvent.MOUSE_UP, dragStopHandler);
  mc.addEventListener(MouseEvent.MOUSE_MOVE, moveHandler);
};

function dragStopHandler(evt:MouseEvent):void {
  stage.removeEventListener(MouseEvent.MOUSE_UP, dragStopHandler);
  mc.removeEventListener(MouseEvent.MOUSE_MOVE, moveHandler);
};

function moveHandler(evt:MouseEvent):void {
  var angle:Number = Math.atan2(
    stage.mouseY - mc.origY,
    stage.mouseX - mc.origX
  );
  var distance:Number = Math.sqrt(
    Math.pow(stage.mouseX - mc.origX, 2) +
    Math.pow(stage.mouseY - mc.origY, 2)
  );
  if (Math.ceil(distance) >= 100) {
    mc.x = mc.origX + (Math.cos(angle) * 100);
    mc.y = mc.origY + (Math.sin(angle) * 100);
  } else {
    mc.x = stage.mouseX;
    mc.y = stage.mouseY;
  }
};

[Note: See additional comments between Sean and me, following this reply, for a reason to replace mc with stage in two places.]

Glad to hear it.

thanks david you’re a life saver