itvbadmin

AS2->AS3: A Simple Drag And Drop Game plus Hiding/Showing/Changing The Mouse Pointer

One of the things designers love to do in the Flash IDE is change the mouse pointer. This was a pretty simple task in AS2, but in AS3 there are few complications. The following short tutorial describes how to hide/show/change the mouse pointer in both AS2 and AS3. It then takes the concept one step further to discuss dragging and dropping objects in AS2 and AS3

Let’s say that you want to create the following Flash application:

1. When you press the mouse button, the mouse pointer disappears and is replaced with a cross hairs

2. When you let the mouse-button up, the cross hairs disappears, and the mouse pointer reappears.

One of the nice things about AS3 in this case, is that the basic functions are very similar, but the implementation is quite different.

Flash AS2

For this example, we have created a “crosshairs” graphic as a MovieClip in the library and exported it as “pointer”. The most important functions for hiding the mouse, showing the mouse, and changing the mouse pointer are as follows:

  • Mouse.hide() : Hides the mouse pointer from the screen using the global Mouse object.
  • Mouse.show() : Displays the mouse pointer on the screen by using the global Mouse object.
  • [MovieClip].startDrag(): A MovieClip method that begins the mouse dragging the MovieClip
  • [MovieClip].stopDrag(): A MovieClip method that stops the mouse dragging the MovieClip

In Flash AS2, you might write the code this way and put it directly in your .fla.

[cc lang=”javascript” width=”550″]var mouseptr:MovieClip = this.attachMovie(“pointer”,”crosshairs”,1000);
mpouseptr._visible = false;

this.onMouseDown = function() {
hideMouse();
}

this.onMouseUp = function() {
showMouse();
}

function showMouse() {
mouseptr._visible = false;
mouseptr.stopDrag();
Mouse.show();
}

function hideMouse() {
mouseptr._visible = true;
mouseptr.startDrag(true);
Mouse.hide();
}

[/cc]

/images/blog/mouseas2.swf

 
Flash AS3

However, in AS3 we would want to create a document class for the application, and then modify the same code so that it is AS3 compatible. The good news, is that all the basic functions (Mouse.hide(), Mouse.show(), MovieClip.startDrag(), MovieClip.stopDrag()) work nearly the same in AS3 as they did in AS2. However, there are several differences that need to be highlighted

  1. MouseAS3 is set as the Document class for this .fla in the Flash IDE. That means it will be automatically created when the .SWF runs.
  2. Instead of using the onMouseXXX events from AS2, we need to use the addEventListener() method of stage, and listen for both MouseEvent.MOUSE_DOWN and MouseEvent.MOUSE_UP
  3. Where we used the “_visible” property of the MovieClip in AS2, we can use this.addChild() and this.removeChild() in AS3 for a cleaner program.
  4. Instead of exporting “pointer” in the Flash library, we set it’s class to be “pointer”. This means we can simply instantiate it with “new pointer()” instead of using the clumsy “MovieClip.attachMovie()” from AS2.

Here is what the code might look like in AS3.

 

[cc lang=”javascript” width=”550″]package
{
import flash.display.MovieClip;
import flash.ui.Mouse;
import flash.events.MouseEvent;

public class MouseAS3 extends MovieClip
{
var mouseptr:MovieClip = new pointer();

public function MouseAS3() {
stage.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDownEvent);
stage.addEventListener(MouseEvent.MOUSE_UP, onMouseUpEvent);
}

public function onMouseDownEvent(e:MouseEvent) {
hideMouse();
}

public function onMouseUpEvent(e:MouseEvent) {
showMouse();
}

public function showMouse() {
removeChild(mouseptr);
mouseptr.stopDrag();
Mouse.show();
}

public function hideMouse() {
addChild(mouseptr);
mouseptr.startDrag(true);
Mouse.hide();
}
}
}

[/cc]

/images/blog/mouseas3.swf

 

A Simple Drag And Drop Game In AS2 and AS3

Now that we can make a simple application that hides and shows the mouse in AS3, plus changes the mouse pointer, in both AS2 and AS3, why don’t we take it step further and do something useful with this concept: create a simple drag and drop game.

The “game” randomly creates 10 instances of the “pointer”, and then allows the player to move them around. It really is not much of a game, but the basis of it could be used for a multitude of different applications.

 

