flizash.com

To start off, I have an empty stage with a couple of assets in the library. I have a circle which I have converted to a movie clip named "Circle", and a rectangle which I have also converted to a movie clip that I named "Button".

We need to export both of these objects for actionscript. Right-click on the Button object and select Linkage. Check the Export for ActionScript box in the dialog box presented below.

Click OK when finished. Click OK again if you get a warning from Flash. This warning only serves to inform you that Flash will create a class for the object automatically. Repeat the above steps with the Circle object.

Drag an instance of the Button object onto the stage. The goal here is to have the user click the rectangle, then place an instance of the Circle object onto the stage. I have placed mine in the lower right corner.

Select the rectangle on the stage and give it an instance name in the Properties panel. I named mine "button1".

Add a new layer to your timeline called "actions". Click inside of frame 1 and open your actionscript editor with the F9 key.

The first thing we will do is make it so that when a user hovers the mouse over the rectangle, the cursor changes to indicate that this object is clickable. Type the following actionscript onto line 1:

1

button1.buttonMode = true;

This line accesses the buttonMode property of the button1 object. Setting this to true will cause the cursor to change when hovering your mouse over it. Press ctrl + enter to test your movie and see for yourself. Next we must add an Event Listener to the button1 object so that it will respond to a mouse click. Enter the following actionscript on line 2:

2

button1.addEventListener(MouseEvent.CLICK, onClick);

This calls the addEventListener method of the button1 object. It takes 2 parameters, first the event to listen for (in this case, a mouse click), the second is the function to call when the event takes place (in this case, onClick). You can read this line to say "when a user clicks on button1, call the onClick function." Right now our button listens for a mouse click, but doesn’t do anything yet because we haven’t created the function that it calls. To do that, add the following actionscript, starting on line 4:

4
5
6
7
8
9

function onClick(event:MouseEvent):void {
	var circle1:Circle = new Circle();
	circle1.x = 10;
	circle1.y = 10;
	addChild(circle1);
}

Line 4: This line declares the function, onClick, and says that it will accept a MouseEvent. :void means that the function will not be returning any data. The { bracket signifies the start of the code that the function will run when called.

Line 5: Here we are creating a new instance of the Circle class, and I called mine "circle1".

Lines 6 and 7: Set the x and y properties of the circle1 object. This will place the circle 10 pixels from the top and 10 pixels from the left of the stage.

Line 8: This adds the circle1 object to the display list, allowing Flash to render it to the stage.

Line 9: The } bracket signifies the end of our function.

Press ctrl + enter to test the movie. I have published my version below, click the green button to see it at work.

One thing to note here is that the onClick function is run every time you click on the green button. In our example, what that will do is create a new circle at the same x and y positions over and over, hiding the previous circles underneath. There are several ways to prevent things like this from happening, but for the purposes of this tutorial we are only learning how to create on object on the stage in response to a mouse event. One such solution would be to create the circle before the function is called, and then setting the x and y positions and adding it to the display list inside the function.

Click the download link below to download the source .fla.

Download Source