The Unexpected Obstacle
Ever wonder how I made this animation (or any of these)? You'll learn how in this tutorial, including a detailed behind-the-scenes look.


How do you make animations that behave in a realistic way?


Last updated: Apr 12, 2006 (first version)
Level 5 update on Oct 30, 2006 (history extended on)
Level 2 update on Jun 9, 2007 (various enhancements and updated history)

1 The AVI days



1.1 Setting the standards



I began making animations since either late 2001 or early 2002. As one would expect, they were simple. I don't recall exactly what my first ones were, but one of the earliest ones is one of a video-game-like nature. At first, I didn't know how to get any better than a 4-bit palette (using the standard VGA 16 colors*). The only way I could get true color at the time was with using AVI files. The AVI files were created through stitching a series of BMP files together in a numbered order. I used Tapptoons Linetester2002 for doing this. It was sufficient for what I needed and it could save as AVI. During this time, I set the standards for my file naming system. With Winzip available, I could run random zip tests to optimize the colors used in the AVI. AVI, however, had many big disadvantages:



The only advantage was the availability of true color images, a format readily available to anyone with a way to unzip ZIP files, and support for frame rates above 10 fps, of which I almost never use.

1.2 How AVIs were processed



Much like this tutorial, AVIs were processed in a similar way. They involved using spreadsheets and, rather than using the GIMP, I used MSPaint. At the time, I could work wonders with MSPaint, including anti-aliasing. This was the Windows 98 SE version's MSPaint. However, unlike this tutorial where exactly identical frames were skipped, identical frames were saved as they were as many times as needed. AVIs don't have varying frame delays so this was a requirement. Rather than 043.bmp skipping to 048.bmp, the file 043.bmp would be repeatedly saved under 044.bmp, 045.bmp, 046.bmp, and 047.bmp before the change in 048.bmp.

1.3 My most complex AVI



Made in late 2002 or early 2003, the video entitled "the long fall" was the main AVI and the best one I've ever made during the AVI days. I frequently used it as my test subject for doing compression tests and later BMP to GIF batch conversion tests. It featured the character in my mind game (as I had it at the time) jumping off of a cliff that was 52,800 feet high, the world's highest point, according to a sign. He'd then fall through the clouds and it also depicted the speed stat maxing out at 999 mph. It had a 112 KB download size, but a monsterous 140 MB fully uncompressed file size.

1.4 The last of AVIs



Due to the many major disadvantages of AVI, and that animated GIFs were about as small as the double-zipped AVI, I soon stopped making AVI videos and went with animated GIFs. The last AVI I did was entitled "the spinning board" of which is better as an animated GIF.

2 MSPaint and early animated GIFs



2.1 4-bit palettes



My first animation - using a 4-bit palette

My first animation - using a 4-bit palette


Because GIF used 8-bit color and not true color and that I had inferior, outdated software, I was unable to use the full 24-bit palette. During my early years of making animated GIFs, it was rare I'd peak 100 frames. The longest animation during this era was made in early October of 2003 and it featured a video game-like design. It was only 80x60 as it was intended as an avatar for the online forum I frequented, which was once the HowStuffWorks forums (at the time). The animation shown above is what it looked like. The top image is a magnified version of it so you can see the details. The bottom image is the true size. Compared to the times, it was quite decent. The only modifications I made to the original was that I partially optimized it (removing identical frames and adding to the time delay), but everything is otherwise exactly the way it originally was, even the timing. Even this early I seemed to have known a few 3D techniques, even though it was 2 years later that I discovered the simplified 3D formula.

2.2 The 15-bit palette



My most prized 15-bit palette animation

My most prized 15-bit palette animation


4-bit palettes weren't enough so I went with 8-bit palettes now that I had a new method of doing it. The 8-bit palette didn't use colors that were a multiple of 51 as commonly used, but rather a selection of the 256 most commonly used colors from a choice of 32,768 colors (a 15-bit palette). It was sufficient for most cases, but even that soon reached it's limit. The animation shown above was made in mid-November of 2003. It was my most prized animation of the 15-bit palette days and it, even to today, is my second-best of all time. Although I didn't have the real 3D formula at the time, the clouds had a considerable 3D effect starting off close but getting further apart. Although 24 frames, this animation was both pretty and nice-looking and magnified at 4x size, you can easily see the details. Even to today (Jun 9, 2007), I'm still amazed when I look at this animated GIF.

