Common Pitfalls

[ LiB ]

When you're just learning to program, and even when you're learning how to program in a new language, you will encounter many pitfalls. By pitfalls , I'm referring to those times when you get stuck and have to figure out why. Sometimes, only exposure to these pitfalls can teach you to avoid them. One mistake might mean that none of your code will work, so in this chapter, I'll spend some time showing you some of the common ActionScript pitfalls.

Cursor Position within a Clip

When writing code within a Movie Clip, you might decide that you need to track the cursor position by using the _xmouse and _ymouse properties.

An example of this is the slider code that you played with in earlier chapters. It uses the cursor's x position and follows it (within certain constraints). Sometimes, you might write this script in such a way that you will have your program misbehaving. Below, I have intelligently written a bug into the program in such a way that everything looks nice and smooth, yet, the program doesn't behave properly.

Check out GDA_PROG16.1.fla and try to find out what's wrong. I have listed the code here.

 // The onClipEvent(load) handler // initializes all other handlers // in this Movie Clip. onClipEvent(load) {  // These properties // are used and can be // adjusted to where you // want your slider min // and max to be on the // x axis. this.minX = 100; this.maxX = 300; // This handler is declared // and executed for when the // mouse clicks on the mc-- // it then flags its variable this.onPress = function() {   this.active = true; } // This flags the rest of the // handlers that the mouse was // released. this.onRelease = function() {   this.active = false; } // This function was also declared // for when the user releases the // mouse outside of the clip. this.onReleaseOutside = function() { this.active = false; } // This is the heart of it all-- // It is executed when the mouse is // moved and if pressed. this.onMouseMove = function() {   // This only executes if the mouse   // is being pressed (and flagged)   if (this.active) {         // Follow the _xmouse to         // simulate dragging.         this._x = _xmouse;         // Constrain this position to         // the max property that we set.          if (this._x > this.maxX) {        this._x = this.maxX;      }           // Also constrain our position           // to the min property we set.           if (this._x < this.minX) {         this._x = this.minX;       }     }   } } 

The code looks neat, but try to run the program and see if it works correctly. When you test the program, you can see that every time you try to drag the slider button, it jumps to random parts of the slider and it also tends to dock itself to the far left. What's the deal? See Figure 16.1

Figure 16.1. A slider that doesn't behave!

graphic/16fig01.gif


