Learn how to use the new display hierarchy in Flash CS3 ActionScript 3.
Tags:adobe,animation,class,diplay hierarchy,flash cs3 actionscript 3,total training
Grab video code:
Now the first thing we need to get used to it in using ActionScript 3.0, is the new Display List Hierarchy. This will be a lot different for any of you who are coming into this from Action Script 1.0 or 2.0. In the old version ActionScriptm we simply had a stage,but it wasn't a real object. It was more of a static reference class that we just used whenever we want to get things like the width of the stagem or the height of the stage. But in ActionScript 3.0, the stage is a class just like everything else, and in fact, what we really want to talk about here, are Display Containers.
Now we can see the basis of all these classes right here in the ActionScript window. If we go to the flash.display class, and you will notice, down in the list we have a quite a few new things. Amongst them are DisplayObjectContainer class, and the DisplayObject class. Now basically these are two very generic classes that we are going to be using a lot of during this entire series. But we'll mostly be using specific versions of this class, instead of the generic ones. A DisplayObjectContainer is going to basically be anything that can contain objects that can be seen on the screen. And of course, the DisplayObjects are going to be those objects.
If we take a look at the stage structure of the movie, the stage itself is a container. In fact, it's going to be the top level container of every movie that you are working on. It's what we usually refer to as Scene 1 or root. So if I get the ActionScript panel out of the way, you can see that we are working in Scene 1, we are in the base timeline of the movie, and this would be our stage element. Now try out some ActionScript. I am going to target the AS stage layer that I've already got set up here. I will press F9 to bring my ActionScript panel back up here, and of course, that would be Option+F9 on the Mac, and while I have got it here, I am going to pin that script, just so we don't have to chase it around and find it each time we need this window.
Now I am going to try something out as our very first line of the ActionScript, and let's see what the movie itself can tell us about its own structure. I am just going to add a simple trace statement, and what I am going to trace is the "this" keyword. I will put in a semicolon to end it.
Ands if just use Ctrl+Enter to test my movie, remember that's Command+Return on the Mac. Now my output window is docked down here with properties, and as you can see it's tracing that this in the base movie, is an Object called MainTimeline. So from the very beginning without even adding anything to our movie file, we have actually got two objects that we are working with. The first one is our display container called the stage, and the second one inside the stage is the MainTimeline. The MainTimeline is added to any SWF file, and it's where all of your actions are going to be in reference to the stage.
Now just to get a better view of this, I wanted to try out a couple of more things for DisplayObjectContainers. If I go down into the Properties panel down here, we can see a number of properties that might be familiar to you, like height and width. But I wanted to focus in on this one down here called numChildren. If we think of our Flash movie as a series of containers, at the top level we have got our stage container, inside of it we have our MainTimeline container, and inside of the MainTimeline we have anything that we place on the stage. Whether we drag it out of the library, draw it as a shape with the tools, or we have ActionScript created. So are always going to be looking at these containers, and using them to be able to modify the elements inside them. Now the stage object is still seems a little bit distant.
As you notice, when we traced to this, we went right into that MainTimeline. But we can always access the stage by tracing the stage property of any element that's on the stage, or I guess a better way to say would be inside the stage. Let's try that out. I am just going to add another trace statement, and this time I am going to trace this, which is our main timeline.stage. So we are accessing the stage property directly. I will test that movie, and now you can see that this is the main timeline as we saw before, but thus MainTimeline stage is stage with a capital S, so that's a little bit more like what we saw in ActionScript 2.0.
Now let's try out the numChildren while we are looking at this. If we go and access the stage, and use the numChildren property, we should be able to have the program count how many things are currently in that display object. I'll get my test window out of the way here, and we'll just add a couple more trace statements. In the first one, I am just going to trace the number of children on the stage. Now I just want to label this, so I am just going to type in a literal string, number of children equals, and we'll add on to that the stage which we can access directly, and we use that numChildren property. I'll close up this trace statement, and let's just do another quick test movie. That's Ctrl+Enter on the PC or Command+Enter on the Mac. And now we can see our two original trace. Now it says the number of children = 1.
trace(this); trace(this.stage); trace("number of children = " + stage.numbChildren);
Now I notice it can be a little confusing but want to go over that structure, our movie file has a stage container in it, and in that stage container is our MainTimeline. We can go this one further by taking a look at another Method inside of our DisplayObjectContainers. So let me just scroll up here a little bit to our Reference panel. We will open up Methods, and you cans see we have methods for adding children. Okay, and what I want to do here is, find out which child we are seeing, when it counts one children. We'll use the getChildAt() method. So let's just do one more trace. I will trace once again the stage, but this time we are going to use that getChildAt() method. Now the argument we need for a getChildAt() method is in index valueb and since there is only one child we will be working on, we need to supply it with the first one, and that would be index zero. Since everything starts with an index of zero in ActionScript. I am just going to close up that parenthesis. I will close up the trace parenthesis, and we do a semicolon, and let's test this out.
trace(this); trace(this.stage); trace("number of children = " + stage.numbChildren); trace(stage.getChildAt(0));
Now you can see the number of children that we have for this stage is one, and that child is the MainTimeline. So I hope we are getting a little picture of the structure of what our movie file looks like at this point. Of course, the next thing we are going to want to do is put something on the stage.