Hey, guys. I updated the superHero game a bit. Graphics and such. Check it out!

http://www.swfcabin.com/open/1279235155

- Screwed Loose

Hey, guys! This is just a random design tutorial on how to make professional-looking shiny orbs that can be used as buttons, etc.

First, start off by drawing a circle with the line thickness set to 4. Then, we’ll work on the fill. We’ll need a gradient fill. Use the pictures below as a guide.

Now convert the whole thing to a movie clip. Add a new layer. Copy the fill from the old layer, lock it, move on to the new layer, and paste the fill in place. Create a new linear fill that goes from zero visibility to 80%. Position the fill off the top of the circle. Resize the circle down. and then reposition it.

Exit out of the movie clip. Add a Drop Shadow. It should be black with a blur X and Y of 10, a strength of 38%, and a high quality.

And, we’re done! Here’s the finished product.

There are also some other cool things you can do with this. For example…

Hey, guys! So, I’ve  decided to make some Flash game tutorials for those of you interested in making games. I guess I should start from the beginning, hence the character movement tut, here.

For this tutorial, I am assuming you know some ActionScript 2. Just the littlest bit. Not an insane amount.

Okay, so moving your character is certainly one of the most important aspects of RPG gameplay, among other things. In order to make sure you’re on the same page I am, here’s a little link to what we will be making. Just the basic side-scrolling character movement. Go to the link below, click on the presentation to get focus, and look at it. Left and right arrow keys to move, up to jump.

Character Movement Expectations.

Let’s pretend we just came up with the idea. We need to plan it out. Even if you have an example of exactly what you’re making, you need to plan it out. That’s how great code gets jumbled and painful to come back and update.

Our character should be able to:

…move left and right when the corresponding keys are pressed, play a walking animation, and change the way he is facing.

…jump when the up key or the spacebar is pressed and look like his feet are “dangling” in the air.

…when he moves, he should be kept in the center of the screen until he comes to either wall, and then be able to move out of the center.

That’s everything. Let’s get started.

Part One  – Mechanical

The “mechanical” part is pretty much void of intense coding. We’re just setting up our stage. I’m just going to give you hard directions here, but feel free to take some creative license.

Draw a line the width of the stage and place it close to the bottom. Convert this to a movie clip. Name it whatever you want, but when you get back to the stage, name the instance of the movie clip you have on there “ground”.

On to the character. Draw four circles; a large one for the head, a smaller one just below it, and two even smaller ones below that for the feet. Convert this entire thing to a movie clip and name the instance on the stage “character”.

Next, we’ll create the background. For testing and practical purposes, there must be some way to tell if you’re moving at all, so we will make the background a gradient. If you had a full-fledged game, you might not need this. Example, in a Mario-style game, there would be platforms, enemies, hills, holes, etc, to tell you that you’re moving. So, draw a square without outlines. Make this square have a linear gradient fill (Windows > Color Mixer, if you don’t already have it open). For those who haven’t done this before: Open the window. Select the fill icon. In the Type drop-down box, select “linear”. Proceed to make your gradient. I used three colors because it was a little more obvious. Now, after you’ve done that, select your square and make it 1,000 pixels wide and, for the width, it’ll be “the height of the stage minus the height of your ground”. Position it at (0,0) and it should extend out the right side of the screen. Convert it to a movie clip and name the instance “bg”.

The last thing we are going to do is make our character animations. He has to look like he’s walking, right? So, go into your “character” movie clip and name the first frame “standing”. In the actions panel for that frame, type stop();. Create three new frames (for a total of four). Name them “walking”, “jumping”, and “attacking”. (We will not be going over attacks in this tutorial, but I will provide the link to that tutorial at the bottom.)

Now, go back to the walking frame. Convert everything inside of it to a movie clip. Go inside the move clip. Convert the two feet ONLY into two separate movie clips. Highlight them, right-click, and press “distribute to layers”. This allows you to animate them separately. Create a keyframe at 20 for both of them. At frame twenty, switch the places of the two feet. Now, create motion tweens for both of them. Ta-da! A walking animation.

