Using and Managing Bitmap Images - Beginning HTML5 Games with CreateJS - page 93

Figure 5-11. Two containers with shapes, bitmaps, and text added to their display lists
The result is two containers on the stage, each acting as one, unified group with its own display list. You can
position and even animate each container as a whole, and access their children using the same methods you've been
using on stage.
Animating and Cloning Containers
When animating containers, you treat them like any other display object. You can easily target a container when using
tweens in your application. Listing 5-20 is an example of how you would accomplish this.
Listing 5-20. Rotating a Container Around its Center Axis
var container = new createjs.Container();
var pepper = new createjs.Bitmap('img/pepper.png')
var txt = new createjs.Text("Green Pepper", "20px Arial", "#000");
var bg = new createjs.Shape(new createjs.Graphics().beginStroke('#000')
.drawRect(0, 0, 250, 250));
txt.x = txt.y = 10;
pepper.x = pepper.y = 80;
container.regX = container.regY = 125;
container.x = 300;
container.y = 200;
container.addChild(bg, txt, pepper);
stage.addChild(container);
createjs.Tween.get(container).to({rotation:360},4000);
As you can see from the previous example, you can also set the registration point on a container, which allows
you to spin them around their center point. Figure 5-12 demonstrates this in action.