2.3 The prime time



My funniest animation

My funniest animation


By early 2004, I was then able to use 24-bit images (true color) for my animations and I was doing at least one new 80+-frame animated every month for a few months. The image at the top is the funniest of my animations to date. It features a meeting-like style only with a video screen as the main feature. Made in late May of 2004, this was the third animation of the one-a-month streak that lasted for 4 months.

2.4 The big downfall





From March until June of 2004, I made one animation every month. By then my animations were getting into the 100's of frames and manually opening and saving each BMP file as GIF was getting boring and discouraging. As my animations grew in complexity and got longer with more frames, I began looking for a batch converter to quickly convert all the BMP files for the frames into a GIF file. The last animation I did, which took 20 hours of work to do and done entirely in MSPaint, was my most prized animation of all for several years. It has a 316 KB file size (optimized), the biggest, most complex animation done entirely in MSPaint. This animation was made in late March of 2005 and was the last big one I've made for over a year. It has 306 frames and it was as close as I could get to mimicking my mind game and the first animation with a height display stat. It was at the upper limit of what I could stand using MSPaint. Along with that, it's almost as good as the ferris wheel one made 17 months before this one.

I abruptly stopped making animations while I despirately went out searching for a BMP to GIF batch converter. From the start in May 2004, I downloaded all sorts of programs. Some were unsophisticated freeware, others didn't work, and most didn't keep the colors as is destroying the quality. This is a list of all possible problems I commonly ran across for the nearly 2 years I tried searching and with nearly 70 programs downloaded:

  1. The converter didn't work at all, telling of an error (rare (5% of the time)).
  2. The colors were saved into the 216-color websafe palette seriously destroying the quality (most common case (60% of the time)).
  3. The colors were altered in some other way but not preserving the originals (somewhat rare (10% of the time)).
  4. The installer wouldn't install the program (rare (5% of the time)).
  5. The program had spyware in it making me not install it, or if I did install it, caused instability (somewhat rare (15% of the time)).
  6. The program's description was wrong and that it didn't have a batch converter (rare (5% of the time)).


In the most common case, the colors were altered so much that it was about as bad as the 4-bit days. Rather than the color 804020, a medium brown, the converter would change it to the color 993333 which isn't even a brown at all. Note that this is a multiple of 51 (153, 51, 51 instead of 128, 64, 32), of which websafe palettes used. Of the programs I've downloaded, this occurred 60% of the time. A similar case, occurring about 10% of the time, was that the colors were altered in some other way. Irfanview was one such program that did this.

In some cases, when I tried using the converter, it would report an error saying of a file can't be found or the program crashed upon attempting. This only occurred about 5% of the time. In a similar, more severe case, the installer wouldn't install the program at all (I recall one where it said I was out of disk space even though I had 6+ GB free on a 16.2 GB hard drive). I don't recall the error, but I think it kept on erroring when trying to install. In another case related to this, the program had spyware or other malware in it making me not install it, or, if I did install it, it caused more problems and stability loss than it was worth. This occurred 15% of the time.

In one further case, though rare, the program's description was wrong and that it didn't have a batch converter or it was deactivated unless paid for.

If it wasn't installation problems, it was the batch converter itself that was problematic. My animations haven't passed 50 unique colors per frame, far below the limit of GIF, so it's not GIF compatiblity issues, but rather the batch converters themselves. This was getting to be a pain and annoying and even with help from those on the two forums I frequent, I never got anywhere. I was still making animations but rather than one or two every month, it would be an average of 6 months between animations and they were much shorter and less complex.

3 GIMP and my latest animations



3.1 My history with GIMP



Before around August or September of 2004, I had no worthy image-creation software. Until this time, I was actively using MSPaint. MSPaint is so full of limitations compared to GIMP. The newest image-creation software I had at the time was PhotoStudio 2.0 SE which was from around late 2001 or early 2002. It was very old, confusing, and it was what I used to convert and save as GIF. With my game design stuff and making textures, I couldn't make any decent textures in MSPaint without either spending several days for a small 128x128 image or using very small textures (like 16x16 or 32x32 on the high end).

