Creating clickable and draggable shapes

September 30, 2006 | 0 comments

Creating clickable and draggable shapes

In this example, you’ll explore some of the new features in the Flash Professional 9 ActionScript 3.0 Preview. You will create a simple shape and make it clickable using the improved event model. In later examples, you will make the shape draggable, turn your code into a class, and dynamically create a class instance.

Clickable shapes

Let’s start with making the shape clickable:

Select File > New and then choose Flash Document from the New Document dialog box, or select Flash Document from the Start page. Save the document as simpleBall.fla.
Select the Oval tool from the Tools panel and draw a circle on the Stage. To create a perfect circle, press and hold the Shift key while drawing the shape.

Note: Make sure that Object Drawing mode is turned off when you create the shape.
Select the Selection tool and double-click the shape on the Stage to highlight it.
With the shape selected, choose Modify > Convert to Symbol (or press F8) to open the Convert to Symbol dialog box.
Change the Name text field to circle and click OK to convert the shape into a movie clip.
With the symbol still selected on the Stage, type ball_mc in the Instance Name text box in the Property inspector.
Deselect the symbol on the Stage and open the Actions panel.
Add the following ActionScript code in the Script pane:
```
ball_mc.addEventListener(MouseEvent.CLICK, clickHandler);
 function clickHandler(event:MouseEvent):void {
    trace("You clicked the ball"); 
}
```
In this code, the ball_mc instance becomes clickable because you add an event listener that detects when the user clicks the shape. Whenever the user clicks the ball_mc movie clip, the clickHandler() function is dispatched. This is similar to adding event listeners to components in earlier versions of ActionScript. For example, ActionScript 2.0 used the onPress() event handler to detect when a user clicks a movie clip or button instance.
Select Control > Test Movie to publish your file. When you click the circle, the Output panel opens and displays the text, “You clicked the ball”.
Close the SWF file and return to the Flash authoring environment to modify your ActionScript code. Add the following line of ActionScript above the existing code:
```
ball_mc.buttonMode = true;
```
Republish the Flash document. Now when your mouse cursor appears over the circle, the cursor changes into a hand, giving users a visual clue that they can click the shape.

Draggable shapes

If you want to let the user drag the shape around the Stage, you need to add a couple more event listeners for the mouseDown (MouseEvent.MOUSE_DOWN) and mouseUp (MouseEvent.MOUSE_UP) events, as shown in the next example.

The following example demonstrates how add listeners for the mouseDown and mouseUp events by adding event listeners to the ball movie clip:

Modify the ActionScript from the previous sample so it matches the following code:

ball_mc.buttonMode = true;
 ball_mc.addEventListener(MouseEvent.CLICK, clickHandler);
 ball_mc.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownListener);
 ball_mc.addEventListener(MouseEvent.MOUSE_UP, mouseUpListener);
 function clickHandler(event:MouseEvent):void {
    trace("You clicked the ball");
 }
 function mouseDownListener(event:MouseEvent):void {
    ball_mc.startDrag();
 }
 function mouseUpListener(event:MouseEvent):void {
    ball_mc.stopDrag();
 }

Select Control > Test Movie to publish the Flash document. When you click and hold the left mouse button over the circle, you can move the shape around the Stage. When you release the mouse button, you can no longer drag the shape around the Stage.

While dragging shapes on the Stage can provide hours of entertainment, you would not want to rewrite that code every time you wanted to create a draggable shape. Imagine if you could convert that code into an external class file that lets you associate a symbol with a class that automatically makes a symbol draggable. Read on to find out how.

Follow Design Stacks

Creating clickable and draggable shapes