Tutorial to create animated GIFs from Age of Empires II

< Previous <

^ Index ^

> Next >

Introduction

< Previous <

^ Index ^

> Next >

MPS (Mod Pack Studio)

Download and install the program. Start the program. The first time you launch it, the program will ask you to create a backup of Age2 files which contain the interfaces:

Select Yes and wait for it to finish. Now the program gets loaded:

The backup files have been saved to Data_X folder located in the program folder:

Now create a new project. Select File > New Project :

The new project can be saved to any place, you are not obliged to save it to Age2 folder, or into MPS folder. For easy use, we will save it to MPS folder. Choose a name for the project (in the example: "Age II Frames"):

The new project is saved in format AXP. A new folder named as the project is created (in the example: Age II Frames), which contains the temp folder, that you can use to save your files to. If you decide to delete these two folder, every time you launch your project they'll be re-created anyway. For easy use, we will save our files to the temp folder.

We don't have to save the new project, we only need it to have access to Age2 graphical interfaces. (Really, the program is used to modify Age2 interfaces, that is not the objective of this tutorial.) Let's open the project. Be sure that in the Project Explorer window you have selected By Location:

Open the graphics.drs folder and Table 1:

You see a list of resources: these are the graphical interfaces of Age2 objects (units , heroes, buildings). Let's choose for example the first one: double click Resource #2, which corresponds to an attacking archer.

At the right, you have a series of menus (General, SLP, BMP, Frames) and some buttons.

Below we have a series of windows:

Let's select Normal Colors for easy use. In the left of the window there are three menus:

If we look at Frame 1, the archer is still quiet, but if we look at Frame 4 for example, the archer is in the middle of the action:

The archer can also be turned into another direction. The previous frames correspond to the facing archer. If we look at Frame 14 for example, the archer looks at bottom-left:

As the extraction finishes, a message pops up to confirm the successful extraction:

Files are saved in a particular code:

G0000209

The first letter corresponds to the interface type (G, S o U).
The next 5 digits correspond to the resource number.
The last 2 digits correspond to the frame number.

You can also work on a single frame. In this case, use the BMP menu.
Before you use this menu, you need to choose the Editor: select Tools > Select Bitmap Editor

Let's select Paint (the Default Editor!). Its path is "C:\WINDOWS\system32\mspaint.exe"

The BMP menu contains some items:

Choose a file name and click Save:

The palette window gets open: select a number from #0 to #255. Default palette is #255. Select another palette (in the example: #83):

Now the archer's background is orange instead of purple:

There's also the SLP menu, but, as already said, it's not the objective of this tutorial.

< Previous <

^ Index ^

> Next >

Animagic

Download and install the program. If you have the freeware version, a window pops up:

Click Continue. The program will last for 30 days, after which you need to register to continue a full use. (N.B.: The functions explained in this tutorial are not disabled. What a luck!)

Now we're going to create a real animated GIF!
In order to realize it, let's make an example: we're going to create a facing attacking halberdier.

In MPS, double-click the attacking halberdier, corresponding to Resource #2787:

Choose the color (in the example: green) and the background (nell'esempio: purple). As background, I usually use Palette 50505, that is almost the same as Palette 50500 except for the background, while with Player 6 I'd use another Mask Color, not already present in the object (we'll see why).

Let's extract the frames we need: the facing halberdier frame numbers are from #1 to #10 and the interface type is G. Click OK.

In Animagic, select File > Append frames to load the frames:

Select BMP as File type:

Select the desired files (click the first one then click the last by holding Shift) and click Open:

In the Frame List window are displayed the loaded files and, at the left, the selected image:

Now save the GIF: select File > Save as :

Choose a name and click Save:

Good! You've just created your first animated GIF! As shown at the moment, it's really ugly and antiestethic (brr):

Let's see how to improve it!

The most important thing first of all is to be sure that every single frame has the same sizes, otherwise you'll have terrible effects. So be patient and resize the frames one by one:

Now let's load the new frames and save the GIF. If you have still the previous GIF loaded, select File > New to create a new GIF:

Let's create the new GIF the same way as the previous one and save it. Here's the result:

This is really better! Notice that the halberdier moves left to right with such a strange movement... If you are good, try to position the frames to make them appear in some delightful sequence (for example to make him stay still!). For easy use, here you have how I assembled them:

You can preview your animated GIF by clicking Play and Stop:

If you dislike a frame, to delete it, select it and Edit > Delete:

You can also insert new frames with Insert frames:

Select the frames you want to add and click Open. The frames just added are located above the selected frame (in the example: I was selecting the frame 05):

You can also add frames with Append frames. It's different from Insert frames because Append frames inserts frames at the bottom:

But now let's come back at this GIF:

Because we deleted and added some frames, we shall reload it. To open a saved GIF, select File > Open:

Because we have modified the GIF and haven't save it, a dialog window pops up asking if you want to save. Because we aren't interested in saving, select No:

Now select GIF as File Type. Select the GIF and click Open:

Well, we have opened the saved file. Notice that the frames have no longer their original name, but they're renamed with the GIF name (in the example: "Esempio_centrato.gif") followed by .000, .001, .002 and so on:

Now we're going to create a transparent GIF. Click the Transparent color button:

Click the background (in the example it's purple):

Purple has become the transparent color and is shown in the status bar in the bottom-right corner:

Now save the GIF. Here's the result:

Transparence is very useful, especially in HTML, to avoid a mess, for example when the background differs from the GIF color.

To better understand, let's make an example.
Let's see another GIF I created (a walking skirmisher):

Apparently, the three GIFs are identical. But really they're completely different! We realize that only by changing the background:

The first one is not transparent, the second one is transparent with white background, the third one is transparent with purple background. Among the three, the second is totally inappropriate, because it's transparent also where it shouldn't (on the shield, on the helmet, where's white), while the other ones are good, it depends on how you want to use them.

Let's come back at our GIF:

Do you dislike it for it's too slow? Click on the Frame rate button:

A window gets open: at the left there are two panels, at the right there is the frames list. Let's look at All Frames panel:

It shows the number of milliseconds. It's the length of every frame: the more is low and the more the GIF is fast. Here is, for example, the GIF with frame rate equal to "100":

Now we'll consider the Selected Frames panel.

Here's the result:

It's also possible to repeat more frames at once. For example, let's repeat the last 5 frames:

The first 5 frames will last for 100 milliseconds, while the last 5 ones will last for 3 times, that is 300 milliseconds. Here's the result:

Now you are able to create your own GIFs! Free your mind!

< Previous <

^ Index ^

> Next >

Appendix: Multiple GIFs