Flash AS2

In AS2, creating a “Drag and Drop” style game was very easy, but suffered from some inconsistencies that made the process a little on the bizarre side. Just for your own edification, I will describe the two major types of “drag and drop” patterns, and how they differ:

Click And Drag: When a user clicks on an item, holds the mouse down to drag it, and then releases the mouse button to drop it. This is the type of drag and drop we are going to simulate here.

Click And Stick: When a user clicks on an item and releases the mouse button, but the item continues to be dragged until the user clicks the mouse again. We want to avoid “click and stick” for this demonstration because in practice, users are much more comfortable with Click And Drag,

In AS2, to simulate Click And Drag, you needed to use the onPress and onRelease events of a MovieClip. The onPress event is fired when the user clicks the mouse button down, and the onRelease event is fired then the button is let-up. Only while the button is down, the user can move the object around, and thus you get the “Click And Drag” effect. To create this effect, we create two functions, dragObject() and dropObject() and set the onPress and onRelease call-back functions to each accordingly. Since Flash AS2 scoped call-back function to the object that created the event, not the object container, all we had to do was call this.startDrag() and this.stopDrag() in the respective functions, to get the desired effect.

The possible AS2 code for creating application of this type is below:

[cc lang=”javascript” width=”550″]var objectArray:Array = new Array();
for (var i =0;i<10;i++) {
objectArray[i] = this.attachMovie("pointer","crosshairs"+i,1000+i);
objectArray[i]._x = Math.floor(Math.random() * 550);
objectArray[i]._y = Math.floor(Math.random() * 400);
objectArray[i].onPress = dragObject;
objectArray[i].onRelease = dropObject;
}

function dropObject() {
this.stopDrag();
}

function dragObject() {
this.startDrag(true);
}

[/cc]

/images/blog/mousedadas2.swf

Flash AS3

To create the “Click And Drag” game in AS3, we need to do nearly everything we did for the changing the mouse in AS3, and take it a few steps further.

  1. We create a document class, this time named MouseDADAS3.
  2. We still use a for:next loop to create the 10 objects, but we need to make many changes inside the loop for AS3:
    • Use”new pointer() instead of attachMovie().
    • Use the .x and .y properties of each MovieClip, not ._x or ._y as we did in AS2
    • Add Event Listeners for both MouseEvent.MOUSE_DOWN and MouseEvent.MOUSE_UP, because onPress and onRelease no longer exists in AS3.
    • Set buttonMode and useHandCursor to true for each object so that they will act like the objects in the AS2 version and have a hand show-up when the mouse pointer rolls over them.
  3. Since the call-back function in AS3 are no longer scoped to the object that created them, we cannot simply call this.startDrag() and this.stopDrag(). Instead, we need to use the target attribute of the MouseEvent passed to the listener function when the event is created. The target represents the object that created the event. We can use target just like we used this in the AS2 version.

 

[cc lang=”javascript” width=”550″]package
{
import flash.display.MovieClip;
import flash.ui.Mouse;
import flash.events.MouseEvent;

public class MouseDADAS3 extends MovieClip
{
var objectArray:Array = new Array();

public function MouseDADAS3() {
for (var i =0;i<10;i++) {
objectArray[i] = new pointer();
objectArray[i].x = Math.floor(Math.random() * 550);
objectArray[i].y = Math.floor(Math.random() * 400);
objectArray[i].addEventListener(MouseEvent.MOUSE_DOWN, dragObject);
objectArray[i].addEventListener(MouseEvent.MOUSE_UP, dropObject);
objectArray[i].buttonMode = true;
objectArray[i].useHandCursor = true;
this.addChild(objectArray[i])
}
}

function dropObject(e:MouseEvent) {
e.target.stopDrag();

}

function dragObject(e:MouseEvent) {
e.target.startDrag(true);

}

}
}
[/cc]

/images/blog/mousedadas3.swf

And that is all there is to it. This simple dragging “game” could be easily turned into a multitude of different actual games like matching , dress-up, object manipulation contests, and many other concepts. Watch out for a possible “part 2” of this tutorial that explores some of those ideas.

You can download the source code for this tutorial here: as2toas3mouse.zip

 

Leave a Reply