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 11, 2006 (first version)
Level 5 update on Jun 10, 2007 (link for script and notes on it added; other fixes and clarifications)
This section covers compiling and previewing the animation you just made.
1 Compiling the animation
To compile the frames into an animation, a batch converter is what you need. For long animations with several unique frames, just open the XCF files and save them as a GIF file flattening the image. This takes close to an hour for a 284-frame animation and it's rather boring so that's why a batch converter is what you need. In the end, you have your final result, a nice-looking animation. Perhaps the most useful free batch converter for GIMP would be this one* (credit for the script goes entirely to the user Saul Goode at the GIMPTalk forums). If you followed the tutorial, you'd have an animation very much like the one at the top in terms of the behavior but somewhat different scenery.
2 Testing the animation
GIMP's playback feature is only good for normal size. For true testing, however, you need to magnify the image and using a webbrowser is the best way. You just need to insert an image tag into a blank HTML document and use the width and height attributes. This is a sample of an HTML document that you can just copy and paste (save as HTML, not TXT - type the file name as you normally would but manually add the .html extention):
I'm using a black background because it's easier to see pictures on black backgrounds because they appear brighter due to the way your eyes work. With a white background, your eyes are receiving more light so less light gets in to blend it which causes the image to appear darker. With the black background, you have less light getting in and the eye adjusts to receive more light making the image appear brighter. You can see the difference if you change the bgcolor="#000000" part to ffffff instead of 000000 (note that there are six of a kind). This changes the background to white.
Change the path where you see "src="file://..." to exactly match the place your file is on your hard drive. Without doing that, you'll just get a blank image or broken image since the image can't be found.
To view the image as a larger view, change the width and height values accordingly. Our animation is 320x240 so this makes it double the size. If you changed it to 1280 and 960, it'd be magnified to 4 times the size (like 400% zoom). Don't use outrageously high values or strange things can happen like running out of memory or 100% CPU usage causing the delay to be longer. For testing, use an unoptimized version as this cuts down on the CPU usage. When ready, optimize the image to save on the file size and memory usage and upload it to wherever. I advise that you don't exceed your screen resolution or something like 1280x960.
Another way to test, and better, is to combine the magnification with longer delays (like the same frames, but at 2 fps instead of 10 so it plays back 5 times slower. This way you can carefully watch the scene and check for anything odd.
If you want to download the spreadsheet I compiled (requires Excel), Download it here (~48 KB) and unzip it.
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:
* To install it, first unzip the ZIP file. It will unzip to the scripts directory for GIMP so it can be used. Restart GIMP or refresh the scripts (using the main window's refresh scripts option). This is just a text file that GIMP uses.
To use it, go to Xtns > Script-Fu > Misc > convert BMP or XCF sequence to animated GIF. Choose frame one in the directory containing the frame then set the delay to 100 in the dialog and click OK. It'll then read the frames, merging the XCF layers, and display an output ready to be saved as GIF. Change the duration of the final frame to whatever you feel as neccessary (double-click the layer and change the "(####ms)" value as needed where the #### is the number of milliseconds the frame is to be delayed. This only needs to happen to the last frame. Save this as a GIF, test it in the browser using the simple HTML code I've given.
To test with different speeds, just increase the delay value from 100 to something higher such as 300 for 1/3 the playback speed. Then, just reopen your GIF file, optimize it, then save it under another name and upload it however you please.
