ActionScript 3.0 - Display Object Primer - Part 1
:: June 25, 2007
One important change in Flash CS3 from a programming standpoint is about the usage of the MovieClip properties like attachMovie, createEmptyMovieClip et all. This was one topic in which I fumbled a bit to understand when I started with AS3 and thought would write a series of simple tutorials which will make things more clear for people starting with ActionScript 3.0 and specifically for those who use MovieClip methods a lot in their day to day work.
Some important facts to know of before we start with are:
- API's like attachMovie, createEmptyMovieClip, removeMovieClip, and duplicateMovieClip are either removed or replaced with new API's.
- Most of the MovieClip related API's are present with the flash.display.DisplayObject and flash.display.DisplayObjectContainer packages.
- All of the MovieClip related operations are based on a container based approach in which you have a DisplayObjectContainer and you can have DisplayObjects like MovieClips and Sprites in them.
- Depths are auto managed in ActionScript 3.0 and hence you need not manually specify and manage depths of the DisplayObjects yourselves but rather Flash Player does it for you.
- Still, if you want to have greater control of the depth yourself, you can use a method named addChildAt() method to manually specify the level in which you want the child to be added.
- addChild API is the equivalent of attachMovie or createEmptyMovieClip in AS 2.0.
Now, lets get to the basics of DisplayObject programming. I will try to illustrate the concept using a simple diagram shown below:
As I told before, everything in AS3 is based on a container approach. The main timeline (root) can be considered as the main container and it in-turn can contain several other containers within it. In this case we are going to create two containers within the main container and name them as "Container 1" and "Container 2".
To add the two sub containers to the main timeline, you create a container by using the code:
var container1:YellowContainer = new YellowContainer();
Note that YellowContainer is the linkage name and the class object of a yellow container movieclip which I have in the library.
Now you can specify some properties for this container, in this case it is the X and Y values:
container1.x = 200;
container1.y = 100;
To name this container (equivalent of giving an instance name to a MovieClip in AS 2.0):
container1.name = "Container 1";
Finally to add this container to the main timeline you use:
this.addChild(container1);
in this case the word "this" refers to the main timeline. The code above is equivalent to writing:
_root.attachMovie("container1");
Now we have added a container to the main timeline, the next step would be to add some elements to this container. We do this in the same way we did while creating the main container:
//Add some elements into the Container 1
var gb:GreyBall = new GreyBall();
gb.name = "Grey Ball";
// Add the grey ball to Container 1 - note that the ball gets
// attached to the registration point of the YellowContainer and not on the stage
container1.addChild(gb);
In this case, GreyBall is a MovieClip which I have in my library. Note that, at this stage the Grey Ball gets attached to the registration point of the YellowContainer and not to the stage. This is accomplished by the script:
container1.addChild(gb);
which indicates that this has to be added to the container1.
In a similar fashion you can add other elements to each of the container. The complete code which I used is here:
import flash.display.*;
// Create two containers and position them
var container1:YellowContainer = new YellowContainer();
container1.x = 200;
container1.y = 100;
// Give a name to the container
container1.name = "Container 1";
// Add it to the stage
this.addChild(container1);
var container2:GreenContainer = new GreenContainer();
container2.x = 275;
container2.y = 100;
container2.name = "Container 2";
this.addChild(container2);
//Add some elements into the container 1
var gb:GreyBall = new GreyBall();
gb.name = "Grey Ball";
// Add the grey ball to Container 1 - note that the ball gets
// attached to the registration point of the YellowContainer and not on the stage
container1.addChild(gb);
// Add the next ball
var rb:RedBall = new RedBall();
rb.y = 40;
rb.name = "Red Ball";
container1.addChild(rb);
//Add some elements into container 2
var grb:GreenBall = new GreenBall();
grb.name = "Green Ball";
// Add the grey ball to Container 1 - note that the ball gets
// attached to the registration point of the YellowContainer and not on the stage
container2.addChild(grb);
// Add the next ball
var bb:BlueBall = new BlueBall();
bb.y = 40;
bb.name = "Blue Ball";
container2.addChild(bb);
// Now, moving a container will move the children attached with it too
container1.y = 150;
// Getting the child elements within a container
trace(container1.getChildAt(1).name);
trace(container1.getChildAt(2).name);
As you would see from the code and as you play around with it a bit, manipulating the container affects the elements container within it too.
You can download the source code of the file which I have used in this example from here: DisplayObject.zip
** Note **
Its very important to note that in AS3 you cannot set the linkage identifier of an MovieClip like how you do in AS2. Instead, every MovieClip which can be attached is identified by a Class Name like the one shown below:
As you can see from the above image, the identifier box is greyed out and is not available in ActionScript 3.0. When you right click on a MovieClip in your library and select the option "Export for ActionScript", Flash assigns the name of the MovieClip (without spaces) as the Class name. When you click on OK you will be prompted with a warning dialog like this:
If you don't have (or don't want to) a class associated with the MovieClip you can click on the OK button and Flash internally would create a associated class for the MovieClip automatically. You can also specify the base class which you want your MovieClip to be associated with. The default is flash.display.MovieClip and if you want you can change this to something like flash.display.Sprite.
Doing this procedure is equivalent to creating a class with the name GreenContainer with a dummy constructor and associating it with the MovieClip as a class.
For first time users this may be very confusing and misleading. The first time I learnt it I wasted close to half hour trying to figure out how to use this and what happens internally when one does that.
In the next part of the tutorial I will cover more on Sprites, DisplayObject manipulation and depth management. See you until then !