Because I had no way of using the alpha channel or saving as 32-bit TGA, I made a post on the Gamestudio forums on how I could do this. I was then referred to The GIMP. At first, it took quite a while to get used to it because, even in late 2004, I've never seen a program or used one with so many features and controls. It took about 4 hours to figure out how to even manipulate the alpha channel as it was either fully visible or fully transparent and I couldn't get rid of fully visible ones without using edit > clear. At the time, I was so used of MSPaint, I was probably one of the fastest users of it. Even though I had a program with a lot more to it, I was so used of MSPaint I preferred it over GIMP. It was until 3 months later that I got used to it enough. Today, the only thing I use MSPaint for is to save screenshots and test colors (to find a more precise color when describing the scenery for dreams in my dream journal) and nothing else.

3.2 My first animation with GIMP



The fall-glide - my first known animation made with the GIMP


One of the first animations I made with GIMP was entitled "the fall-glide" which demonstrates the use of the fall-glide, one of my mind game's special abilities. It was made in late May of 2005. My first animation was to find out how decent GIMP would be for my creation of animations and it turned out to not only be much easier, it was also five times faster! It seemed like the GIMP was going to be my animation future for quite a while longer. It, however, lacked a batch converter of any kind, but it was sufficient enough to give a considerable revival. The image shown above is my first known animation that I made with the GIMP.

3.3 My animations have a small comeback



The stomp - layer support makes this animation quick and easy


Although no where near the one per month, I no longer have the 6-month gaps between animations, but it was still considerably long, more around 4 months instead. With GIMP cutting the time needed for my animations down so instead of 20 hours of processing the frames, it reduces to just 7 or even less. Made in late December of 2005, I wanted to see just how fast I can get with GIMP. I was indeed correct. With layer support, I made an animation like this 3 times faster than I did with a similar animation using MSPaint. However, without the BMP to GIF batch converter, I was still discouraged to doing anything long and complex as I still have to manually open each file and save it as GIF. This was extremely boring and the overall motive, without it often dropped below neutral.

3.4 At long last the answer



The Unexpected Obstacle - the most complex animation so far made with the GIMP and the most complex using the nonautomated techniques


With someone on the Gamestudio forums referring me to the GIMPTalk forums, I went there to see if I can get help on this batch converter issue. GIMP actually has a batch converter, but it's so remote and extremely indirect I didn't have a single hint of it's existance. To get it, a script was needed and someone gave me the script for my animations. From there, I began testing it to check for bugs and even with 3600+ frames, it works well. The animation shown above is the most complex one and the best one I've made with the GIMP using my old manual techniques. Although it does have 284 frames, it's not as complex as the biggest one, but it is considerably close. Factoring out the time it took to write the tutorial associated with it (this tutorial), it took about 6 hours to process the frames. It took a little over 3 times longer to do the most complex one and that was with less sophisticated software!

4 Automation leads to extreme complexity



4.1 Programming - a dream come true



Only until mid-2006 was an animation of 10 layers of objects and 300+ frames was within reach. During the time I made "The Unexpected Obstacle", an animation of 600 frames and 15 layers of objects was well outside my reach of what I could stand. With Gamestudio, I gained skills with programming. In January 2005, I made my first program, which featured how scaling works and what effect it has. It was very simple and a good start. By June of 2005, I began making my 2D game, "The Supernatural Olympics" which has the same effects as my animations, only with much better graphics since I didn't have the color restrictions of GIF. It was until early August of 2006 that I released my 2D game to the public. By then, I had a lot more programming skills and I began wondering if I could utilize Gamestudio to automate the entire frame-creation process. With this, an animation of 3500 frames and 30 layers of objects is entirely within reach when it was thought of as impossible during my animation prime time. In fact, I have such an animation, my first animated cartoon.

Now the only thing I have left that isn't automated is forming the plan using the spreadsheets, creating the scenery, and finalizing the animation. The rest of it is automated. With the program, I can even preview the animation and make fine adjustments. When about done, I can reduce the frame rate by merely changing a variable. This way, I can spot misalignments. If I don't like the height of the clouds, I simply just edit the spreadsheet (one cell even), copy the updated information and replay the program and the effects are immediate. This creates outstanding flexibility. Don't like the scaling of the road? It's as simple as making a one-cell change in the spreadsheet, copying the updated details from the spreadsheet into a text file, then rerunning the program. When done, I just execute the frame-saving commands and use the batch converter to save the end result - nothing to it.

