How to Set Multiple Drop Targets in AS3

Written by mark stansberry
  • Share
  • Tweet
  • Share
  • Pin
  • Email
How to Set Multiple Drop Targets in AS3
Create lifelike, online shopping experiences with multiple drop targets. (Siri Stafford/Photodisc/Getty Images)

Flash software offers animation, sound and graphic features that can turn a drab, online store into an exciting shopping experience for your customers. Colourful animations, music and crisp-looking graphics will also help sell your products. Regardless of how you design your online store, you will need to create drop targets in ActionScript 3 (AS3), the Flash programming language. A drop target in an online store is most often the shopping trolley, the object in which the customer drops a purchase. Multiple drop targets let the customer drop products in different shopping trolleys, which can make online shopping easier.

Skill level:
Moderate

Other People Are Reading

Things you need

  • Adobe Flash Professional CS3, CS4 or CS5 versions

Show MoreHide

Instructions

  1. 1

    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.

  2. 2

    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 shopping Trolley: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 trolley. The drawRect method is used to draw each of the shopping trolley 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 begin Fill and end Fill methods are used to fill in the rectangle with a colour (ffff00 is for yellow and 00ff00 is for green).

  3. 3

    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 centre is positioned on the Flash stage at coordinates (100,100) and has a radius of 30 pixels. The add Child method places the circle on the Flash stage.

  4. 4

    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(buy Event: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 item Selected function as a buy Event 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.

  5. 5

    Type or copy and paste the following code starting at the next line of the ActionScript 3 editor.

    function itemDeSelected_fn(buy Event:MouseEvent):

    void{

    if (product.dropTarget == shopping Cart) {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 trolley 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 trolley the message, "This item will be sent to your office," will be displayed.

  6. 6

    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.

Don't Miss

Filter:
  • All types
  • Articles
  • Slideshows
  • Videos
Sort:
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the eHow.co.uk site, you consent to the use of cookies. For more information, please see our Cookie policy.