August 31, 2011

The preloader is needed for making a game only if you want people to play your game on the internet. What it does? It will actually be like…"Hey, wait here to load your game first before you play it". What if you don’t have a preloader? Then you will load and play the game at the same time making a non-smooth game playing(lag in the game).
The preloader can actually be created after you finish making your whole game. If you just want to make a game to play by yourself in your computer, you don’t need a preloader at all.

Anyways, let's see how to make one.

Figure 2.1
First, open a new file. At the first frame, draw a bar as shown below.

Figure 2.2
Select the bar and press F8 or choose Modify –> Convert to Symbol.
step03 step02
Figure 2.3: Select the Type to be Movie clip
Put any name you like(for this case we can say “Loader”). Select the Type to be Movie clip.
Then, double click it(the bar you just created). Now you are inside your bar time line.

step04 Figure 2.4
Add 4 more layers. Now there are 5 layers as shown in Figure 2.5.

Figure 2.5
Change the names of each layer as following;
Layer 1 –> LoadBar_BAR
Layer 2 –> LoadBar_FRAME
Layer 4 –> Animation
Layer 5 –> CheckLoad
(see Figure 2.6)

Figure 2.6
OK. We will go through layer by layer. Let’s see the first layer, LoadBar_Bar. Click at your white bar and press F8.
Name it as “LoadBar”. Make sure you set the Type to be “Movie clip”. (See Figure 2.7)

Figure 2.7
Press OK.
Next step, you have to set this bar an instance name. Click to select your bar again(if you haven’t selected it). Now, look at the properties tab(if you cannot see your properties tab, just press Ctrl and F3 together or go to Window –> Properties –> Properties as seen in Figure 2.8).

step09 Figure 2.8
Now that your properties tab pops up, you can put an instance name in there. Let say “bar”.(see Figure 2.9)

step08 Figure 2.9
If your bar is being selected, you can see a small circle in the middle of it(Figure 2.10). That is the center point of the bar. We need to make this center point to be on the left of the bar so that when our game is loading, the bar is extending from left to right.

step10 Figure 2.10
To move this center point, you need to use the “Free Transform Tool” or you can press Q for shortcut(see Figure2.11).

step11 Figure 2.11
Then just click at the small circle in the middle of the white bar and hold it. Drag it to the left side of the bar as seen in Figure 2.12.

step12 Figure 2.12
We are done with this layer now.
Next we will go for the “LoadBar_FRAME” layer. We need to draw a frame for our bar but first make our bar in “LoadBar_BAR” layer to be seen as an outline. How to do it? Just click the outline icon as seen in Figure 2.13 below.

step13Figure 2.13
Then select “LoadBar_FRAME” layer and draw a rectangle to fit your outline bar. (see Figure 2.14)

step14Figure 2.14
Before you draw this rectangle, make sure that you set the properties of the rectangle tool right as in Figure 2.15.

Figure 2.15
For this case, white outline stroke color with no fill color.
That’s it for “LoadBar_FRAME” layer.
Next layer is “LOADING_TEXT”. Just add a text in this layer. We can say “LOADING” as seen in Figure 2.16.

Figure 2.16
The next layer is “Animation” layer. You can actually put any animated clip here but, for this case, I put my main character walking animation.(see Figure 2.17)

Muay Thai 1
               Muay Thai 2
Figure 2.17
This animated clip is just a movie clip that I created. Let’s look inside of this movie clip. I will just double click it to see what is inside.
As seen in Figure 2.18, there are 4 frames. Each frame contains a picture of walking poses.

         Muay Thai 1

Muay Thai 2

Figure 2.18
Basically, if you are making your game, you can find any sprites or draw them by yourself and put them in this part. That’s it for the “Animation” layer.
Here comes the last layer, “CheckLoad”. In this layer, we have to put some code in the frames. Click at the first frame of “CheckLoad” layer and press F9 or go to Window –> Actions to open the Actions panel as seen in Figure 2.19 below.

Figure 2.20
Then you will see the Action panel. Click at the “Script Assist” button as shown in Figure 2.21.
step28 Figure 2.21
Now, copy the following code and put it in the Action script panel. (see Figure 2.22)
PercentLoaded = _root.getBytesLoaded() / _root.getBytesTotal()  * 100;
if (PercentLoaded != 100) {
    setProperty(bar, _xscale, PercentLoaded);
} else {
step29Figure 2.22
What is this code doing? It will compute the percent of your total flash movie capacity(in bytes) and show the percentage on the length of your bar(remember the white bar we created?).
Now, click at the 2nd frame on the “CheckLoad” layer and put in the following code. (see Figure 2.23)
step30Figure 2.23
Add more frames on each layer as shown in Figure 2.24 below.
To add a frame, press F5.
To add a keyframe, press F6.
To add a blank keyframe, press F7.
step31 Figure 2.24
Now, in “LOADING_TEXT” layer(actually you can do this in any layer but I will just show you in this layer), at frame 3, you must add a button here. You can use a button from the “Common Libraries”, Figure 2.25, or you can create your own.
Window —> Common Libraries –> Buttons
Figure 2.25
For this blog, I use my the button as shown in Figure 2.26.
step34 Figure 2.26
If I double click at the button, we will see what inside the button as shown in Figure 2.27.
step35 Figure 2.27
BG = The background of button.
Text = Text of the button. In this case, we use the word “PLAY”
Sound = The sound used when button is pressed.
Keyframe States
Up = When mouse cursor is not in the area of button.
Over = When mouse cursor is on the button but not pressed.
Down = When button is pressed.
Hit = It defines the area of the button that responds when clicked.

OK. Now we need to add some code in this button. Select the button first. Then add the following codes as we can see from Figure 2.28.
on (release) {;
step36Figure 2.28
Almost done! Click at frame 3 of “LOADING_TEXT” layer and look for the properties tab. Put the frame label as “loaded”.(see Figure 2.29)

step38Figure 2.29

That’s it for the preloader. Now you can go back to Scene 1 stage by clicking at the Scene 1 button as in Figure 2.30 or by double click anywhere(not on objects you created) in the workspace.

step40 Figure 2.31

You will see the home stage which is Scene 1.(see Figure 2.32)

step39 Figure 2.32

I hope you guys got a picture of how to make a preloader. Good luck ;)


Muay Thai Flash Game Making

August 29, 2011                                                                            

Wonder how to make a side-scrolling game on Macromedia Flash?
In this blog, I will show you how to make games that I made long time ago. It's Muay Thai 1 & 2.

Figure1.1: Muay Thai 1

Figure1.2: Muay Thai 2
You can play the games here.

Muay Thai 1  <-- Click


Muay Thai 2  <-- Click

Let's get started.

First you need the Macromedia Flash program (I used Macromedia Flash 8). I supposed you all have the program.

We will follow the outline below.

  • Preloader
  • Parameters
  • Characters 
  • Testing  your character movement
  • AI (Artificial Intelligence)
  • Hit Test
  • Scenes and Backgrounds
  • Testing your game

I am not an expert on action script, so I did not do fancy codes in the game. I just play it by ear. Actually, I prefer to animate. Before I made these games, I created some Flash animations and post some of them on which is the biggest website to those who like to show their works on Flash. Then I realized that it's too much work to do on drawing. People will just watch my movie once unless it's really a good Flash. I think it's not worth it for my time that I wasted on animating my movies. I want people to see my animations over and over. So, making games is my solution since it will be looping for each movement of each character in a game. It must be worth it to animate for games ;)