Start the Flash program. Click "Flash File(ActionScript 3.0)" from the splash window to create a new file for an AS3 Flash animation 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 in the code below to create a circle icon to use for a product to purchase.
var color: uint = 0xff00ff;
var product:MovieClip= new MovieClip();
product.graphics.beginFill(color);
product.graphics.drawCircle(100,100,100);
product.graphics.endFill();
stage.addChild(product);
This code draws a circle (the target to position) that is placed on the Flash stage at coordinates (100,100) and has a radius of 100 pixels. The beginFill and endFill methods are used to fill the circle with the color magenta. The addChild method is used to place the circle on the screen(stage) when the movie plays.
Type the code starting at the next line of the ActionScript 3 editor to create a rectangle icon for the shopping cart (the object that the target will be dropped in).
var shoppingCart:Shape= new Shape();
shoppingCart.graphics.lineStyle(1);
shoppingCart.graphics.beginFill(color);
shoppingCart.graphics.drawRect(200,200,300, 300);
shoppingCart.graphics.endFill();
stage.addChild(shoppingCart);
This code draws a rectangle that is placed on the Flash stage at coordinates(200, 200) that has a width of 300 pixels and a height of 300 pixels. The beginFill and endFill methods are used to fill the rectangle with the color magenta. The addChild method is used to place the circle on the screen when the movie is played.
Type in the code starting at the next line of the ActionScriot 3 editor to enable the product (the circle) to be dragged with the mouse.
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 adds a mouse event listener to the circle. The event listener instructs the Flash program to execute the code within the function itemDeSelected_fn when the circle is clicked. The instructions in this function include the startDrag method. The startDrag is attached to the target of the buyEvent (the Circle) which will activate the dragging mechanism on the circle. The function also adds a mouse up event listener to the circle which will instruct Flash to execute the code in the itemDeSelected_fn function when the mouse button has been released (MOUSE_UP).
Type in the code starting at the next line of the ActionScript editor to move the circle (the drop target) to the coordinates (200, 20) when the circle is dragged on top of the rectangle (shopping cart) and the mouse button is released.
function itemDeSelected_fn(buyEvent:MouseEvent):
void{
if (product.dropTarget == shoppingCart) {product.x = 200; product.y =20;buyEvent.target.stopDrag(); trace("You just made a sale")} else {trace("The product was not purchased");
};
};
The itemDeselected_fn function code receives a mouse up event from the mouse up event listener when the mouse button has been released. The "if" statement in the code checks to see if the mouse was released when the mouse was over the rectangular shopping cart. If it was, the code instructs Flash to stop the dragging operation (stopDrag) and to display the message :"You just made a sale." If the circle was "not" over the rectangular shopping cart when the shopper released the mouse button, the message "The product was not purchased" will be displayed.