Welcome back!

We are going on in programming a simple money money clone, here. It is very simple. If you lost the previous lesson, please read it in the previous posts. Anyway, shortly it is a game in which you control a character in the lower part of the screen with your mouse to catch objects falling from the ceiling (or to avoid objects, of course).

I left you with some main concept about the object dispatcher. Now we are going to make it in actionscript.

Up to now, we have in our library two objects exported via the linkage name of “coin” and “hammer”. We only have to attach them dynamically to the stage and let them fall.

We have to decide where to attach movies from the library. For this example, we are going to attach them to the root timeline, but in some cases it is useful to attach them to a container movieclip.

At the same moment we start playing this game, the objects must be started to fall down too. So we are going to add something similar to the code below to the main action layer.

nint = setInterval(crObject, 1000, this);
curr++;
score_txt.text = String(score
energy_txt.text = String(energy);

This lines will be useful to initialize the event dispatcher (1), increasing the number of the current object, and displaying initialized values for score and energy.
The setInterval function takes three parameters, the function to be called at the specified interval, the interval and one or more parameters to pass to the variable. So we are telling the actionscript compiler to call the crObject function each 1000 milliseconds (1 second), passing the address of the current timeline as a parameter (for reference).

Of course, we have to initialize some variables in the context of our game. We can add at the very beginning of the code, this code that initializes the variables needed in the game.

var curr:Number = 0;
var energy:Number = 100;
var score:Number = 0;
var nint:Number;

This code initializes the variables for object number (curr), energy and score and a variable (nint) that represents the interval at which calling the function to create objects.

Now we need the last function to make it all work. I will leave the architecture open, so you are going to use this code for games like this one. I prefer to comment in the code, hoping this will be more clear.

function crObject(root:MovieClip) {
// casual object, the number will be interpreted later
tipo = Math.round(Math.random()*1);
// increase the current object number,
// so objects will not replace themselves at any creation.
curr++;
// this will decide if coin or hammer from the tipo number.
tipo_mc = (tipo == 0) ? "coin" : "hammer";
// the object is now created, attached to the root timeline,
// and it get the name of objectN where N is curr and placed
// at level 1024 + curr.
objmc = root.attachMovie(tipo_mc, "object"+curr, 1024+curr);
// defines the starting position of objects.
objmc._x = Math.round(Math.random()*340)+30;
objmc._y = -20;
// defines falling rate of the object
objmc.fstep = 2;
// stores the type of the object in the object.
objmc.tipo = tipo;
// randomize the scale of the object
objmc._xscale = objmc._yscale=Math.round(Math.random()*50)+50;
// this code is executed during the fall of the object
objmc.onEnterFrame = function() {
// falling
this._y += this.fstep;
// increase falling rate
this.fstep += 0.2;
// increase rotation of the object
this._rotation += 5;
// when the object collides with the main char
if (this.hitTest(root.char) == true) {
// depending on tipo acts in a different way
switch (this.tipo) {
case 0 :
// if type is coin, increase the score
score += 10;
break;
case 1 :
// if type is hammer, lose energy.
// If energy falls under 0, go to GameOver frame.
energy -= 10;
if (energy <= 0) {
clearInterval(nint);
root.gotoAndStop("gameover");
}
break;
}
// updates score and energy
score_txt.text = String(score);
energy_txt.text = String(energy);
// remove this clip
this.removeMovieClip();
}
// if, instead, objects falls under
// the lower limit of the stage, simply remove it.
if (this._y>450) {
this.removeMovieClip();
}
};
}

The game is done. You should test it and try to understand each single piece of code. This is very simple, next time we are going to see how to develop a more complex game. This was just to put you in the right mood.

Now create a home for your game, a game over frame and you are ready to go online.

If something went wrong, please download the complete fla from here.

See you soon!

Comments (1)

Hey

Welcome to the new and awaited lesson about flash gamemaking! I know you all have been awaiting for the real stuff to begin, that’s it!

First of all, you have learned to control your main sprite with mouse and keyboard. So you are going to program a little application that will:

1. Control your main character
2. Create and control enemies
3. Check general collisions - i.e. the events that happen when some char on the screen is hit by something else, like projectiles, enemies themselves, bonus or game screen bounds.
4. Decrease or increase several variables attributed to some values. For example, score, energy, ammunition number.
5. Check every now and then for special events to happen, like death of the main character, enemy destroyed, game over, game exit or anything.

This is the skeleton of your game.

Now we are focusing on a simple game for this lesson. We are programming something like Money Money, a game from a old (but very dear) site I worked on, the site was Naive.it. The game sees a piggy bank, that is a money box shaped like a pig, chasing money to increase its points, and trying to avoid hammers falling from the sky, that will make you loose energy. When energy is over, you are over. Otherwise it will go on forever. Let’s start doing something like this. We prefer using mouse controls for this game. This will leave the player the possibility to make the main char move faster than what we could achieve with keyboard.

Create a new fla document. Set the stage dimensions to 400×400 pixels at 30fps.

Start creating your character. We are not loosing time on making graphics first, so we are going to use a simple square for the main character. We are using the code for mouse control for it, so we are going to use onEnterFrame to check on every frame for the mouse position, and changing the sprite position as well. We can use a simple square movieclip, with pivot point set to its center, and we can give it the instance name “char”.

Place the char onto the stage, leaving it in the bottom part at the center. I will leave some pixels as the bottom margin.

Now, in the timeline, add a new layer, name it “actions”, block it and then add this code to control the char sprite.

stop();
char.onEnterFrame = function () {
dx = this._x - _xmouse;
this._x -= dx/10;
}

Please test your game, you will see your square moving right and left as you move your mouse. You can notice two things.

1. The square does not move vertically. This is because for this game, the sprite does not have to move but horizontally.
2. If you drag your mouse out of the stage, the square follows it and get out of the stage. So we are going to implement some limiting in the horizontal movement.

We can change the code this way:

char.onEnterFrame = function () {
dx = this._x - _xmouse;
this._x -= dx/10;
if (this._x > 370) {
this._x = 370;
}
if (this._x < 30) {
this._x = 30;
}
}

So now, if we test the swf, we can see that the square will still follow the mouse, but it will stop at the right and left limits of the stage.

That’s almost all for the main char movement.

Now we are going to create the object dispatcher.

What is the object dispatcher? Well, it is just a fantasy name for the movieclip that will handle coin creation. This time it will summon a coin to fall from the ceiling every n milliseconds. In other kind of games, maybe this will help creating an enemy dispatcher, that will serve your game with enemy created infinitively.

Anyway. The method is quite easy. Making it actionscript, it more difficult but still not impossible.

We must create a symbol in library, with linkage name “coin”. Every n milliseconds, the dispatcher will create a clone of “coin” and attach it to the stage. After attaching it, each coin should fall, so we are going to create the code for each coin to make it move. Moreover, we should evaluate collisions of coins with the character, to increase the score.

But the dispatcher has an evil side too. It will create not only coins, but even hammers, that can damage you, if they hit.

So, let’s start. Create a simple star using the polystar tool (or by hand). Create a blue star and a red star. We are going to use the blue one as a coin, and the red one as a hammer. So please make them movieclips and give them the linkage name of “coin” and “hammer”. Now you can delete them from the stage, they are not needed anymore.

Ops. Time has finished :D

Next time we are going to see how to implement the mechanic we discuss about the dispatcher in actionscript. Prepare yourself, next one will be a tough one!

See you and experiment by yourself!

Comments

Some of you may wonder how to activate my as2 scrollbar class to navigate the dynamic list i posted yesterday.

It is quite simple. Download the package here, unpack it and put the scrollbar.as file in the project folder.

Now just paste the scrollbar movieclip in the dynamic xml list fla, take a few minutes to change it to fit the design, and the change the buildList function as below.

function buildList() {

[...]

downBtn.onRelease = function () {
offset += 1;
adjustList();
}

upBtn.onRelease = function () {
offset -= 1;
adjustList();
}

scrollbar.setDragged(this.container); // the dragged object
scrollbar.setRuler(scrollbar.ruler); // the ruler
scrollbar.setBackground(scrollbar.sfondo); // the scrollbar background
scrollbar.setMaschera(this.maschera); // the mask used in the fla
scrollbar.setTweenSpeed(25); // Tween velocity for dragging
scrollbar.setMouseWheelAdd(10); // Mouse wheel increment
scrollbar.init(); // start!

}

Now test the swf and be amazed!

Hope this will help some of you! Enjoy!

Comments (3)

Hey, long time i do not update the site. As always i have been busy working on new projects and experimenting.

Btw, this tutorial is about creating a dynamic list driven by an xml source (ie. a file).

So many users have been asking about creating a dynamic list and how to implement the dynamic data loading in a system with the scrollbar class I created.

This is the code of the example. You can download the rar file to check the files. In the package you will find:

• a swf file
• an xml file filled up with fake datas
• a cs3 fla
• a flash 8 fla

You can check the source for any hint on how to do that.

Now we can comment the code in the fla.

First of all you need to create a loadXML function that handles the loading of the data, and then, after loading, passes the xml object to a parse function (in this example the function is parseXML).

The parseXML function simply translates the xml data in an array (theData). The array will be used in the function named buildList to build the actual list. The buildList function will cycle among the values of the array to build the list in a recursive way. At this point you can add every kind of implementation of the code. Considering a news feeder, for example, you can add the code to display title, text and whatever you want. That is possible for every case.

Once the building has finished, you have to activate the navigation. In this case the simple navigation is made with the use of two buttons, that will scroll the content container to the right positions, stored in a positions array. The pressing of the buttons calls the adjustList function that handles the scrolling. The only other thing you will have to do, will be to check that the offset does not get under zero or over the maximum number of elements of the list.

The game at this point is done.

You can view the example below, and you can download the package here.

Enjoy!

Comments (4)