The attachMovie Demo

[ LiB ]

Now that you know how to set up a symbol for the attachMovie Movie Clip method, let's turn to the attachMovie demo. The file name of the SWF is GDA_PROG6.3.swf. It has two frames on the main Timeline. One introduces what the user is about to see in the splash screen, and the other screen is where the action takes place. The button on the screen you see in Figure 6.7 has the following code:

Figure 6.7. Splash screen to the Lost Marbles !!! demo

graphic/06fig07.gif


 on (release) {   nextFrame(); } 

This code should be familiar enough. The on(release) button handler executes its block when the user finishes pressing a button. The nextFrame() function causes the movie to advance and stop one frame forward. But in order for the user to see this frame, the movie has to pause here until the user clicks this buttonhow is that done? Easily. Check the first frame on the project file GDA_PROG6.3.fla; I have placed a stop command so that the movie will freeze until the user clicks on the button, executing the nextFrame command.

Now I'm about to introduce the code that really makes this program tick. You already saw the important setup section of the program in the last section of this chapter. Now you're going to see the code that is controlling all the lost marbles at full power. See the following listing, and try to understand it before reading on. 139The attachMovie Demo

NOTE

NOTE

I used arrays all over the place in this demo. Keep an eye out for how I used them to achieve certain effects.

 // By Lewis Moronta, 2003 // GDA_PROG6.2.fla // This little demo shows off the // use of OOP in ActionScript. attachMovie(), // Mult-dimensional Arrays and onEnterFrame // event handlers are used. Among the basics, // the for loops and if structures show off // their importance. // IMPORTANT: Feel free to modify... // This is one of the best ways to learn! // This is *THE* variable that decides // how many bouncing balls are in the scene. numBalls = 25; // Here we declare a new array called // bouncingBalls of size numBalls bouncingBalls = new Array(numBalls); // Here we loop through numBalls in // order to initialize each ball. for (i = 0; i < numBalls; i++) {   // This line is *VERY* important   // it declares each item as an object.   // This allows us to add properties to   // each item in bouncingBalls   bouncingBalls[i] = {};   // These next couple of lines find a number from   // -20 to 20 and assign it to the new velocity variables   bouncingBalls[i].xv = Math.round(Math.random()*39+1)-20;   bouncingBalls[i].yv = Math.round(Math.random()*39+1)-20;   // "ball" is a Movie Clip we declared and is in our library   // window. attachMovie() makes copies of it. Once we have   // a copy, we then initialize x & y by centering them.    bouncingBalls[i].mc = attachMovie("ball", "ball"+i, i);   bouncingBalls[i].mc._x = 550/2;   bouncingBalls[i].mc._y = 400/2; } onEnterFrame = function () {   for (i = 0; i < numBalls; i++) {     // These two lines essentially update the screen     // by updating the bouncingBalls array.     bouncingBalls[i].mc._x += bouncingBalls[i].xv;     bouncingBalls[i].mc._y += bouncingBalls[i].yv;     // The following section is the collision detection section.     // Try saying that 3x fast! This first "if" checks to see     // if we are "the balls width" from the right side of the screen     // if so, then we adjust the ball to that position and we reverse     // the velocity to get that "bouncing effect."     if (bouncingBalls[i].mc._x > (549-bouncingBalls[i].mc._width)) {       bouncingBalls[i].mc._x = (549-bouncingBalls[i].mc._width);       bouncingBalls[i].xv = -bouncingBalls[i].xv;     }     // Now we check the left side of the screen and do the same.     if (bouncingBalls[i].mc._x < bouncingBalls[i].mc._width) {       bouncingBalls[i].mc._x = bouncingBalls[i].mc._width;       bouncingBalls[i].xv = -bouncingBalls[i].xv;     }     // And now for the bottom bouncing test...     if (bouncingBalls[i].mc._y > (399-bouncingBalls[i].mc._height)) {       bouncingBalls[i].mc._y = (399-bouncingBalls[i].mc._height);       bouncingBalls[i].yv = -bouncingBalls[i].yv;     }     // Finally, we check against the top.     if (bouncingBalls[i].mc._y < bouncingBalls[i].mc._height) {       bouncingBalls[i].mc._y = bouncingBalls[i].mc._height;       bouncingBalls[i].yv = -bouncingBalls[i].yv;     }   } // End of for }; // End of onEnterFrame 

Looks scary, doesn't it? It won't be after this chapter. As a matter of fact, you can use most of this code to create your own little programs that produce cool effects. I have broken it down for you so that you can understand what each piece does. Look at the following snippet:

 // This is *THE* variable that decides // how many bouncing balls are in the scene. numBalls = 25; 

This was the variable I defined that the initialization part of the program was written around. Just by changing its value you can determine how many lost marbles will be on stage at any one time.

The following line declares an array. I have formatted the structure of the program so that each of these elements will contain an object (of type Movie Clip) that we can manipulate in order to handle all of what's going on.

 // Here we declare a new array called // bouncingBalls of size numBalls bouncingBalls = new Array(numBalls); 

Here I enter the very first for loop of the program. It will loop until i is greater than the value in numBalls . What's done in this loop is very interestingan object is created and initialized into the array I created in the last part. Pay close attention.

 // Here we loop through numBalls in // order to initialize each ball. for (i = 0; i < numBalls; i++) { 

This following piece of code is something you should also be familiar with. It declares each item in the array as type object. This will allow us to add properties to each of the elements and treat each as a regular object.

 // This line is *VERY* important // it declares each item as an object. // This allows us to add properties to // each item in bouncingBalls bouncingBalls[i] = {}; 

I immediately created two new properties in the object we generated from the last line. These properties are the x and y velocities that will make the balls move across the screen.

