AS: CANON - PAGE TWO
GETTING THE X AND Y COMPONENTS
It's gonna get a bit more complicated here. To get the angle, you'll have to learn some basic trigonometry. But let's not get ahead of ourselves.
1) Dive right in and create a canon (a simple rectangle will suffice, this isn't a drawing tutorial.) Convert it to a symbol (F8) and give it an instance name of "canon".
2) Set the transformation point to the bottom of your canon, unless you want it rotating around the center (which you don't, by the way.)
3) Ah, time for code already? Don't worry, it's not that complicated. Put this in the canon MC.
onClipEvent (enterFrame) {
if (Key.isDown(Key.UP)) {
_rotation -= 5;
} else if (Key.isDown(Key.DOWN)) {
_rotation += 5;
}
}
In this code, we use the _rotation property. The _rotation property...you guess it...rotates an object.
When you press the UP arrow, it rotates to the left, when you press the DOWN arrow, it rotates to the right.
NOTE: _ROTATION SPECIFIES THE ROTATION OF THE MOVIE CLIP IN DEGREES
Alright! Now we can change the angle we shoot at!
We won't go over any more direct code in this section, just concepts. However, if you wish to get a full understanding, you CAN NOT skip over the rest of this section.
TRIGONOMETRY
Some of you may know it, some of you may not. And for those who do know, and think that they'll be able to whiz through this part, Flash still has a few tricks up it's sleeve (apparently the creators of actionscript tried to make coding difficult.)
We will be using the sine and cosine(written as sin and cos, or Math.sin and Math.cos in Flash) functions making this part of the game.
As a general rule, in a triangle:
sin(angle) = opposite side / hypotenuse
cos(angle) = adjacent side / hypotenuse
see fig. 1
So what do triangles have to do with canons?
Everything, actually. Remember the power variable we calculated in part 1? That's the hypotenuse. But we can tell the canonball to move like that without the x and y components.
Assuming that you've completed basic algebra, you know that we have to isolate the variable. In this case, it's vx and vy (x velocity and y velocity). We know our degree (_rotation) and we know our hypotenuse (power). So let's get cracking!
Eventually, this will be going in the code for the canonball, and that will produce a problem. As you may already know, variables defined in one MC apply ONLY to the MC. So while pointer will know what "power" is, our canonball will have no clue!
We have to tell Flash to use the "power" variable from the pointer. The code for this is _root.pointer.power.
The _root brings us back up to the main timeline, and the .pointer takes us into the pointer MC. Finally, we grab the power variable.
Basic algebra will tell us that...
Math.sin(_rotation) = vy / _root.pointer.power
Math.sin(_rotation) * _root.pointer.power = vy
Likewise:
Math.cos(_rotation) * _root.pointer.power = vx
However this is not the case in Flash. The problem is that while rotation gives us an MC's rotation in DEGREES, Math.sin and Math.cos give us the number in RADIANS!
We'll have to convert the number. The equation to convert radians to degrees is:
radian = Math.PI/180 * degree
Not a problem! Just plug in _rotation for the degree, and put the whole thing in the equation. We end up with:
vy = _root.pointer.power*(Math.sin(Math.PI/180*
_rotation));
And:
vx = _root.pointer.power*(Math.cos(Math.PI/180*
_rotation));
Whew! We've got the x and y components. Moving on to the final part...
MAKING THE CANON SHOOT
We're finally ready to make the canon shoot. This is where everything comes together ('bout time).
1) Draw a cicle, and convert it to a movie clip (F8). Give it an instance name of "ball".
2) We're probably gonna want to send this to the back, so select it and press Ctrl+Shift+Down
3) And now for the code. We'll start off by defining "launched" as soon as the MC loads.
onClipEvent (load) {
launched = false;
}
Obviously, we don't want the ball to be launched yet, so we have set it to false.
onClipEvent (enterFrame) {
if (Key.isDown(Key.SPACE)) {
launched = true;
}
This simply sets "launched" to true when the user presses the spacebar.
if (launched == false) {
this._rotation = _root.canon._rotation;
this._x = _root.canon._x;
this._y = _root.canon._y;
vx = _root.pointer.power*(Math.cos(Math.PI/180*
_rotation));
vy = _root.pointer.power*(Math.sin(Math.PI/180*
_rotation));
Now, what happens here? When the ball has not been launched, we set it's x and y coordinates to that of the canon.
Then we set it's vx and vy, which we found (painstakingly) in part 2.
} else if (launched == true) {
this._x += vx;
this._y += vy;
vy += 1;
}
And what if "launched" is true? The ball's x and y simply increase by the vx and vy that we just defined. Simple, no?
But what of the vy+=1, you ask? Well, without it, our ball would simply travel in a straight line off the screen.
The last line provides gravity, so our ball travels in a nice arc.
if(_x>Stage.width || _x<0 || _y<0 || _y>Stage.height){
launched=false;
_root.pointer.scan=true;
}
}
We finish up the code in the ball by setting some boundries. In flash "||" means "OR". "Stage.width"and
"Stage.height" are the maximum width and heights in our document. 0 is the lowest. See where we're going?
If the ball goes past any one of our boundries, we set "launched" back to false, so we can shoot the ball all over again.
We also tell the pointer to scan the rectangle again, by saying "_root.pointer.scan=true;".
------------------------------------------
-----------------------------
And there you have it! Test your movie, and you should have a working canon!
Feel free to post any questions or comments you may have.
