Tutorial 2 - Put things on the Stage
This tutorial will talk about drawing things into movie clips using the Drawing API and put them on the stage. Note the codes from doing the above 2 jobs have significant difference when compared with previous AS.
Click here to download files for this tutorial
1. Open a new .fla and name it tut_2.fla. In the Document class field of the Properties panel, type in example (we are going to define this class).
2. Open a new .as file and name it example.as. Save it in the same folder as the above .fla.
3. Type in the following code:
| Line | Description |
| 5 & 10 | Remember the class name, function name must be the same as the file name, i.e. in this case example |
| 7-8 | Define 2 variables which will represent 2 instances of the class MovieClip. The definition of variables before the definition of functions will make the variables accessible by all the following functions within the class. Making them public will also render them accessible from codes outside this class. Note the syntax for defining variables: mc1 and mc2 will represent 2 movie clips respectively. |
| 10-21 | Define the main function of that class. This function will be executed for sure. |
| 12-14 | Draw a circle (with a black border of 1px thick and fill with red) in mc1. The drawing methods were just the same as the previous AS, but note that they are now under the class Graphics. Therefore the syntax is: MovieClip.graphics.drawingAPI_methods; If you have not touched on the Drawing API in the previous AS versions, I suggest you do some reading on it. You can find it under the Graphics class in the LiveDocs. |
| 15 | We have made the timeline of tut_2.fla an instance of the class example, therefore this here refers to the timeline. addChild is a new command in AS 3. Objects to be displayed are now stored as a list. addChild will add new objects to that list. The earlier you add an object to the list, the "more behind" it will be when displayed. There are no more things like MovieClip.depth or MovieClip.swapDepths. To learn more you may read here about the DisplayObjectContainer. In simple words, you may consider tut_2.fla is the root movie clip and now we are adding mc1 (the circle) into the display list of this movie clip. |
| 17-20 | Draw a rectangle (with a black border of 1px thick and fill with yellow) in movie clip mc2 and add it to the display list. It should be on top of mc1 the circle when display. |
4. This finishes our class. Turn to tut_2.fla and output it. You should be able to see the following:
This is the end of tutorial 2. The main points are the new syntax for drawing API and the new addChild for displaying objects.
Back to the Tutorial index page