There are a variety of ways to create simple object to be displayed and positioned on the stage. We will examine six different techniques:
The easiest way to create a simple object to position and display it is to simply:
It may not always be expedient that objects be seen on the stage initially at runtime. For example, game elements are usually created dynamically once the game is started. Once an object is created manually (see previous step), it can be deleted from the stage and then recreated dynamically from the library.
// Box 1 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ var myBox1:Box = new Box(); myBox1.x = 0; myBox1.y = 100; addChild (myBox1);
NOTE: Line 1 create a new instance of the object from the library. Line 2 and 3 position the object on the stage and the fourth line displays the object on the stage.
Some objects can be completely created in code with using an graphic assets using the drawing API in Flash:
// Box 2 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
var myBox2:Sprite = new Sprite(); // Use the lineStyle method to specify a one-pixel solid black // line and then draw Box using a series of lineTo methods. // Wrap the lineTo methods with the beginFill and endFill methods. with (myBox2.graphics) { lineStyle (1,0x000000,1); beginFill (0x00FF00); //lineTo (0,0); lineTo (100,0); lineTo (100,100); lineTo (0,100); endFill (); } myBox2.x = 150; myBox2.y = 100; addChild (myBox2);
NOTE: The line "lineTo (0,0)" is commented out because it is optional. It is IMPLIED that you are starting your virtual pen at point (0,0). Also, note that the "lineStyle" has three arguments (thickness, color, and alpha); whereas, the "beginFill" has two arguments (color with and an optional alpha).
Similar to the previous example, simply shapes (i.e., rectangle, circle, etc.) can be created easily WITHOUT having to "draw" the points using a Graphics method instead of the Drawing API even though they are similar.
//Box 3 drawRect(x,y,w,h) ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ //Step 1: Create Object ~~~~~~~~~~ var myBox3:Sprite = new Sprite(); // Specify a one-pixel solid black line and then draw it using the lineTo method // Wrap the lineTo methods with the beginFill and endFill methods. // NOTE: Except for drawCircle and drawRoundRect methods, // the parameters are x,y, width and height. //Step 2: Add properties to Object ~~~~~~~~~~~~ with (myBox3.graphics) { lineStyle (1,0x000000,1); beginFill (0x0000FF, .5); drawRect (0,0,100,100);//Regular rectangle // drawRoundRect(0,0,100,100,20) //Rectangle with all radius the same // drawRoundRectComplex(0,0,100,100,0,15,10,20) //Rectangle with 4 different radius. // drawCircle(0,0,50) //Circle with raius // drawEllipse(0,0,75,100) //Ellipse with w/h endFill (); } //Step 3: Display Object ~~~~~~~~~~~~ myBox3.x = 300; myBox3.y = 100; addChild (myBox3);
ALTERNATIVE: To convert the previous example or any other procedure-based code to a class-based code, you could do the following
Complete code listed below:
package { import flash.display.Sprite; public class DrawSimpleObjects extends Sprite { private var myBox3:Sprite; public function DrawSimpleObjects () { //Box 3 drawRect(x,y,w,h) ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ //Step 1: Create Object ~~~~~~~~~~ myBox3 = new Sprite(); // Specify a one-pixel solid black line and then draw it using the lineTo method // Wrap the lineTo methods with the beginFill and endFill methods. // NOTE: Except for drawCircle and drawRoundRect methods, // the parameters are x,y, width and height. //Step 2: Add properties to Object ~~~~~~~~~~~~ with (myBox3.graphics) { lineStyle (1,0x000000,1); beginFill (0x0000FF, .5); drawRect (0,0,100,100);//Regular rectangle // drawRoundRect(0,0,100,100,20) //Rectangle with all radius the same // drawRoundRectComplex(0,0,100,100,0,15,10,20) //Rectangle with 4 different radius. // drawCircle(0,0,50) //Circle with raius // drawEllipse(0,0,75,100) //Ellipse with w/h endFill (); } //Step 3: Display Object ~~~~~~~~~~~~ myBox3.x = 300; myBox3.y = 100; addChild (myBox3); } } }
Then, create a new fla file and save it to whatever name you like in the same location as the class file. Now, there are two ways to display the object on the stage:
var myBox3:DrawSimpleObjects = new DrawSimpleObjects(); addChild(myBox3)
NOTE: You should see the box displayed on the stage at a predefined coordinate of x =300 and y = 100. Notice that you had to instantiated the object in the timeline code.
ENHANCEMENT: Instead of having the x and y values hard-wired into the class, cut them and paste them to the timeline code (Line 2-3):
var myBox3:DrawSimpleObjects = new DrawSimpleObjects() myBox3.x = 300; myBox3.y = 100; addChild(myBox3);
IMPORTANT NOTE:
You see the box displayed as before; however, you did no have to instantiate the object. When you use a document class it will AUTOMATICALLY instantiate the object. However, you cannot add any properties to the object. This is because the document class in essence REPLACES the timeline. If you want to add properties or may any other changes click on the Edit button in the Properties panel next to the class name and edit the class file directly.
You cannot have timeline code and a document class AT THE SAME TIME. If you try your will get a "Call to possibly undefined method addFrameScripts." However, you can have a timeline or document class and call on other classes from within them.
Similar to the procedural-base programming code version, a object oriented class version of an object can be created. In this case, the Box will always be the same:
package { import flash.display.* import flash.geom.* public class DrawRect extends Sprite { private var Box:Sprite; public function DrawRect () { Box = new Sprite(); Box.graphics.lineStyle (1,0,100); Box.graphics.beginFill (0xFF00FF, .5); Box.graphics.lineTo (100,0); Box.graphics.lineTo (100,100); Box.graphics.lineTo (0,100); Box.graphics.endFill (); addChild(Box); } } }
//Box 4 Create with Class ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ var myBox4:DrawRect = new DrawRect(); Box.x = 450; Box.y = 100; addChild (myBox4);
NOTE: It is important to note that the addChild() method is used in both the class and in the Flash main document. It is helpful to think of the addChild() method in the utility class is used to display the object in code. The other addChild() method in the main movie is used display the object in the main file.
You can also create your own class. In this case, the Circle can have its radius, size and color change when creating the instance or you can use the default values. As an alternative to the previous example, if the shape you are drawing does NOT require interaction, you can extend the Shape class instead of the Sprite class. It is helpful to think that when you are using the Sprite class, you are creating a container on the stage for the class to "draw" into. However, when you use the Shape class, you are drawing DIRECTLY on the stage and as a result, you do not need an object to associate the drawing with and you do not need to use the addChild method to display it. This is akin to drawing on the wall instead of the whiteboard or blackboard.
package { import flash.display.Shape; public class DrawCircle extends Shape { private var _radius:Number; private var _color:uint; private var _alpha:Number; public function DrawCircle (radius:Number=40, color:uint=0xFF0000, alpha=1) { _radius = radius; _color = color; _alpha = alpha; init (); } public function init ():void { graphics.lineStyle (5,0xFF0000,.5); graphics.beginFill (_color, _alpha); graphics.drawCircle (0,0,_radius); graphics.endFill (); } public function get radius ():Number { return _radius; } public function get color ():Number { return _color; } } }
NOTE: The get radius ( ) and get color ( ) methods are optional, but will be used later to ascertain the radius and color when no argument is used when instantiating the class to use its default values.
//Circle 5 Created with Class but dynamic ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
var myCircle5:DrawCircle = new DrawCircle(35,0xFFFF00,.5);
myCircle5.x = 600; myCircle5.y = 150; addChild (myCircle5); // Circle 4 Created with Class default value ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ var myCircle5a:DrawCircle = new DrawCircle() myCircle5a.x = 100;
myCircle5a.y = 350;
addChild(myCircle5a); trace ("The default circle's radius is " + myCircle5.radius, "and its default color is " + "\"" + myCircle5.color.toString(16)+ "\"" );
NOTE: It is important to note that you can add one, two or three parameters to the DrawCircle() list of parameters. If you add one parameter, the other two will used the default class values. If you add two parameters, the object will be created with the default parameter (i.e., alpha = 1). Value must be in their correct order.
Normally, you use the syntax "addChild(myObject)" to add a child (i.e., myObject) object to the stage object as its parent to display it on the stage. However, you can add an object or a group of objects (children objects) to another object. This process is called reparenting because you are moving the children objects from the stage as a parent to another object as a parent.
import flash.display.Shape; import flash.display.Sprite; // Create Rectangle 1 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ var rect1:Shape = new Shape(); rect1.graphics.lineStyle(1); rect1.graphics.beginFill(0x0000FF, 1); rect1.graphics.drawRect(0,0,75,50); rect1.x = 15 rect1.y = 15 // Create Rectangle 2 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ var rect2:Shape = new Shape(); rect2.graphics.lineStyle(3); rect2.graphics.beginFill(0xFF0000, 1); rect2.graphics.drawRect(0,0,75,50); rect2.x = 50 rect2.y = 75 // Create group container ~~~~~~~~~~~~~~~~~~~~~~~~~ var group:Sprite = new Sprite() group.graphics.lineStyle(2); group.graphics.beginFill(0x00FF00, 1); group.graphics.drawRect(0,0,175,150); group.x = 100 group.y = 100 // Add rect1 and rect2 to group ~~~~~~~~~~~~ group.addChild(rect1); group.addChild(rect2); // Display group with rect1 and rect 2 in it ~~~~~ addChild(group)