You will also notice a new math method, Math.round . It's similar to Math.floor except that floor only rounds down. Math.round , as the name implies, rounds to the nearest whole number.

You should also notice the number manipulation here. I first scaled the result from random from 039. I then added 1 to this result so that I can have a new range of 1-40. I then rounded this result so that I can be sure I'm only dealing with integers. Finally, I subtracted 20 from this result to yield my new range of 20 to 20. Whatever the output of this calculation is becomes my new velocity for the current object being initiated.

 // These next couple of lines find a number from // -20 to 20 and assign it to the new velocity variables bouncingBalls[i].xv = Math.round(Math.random()*39+1)-20; bouncingBalls[i].yv = Math.round(Math.random()*39+1)-20; 

Remember when I was talking about regarding linkage properties? That is what has to be done for the following line to work. The ball Movie Clip has the linkage properties setup and the identifier name of "ball." This allows attachMovie to create instances from this symbol.

As I showed you before, I used the loop's variable to dynamically create an instance name and assign a depth to the new object. It's pretty standard, and you should be getting used to it already. There's nothing more to that line.

 // "ball" is a Movie Clip we declared and is in our library // window. attachMovie() makes copies of it. Once we have // a copy, we then initialize x & y by centering them. bouncingBalls[i].mc = attachMovie("ball", "ball"+i, i); 

As the new property mc was created in the last line (of type Movie Clip) we can automatically start using the built-in Movie Clip properties _x and _y . I used them in this case to center the object because I didn't want them all stacked up in a corner. These lines were more of

a preference thing than anything elseI just thought it was cool how the balls start moving from the center of the screen. Wouldn't it be boring if they just sprouted out from a corner?

 bouncingBalls[i].mc._x = 550/2; bouncingBalls[i].mc._y = 400/2; } 

NOTE

NOTE

Why did I use 550 and 400 in the last bit of code? That's because those are the dimensions of the viewable that I have in my project file. In other words, if your movie has different dimensions, make sure you use those dimensions to calculate things like center points.

As I wrote this code on the main Timeline, I don't have an onClipEvent(enterFrame) handler. Instead, I have an onEnterFrame handler that has the same function. This is the one I used for frame-to-frame action. Observe how it is defined:

 onEnterFrame = function () { 

The first thing I did before moving on in this function was to create a loop that can loop through all my elements in the bouncingBalls array. This way, I can make sure all my elements and objects are being acted upon.

Notice that numBalls is used in the following statement. Also notice that numBalls is global. If the var keyword were to be used, onEnterFrame wouldn't be able to use its value.

 for (i = 0; i < numBalls; i++) { 

This next piece of code is the code that makes the balls move. Remember that Movie Clip instances were stored in the mc property of each object. xv and yv properties were also created and initialized (as velocities). These velocities are added to the Movie Clip's current position on every framethis is what causes the motion. Notice that the for loop's variable is being used to decide which element (or ball) in the array to control. See how flexible this OOP stuff can be?

 // These two lines essentially updates the screen // by updating the bouncingBalls array. bouncingBalls[i].mc._x += bouncingBalls[i].xv; bouncingBalls[i].mc._y += bouncingBalls[i].yv; 

Below, there are a series of if statements that test for certain conditions. The first if statement below checks to see if the current ball is off the right side of the screen, by checking for anything past 550 pixels plus the object's width. If the ball is off the right side of the screen, it adjusts the ball position by putting it right on the edge (just in case it went too far out) and then reversing its ball velocity. This reversal causes the ball's velocity to be subtracted from its current position if it's being added, and added if it's being subtracted. In other words, the ball will go in the other direction.

 // The following section is the collision detection section. // Try saying that 3x fast! This first "if" checkes to see // if we are "the balls width" from the right side of the screen // if so, then we adjust the ball to that position and we reverse // the velocity to get that "bouncing effect". if (bouncingBalls[i].mc._x > (549-bouncingBalls[i].mc._width)) {   bouncingBalls[i].mc._x = (549-bouncingBalls[i].mc._width);   bouncingBalls[i].xv = -bouncingBalls[i].xv; } 

The following segment is very similar to the previous one and the following two. This one checks to see if the ball is off the left side of the screen. If it is, the ball's position will be adjusted and its velocity reversed . I can tell you're getting the hang of this already!

 // Now we check the left side of the screen and do the same. if (bouncingBalls[i].mc._x < bouncingBalls[i].mc._width) {   bouncingBalls[i].mc._x = bouncingBalls[i].mc._width;   bouncingBalls[i].xv = -bouncingBalls[i].xv; } 

The snippet of code to follow tests to see whether the ball is off the bottom of the screen. I know, I know, this seems repetitive, but there are four sides to our screen, and this has to be done to complete the effect. Again, if this tests to true, the position is adjusted and the velocity is reversed.

 // And now for the bottom bouncing test... if (bouncingBalls[i].mc._y > (399-bouncingBalls[i].mc._height)) {   bouncingBalls[i].mc._y = (399-bouncingBalls[i].mc._height);   bouncingBalls[i].yv = -bouncingBalls[i].yv; } 

And the last bit of code checks to see if the ball went off the top of the screen. If it did, the code does what the other statements didit adjusts the position and reverses the velocity. Crammed into your brain sufficiently?

 // Finally, we check against the top.   if (bouncingBalls[i].mc._y < bouncingBalls[i].mc._height) {     bouncingBalls[i].mc._y = bouncingBalls[i].mc._height;     bouncingBalls[i].yv = -bouncingBalls[i].yv;     }   } // End of for }; // End of onEnterFrame 

I believe you are now ready to create a full-power particle system with your newfound knowledge. You can actually create pretty interesting games with the knowledge you now possess. All you have to do is believe.

[ 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