Adobe Software - Macromedia Products - Macromedia Flash

package {
import flash.display.MovieClip;
public class BallDocumentClass extends MovieClip {
private var tempBall:Ball;
private var MAX_BALLS:uint = 10;
public function BallDocumentClass() {
var i:uint;
for (i = 0; i < MAX_BALLS; i++) {
tempBall = new Ball ();
tempBall.scaleX = Math.random();
tempBall.scaleY = tempBall.scaleX;
tempBall.x = Math.round(Math.random() *
(this.stage.stageWidth - tempBall.width));
tempBall.y = Math.round(Math.random() *
(this.stage.stageHeight - tempBall.height));
addChild(tempBall);
}
}
}
}

package {
import flash.display.MovieClip;
import flash.events.MouseEvent;
public class Ball extends MovieClip {
public function Ball() {
trace("ball created: " + this.name);
this.buttonMode = true;
this.addEventListener(
MouseEvent.CLICK, clickHandler);
this.addEventListener(
MouseEvent.MOUSE_DOWN, mouseDownListener);
this.addEventListener(
MouseEvent.MOUSE_UP, mouseUpListener);
}
private function clickHandler(event:MouseEvent):void {
trace("You clicked the ball");
}
function mouseDownListener(event:MouseEvent):void {
this.startDrag();
}
function mouseUpListener(event:MouseEvent):void {
this.stopDrag();
}
}
}

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.

Macromedia Flash MX Professional 2004

Download sample files for this tutorial

Tutorials and sample files:

Prerequisite knowledge

Dynamically creating instances of a class

Using the new operator

Using the Document Class text box

Converting code into a class

Creating clickable and draggable shapes

Clickable shapes

Draggable shapes