2.4 Drag and Drop

This exercise aims to illustrate how to drag around objects on the stage in AS3, and how to organize objects in Flash’s display list hierarchy. For this example, we will use 2 objects: a circle and a square.

1. First, some thoughts on drag and drop, and on Flash’s handling of display objects.

As Adobe states: “Each application built with ActionScript 3.0 has a hierarchy of displayed objects known as the display list. The display list contains all the visible elements in the application.” (from http://www.adobe.com/devnet/flash/quickstart/display_list_programming_as3/)

The stage is the “main, top-level container that holds the entire object hierarchy of everything in your movie that is displayed on the screen” (from http://www.flashandmath.com/intermediate/children/stage.html). Until now, we’ve been adding display objects to the stage. However, when we need to sort out object hierarchies, it is best not to add it to the stage, as the stage contains other elements (namely, the main timeline). If we don’t specify stage, just “addChild”, the object will be added to the main timeline, which is contained by the stage (more on this on http://www.adobe.com/devnet/flash/quickstart/display_list_programming_as3/, including a chart). The main timeline can also be called “this” in our example, since we have been adding code to it (as I mentioned in one of the early exercises).

Object hierarchy is typically important for drag and drop, because usually the object we start dragging moves to the top of the other objects on screen. The hierarchy in the display list is defined by an index, similarly to how arrays function (0 being the lowest). setChildIndex is the method in AS3 that changes this index, and consequently the positioning of the object relatively to others (top/bottom/middle…).

Let’s now move to our example, but I’ll also leave one more link of another exercise that addresses these issues: http://www.republicofcode.com/tutorials/flash/as3displaylist/ And if you still would like further reading, this other link is also interesting: http://developer.yahoo.com/flash/articles/display-list.html.

2. Let’s create our 2 objects for dragging around the stage, and add them to the main timeline (not the stage) by using simply addChild:

var myCircle:Sprite = new Sprite();
addChild(myCircle);
myCircle.x=150;
myCircle.y=150;
myCircle.graphics.beginFill(0x8B0000);
myCircle.graphics.drawCircle(0,0,50)

var mySquare:Sprite = new Sprite();
addChild(mySquare);
mySquare.x=350;
mySquare.y=150;
mySquare.graphics.beginFill(0x00008B);
mySquare.graphics.drawRect(0,0,100,100)

3. Now, we will create a listener to associate with the circle, and a function (dragCircle) to allow us to drag it around. The setChildIndex method allows us to put the circle on top of the square. This method accepts 2 parameters: the name of the object we want to move, and the index we want to move it to. The object is “myCircle”, the index is the top index in our list, which is 1 (remember our example about arrays). We only have 2 objects, so one will necessarily occupy index 0, the other index 1. If we move the object one object up, it will push the others (in this case, the other) down on the list.

The method for starting to drag one object is startDrag(). The code for this is:

myCircle.addEventListener(MouseEvent.MOUSE_DOWN,dragCircle);
function dragCircle(e:MouseEvent):void {
myCircle.startDrag();
setChildIndex(myCircle,1);
}

Note that the mouse event is MOUSE_DOWN. We will use MOUSE_UP for stopping to drag.

4. We now need a listener and a function to stop dragging. The method is stopDrag(), and we don’t need to associate it to any particular object, since we cannot drag multiple objects:

myCircle.addEventListener(MouseEvent.MOUSE_UP,releaseCircle);
function releaseCircle(e:MouseEvent):void {
stopDrag();
}

5. A similar code should be used with the square:

mySquare.addEventListener(MouseEvent.MOUSE_DOWN,dragSquare);
function dragSquare(e:MouseEvent):void {
mySquare.startDrag();
setChildIndex(mySquare,1);
}
mySquare.addEventListener(MouseEvent.MOUSE_UP,releaseSquare);
function releaseSquare(e:MouseEvent):void {
stopDrag();
}

6. This is the complete code:

var myCircle:Sprite = new Sprite();
addChild(myCircle);
myCircle.x=150;
myCircle.y=150;
myCircle.graphics.beginFill(0x8B0000);
myCircle.graphics.drawCircle(0,0,50)
var mySquare:Sprite = new Sprite();
addChild(mySquare);
mySquare.x=350;
mySquare.y=150;
mySquare.graphics.beginFill(0x00008B);
mySquare.graphics.drawRect(0,0,100,100)

myCircle.addEventListener(MouseEvent.MOUSE_DOWN,dragCircle);
function dragCircle(e:MouseEvent):void {
myCircle.startDrag();
setChildIndex(myCircle,1);
}
myCircle.addEventListener(MouseEvent.MOUSE_UP,releaseCircle);
function releaseCircle(e:MouseEvent):void {
stopDrag();
}

mySquare.addEventListener(MouseEvent.MOUSE_DOWN,dragSquare);
function dragSquare(e:MouseEvent):void {
mySquare.startDrag();
setChildIndex(mySquare,1);
}
mySquare.addEventListener(MouseEvent.MOUSE_UP,releaseSquare);
function releaseSquare(e:MouseEvent):void {
stopDrag();
}

And the result should look like this:

Download files: ex10-drag_and_drop.zip

Advertisements

About Nuno Correia

audiovisuals+interaction
This entry was posted in 2. Controlling Audiovisual Objects and tagged . Bookmark the permalink.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s