CSM ActionScript Class Lecture 10 February 10: The Display List from Cody Tolmasoff on Vimeo.
Screencast of lecture from College of San Mateo ActionScript class from 10 February 2010
Assignment:
- Create a simple dynamic navigation bar
Lecture:
- Understanding the Display list – the Sum of its Parts
- Adding and Removing Children
- Managing Object Names, Positions, and Data Types
- Changing the Display List Hierarchy
- A Dynamic Navigation Bar
Links from tonight:
www.gotoandlearn.com
In previous versions of Flash and ActionScipt we had many different non-cooperative ways of adding display elements (graphics, movie clips, bitmaps, videos, etc…) to our project. As these methods did not cooperate very well, as a developer there was always a lot of planning involved for anything beyond basic drag and drop of elements onto timeline layers. If you ever attached anything to the stage via ActionScript it would sit on top of any elements you had on layers in your timeline. Then if you wanted to swap those around, you’d have to get really creative.
With AS3 we have this central place called the display list that manages anything you put in your project, weather its something you dragged on the stage, loaded externally, or created via ActionScript. Although this can sometimes mean we have to add a little more code with what we do, the trade off for the control we get is completely worth it.
Two Key Concepts
We have two types of things that populate our display list: Display Containers and Display Objects.
A Display Container is something that lives in the display list that can contain other elements. This could be a sprite or a movie clip that can contain such elements as a video, a bitmap, a graphic, or another container.
A Display Object is something that lives in the display list that is an asset in itself and cannot contain other objects. These objects would be things like a video, a bitmap, or a graphic.
The Display List
Display List Classes
In our first week of class we looked at the document class. Each item in the Display List has an associated class that allows us to display and manipulate the display object or container. But for our purposes at the moment, lets just look at a Display List Class as something that we can display on stage or add to our Display List.
Adobe has a full description of all the display list classes here:
http://livedocs.adobe.com/flash/9.0/main/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Parts&file=00000143.html
Displaying the Display List
This particular example comes from the book on page 54. I’ll demonstrate the simpler version of this function here, but have a look at the book for the polished version of this function which makes the trace output indented and easier to read.
for(var i:int = 0; i < dispObject.numChildren; i++){
var obj:DisplayObject = dispObj.getChildrenAt(i);
if(obj is DisplayObjectContainer){
trace(obj.name, obj);
showChildren(obj);
} else {
trace(obj);
}
}
}
To test this function out, add this code to the first frame of a file that has multiple (nested) display objects on the stage, then test your movie (compile your project). If everything has gone well you should see a bunch of information come up in your output dialogue box.
Adding and Removing Children
Lets take a look first with just adding things to the stage. In older versions of Flash we would use Linkage to identify an item in the library so that we could attach it to the stage. This method was just a bit of a free-for-all and it was left up to the developer to keep everything organized.
Lets talk for a moment about how Flash manages its Library. Just because you have assets in the library does not mean flash will export or compile them into the SWF. In fact Flash does us a favor by not exporting what seem to be unused items in our Library. This dates from the earliest days of Flash. However we do need a way to dynamically add things to our projects that only exist in the library, so in the properties of any symbol in the library is the option to force a symbol to export even if its not used. Once we force the symbol to export then we can dynamically add it to the stage with ActionScript at run time.
In order to force a symbol to export, you need to access the symbol properties dialogue box. You can either do this as you create a symbol (by hitting F8) or going back to any symbol (lets just say a movie clip for the moment, however this will change shortly) and either right clicking on a symbol and choosing properties, or select the symbol in the library and click the 'i' in the blue circle at the bottom of the library.
You should see this dialogue (you may need to press the advanced button).
In the Linkage section, check the box for Export For ActionScript, automatically selected also will be export in first frame (although technically these symbols will export prior to the first frame of your movie, which can affect a preloader). You will notice that also your symbol name becomes your Class Name, and because you have Movie Clip selected Flash has automatically selected the Base Class to be flash.display.MovieClip. Your Symbol has now been prepared to be added dynamically at run time.
Exercise: addChild
Now lets go ahead and try this out. In a new movie draw some shape, select it and convert it to a symbol. In the symbol properties dialogue box, select the movie clip option, give your symbol a name (with no spaces). Then check the option under Linkage to Export for ActionScript. Click OK.
For the sake of this example I'll use the symbol name MyShape.
Delete your shape from the stage (however it still should reside in the library). Your stage should be blank.
Insert a new layer, and label it A for Actions. Select the first frame and write the following code:
addChild(theAddedShape);
Test your movie.
You should now see in the top left corner of your stage, your shape that didn't exist previously.
addChildAt();
Now we can do more than just throw a movie clip on stage, we can change it properties and layering order.
Comment our your old code, and lets try something else with the same assets.
stage.addListener(MouseEvent.CLICK, makeShapes, false, 0, true);
function makeShapesE(vt:MouseEvent):void{
var theShape:MovieClip = new MyShape();
theShape.x = stage.mouseX;
theShape.y = stage.mouseY;
addChildAt(ball, theIndex);
theIndex++;
}
removeChildAt();
Comment our your old code, and lets try something else with the same assets.
var theShape:MovieClip = new MyShape();
theShape.x = Math.random()*stage.stageWidth;
theShape.y = Math.random()*stage.stageHeight;
addChild(theShape);
}
stage.addEventListener(MouseEvent.CLICK, onClick, false, 0, true);
function onClick(evt:MouseEvent):void{
if(numChildren > 0){
removeChildAt(0);
}
}
There are a lot more of these methods like:
getChildAt(), getChildByName() and getChildIndex()
Have a look at them here:
Display Object Containers
Assignment: Dynamic Navigation Bar
Create a new AS3 file. We need to create 2 assets for this file, a button, and a movie clip we can use as the background.
Draw a button on the stage. Select your shape and convert it to a symbol. Name your button symbol NavigationButton, select button as the type, then check Export for ActionScript (if you don't see this option, click the advanced button). Click OK
Draw a rectangle on the stage for the background of your navbar. Select it and convert it to a symbol. Name your movie clip NavBarBackground, select movie clip as the type, then check Export for ActionScript. Click the OK button.
Write the following code in the timeline.
var numberOfButtons:int = 5;
//the spacing between the buttons
var buttonSpacing:Number = 10;
//create a sprite to hold the nav bar assets
var navBar:Sprite = new Sprite();
//add the nav bar to the stage for display
//note: this is currently just an empty container
addChild(navBar);
//create a reference to the simple button
//which we will use as a template
var btn:SimpleButton;
//a for statement to create the number of buttons
//specified above and position them
for (var i:uint = 0; i < numberOfButtons; i++){
//create a new NavigationButton, the button
//symbol you created in your library
btn = new NavigationButton();
//assign a unique name to your new button
btn.name = "button" + i;
//assign a unique x location to your button
btn.x = buttonSpacing + i * (btn.width + buttonSpacing);
//give all the buttons a single y axis alignment
btn.y += 5;
//add a listener to your newly created button
btn.addEventListener(MouseEvent.CLICK, onTraceName, false, 0, true);
//add this newly created button as a child to your {empty} nav bar
navBar.addChild(btn);
}
//create the background for the nav bar
//from the button symbol you created in the library
var bg:MovieClip = new NavBarBackground();
//change the width & Height of the NavBarBackground
//to accent your buttons
bg.width = numberOfButtons * (btn.width + buttonSpacing);
bg.width += buttonSpacing;
bg.height = btn.height + (btn.y * 2);
//add your backround to your navbar at the lowest avaialble index
//this places the background behind everything else and pushes
//everything else up
navBar.addChildAt(bg, 0);
//center the nav bar on the x axis
navBar.x = (navBar.stage.stageWidth - navBar.width)/2;
navBar.y = 20;
//define the function the buttons call when pressed
function onTraceName(evt:MouseEvent):void{
//trace the name of the particular button pressed
trace(evt.target.name);
}
Here is a more in depth article on the Display List from Adobe:
http://www.adobe.com/devnet/flash/quickstart/display_list_programming_as3/
