Introducing the Drawing API in AS2

Posted July 30, 2010 by antoarts
Categories: ActionScript 2.0, Basic

Tags: , , , ,

AS2 contains an API (Application Programming Interface) for drawing stuff on the screen. We will in this tutorial check out the basics of it (it has way more functionality than we will go trough in this post).

All code in this tutorial goes on the frame.

To use this API, we will need to first create an empty movieclip, we will do so using:
_root.createNewMovieClip("newMC",1);

There we have a new movie clip which is a child to _root (meaning root is its direct parent). The movie clip is called newMC (parameter 1) and has the depth 1 (parameter 2).

We can now draw inside this movie clip using the drawing API.

In this tutorial we will use the following features of the Drawing API

  • lineStyle to set the style of lines drawn using the API
  • moveTo to move the position we will draw a line from
  • lineTo to draw a line from the position defined using moveTo

We will start by setting the line style, we want thickness 5 and color black (#000000)
newMC.lineStyle(5,0x000000);

The first parameter is thickness (5) and the second is the color (0x000000, to change color to something different, change the zero’s after the “0x” part to the hexidecimal code for that color)

We will start drawing from the position 80,90 on the frame. (80 is the x position and 90 is the y position)

To set that as our position we use the moveTo function:
newMC.moveTo(80,90);

Now to start drawing use the lineTo function:

newMC.lineTo(122,10);

Voila! With four lines we have created a new movie clip, changed line style and drawn a line from the position 80,90 to 122,10. Feel free to play around with this. With this you could already create e.g. a simple system for drawing line charts in Flash.

Creating a run key with an energy bar – Part 1

Posted August 17, 2008 by antoarts
Categories: ActionScript 2.0, Basic

Tags: , , , , ,

So, in some games, you would like to be able to run, not only walk. Many games allows you to do this. Some games have got an energy bar, some haven’t. I’ll teach you how to make a walking system, with a run key and an energy bar. It might sound kinda complicated, but it isn’t. In fact, it’s very easy.

STEP 1:

Let’s start with the most important part. The walking code, which here also implements the running. It’s not much to add, to add the running feature.

onClipEvent (load) { //When the MC have loaded
power = 3; //The speed of the player
}
onClipEvent (enterFrame) { //When you enter the frame, this code will run itself on and on again
if(Key.isDown(Key.SHIFT)){//When shift is down
power=8; //Set what the speed should be while running.
}else{//If it isn't down
power=3; //Set power to it's original value. In this case 3.
}
if (Key.isDown(Key.LEFT)) { //When you hold down the left key
_x -= power; //x position will go lower according to the “power” variable
this._rotation = 270; //This will rotate the MC 270 degrees.
play(); //Play the walking animation, if you have any
}
if (Key.isDown(Key.RIGHT)) { //When you hold down the right key
_x += power; //x position will go higher according to the "power" variable
this._rotation = 90; //This will rotate the MC 90 degrees.
play(); //Play walking animation
}
if (Key.isDown(Key.UP)) { //When you hold down the up key
_y -= power; //y position will go lower according to the "power" variable
this._rotation = 0; //No rotation needed, will reset rotation if the MC was already rotated
play(); //Play the walking animation
}
if (Key.isDown(Key.DOWN)) { //If you hold down the down key
_y += power; //y position will go higher according to the "power" variable
this._rotation = 180; //Rotate the MC 180 degrees.
play(); //Play the walking animation
}
if (Key.isDown(Key.RIGHT) && Key.isDown(Key.UP)) { //If you hold down both the right and up key
_rotation = 45; //Rotate the MC 45 degrees.
}
if (Key.isDown(Key.LEFT) && Key.isDown(Key.UP)) { //If you hold down both the left and up key
_rotation = 315; //Rotate the MC 315 degrees.
}
if (Key.isDown(Key.RIGHT) && Key.isDown(Key.DOWN)) { //If you hold down both the right and down key
_rotation = 135; //Rotate the MC 135 degrees.
}
if (Key.isDown(Key.LEFT) && Key.isDown(Key.DOWN)) { //If you hold down both the left and the down key
_rotation = 225; //Rotate the MC 225 degrees
}
}

This did implement the running. Too bad, we haven’t got an energy bar yet, or any energy value in that case. The code above haven’t even gotten support for it yet, but that’s only the reason why you should change:

if(Key.isDown(Key.SHIFT)){

to

if(Key.isDown(Key.SHIFT) && _root.energy>0){

This will check if you actually have enough of energy. But wait, there’s another change to do in the code, add the following:

_root.energy-=0.5//Energy will do down. Change the variable to how fast you wish it to go down.

under the line you just changed (the one with the if Shift down bla bla….)

And yeah buddy, one last change, under the }else{, add the following code:

_root.energy+=0.3; //Energy have to go up too!

In case your lazy/didn’t understand, here’s the full code after modifications:

onClipEvent (load) { //When the MC have loaded
power = 3; //The speed of the player
}
onClipEvent (enterFrame) { //When you enter the frame, this code will run itself on and on again
if(Key.isDown(Key.SHIFT) && _root.energy>0){//When shift is down and you have enough of energy
power=8; //Set what the speed should be while running.
_root.energy-=0.5//Energy will do down. Change the variable to how fast you wish it to go down.
}else{//If it isn't down
power=3; //Set power to it's original value. In this case 3.
_root.energy+=0.3; //Energy have to go up too!
}
if (Key.isDown(Key.LEFT)) { //When you hold down the left key
_x -= power; //x position will go lower according to the “power” variable
this._rotation = 270; //This will rotate the MC 270 degrees.
play(); //Play the walking animation, if you have any
}
if (Key.isDown(Key.RIGHT)) { //When you hold down the right key
_x += power; //x position will go higher according to the "power" variable
this._rotation = 90; //This will rotate the MC 90 degrees.
play(); //Play walking animation
}
if (Key.isDown(Key.UP)) { //When you hold down the up key
_y -= power; //y position will go lower according to the "power" variable
this._rotation = 0; //No rotation needed, will reset rotation if the MC was already rotated
play(); //Play the walking animation
}
if (Key.isDown(Key.DOWN)) { //If you hold down the down key
_y += power; //y position will go higher according to the "power" variable
this._rotation = 180; //Rotate the MC 180 degrees.
play(); //Play the walking animation
}
if (Key.isDown(Key.RIGHT) && Key.isDown(Key.UP)) { //If you hold down both the right and up key
_rotation = 45; //Rotate the MC 45 degrees.
}
if (Key.isDown(Key.LEFT) && Key.isDown(Key.UP)) { //If you hold down both the left and up key
_rotation = 315; //Rotate the MC 315 degrees.
}
if (Key.isDown(Key.RIGHT) && Key.isDown(Key.DOWN)) { //If you hold down both the right and down key
_rotation = 135; //Rotate the MC 135 degrees.
}
if (Key.isDown(Key.LEFT) && Key.isDown(Key.DOWN)) { //If you hold down both the left and the down key
_rotation = 225; //Rotate the MC 225 degrees
}
}

Okey, now you got the biggest part done, go ahead to the next step!

STEP 2:

You’ve probably detected that we have NO energy variable. Right? Well, we need one, so let’s add one! Add this code to the frame! You must also prevent the variable from going higher than wanted, here’s a code for that too!

energy=100;//Now, the energy is one hundred
if(energy>100){//If energy is more than default, in this case 100
energy=100;//The application wont accept it and set it to 100
}

Now, in the next part we’ll create the energy bar, stay tuned, it’s probably coming already tomorrow!

Understanding the if and }else{ statements, as well as the ! operator

Posted August 13, 2008 by antoarts
Categories: ActionScript 2.0, Basic

Tags: , , , , , , , , , ,

It’s important that you do understand the two statements if and }else{ while coding in AS2.0. Those are actually some of the most used, and most useful statements in the language. I’m gonna learn you what they do, and what you can use them for!

STEP 1:

Let’s start with the statement if only. if is used to check if one thing is true, and then it will do the decided command. If you want to put this code on a movieclip, then remember to have it under an onClipEvent(){ or under an on(){ statement. But we will start by putting if on the frame.

if(1==1){ //If 1 is equal to 1
trace("true");//Will type "true" in the debugging window
}

So, I’m sure you know that 1 is equal to 1. We used == and not = because = is the assignment operator, and what it does is to change a to b, in this case, 1 would’ve been changed to 1, but if it would’ve been 1=2, then 1 would’ve been changed to 2.

STEP 2:

Well, let’s check what happens if we change the first line to:

if(1==2){//1 isn't 2, so this is false

Well, no message. That’s because 1 is NOT 2. But you might want a false message anyway. This is where the }else{ statement will be used. Read the following code.

if(1==2){ //1 isn't 2, so this is false
trace("true"); //The message if it's true
}else{//Else in actionscript is the same thing as in English.
trace("false");//The message if it's false
}

So, now it says false. But you can change the expressions the if tag have got to something else. If you change it to 1==1, it will be true, as well as if you change it to 3==3, it will be true, but if you change it to 11==1, for example, it will turn out as false. I think you get it now, right?

USAGES:

Well, basically anything, you use this for hitTest (checks if one object touches another), checking if a variable is what and doing something if it is that and so on…. Basically, think about what the word stands for in English.

The ! (false):

This operator stands for false. You can use it with the if statement. Here’s one example, doing pretty much the same as the previous code examples, but this time the other way!
if(!1==1){ //If 1 isn't 1
trace("true"); //The message if that's true
}else{//Well, if 1 actually is 1, then the following message will appear
trace("false");//The message if that's false
}

The ! operator is basically useful, so I hope you will remember that part of the tutorial, as well as the other parts, because those parts was important things too! Thank you for your interest!

Making a simple Motion Tween using script

Posted August 8, 2008 by antoarts
Categories: ActionScript 2.0, Basic

Tags: , , , , , , , ,

Okey, this isn’t really a real motion tween, but it will basically do the same thing. It’s simple, as simple as it can get, almost….

So, I’m gonna teach you how to make a motion tween using script, and I will also learn you how to do a play and pause button for it. So, go on to step one, now!

STEP 1:

Well, let’s begin by looking at the first frame in the movie. It’s empty, for now. But soon, it won’t be. Begin with creating two buttons. They do not need any instance names. The first button should be a play button, the second one should be a pause button. Another thing you could do is to add a MC, no instance name this time either. Now, a last thing to do at this step, add the following code to the first frame!

playpause=2; //The tween is paused, change to 1 to have it play as default

STEP 2:

Now, you got two buttons. You need to add some code on them, of course. If there’s some new commands in the code, read it until you do understand the code, and don’t just copy/paste.

This one is for the play button:

on(release){ //When you release the button
_root.playpause=1; //Set the variable to 1 (play)
}

And here’s a code for the pause button:
on(release){ //When you release the button
_root.playpause=1; //Set the variable to 2 (pause)
}

Good, but there’s still the most important part missing. Take a look at step 3!

STEP 3:

Let’s finish it! You need to add some code to the MC, or it won’t work. The code you need is basically simple, and if you know how to use variables, you should have no problem to modify it. And anyway, there’s descriptions for every line with any commands.

onClipEvent(load){ //When MC have been loaded
speed=5; //Set the speed of the motion tween
startx=100; //Set the X starting position
starty=100; //Set the Y starting position
endx=220; //Set the X final position
endy=300; //Set the Y final position
}
onClipEvent(enterFrame){//When you enter the frame, this code will run itself over and over again
if(_root.playpause===1){//1 is play, pause is 2. It must be on play.
if(this._x< to >)
this._x+=speed;//The MC X axis will go higher
}
if(this._y< to >)
this._y+=speed;//The MC Y axis will go higher
}
}
}

WORDPRESS DIDN’T LIKE SOME PARTS OF THE CODE (line 10 and 13), HERE’S A WORKING ONE!

Only 17 lines! And it’s still working! In total, you used 24 lines(!), and the result is a tween using script, with a play and pause button too!

Oh yeah, maybe you can use this for something, I have no idea if you can find something to do with it, but if you use it, feel free to post links!

The simple hitTest code, explained, and a lil’ bit improved.

Posted August 5, 2008 by antoarts
Categories: ActionScript 2.0, Basic

Tags: , , , ,

Hi, I’ve seen many questions by many beginners asking about hitTest. Their questions are usualy about some simple hitTest codes, and I’m gonna explain for you how everything works in this tutorial.

WHAT IS HITTEST?

hitTest is a command used in actionscript to check if one object touches another. This is a very well used code, as it’s used in about every game. It can be used to create walls, powerups, traps or anything else that will do any command when the specified object touches it.

SO, WHAT’S THE CODE?

Um, no copy/paste, ok? This tutorial is meant for teaching you, if you copy/paste, you might get the code, but you will NOT understand it!

But the code is still here, and it’s explained too. It should be put on the enemy MC.

onClipEvent (enterFrame) { //When you enter the frame, code will run itself over and over again.
if (this.hitTest(_root.player)) { //Checks if it touches the player MC, in case it does, the following command will be executed...
_root.life -= 15;//You'll lose 15 health
}
}

Now, this isn’t the code I use normally, as it only checks the object rectangle, which means, if your MC is any other shape than a rectangle, the hitTest will be oversensitive. If you want to see the object rectangle, click on a MC with the selection tool. You will now understand, the player doesn’t have to touch the actual object, only that rectangle. This is why that code is a bad code…

THE CODE I DO RECOMMEND:

Well, let’s look at a better code. Put it on the player MC this time. And, no copy/paste!

onClipEvent (enterFrame) {//When you enter the frame, code is running itself over and over again
if (_root.enemy.hitTest(_x, _y, true)) {//The better hitTest, it do actually check if it touches the actual shape! enemy is the instance of the enemy MC
_root.life -= 15;//You'll lose 15 health
}
}

Well, this code does the same thing, but on a better way! It will check if it touches the actual shape, not the object rectangle. The first hitTest is really bad, and it’s not really easier either. Use this one, I would say it’s better!

More AS2 Basics: Programming a button and variables introduction

Posted August 4, 2008 by antoarts
Categories: ActionScript 2.0, Basic

Tags: , , , ,

I want this blog to have tutorials in many dificulties, but I’m still trying to make it useful for those who are new to AS2. So I’ll learn you something as simple as programming a button. Enjoy!

STEP 1:

Create a new flash document. When you’ve done that, you should, as usual, have ONE keyframe, which is empty because you haven’t added anything there yet. Let’s begin with adding some script on that frame, click it and press F9 to open the actions panel. The code you should write is the easiest code there is in AS2:

stop(); //This will stop the movie from playing any further

That was step one!

STEP 2:

So, now you should add a blank keyframe after the current frame. Right click on the right side of the current frame and press “Insert Blank Keyframe”. Good, that’s it!

STEP 3:

Go back to the first button and create a new button. Draw something, select your drawing, and press F8. Set symbol instance to button. Then press OK.

STEP 4:

Now comes some script, read it, and put it on the button.

on(release){//When you release the button....
gotoAndStop(2);//Will go to the specified frame (2) and stop playing. Stop can be changed to Play in case you want it to play
}

That’s the first example, but we’re going to show you some more. Basically, you change the gotoAndStop(2); part to what command you want. But we’ll begin with changing line 1:

//This code shouldn't be applied to the movie, it's instructions.
//Edit the code inside the stars! on(*release*){
press //When you click the button
releaseOutside //When you release the button, cursor may not be above the button
rollOver //When you move your mouse over the button
rollOut //When you roll your mouse away from the button
dragOver //Holding down the mouse button and dragging over the button
dragOut //Holding down the mouse button and dragging away from the button
keyPress"" //When you press the specified key. There's also better codes for this.

Now, you can also modify line number two, here’s some simple things you can change it to:

//This code shouldn't be applied to the movie, it's instructions.
gotoAndPlay(2); //Same as gotoAndStop(); but this plays the movie. 2 is the frame it will go to.
nextFrame(); //Goes to the next frame in the movie, this stops
prevFrame(); //Goes to the previous frame in the movie, just like nextFrame();, this stops
number +=1; //Will make the number variable go up by one.
number -=1; //Will make the number variable go down by one
number =1; //Will set the number variable to one

That was it, and yeah, if you want that number variable to work, add the following code to the first frame in your movie:

number=1; //number is the name of the variable, 1 is what it will be by default.

And a very last thing, how to show the variable. Add a new text field, change the type to dynamic by clicking the little drop down menu and then in the var: text field, type the name of the variable. In this case, “number”.

So, now it’s over, for real.

Designing Flash Games – Part 2

Posted August 4, 2008 by antoarts
Categories: Game Design

Tags: , ,

So, I’ll continue the list I started earlier. Read it first if you haven’t!

  1. Preloader. Yey, we get to stare at a blank screen, how funny! No, it’s not funny at all. Make a preloader, it’s completely worth it.
  2. Checkpoints in long levels. Well, isn’t it annoying when you lose, and have to start from the beginning? Of course it is, even if it might make the game a little bit harder. If your game have got long levels, then I do recommend that you add checkpoints a little here and there during the game.
  3. Saving, and loading. This, is very important! If you haven’t got that feature yet in your game add it, or wait, some puzzle games (without levels), quizzes and that doesn’t need it, but if there’s any story, and achievements or anything the user would like to keep, then the feature to save and load the game would be nice. And yeah, maybe autosaving would be good too?
  4. If you remake a classic, make sure to have something new! Let’s say, you’re making a tetris remake. Oh yeah, there’s hundreds of tetris remakes already, why would we want another? Well, we might want another, but then it better have something new and creative. Remember the first point in part one!
  5. Don’t use hard to read fonts. Many hard to read fonts do LOOK nice, but it’s NOT FUN TO READ if it’s hard to. Don’t have too small fonts either, and don’t put too much effects on the text, it should both look good and be easy to read.
  6. Keep contrast at a level that doesn’t hurt in your eyes! Well, I don’t know how many people actually enjoy that it hurts in their eyes. I don’t think there’s many. Think about the contrast, and your game will be a lot more appreciated.
  7. Don’t have too weak contrast either! Then it can be hard to read and all that stuff, so basically, to say point 6 and point 7 in one sentence: Have a good contrast level!
  8. Free mode. So, your game have got a campaign mode, but no free mode? That’s not good, a free mode is plenty of fun and highly recommended. Think about adding one, and your game might suddenly get a whole lot better.
  9. Secrets, fun? Yes. You can add several ways to unlock secrets during the game. This gives the game more depth and it gets a lot more interesting, too!

And that was the 9 points for today, thanks for reading, and hope you will remember this!


Follow

Get every new post delivered to your Inbox.