First, to set the stage here, I have drawn a circle, converted it to a movie clip, and set the linkage to “circle”. If you do not know how to setup the linkage for an object so that we may use it ActionScript, please refer to my previous tutorial - responding to mouse clicks.
That event listener calls a function called moveCircle, which we create next:
8
9
10
function moveCircle(event:Event):void{
hero.x += 1;
}
What this function does is, as you can see on line 9, is find out what the x property is of our object, and then add 1 to it. What that means is that every time our flash movie runs a frame, this function runs and moves the circle to the right 1 pixel, because the x property increases by 1 each time. If you subtract from the x property, your object moves to the left. If you use the y property instead of x, your circle can be controlled vertically. Adding to y will move the circle down, subtracting will move it up.
That is all there is to the basics of frame-based animation. There are other ways to animate objects that I will show you in later tutorials.
Click the download link below to obtain the source .fla for this simple example.
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:
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.
OK, to set this tutorial up I’ve created a movie clip of a circle that I named simply "Circle". I have not placed the circle anywhere on the stage using Flash, I have nothing but a blank stage.
The first thing we need to do is export the movie clip for use in our actionscript. Right-click on your movie clip in the library and click Linkage.
In the dialog box that opens, click the Export for ActionScript option. Just leave the other options as they are, this will create a class named "Circle" for us to use in our code. I generally like to leave the class name the same as the movie clip for easy reference. Click OK to close this dialog box when you are finished..
After hitting OK, you will likely see this warning:
Just click OK here. Flash is just letting us know that it couldn’t find a class for "Circle", so it will create one automatically. Next thing I have done is create a new layer to put our actionscript on. This is not a necessary step, but it’s just something a lot of us do help keep everything organized. Click inside of frame 1 of the actions layer to make sure that we add our actionscript to that frame. You can see below that frame 1 is selected.
Now open up your actions window. You can use the F9 key to open it as a shortcut if it’s not already open. Use the following actionscript code to place a circle on the stage.
1
2
3
4
var circle:Circle = new Circle();
circle.x = 10;
circle.y = 10;
addChild(circle);
A quick explanation of the code, line by line:
Line 1: This line creates a new instance of the "Circle" class, and to keep it simple I called it "circle". You could call this instance anything you want, so long as the class is "Circle."
Line 2: This line sets the x property of the circle to 10, which places the circle 10 pixels from the left of the start of the stage.
Line 3: This sets the y property of the circle to 10, placing it 10 pixels from the top of the stage.
Line 4: This line adds the circle to the display list. It is this line of code that makes Flash render the circle.
Press ctrl + enter to test your movie within Flash. This is what my movie looks like:
And that’s all there is to it! Next time I’ll show you how to make this example interactive and bring an object onto the screen when a user clicks a button. Click below to download the source file for my movie to look at what I did if you are having problems. (Right-click -> Save As)