Before I explain, compare the previous listing with this one (that's the working code within GDA_PROG16.2.fla).

 // The onClipEvent(load) handler // initializes all other handlers // in this Movie Clip. onClipEvent(load) {   // These properties   // are used and can be   // adjusted to where you   // want your slider min   // and max to be on the   // x axis.   this.minX = 100;   this.maxX = 300;   // This handler is declared   // and executed for when the  // mouse clicks on the mc-- // it then flags its variable this.onPress = function() {    this.active = true; } // This flags the rest of the // handlers that the mouse was // released. this.onRelease = function() {    this.active = false; } // This function was also declared // for when the user releases the // mouse outside of the clip. this.onReleaseOutside = function() {    this.active = false; } // This is the heart of it all-- // It is executed when the mouse is // moved and if pressed. this.onMouseMove = function() {   // This only executes if the mouse   // is being pressed (and flagged)   if (this.active) {           // Follow the _xmouse to           // simulate dragging.           this._x = _root._xmouse;           // Constrain this position to           // the max property that we set.           if (this._x > this.maxX) {         this._x = this.maxX;      }           // Also constrain our position           // to the min property we set.           if (this._x < this.minX) {          this._x = this.minX;        }      }   } } 

In case you haven't found the line that makes the program work, it is:

 this._x = _root._xmouse; 

In GDA_PROG16.1.fla, the line that caused the error is explained in the following paragraphs and the line was this:

 this._x = _xmouse; 

As you can see, there was no problem writing either but the logic can be easily overlooked. The way I first wrote it, which was the wrong way, could be easily rewritten, again wrongly, as:

 this._x = this._xmouse; 

This way, it will return the cursor position relative to the Movie Clip where you wrote the code. You do not want thisyou want to reference the position of the cursor off the main stage from inside the Movie Clip, not the position of the cursor from inside the clip. The reason you got crazy values with the first line is because the Movie Clip was a lot smaller than the main moviethese small values made it dock left.

This is where you go, "Ahhhhhhhhh, I knew that."

From Buttons to Movie Clips to Timelines

Sometimes you may get confused about how to reference functions off the main Timeline when you want to call them from inside buttons or Movie Clips. Even if you already know how to do this, when you're in a rush to see something work you can easily get careless.

In GDA_PROG16.3.fla, I have embedded code within the main Timeline, in a button and a Movie Clip. There is a trace function called traceTest in the main Timeline; both the button and the Movie Clip will use this function.

The scope of a button is within the same scope as the code that was written in the same frame as that button. In other words, you won't have to use any dot syntax when referencing a function from the main timeline from within a button.

See the following listing for the function you will use to test these facts.

 // Game Development with ActionScript // By Lewis Moronta (c) 2003 function traceTest() {   trace("traceTest was called!"); } 

When calling this function from a button, it's okay to use the following:

 on (release) {   traceTest(); } 

Even though you are never too safe to write:

 on (release) {   _parent.traceTest(); } 

Movie Clips are quite different than buttons. As Movie Clips are objects themselves , they can also contain methods . This means that you have to be specific with the ActionScript if you want to call a function; nothing will happen if you don't call the function correctly.

The clip that I'm using within this demo contains the following code:

 onClipEvent(load) {   traceTest(); } 

The code above doesn't workwhy? Because there aren't any traceTest methods within this clip. But you already knew thatyou're trying to call the one on the main Timeline. To fix things, you can either use _parent or _root as you are only one level up:

 onClipEvent(load) {   _parent.traceTest(); } 

And everything works like a charm .

Working with Curly Brackets

Yes, I know you've been through this before but topics like these warrant revisiting . Many novice programmers seem to have a problem writing neat code, and it's easy to fall into bad habits. Luckily, the Actions panel has an Auto-Format button that can help you clean up your code. Personally, I believe you should use this button until you are ready to pick up your own style of coding.

Check out the following listing, that was extracted from GDA_PROG16.4.fla.

 // Game Development with ActionScript // By Lewis Moronta (c) 2003 var a = 30; var b = 40; if (a > b)   trace("Do this then that...");   trace("Do more stuff..."); for (; a > 20; a--)   trace("Counting down - count #"+a); 

If this program was doing something important, can you guess what can go wrong? See the if block below where it compares a with b ? How many statements are in that block? If you said two, take a closer look.

 if (a > b)   trace("Do this then that...");   trace("Do more stuff..."); 

Remember that when there are no brackets in a block, you can only have one statement in that block. This would be a bad thing if the statement is false, because it would execute the "second" trace statement without the condition being true (see below), and this can cause errors in your program.

 trace("Do more stuff..."); 

This would be a sample output:

 Do more stuff... Counting down - count #30 Counting down - count #29 Counting down - count #28 Counting down - count #27 Counting down - count #26 Counting down - count #25 Counting down - count #24 Counting down - count #23 Counting down - count #22 Counting down - count #21 

As you can see, a statement from the block escaped and executed without consent of that if block. How do you fix this? Yes, you guessed rightyou have to bring the curly brackets to the rescue. Check it out:

 if (a > b) {   trace("Do this then that...");   trace("Do more stuff..."); } 

Now you can get the expected output:

 Counting down - count #30 Counting down - count #29 Counting down - count #28 Counting down - count #27 Counting down - count #26 Counting down - count #25 Counting down - count #24 Counting down - count #23 Counting down - count #22 Counting down - count #21 

Now, what would be the output if that conditional statement were true? Just to verify it, I have listed it here:

 Do this then that... Do more stuff... Counting down - count #30 Counting down - count #29 Counting down - count #28 Counting down - count #27 Counting down - count #26 Counting down - count #25 Counting down - count #24 Counting down - count #23 Counting down - count #22 Counting down - count #21 

It's great practice to verify all your code, no matter how simple it is, until you are absolutely sure how all the code works. This is how you achieve expert status.

The pitfalls discussed here are but a few to keep in mind. As you get more experienced , you will stack up your own list of "things-not-to-do." This will be a never-ending list that changes with times and technologies.

[ 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