Unlike my old manual method, this method is less prone to errors and mistakes. Only bugs in the program and spreadsheet as well as the graphics would cause errors to occur. Before, I had to go back to the first frame in which the error occurred and fix it and every frame after it. If a mistake is made in the old method, it could result in about 10 minutes of wasted time or I can just ignore it and continue on where the animation will have to live with that error. The new method doesn't have this issue at all no where near as badly.

4.2 The first fully automated animation



Cruising Through the Mountains - my first animation using the fully automated methods.


Realizing the potential of Gamestudio for my animation-creation, I wanted to make sure Gamestudio could actually be usable with this method. I thought of the old "Float-running Through the Mountains" animation and recalled wanting a higher resolution version of it. It was simple so this was a great test case. Sure it has more frames and many more layers of objects than I'm used to, but to test the potential, such a thing was neccessary. It had a few frames, but it was a good test with nice results. I was soon tempted to get something more complex that would shatter my old record, held from the "Balloon Skydiving Without a Parachute" animation.

4.3 The most mathematically complex animated GIF



Mountain Fun - an enhanced version of my first animation using the fully automated method, of which uses very complex calculations for great realism.


Right after the first test, just 2 days even, I made my first animation using the automated techniques. With a much smaller chance of error, I could add more complexity to the movement. With my new-found triginometry skills (arctangents, sines, and cosines in particular), I wanted something very complex that would shatter my old record and then some. In my mind game, I'm frequently climbing up mountains at high speeds and I wanted to get an idea, visually, just how it looks and feels to climb a mountain the way I do in my mind game - using the float run all the way up. It only took 2 days since my first test animation that I made my first animation using the automated method.

The animation, however, had several flaws. The scaling wasn't entirely realistic (although it was originally intended that way) and the slope should've been a 4:1 rather than an 8:1. The slope the character is on on the preview above is an 1:2 slope and the one to the far left is a 1:1 slope. See my website FAQ for an explanation on what slope ratio is. I originally wanted the character to run down the mountain again, but I didn't know how to do that.

I later redone the animation which has calculations so complex, I spent an entire 12-hour day working on them, even though it only has 795 frames. The animation above is the revised version and the more realistic one. The 641 KB file size and nearly 600 unique frames made this animation too big to post directly here. Instead, a preview is shown and by simply clicking on the preview, you can view the animated version in a separate window. Having figured out how to do the part where the character runs down the slope and accelerates based on the formula "sin(atan(slope_y/slope_x))*20". But 600 frames is far from today's record (as of Jun 9, 2007).

4.4 My first animated cartoon