Next, we’ll do the jumping. Go back to the character and go to the jumping frame. Since our jumping isn’t an animation, we don’t need to make another movie clip. Just make his feet look spread or whatever. Think Mario.

And, we’re done! Let’s get to the coding, shall we?

Part Two – ActionScripting The Jump

We’ll start at the top of our first frame with the almighty stop();. It’s good to get in this habit, because what if you want to add some frames after this or something? Anyways, next we’ll create a basic function:

onEnterFrame = function(){
}

I always put in both brackets so I don’t forget them later. Anyways, what this at-first-glance-useless function does is create a “loop” of sorts. So if I were to say, “If a variable is equal to a value” outside of this, it would only check once. But this will continue to check as long as you’re in the frame. Handy if you want to constantly check for key presses.

Let’s start with the hardest part first – jumping. We need to “simulate” gravity with this. Nothing too complex, just as we go up, the amount we subtract from our character’s y coordinate gets smaller and smaller, until we go down (because now we’re adding) and then hit ground level and the whole process stops.

A little reminder for those new to flash: the x and y coordinates are not the same as those you learned in geometry. The origin (0x, 0y) is at the top left-hand corner. As you go down, you add to the y value, not subtract.

Place this piece of code inside your onEnterFrame function.

if(Key.isDown(Key.UP) && !jumping) {
jumping = true;
jumpingSpeed = jumpingSpeedPerm;
}

What this code does is essentially “if I’m pressing the UP key, AND I’m not already jumping, then I am jumping (our jumping variable is set to true) and I’m resetting the speed of my jump”. Now, the jumpingSpeed variable is not actually jump speed. Instead, it is the value we subtract from our character’s y value for that “jump” movement. And it constantly decreases (as we will see in our next piece of code). So we need to reset it each time we jump.

Now, we want that bit of code (that sets the jumping variable equal to true) to trigger another piece of code. Put this in the onEnterFrame function:

if(jumping==true) {
jumpingSpeed--;
character._y -= jumpingSpeed;
character.gotoAndStop("jumping");
if(character._y > groundLevel) {
character._y = groundLevel;
jumping = false;
}
}

What this says is “if jumping equals true, then subtract one from my jump speed, and subtract the result from my character’s y.” You see what this does? If we keep subtracting from our jump speed, eventually we’ll have a negative number. Then if we subtract that from our character’s y value, it will essentially be adding, which will send our character down at some point.

The next line of code tells the character movie clip to go to our Mario-equse jumping frame.

Finally, we reach our ground exception. We want this jump cycle to STOP as soon as we touch the ground. So, if the character’s y value becomes greater than the ground level (which is defined in a variable as we will later use it for platforms), we set the character’s y value to the value of ground level and set the jumping variable to stop which breaks the cycle. Now, if the user continues to hold down the up key…

Now, define the variables we just referenced at the top, out of the onEnterFrame function.

jumping = false;
jumpingSpeedPerm = 20;
jumpingSpeed = 0;
groundLevel = ground._y - _root.character._height;

Ta-DA! Test it to make sure it works. Jump a few times.

Part Three – Actionscripting the Movement

Here’s to our last and final part – character movement.

Let’s begin by making a new function, out of the onEnterFrame function.

character.onEnterFrame = function () {
}

All this does is make referring to our character a whole lot easier. So, anyways, for the left and right movement, what we’ll need to do is use a sequence of if statements. It should be IF the left key is down, do this, ELSE IF the right key is down, do this, ELSE switch to our “standing” character frame. Let’s start with the right key. Inside the character.onEnterFrame function:

if(Key.isDown(Key.RIGHT)){
}

This is our if statement. Inside of that, we’ll add our frame control.

if (!jumping){
this.gotoAndStop("walking");
} else if (jumping==true) {
this.gotoAndStop("jumping");
}

Basically, what this does is if we aren’t jumping (!jumping) then we go to the walking frame. But if we ARE jumping, we go to the jumping frame. Good?

