A "Solar System" Example

The types of display objects, the display hierarchy, and the depth management are very different in ActionScript 3 from the earlier versions of the language. In this tutorial, we talk about display objects, parent-child relationship, the Display List, and the mysterious Stage in AS3. We will discuss depth management in a separate tutorial that will be posted soon.

We will illustrate the concepts using a simple example of an animated "solar system".

The solar system animation is created using ENTER_FRAME event and the rotation property of sprites. The key, however, is creating the appropriate parent-child relationships via sprite.addChild method. The fla file below contains complete, well commented source code. We discuss the code below.

Download

The Code

/*
Below we create two sprites and store them in the variables: "sun" and "earth". We create two shapes and store them in the variables "moon" and "spot". In each, "spot", "sun" and "earth", we draw a circle; in "moon" we draw a square. (We choose colors for the outline slightly lighter than colors for the fill.) We use the method drawCircle (of the graphics property of the Sprite and Shape classes) to draw our circles as the method draws a circle around a specified point. Instead of drawRect method, we use moveTo, lineTo methods to draw our square "moon" to keep (0,0) of "moon" in the center of the square. The Sprite class is a new class in AS3. Sprites are display objects that have all the capabilities of movie clips, except for having a timeline. Sprites inherit from DisplayObjectContainer class; that is, sprites can contain other display objects as their children. (They also inherit from the InteractiveObject class, that is, they can respond to events. We will not use this functionality in our example.) Sprites are very easy to create and manipulete programmatically and they are lighter-weight than movie clips. Shapes are even lighter than Sprites but they cannot respond to events or contain other objects. Otherwise, they share much of the functionality of sprites, e.g.: we can draw in shapes, scale them, and rotate them. See the last page of this tutorial for a diagram explaining the hierarchy of display objects in AS3.
*/

 

var sun:Sprite = new Sprite();

sun.graphics.lineStyle(0,0xFF6600);

sun.graphics.beginFill(0xFF3300);

sun.graphics.drawCircle(0,0,40);

sun.graphics.endFill();

 

var earth:Sprite = new Sprite();

earth.graphics.lineStyle(0,0x92E9FE);

earth.graphics.beginFill(0x00CCFF);

earth.graphics.drawCircle(0,0,20);

earth.graphics.endFill();

 

var spot:Shape = new Shape();

spot.graphics.lineStyle(0,0x000000);

spot.graphics.beginFill(0x333333);

spot.graphics.drawCircle(0,0,4);

spot.graphics.endFill();

 

/*
We want the (0,0) point of "moon" to be in the center of the square and drawRect draws from a given point down and to the left and not around the point. Hence, we use moveTo, lineTo methods. Of course, we could use moon.graphics.drawRect(-5,-5,10,10) instead.
*/

var moon:Shape = new Shape();

moon.graphics.lineStyle(0,0xFFFFCC);

moon.graphics.beginFill(0xFFFF00);

moon.graphics.moveTo(-5,-5);

moon.graphics.lineTo(5,-5);

moon.graphics.lineTo(5,5);

moon.graphics.lineTo(-5,5);

moon.graphics.lineTo(-5,-5);

moon.graphics.endFill();

 

/*
If you comment out the rest of the code, nothing will appear on screen. This is because our objects have not been added yet to the Display List of our movie via addChild of the DisplayObjectContainer class. We add them to the Display List below. They way we set up the parent-child relationships is crucial for creating the "orbiting" effect.
*/

/*
"sun" is assigned as a child of "this". "this" here refers to the MainTimeline of our movie. You could skip the word "this" and accomplish the same result. "stage.addChild(sun)" means, however, something slightly different. See The Mysterious Stage part of this tutorial for an explanation. Since "sun" is a child of the main timeline, its x and y position is relative to the main movie; that is, to the upper left corner of our movie.
*/

this.addChild(sun);

sun.x = 200;

sun.y = 200;

/*
"spot" is a child of "sun" and so is "earth". Hence, their x and y positions are relative to the (0,0) point of "sun". The (0,0) point of "sun" is the center of the disk drawn in "sun". Indeed, sun.graphics.drawCircle(0,0,40) method that we used above, draws a circle around the point (0,0) within "sun".
*/

sun.addChild(spot);

spot.x = 20;

spot.y = 10;

sun.addChild(earth);

earth.x = 120;

earth.y = 0;

/*
"moon" is assigned as a child of "earth". (It is then a grandchild of "sun". We say it is a decendant of "sun".) Thus the x,y postion of "moon" is relative to the center of "earth".
*/

earth.addChild(moon);

moon.x = 50;

moon.y = 0;

 

/*
We accomplish the orbiting effect through a simple application of rotation property. Each time our movie enters a new frame (12 times per second), "sun" is rotating clockwise by 1 degree around its (0,0) point. (We choose 1 degree, the rest follows from the way "rotation" property of a display object works.) Since "spot", "earth" and "moon" are descendants of "sun" (they are contained in "sun"), they will rotate as "sun" rotates about (0,0) point of "sun". We make "earth" rotate 3 degrees clockwise on ENTER_FRAME. Since "moon" is a child of "earth" it will rotate about (0,0) point of "earth" together with "earth". Finally, we make "moon" rotate about its (0,0) point, which happens to be its center because of the way we drew in "moon".
*/

stage.addEventListener(Event.ENTER_FRAME, orbit);

function orbit(evt:Event):void {

sun.rotation++;

earth.rotation+= 3;

moon.rotation-=5;

}

 

As you can see from the code, the parent-child relationship is at the core of our little applet. The hierarchy of display objects to be rendered on screen in a Flash CS3 movie is called the Display List. We discuss the Display List on the next page of this tutorial.

Back to Intermediate Tutorials              Back to Flash and Math Home

We welcome your comments, suggestions, and contributions. Click the Contact Us link below and email one of us.

Adobe®, Flash®, ActionScript®, Flex® are registered trademarks of Adobe Systems Incorporated.