I soon wanted to really push the limits in every aspect possible I wanted to push the limits in every aspect. Rather than 10 layers of objects, there are 30. Rather than about 40 unique colors with simple graphics, I wanted the most realistic graphics I could get with GIF. Rather than a several hundred frames, I wanted a few thousand frames. It would be a record that leave all others in the dust. My old method prior to automation would mean spending at least a month at it, not including time spent to fix mistakes. Using the older MSPaint method, a half of a year's worth of 12-hour days at it wouldn't seem unusual. By automating it, I could easily go to the extremes of GIF, possibly even setting a world record (but this is unconfirmed). I wanted to make an animated cartoon. I actually had the plans set in 2005, but was unfeasible due to my old methods and lack of a batch converter. It was so long, it was the length of typical Looney Tunes cartoons. Being that long, and that I wanted to make my first animated cartoon, I spent a week making it. It took a day to form the spreadsheet, 2 1/2 days to make the background scenery, 3 days to make the foreground scenes, and one more day to fix mistakes and finalize it (longer than expected as the batch converter was taking 2 2/3 hours to process the entire thing). The animated cartoon (previews of the best-looking scenes are shown above due to it's huge memory usage and 4.1 MB file size, which is bigger than many programs for download) also included new enhancements such as more realistic lighting and 3D effects. No other animation has lighting like my first animated cartoon. Compare the previews to the the other animations. You'd only find a simple shadow at best and objects not casting shadows, let alone the 3D effects. The only problem I had with it was that I was getting too close to the color count limit of GIF, another first. I made several mistakes in this animation, but with the automation, I only needed a few more minutes to fix them, even though one of them meant having to fix nearly 3000 frames. Although not confirmed, it's likely the world's biggest and most complex animated GIF. I thought "Balloon Skydiving Without a Parachute" was my upper limit, but this animation is nearly 60 times as complex and everything is realistically to scale. Compared to the "Balloon Skydiving Without a Parachute" animation, this animation has just over 11 times as many frames (3444), and just over 4 times as many layers of objects (30) and 30 layers of objects. Adding in the realistic shadows, the 3D effects, the very simple text-based story (since animated GIFs don't have support for audio), and the overall design, it's about 60 times as complex. It's so stunning, I was very amazed at how it looked and this still falls short of my maximum potential. It's now the limits of GIF and hardware (memory in particular) that are getting in my way.

5 Discoveries made along the way



With MSPaint, I was very limited in what I could do. However, with my strong mathematical knowledge, I came about discovering new formulas and techniques to making animations with, including still images. These are just some of my greatest and/or most important discoveries made over the years.

5.1 Transparency



In modern software, allowing transparent objects over a colored background is easy. At the time, I didn't have anything modern so I had to figure out how I could go about doing so. I looked at gradients and found a mathematical relationship so I can find out what color you'll have at any point on the gradient. This was made in 2002. This became known as my color-averaging formula, of which I very actively use today. It has numerous derivatives - fog, lighting, video frame merging, alpha channel result colors, and likely some others.

5.2 Dithering



Dithering is the concept of blending two colors together to simulate another color without using that color. If you put black and white pixels in a 1x1-pixel checkerboard pattern, you can simulate gray. Put red and yellow in the same pattern and you can simulate orange. The color simulated is approximately equal to what you get with the color-averaging formula (in a 1:1 ratio).

5.3 Average speed, not the starting speed



When it came to acceleration, I thought that the speed was based on the start of the frame. That is, for 10 mph, I'd have 10+8+6+4+2 which gives 30. When I had a case in one of my animations where I had 4 jumps then a fall I somehow ended up with extra left over (10 in this simpler example) and it wasn't making sense. I checked and rechecked my spreadsheet layout and couldn't find any dumb mistake I may have made so I tried it with the start based on the ending speed instead. Doing this, however, gave me not enough and again wasn't adding up. I then looked at how acceleration works and realized that it wasn't the starting speed that was to be used, but rather the average speed between frames. Upon doing this, everything made sense again. The effect isn't as noticable, but when doing the detailed plan, these sorts of things can have an impact on the final result. Related to this, the speed stat does indeed use the speed at the end of the frame (and not the average). I made this discovery in late 2003 or early 2004.

5.4 3D



Drawing in 3D may seem complicated, especially when you want math to use maximum accuracy. However, I've made many attempts to get a formula where I can use 3D. My first attempt was clear back in 7th grade (in 1998) where I had a formula with a bunch of variables under a radical. It was quite close in ways, but it had a lot of flaws and didn't work. I made another attempt using a spreadsheet and I actually found how to use it, but I didn't know how to put it into a mathematical formula and I eventually forgot it entirely. I eventually rediscovered it with the help of the forums I frequent. Rather than triginometry, my formula is so simple, even a 4th grader could do it (if you can multiply fractions (see the formula for details), you can calculate simple 3D). Making a 3D animation with the growing and shrinking of an object takes nearly 20 times longer to process and you don't get anywhere near as much detail, unless several dozen columns are used. I tried it once. One hour in, I had only 5 frames done out of about 80 and it's more boring and more complicated than a regular 2D animation. Having learned triginometry and the arctangent function, I found a way to draw in real 3D using any field of view and the process of plotting a point is nonetheless the same.

5.5 Linear, not exponential



Earlier, I used an exponential scale where each layer was twice as far from each other (the scaling is doubled). This actually does have an important use in optimizing the animation to increase the frequency of identical frames, but it wasn't very realistic. I no longer the exponential. The animation shown at the top uses a linear scale. The one called "The Fall-glide" uses an exponential scale. You can tell the difference. The one with the linear scale has a more realistic behavior to it (and looks better). "Mountain Fun" is a much more extreme case of linear along with my first animated cartoon, "The Mega Race".

5.6 Trigonometry functions



Having watched a show on DirecTV called Assignment Discovery, I saw that it covered something about Trigonometry. The school I went to didn't have a class that even covered sines, cosines, and tangents, common trig functions. Until the show came on, I had little interest in learning it. When it did come on, I took a lot of notes and used the forums to get assistance. As a result, recalling an old animation where I climbed a mountain in my mind game, I wanted to use my new-found trig knowledge and made an animation called "Extreme Mountain Climbing". So far, I've only mastered sines, cosines, tangents, and arctangents. I haven't run into a case where arcsines or arccosines are used.

6 The future



Because of the 10 fps frame rate limit of animated GIFs in browsers, the 256 color limitation, and the very large file sizes associated with animated GIFs having 500+ frames at a fairly small 320x240 resolution, I have yet to find an alternative to GIF. MNG is not widely supported so is not high on the list. AVI suits my needs but has the major inconvienience of having to unzip a file twice leaving a 500+ MB AVI video on your hard drive, a big space hog. Flash costs too much to get the program and is off limits as a result. The only other option is writing a C program to play these animations, but even this has it's limits and in my case, that's OS support (I can only develop and test using Windows, as far back as Windows 95). At the moment, writing a C program to do what I did in Gamestudio is next which provides more capabilities, even more than with Gamestudio and the knowledge I have as of Jun 9, 2007. I may even have it be able to write the output GIF file, but not optimized since that's beyond my knowledge. A 4000-frame animated GIF more more complex mathematics would be the next possiblility, along with making an animated GIF with 3D-behaving lakes in the background instead of the usual mountains.

Further into the future would be simple computer-animated cartoons made in 3D rather than 2D. Although I can utilize Gamestudio for this, it is beyond my skills at the moment. In the far future would be making movies. By utilizing some 3D software like Gamestudio, or even my own C program if I get the know-how, I'd make some of my well-recalled dreams as movies and eventually my stories I've written during the late 1990's to the start of the 2000's, most likely "The Legend of the 10 Elemental Masters". Although, even today, movies are within my reach, it's my lack of knowledge with 3D, getting sound effects, and movie-like artwork that are beyond my skills.

3.2.3 Animation creation tutorial - how I make my flash-like animated GIFs to the finest detail
3.2.3.1 Introduction - The indroduction and tools needed
3.2.3.1-1 Introduction
3.2.3.1-2 Tools used
3.2.3.2 History - The history of my animation creation
3.2.3.2-1 The AVI days
3.2.3.2-2 MSPaint and early animated GIFs
3.2.3.2-3 GIMP and my latest animations
3.2.3.2-4 Automation leads to extreme complexity
3.2.3.2-5 Discoveries made along the way
3.2.3.2-6 The future
3.2.3.3 Glossary of terms and common formulas - Common animation-related terms and common formulas involved with art
3.2.3.3-1 Glossary
3.2.3.3-2 Commonly used formulas
3.2.3.4 Planning - Forming the plan - what the animation will do and how to set up the spreadsheet
3.2.3.4-1 The base plan
3.2.3.4-2 The main plan
3.2.3.4-3 The detailed plan
3.2.3.5 Creating the scenery - Making the scenery - how to optimize it and work with it
3.2.3.5-1 Some important notes
3.2.3.5-2 The easy stuff
3.2.3.5-3 The mountains
3.2.3.5-4 Making the character
3.2.3.5-5 Adding the obstacle and speed data
3.2.3.6 Animating - Processing the frames - using the spreadsheet data to make the frames of the animation
3.2.3.6-1 Important notes
3.2.3.6-2 Doing the text objects
3.2.3.6-3 The first scenery frames
3.2.3.6-4 Further scenery frames
3.2.3.7 Testing - Testing the animation - how to test the animation to spot problems
3.2.3.7-1 Compiling the animation
3.2.3.7-2 Testing the animation
3.2.3.8 Tips and tricks - Tips, tricks, and shortcuts to make animation-creation easier and faster
3.2.3.9 FAQ - Some commonly asked questions and help to common problems

Footnotes:
* These are black (000000), gray (808080), red (FF0000), yellow (FFFF00), green (00FF00), cyan (00FFFF), blue (0000FF), magenta (FF00FF), white (FFFFFF), light gray (C0C0C0), dark red (800000), dark yellow (808000), dark green (008000), dark cyan (008080), dark blue (000080), and dark magenta (800080).