Drawing Shapes in Movie Clips

[ LiB ]

Creating a shape in a Movie Clip is no harder than what you've already been doing. It's simply a matter of placing the commands inside the clip, or referencing the clip through dot notation. ActionScript not only allows you to draw a shape in Movie Clips, it allows you to create empty Movie Clips that you can fill with wonderful artwork.

 myMovieClip.createEmptyMovieClip("instanceName", depth); 

When working with the main Timeline, it's okay to use _parent, _root , and this as the Movie Clip reference. I have used createEmptyMovieClip like this in the upcoming demo:

 this.createEmptyMovieClip("triangle", 1); 

This causes an empty Movie Clip with the instance name of triangle and with the depth of 1 to be created on the main Timeline.

Any Movie Clip methods can now be used on triangle with no problem.

NOTE

NOTE

Empty Movie Clips don't have a set dimension.They adjust to whatever you draw into them.The registration point (0, 0) will always be on the upper left-hand corner.

Before you look at the listing for the demo in this section, check out the screen shot in Figure 7.13.

Figure 7.13. A shape drawn in an empty Movie Clip

graphic/07fig13.gif


 // Game Development with ActionScript // By Lewis Moronta (c) 2003 // Creating a shape inside an empty // Movie Clip with ActionScript. // Create an empty Movie Clip // that we are ready to doodle in. this.createEmptyMovieClip ("triangle", 1);  // Draw the graphics right into // the new instance that was created. with (_root.triangle) {   beginFill (0x0000FF, 60);   lineStyle (5, 0xFF0000, 100);   moveTo (25, 0);   lineTo (50, 50);   lineTo (0, 50);   lineTo (25, 0);   endFill(); } // Center the triangle horizontally triangle._x = 275 - (triangle._height/2); onEnterFrame = function() {   // Move it down 10 pixels on every frame.   triangle._y += 10;      // If it's off the bottom, wrap it around the top.   if (triangle._y > 400)     triangle._y = -triangle._height; }; 

The screen shot of this demo is not as exciting as the demo itself. This program demonstrates how to create an empty Movie Clip, draw stuff in it, and then manipulate it by using its instance name. I made the shape move vertically in this case. It moves south until it hits the bottom of the screen. And when it does, it pops out of the top. You should have that part of the code memorized already.

The first thing I do in this script is create an empty Movie Clip called "triangle" on the main Timelineyou can tell because I referenced it by the keyword this . It's on depth layer 1 as I mentioned before:

 // Create an empty Movie Clip // that we are ready to doodle in. this.createEmptyMovieClip ("triangle", 1); 

The next thing you see is a weird new command, called with . Here's how I wrote it:

 // Draw the graphics right into // the new instance that was created. with (_root.triangle) { 

This command comes in handy when you have a list of commands referencing the same Movie Clipyou can then in turn block out the code where the batch of commands will be

executed and assign those methods to a specific clip. Let's say you had 10 lineTo commands lined up. You want to draw these lines in the Movie Clip called Square . You would literally have to type something in like this:

 Square.lineTo(x1, y1); Square.lineTo(x2, y2); Square.lineTo(x3, y3); Square.lineTo(x4, y4); Square.lineTo(x5, y5); Square.lineTo(x6, y6); Square.lineTo(x7, y7); Square.lineTo(x8, y8); Square.lineTo(x9, y9); Square.lineTo(x10, y10); 

The with command can actually save you some typing. You can specify in what Movie Clip you will be executing these methods and just write out the reference once. Check out the following:

 with (_root.Square) {   lineTo(x1, y1);   lineTo(x2, y2);   lineTo(x3, y3);   lineTo(x4, y4);   lineTo(x5, y5);   lineTo(x6, y6);   lineTo(x7, y7);   lineTo(x8, y8);   lineTo(x9, y9);   lineTo(x10, y10); } 

Notice that Flash knows where to execute these methods because they are enclosed in the with (_root.Square) block.

The commands within the with block initialize the line and the fill styles and draw the shape within the Movie Clip.

 beginFill (0x0000FF, 60); lineStyle (5, 0xFF0000, 100); moveTo (25, 0); lineTo (50, 50); lineTo (0, 50); lineTo (25, 0); endFill(); 

Just as a review: the line style was set to 5, the color to red, and opacity to 100. Lines were drawn from (25, 0) to (50, 50) to (0, 50) and back to (25, 0). This shape is also filled with the color blue.

After the previous lines of code, you have already created the triangle. The following line positions itI modified the _x property in our new Movie Clip so that the new graphic is horizontally centered.

 // Center the triangle horizontally triangle._x = 275 - (triangle._width/2); 

How did I calculate the center of the screen? Well, the screen width is 550, so half of it is 275. The center of the triangle would be half its width. If you subtract half of its width from half the stage's width, you would then be able to center the Movie Clip effectively.

The following snippet of the code is a onEnterFrame function that I declared for the main Timeline. You already know that this method is called once every frame. This is the function that helps us animate ouronce empty and now filledMovie Clip.

 onEnterFrame = function() {   // Move it down 10 pixels on every frame.   triangle._y += 10;   // If it's off the bottom, wrap it around the top.   if (triangle._y > 400)     triangle._y = -triangle._height; } 

The first line within this function tells you that it's incrementing triangle's _y value by 10 on each framethis, of course, causes the Movie Clip to move down.

The following if statement checks to see if triangle's _y position is off the bottom of the screenand if it is, it resets the y position to another value that's above the stagethis causes the triangle to wrap around the top of the stage. It's still cool after so many demos.

[ LiB ]


Game Development with ActionScript
Game Development with ActionScript
ISBN: 1592001106
EAN: 2147483647
Year: 2004
Pages: 162
Authors: Lewis Moronta

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net