Directly under that we’ll add:

this._xscale = -100;
if ((_root.bg._x + (bg._width-100))<=500){
if ((this._x)>=500){
this._x += 0;
} else {
this._x += 15;
}
}

What the first line does is switch the orientation of our character. It turns right, rotating on the registration point. Here, you should stop and make sure that, inside your character movie clip, the registration point (the little X) is in the middle-top of his head.

The next piece of code, the if statement, refers to the background. It says “if the background’s right edge (which is the background’s x value plus the width of the background plus some room for error) is less than or equal to five-hundred (the right edge of the stage), then allow the character to move ONLY IF the character is inside of the screen (not past the edge of the stage, which is at 500)”.

Got it? Good. Next, below that, hinging on the last if statement:

else {
if(this._x>=250){
_root.bg._x -= 15;
} else {
this._x += 15;
}
}

This is just the else statement if our bg movie clip has NOT hit the edge of the stage. It also contains another if statement for aligning the character movie clip in the middle of the screen (at the 250 x value).

Now we repeat that whole beautiful process for the other key, with a few minor changes (highlighted):

} else if(Key.isDown(Key.LEFT)){
if (!jumping){
this.gotoAndStop("walking");
} else if (jumping==true) {
this.gotoAndStop("jumping");
}
this._xscale = 100;
if (_root.bg._x>=0){
if ((this._x-((1/2)*this._width))<=0){
this._x -= 0;
} else {
this._x -= 15;
}
} else {
if(this._x<=250){
_root.bg._x += 15;
} else {
this._x -= 15;
}
}

These changes just change the direction we’re moving (plus symbols change to minus, etc). Our xscale is now positive, so he faces left. The biggest change is for testing for the bg’s left edge. We know that the bg’s left edge is EXACTLY at its x value, so we don’t need to add anything. Also, we’re only testing for it hitting zero, the stage’s left edge value.

Now, here’s the last part. Hinge this on the last if statement we did:

} else {
this.gotoAndStop("standing");
}

So, when neither key is pressed, we go to the “standing” frame in the character.

Ta-DA! Now, you’re done! Test it out. If you see any errors in this tutorial, need help, have questions, comments, etc, please post a comment and I will get back to you.

(Click on the link, click free download. Then you’ll have to wait 60 secs. Then click free download again.)

You can also download the whole .fla file here.

Thanks!

And now, you can go play superHero.

Thanks!

So, anyways, if you’re newer to flash, you may run into the problem of random frames/random numbers. For example, a vertical shooter and random motion of the enemies. Or just creating cards that, when “flipped”, randomly selected backings.

Well, a way to do this is with the random(); function.

variable = random(number) + min;

The random(); function chooses a variable for the first number of number you specify (that’s not confusing at all ). Here’s the problem, though: zero counts as a number. This is where our minimum (min) number comes in. If you want the random variable to pick a number from one to ten and you use this code:

variable = random(10);

It will count the zero, meaning that it will pick a random number between zero and nine. So, we add one to the whole thing if we want to “offset” the count and make the number we put inside the function true:

variable = random(10) + 1;

Now it will choose between one and ten! However, if you want it to include zero and count to ten, you would use:

variable = random(11);

You don’t have to set it to a variable, but for many cases it is easier. Here are some examples in which you might not want to set it to a variable:

movieClip.gotoAndStop(random(number)+min);

That’s the basic format. A more intelligent snippet would be:

movieClip.gotoAndStop(random(movieClip._totalframes)+1);

This works best because you do not have to reset the code if you, say, edit the movie clip. It’s a little more automated. The code highlighted in blue (movieClip._totalframes) gets the number of frames in the move clip in a number. Then, we add one, for reasons explained above.

I’ve made an example of random numbers in action. This is a pretty basic and rather boring betting game, but there are plenty of ways it could be spiced up. Graphics, such as cards, instead of text, for example.

Please click here to view my example.

Well, here ends a basic tutorial, but don’t stop there. There are tons of things you can accomplish with random numbers, especially in game programming. Enjoy!