How to Set a Drop Target in AS3

Written by mark stansberry
  • Share
  • Tweet
  • Share
  • Email

Setting a AS3 drop target, that is defining a graphic that will respond with an action when another graphic is dragged over it, will give you the ability to create Flash shopping trolley applications. That's because when the drop target is set as a graphic, actions can be programmed to occur when another graphic is dragged over the graphic drop target. Using the AS3 drop target requires that you code the drop Target statement and have at least two objects on the stage, the drop target graphic and an object you use to drag over the drop target graphic.

Skill level:
Moderate

Other People Are Reading

Things you need

  • Adobe Flash Professional (CS3, CS4, or CS5)

Show MoreHide

Instructions

  1. 1

    Start your Flash software. Select the "New" option from the "File" menu on the main Flash menu bar. Select "ActionScript 3" from the dialogue box that appears to create a new AS3 flash file.

  2. 2

    Select "Actions" from the "Window" menu on the main flash menu bar. Position your mouse cursor on line 1 in the editor.

  3. 3

    Declare a circle and rectangle graphic movie object using AS3 code. Attach the drawRect and draw Circle graphics methods to movie clip objects that you name "ball" and "squareColor" to draw a rectangle and circle on the stage (screen). Use the "addChild" method to place the circle and rectangle on the stage. Type the following codes of lines in the Actions editor to draw and place these objects.

    var colour: uint = 0xff00ff;

    var ball:MovieClip= new MovieClip();

    ball.graphics.beginFill(colour);

    ball.graphics.drawCircle(100,100,100)

    ball.graphics.endFill()

    stage.addChild(ball)

    var squareColor:Shape= new Shape();

    squareColor.graphics.lineStyle(1)//make sure the line Style command precedes the draw Circle command

    squareColor.graphics.beginFill(colour);

    squareColor.graphics.drawRect(200,200,300, 300)

    squareColor.graphics.endFill()

    stage.addChild(squareColor)

  4. 4

    Add a "MOUSE_DOWN" event listener to the ball (circle) object with the addEventListener method. Name the function "itemSelected_fn" that the event listener calls. Code the item Selected function such that when the mouse button is pressed down when over the ball object, you can drag the mouse by holding down the mouse button and physically moving the mouse. Also code an event listener in this function that will call a function named itemDeSelected_fn when the mouse button is released (also known as MOUSE_UP). Type the AS3 code listed below in the Action's editor on the next line after the code already typed in to accomplish this.

    ball.addEventListener(MouseEvent.MOUSE_DOWN, itemSelected_fn)

    function itemSelected_fn(my Event:MouseEvent): void

    {

    myEvent.target.startDrag();

    stage.addEventListener(MouseEvent.MOUSE_UP, itemDeSelected_fn);

    }

  5. 5

    Code the drop Target method in a function named item Deselected such that the code will remove the ball from the stage if the ball is placed in the squareColor object and the mouse button is released. Also code the function such that it will display the text message "Item Returned, No Sale" if the mouse button is released when the ball is not within the boundaries of the squareColor object. Type in the code below following the other lines already entered to accomplish this.

    itemDeSelected_fn(my Event:MouseEvent):

    void{

    if (ball.dropTarget == squareColor) {stage.removeChild(ball)} else {trace("Item Returned, No Sale")

    }

  6. 6

    Review the entire code entered, as listed below, for syntax errors and functionality. Select the "blue check mark" icon on the Actions' editor menu bar to have ActionScript check for syntax errors.

    var colour: uint = 0xff00ff;

    var ball:MovieClip= new MovieClip();

    ball.graphics.beginFill(colour);

    ball.graphics.drawCircle(100,100,100)

    ball.graphics.endFill()

    stage.addChild(ball)

    var squareColor:Shape= new Shape();

    squareColor.graphics.lineStyle(1)//make sure the line Style command precedes the draw Circle command

    squareColor.graphics.beginFill(colour);

    squareColor.graphics.drawRect(200,200,300, 300)

    squareColor.graphics.endFill()

    stage.addChild(squareColor)

    ball.addEventListener(MouseEvent.MOUSE_DOWN, itemSelected_fn)

    function itemSelected_fn(my Event:MouseEvent): void

    {

    myEvent.target.startDrag();

    stage.addEventListener(MouseEvent.MOUSE_UP, itemDeSelected_fn);

    }

  7. 7

    Select the "TestMovie" option from the "Control" menu on the main Flash menu bar to test the movie. Position your mouse cursor over the ball, depress the right mouse button and drag the ball to a new position that is not over the square. Release the mouse button and observe that the text message "Item Returned, No Sale" appears. Position your mouse cursor over the ball again, depress the right mouse button and drag the ball on top of the square. Release the mouse button and observe that the ball is removed from the screen.

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.