Tutorial to create animated GIFs from
Age of Empires II

Summary

Introduction

MPS (Mod Pack Studio)

Create a new project

Open a project

Extract graphical interfaces

Animagic

Create an animated GIF

Process and optimize a GIF

Utilize transparence

Modify the speed

Appendix: Multiple GIFs

< Previous <^ Index ^> Next >
Introduction

I created this tutorial to help those who'd like to create animated GIFs about Age of Empires II: The Conquerors. I already created some GIFs, and often someone asks me how to do (hey look, nobody taught it to me ! ihih). Then, because I don't want to explain it every time, just read this tutorial, that I wrote according to my personal experience.

To create these GIFs, you'll need two easy-to-use programs:

  • Mod Pack Studio 2.0: freeware program without use limits
  • a program that allows you to create animated GIFs.
    The program I use is Animagic 1.06, that lasts for 30 days, after which you'll have to register.
  • < 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:

    < Previous <^ Index ^> Next >
    Create a new project

    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.

    < Previous <^ Index ^> Next >
    Open a project

    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:

  • Normal Colors: corresponds to the normal in-game look of the object
  • Player Color/Transparent Mask: corresponds to the parts of the object that are different according to the player color
  • Selected Mask: corresponds to the outlines of the object interface
  • Let's select Normal Colors for easy use. In the left of the window there are three menus:

  • Frame: corresponds to the different action moves (the archer's attack)
  • 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:

  • Player: corresponds to the player color
  • Palette: corresponds to a set of colors. Default set is 50500 (the one with the asterisk).

    < Previous <^ Index ^> Next >
    Extract graphical interfaces

    Choose the Player and Palette you prefer, then in the Frames menu select Extract All:

    Let's select (as said before) the temp folder and click OK:

    Now we have two menus:

  • Select Frames: select the frames you want to extract. Now, for easy use, let's extract them all: click Select All.
  • Select Masks: select the type of interface you want. Select the first type (G) and click OK.
  • 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:

  • Export BMP: extracts a single frame. Select the interface type, Frame, Player and Palette you prefer.
  • Choose a file name and click Save:

  • Edit BMP: differing from Export BMP, as the file is saved, it's immediately open with the Editor.
  • Mask Color: choose the interface background color.
  • 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!)

    < Previous <^ Index ^> Next >
    Create an animated GIF

    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!

    < Previous <^ Index ^> Next >
    Process and optimize a GIF

    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:

    < Previous <^ Index ^> Next >
    Utilize transparence

    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.

    < Previous <^ Index ^> Next >
    Modify the speed

    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.

    It shows how many times a single frame will be repeated (that is, which frames will last more). For example, let's let's repeat Frame .005 three times:

    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

    Someone may ask how to combine two GIFs (for example two fighting units). There are many ways:

  • Attach the frames of both GIFs one by one (Frame 1 of the one and Frame 1 of the other, the first Frame 2 and the second Frame 2 and so on). If both GIFs have the same length, then it's easy, but, if the one GIF's length is different from the other's, you need the minimum common multiple (for example: the first has 15 frames, the second has 20 frames, the total will have 60 frames!): if you are good you may do it!
  • But the more pleasant way is HTML. In an HTML document, all objects work independently, so there aren't any problems in making them match. Let's take, for example, two GIFs I created:

    I also combined them (the first has 15 frames, the second has 20 frames):

    Now let's use HTML. Click here and download the file. Extract the archive. In the file multipleGIF.htm the two GIFs are positioned. This file is referred to multipleGIF.css, which contains data about the GIFs position: "div1" is the villager, "div2" is the wolf. Now try to change the coordinates (top and left) and resave the file. Reload the HTML file and the GIFs will have moved! This is my trick to try the attachment of more GIFs before creating the file.

    This tutorial is finished, I hope it had helped you.

    In caso di dubbi contattatemi: anora-toxica_jyk.uc.dt@hotmail.com