When you create drawings on Shapes, Sprites, and MovieClips, it's tempting to think you're placing the drawings inside containers—but you're not. At least, not in the true ActionScript sense of the word "container." As explained back in Chapter 14 (When Display Objects are Display Object Containers), Sprite and MovieClip objects are DisplayObjectContainers, meaning that by using the addChild() method, you can put objects inside a Sprite or MovieClip and the objects will be displayed. Shape, on the other hand, isn't a DisplayObjectContainer, so how can it show the drawn objects as shown in this chapter?
The fact of the matter is, when you draw as described in this chapter, you're drawing lines and shapes on the canvas or the background of the Shape, Sprite, or MovieClip. It's not the same thing as using the addChild() method, which adds an object to a DisplayObjectContainer. For example, you can't position a drawing to appear in front of an object that's added to a MovieClip using the addChild() method. Here's an example; the code appears in 18-8_Canvas_Drawing.fla in the Missing CD (www.missingmanuals.com/cds):
1 var tfPoem:TextField = new TextField(); 2 var mcCanvas:MovieClip = new MovieClip(); 3 4 tfPoem.text = "Twas brillig, and the slithy toves"; 5 tfPoem.x = 110; 6 tfPoem.y = 110; 7 tfPoem.autoSize=TextFieldAutoSize.LEFT; 8 mcCanvas.addChild(tfPoem); 9 10 mcCanvas.graphics.beginFill(0x99FFFF); 11 mcCanvas.graphics.drawRect(100,100,200,150); 12 mcCanvas.graphics.endFill(); 13 14 addChild(mcCanvas);
This example has only two objects: a TextField called tfPoem and a MovieClip called mcCanvas. Note that the rectangle isn't an object in its own right. Lines 4 through 7 define the text field, adding text, positioning it, and setting its autoSize property to accommodate the text. Line 8 places the txtField inside mcCanvas. The text field is now contained in the movie clip, a DisplayObjectContainer. The technique for creating and displaying the drawing is different, though. The rectangle is defined in lines 10 and 11, but that's done through the graphics property of mcCanvas. It never uses the addChild() method in mcCanvas. This means the rectangle has no index value, and you can't reposition it in the Display List using a command like addChild() or addChildAt().
The last line of the code adds mcCanvas to the main timeline. When mcCanvas is placed in the main timeline (also a DisplayObjectContainer), then both the rectangle drawn on mcCanvas and the text field that's contained by mcCanvas are displayed.