Start the Flash program. Click "Flash File (ActionScript 3.0)" from the splash window to create a new file for the AS3 Flash multiple drop targets project.
Select "Actions" from the "Window" menu on the main Flash menu bar to open the ActionScript 3 editor. Position your mouse cursor on the first line of the ActionScript 3 editor. Click your mouse button and type or copy and paste in the code below.
var shoppingCart:Shape= new Shape();
shoppingCart.graphics.lineStyle(1);
shoppingCart.graphics.beginFill(0xffff00);
shoppingCart.graphics.drawRect(200,200,100, 100);
shoppingCart.graphics.endFill();
stage.addChild(shoppingCart);
var shoppingCart2:Shape= new Shape();
shoppingCart2.graphics.lineStyle(1);
shoppingCart2.graphics.beginFill(0x00ff00);
shoppingCart2.graphics.drawRect(400,200,100, 100);
shoppingCart2.graphics.endFill();
stage.addChild(shoppingCart2);
This code creates a yellow and a green rectangular shopping cart. The drawRect method is used to draw each of the shopping cart rectangles. The first two numbers in the drawRect method specify the position (in pixels) of the lower right corner of the rectangle and the second two numbers specify the width and the height of the rectangle. The beginFill and endFill methods are used to fill in the rectangle with a color (ffff00 is for yellow and 00ff00 is for green).
Type or copy and paste the following code starting at the next line of the ActionScript 3 editor.
var product:MovieClip= new MovieClip();
product.graphics.beginFill(0xff0000);
product.graphics.drawCircle(100,100,30);
product.graphics.endFill();
stage.addChild(product);
The code draws and places a red circle on the stage whose center is positioned on the Flash stage at coordinates (100,100) and has a radius of 30 pixels. The addChild method places the circle on the Flash stage.
Type or copy and paste the following code starting at the next line of the ActionScript 3 editor.
product.addEventListener(MouseEvent.MOUSE_DOWN, itemSelected_fn);
function itemSelected_fn(buyEvent:MouseEvent): void
{
buyEvent.target.startDrag();
product.addEventListener(MouseEvent.MOUSE_UP, itemDeSelected_fn);
};
The code attaches a mouse down event listener to the product (the red circle). When the mouse is pressed down as the mouse cursor is over the product, the shopper can drag the product. The event listener passes the product object through the itemSelected function as a buyEvent target. Within the itemdeselected function, a mouse up event listener is added to the product. When the shopper releases the mouse, the code in the itemDeselected_fn will be executed.
Type or copy and paste the following code starting at the next line of the ActionScript 3 editor.
function itemDeSelected_fn(buyEvent:MouseEvent):
void{
if (product.dropTarget == shoppingCart) {product.x = 150; product.y =150;buyEvent.target.stopDrag(); trace("This item will be sent to your home")} else buyEvent.target.stopDrag();
if (product.dropTarget == shoppingCart2) {product.x = 350; product.y =150;buyEvent.target.stopDrag(); trace("This item will be sent to your office")} else buyEvent.target.stopDrag();
};
When the mouse button is released after a drag operation, this code determines which drop target (ShoppingCart or ShoppingCart2) the product was over when the mouse button was released. Conditional "if" statements are used. If the product was over the yellow shopping cart the message, "This item will be sent to your home," will be displayed in Flash's output panel. If the product was over the green shopping cart the message, "This item will be sent to your office," will be displayed.
Click "Test Movie" in the "Control" menu. Observe that a red circle and a yellow and green rectangle are on the Flash stage. Click and drag the red circle over the yellow rectangle. Observe the message "This item will be sent to your home" is displayed in the output panel. Click and drag the red circle over the green rectangle. Observe the message "This item will be sent to your office" is displayed in the output panel.