ea.gif (17265 bytes)

 

How to Make Animated Rips

 

You gotta love the little buggers, they're fun to watch, they're pretty, they liven up our games pages and are reminders of our misspent youths. And with the tools we have at our disposition nowadays, they're actually not that hard to make. The following is a step by step guide on how to make an animated rip, albeit a very simple one. Please keep in mind that by no means I pretend to be perfect in this. I know there are better rips out there than mine and I know there are more talented artists, this is just how I do it and since so many people asked, there ya go :)

Basics: An animated .GIF image is nothing more than many individual GIF images in a row saved as one single file. For very simple animations you might not need more the 5 frames which are repeated over and over, which means 5 GIF images, aligned one after the other and displayed in quick succession to create the illusion of a moving picture, much like cartoons. What you have to do then is to capture the frames from your game, clean them and align them, then save as animated GIF image and voila, you have your little gem. Follow the steps below and you'll be there soon:

1) Choose a game and scene you would like to make and animated GIF of, to start of preferably something simple like the Galaxians Spaceship Firing. You then have to play the game in MAME, play that scene and record the frames. This can be done two different ways:

- Play and hammer the F12 button as fast as you can to capture the images

- Play and when you get to a moment you want to record press pause, then press Shift+Pause to advance frame by frame and take a screenshot of each frame. This way you are sure not to miss out any frames but it can be difficult during gameplay.

- Use the "Play and record AVI" feature in MAME32 - then choose full frames without compression method. This is recommended as you won't miss any frames and it's a lot less stressful :) (play the game and at the scene you want to record, press F12 to record and F12 again to stop recording) (Update: This feature is no longer available in MAME32. 37beta16 was the last version with this feature so you'll have to use this or an older version for your ripping if you choose to go with this method)

2) Import the recorded frames into Animation Shop which comes with Paintshop Pro. There are other programs out there, I love this one and have used it ever since I started with this. In the file menu choose import and then import all the frames. You will now look at a movie slide which displays all the frames, image after image. You can press the movie icon and view the film you have recorded. You could save this as it is and it would look like a MAME screen playing a game. Now we have to turn this into an animated GIF.

3) Use the "crop tool" to cut out the part of the screen with your animation. This will be done on all frames simultaneously which is good 'cos you won't have to do the same thing over and over manually :) If you are using the Galaxians example you now have a small black square within which the spaceship moves left and right and shoots.

4) Make the GIF transparent. This is so that it can be displayed on any background colour and not just in a black box, which is the original background and wouldn't necessarily look very nice on your webpage. Use the colour replacement tool for this and replace the black of the background with transparency. You now have your spaceship firing on a transparent background.

5) Adjust frames: The recording will have been made at 60 frames per second but there is a limitation in Internet Explorer which only allows you to display 10 Frames per second. In Netscape this is not the case. Since most people use Internet Explorer we have to take this into account. Go to "Edit" and select all frames. Then go to "Animation" and choose "Frame Properties", set the display tine to 1/10th sec per frame. You will now notice when you press the preview icon that the movie plays like in slow motion. This is because there are far too many frames.

6) Eliminate frames. You can do this either manually or by using the cull tool. The cull tool works fine for easy animations as it deletes frames every other frame, every third frame, etc, whatever you specify. However in more complicated animations crucial elements might go missing and you're better off doing this manually. Remember to do this in a pattern to keep the speed of the animated GIF constant.

7) "Save as" and the wizard will optimise the movie for you, cut filesize and turn the AVI into .GIF format. You now have your animated GIF :)

8) Advanced animations. For more complicated animations  and rips of game scenes from games with richer backgrounds the procedure complicates somewhat. Often it is easier to clean the images in Paintshop Pro and then import them image by image into Animation shop to create the animation. Making the transparency is a lot more work because you have to replace more than one colour. Antialiases sprites might have to be cleaned up and cut out neatly. It won't be enough to just replace a colour, you should load the safety colour palette, from that palette choose a colour which is not included in the sprite you want to animate (neon green or bright pink are usually obvious candidates) and then colour the background with this so as to out the sprite. Then go to "Colours"and "Set Transparency" to the colour you have used to paint your background with.

As before, open the AVI in Animation Shop, then crop the images and delete unwanted frames. Then export all the frames to Paintshop Pro, clean them up there and re-import them one after the other into Animation Shop.

If you stick to simple patterns and graphics first you can do an animated .GIF quite quickly. And you'll also develop your routines. You'll see that you'll have fun in no time. Once you have mastered that go for the more complicated ones, it takes the same basics, just less automation and more manual editing.

I hope this clears up some of the questions sent in. Have fun and feel free to write in if there's anything you don't understand :)