Animations for OSDM - Oldskool Demomaker (Tutorial)

Here is a little tutorial for OSDM. I will add it later to the OSDM Wiki as well.

Oldskool Demomaker does not support animated GIFs or any other animation/video format, but it is capable of rendering something like an animation via the work-around, which is called „Frame Animation Images“. This is basically a generic flat image in PNG, JPG or other format supported by OSDM, which contains all frames for the animation.

The only thing you have to do is tell OSDM how many frames the image contains and it will automatically slice up the image into equal size pieces, which are then shown one after another, with the speed of changing from one frame to another, depending on the value for “delay” that also needs to be specified for a frame animation image.

The Logo feature supports “Vertical Frame Animations” and the Sprites and Bounce Bobs features support “Horizontal Frame Animations”. The difference between the two is how the frames are arranged within the image; Vertical means on top of each other and horizontal means that they are arranged next to each other.

Example:
Frame animation image dimensions: 200x200 pixels, Number of frames: 2
- Vertical Frame Animation Frame Size: 200x100 pixels or
- Horizontal Frame Animation Frame Size: 100x200 pixels

Creating Frame Animations

Now, those frame animation images are hard to create by hand, because you have to be very precise. It is also virtually impossible to proper align the content within each frame to get a smooth and seamless animation sequence.

The best way to create frame animation images is by preparing all frames of the animation sequence and save them as individual images in PNG format into a separate folder on your hard disk. The file names for the images should be created by using a sequential numbering schema that they can be ordered properly; something Like “FRAME-001.PNG”, “FRAME-002.PNG” ... “FRAME-XXX.PNG” etc.

Once you have that, you can use the freeware tool „FAC – Frame Animation Creator“ for OSDM by Peace/Testaware (77 KB) to convert the set of individual images to a single image frame animation file.

• Frame Animation Creator – FAC Tool (freeware) by Peace/Testaware
  

The tool will create a single image in PNG format out of all your individual images . It also adds a suffix to the name of the output image, such as “_H99” or “_V10” etc. The “H” stands for Horizontal and the “V” for Vertical, followed by the number of frames this image contains. You will notice when you are using the finished image with such prefix in the file name, that OSDM recognizes this and automatically pre-sets the corresponding frame count parameter in the OSDM interface to the right value.

Note: I recommend for a number of different reasons that you keep your frame animation images as small in size and also in dimensions as possible. There are already restrictions build into OSDM itself when it comes to the image size of the frame animation. However, it does not restrict the dimension of an image. If an OSDM production uses an Image that exceeds the width or height of 4000 pixels, nothing of that image/animation might be shown on some machines, including my primary PC currently, which runs the 64bit version of Windows 7 Ultimate. I know from others that they don’t have this problem and animations that exceed the mentioned dimensions are still rendered on their computers, however, there is a problem for some folks out there. If you want to make your production to run properly on the most possible number of computers, don’t go over this limit.

Image Editors

Sometimes it is necessary to tweak the source images or even the final frame animation image before it can be used properly in OSDM. One example would be change the background color to back (RGB: 0, 0, 0) for transparency in OSDM for the Horizontal Sprite animations.

Using the open source image editing tool Gimp is one option and free.

•  Gimp Open Source Image Editor
  

I personally like to use the Snag-It Editor for minor image tweaks, which comes with Snag-It the Screen Capture Tool (Commercial, $50 for single user license), which I happen to own. Snag-it is also capable of making video captures of content that runs in windowed mode, which could be used to capture intros within an emulator window, if the emulator itself does not support video capture directly. DOS Box for example, which is useful to run old MS DOS intros, has a build in video capture feature and the captured video can be loaded into Virtual Dub and the frames exported from there to individual images (requires zmbv.dll codec). …more to that will follow in the subsequent paragraphs that are about the conversion from other animation formats to OSDM frame animations.

• Snag-it by TechSmith (commercial, $50 per user license)
  

Creating and Converting of Existing Animations

Not everybody is artist enough to create new animations from scratch himself for the use in your own OSDM intro production, so you probably prefer to use animations that were created by others instead.

There are a number of different sources that you could use. Some require more extra work and manual fine tuning than others. Let me provide a few typical examples that you might want to use as source.

Source: Animated GIFs

There are tons of small size animations out there created by people around the world for decades for all kinds of purposes, mostly for the use on a web site on the internet. I am referring to animated GIFs.

The animated GIF format is already very restricted in terms of the amount of colors and data the animation can have. They have to be small in size (and typically short) and only use up to 256 colors. This makes them perfect as source material for an animation in OSDM, since we also need to keep it short for the usage in our intro or demo production.

Finding Animated GIF images on the Internet; some Resources:

• http://www.dmoz.org/Computers/Graphics/Web/Free/Animated_GIFs/
• http://coolclips.com/
• http://www.gifanimations.com/
• http://www.animatedgif.net/

In order to be able to create a frame animation image with FAC, the animated GIFs need to be converted to individual frame images.

Here are some tools that do exactly that.

• Animated Gif Frame Extractor (17 KB)
• IrFanView 4.25 (1.3 MB)
• IrFanView Portable Version (10 MB!)

The Animated Gif Frame Extractor is a very small and straight forward tool to convert GIF animations, but it is also slow and has problems sometimes with certain types of animated GIFs, because it does not seem to support all of the animation features that the GIF file format supports.

I actually recommend using none of the three tools that I just mentioned, but another one, which does also a lot more than just convert GIF images.

See the next paragraph for details.

Source: Videos

You might want to use a very short video sequence as animation in your demo production. This should only be a limited number of video frames, to stay within the limits of OSDM.

A good and FREE (which is also nice) tool that allows you to extract images from video frames is the open source tool Virtual Dub. It also supports animated GIFs as input files and is able to convert them to individual frame images as well. Since full motion video has many frames per second (25, 30 or even 60), a conversion just a few seconds of video would result into hundreds of individual frames.

• VirtualDub 1.9.9 (1.6-1.8 MB)

Virtual Dub Preferences for Image Exports: Set the Frame Rate for image sequences much lower, if you want to convert some full motion video to a frame animation. You might even set it as low as 1 FPS, if it makes sense.

 

Virtual Dub Image Export Settings

 

 

Source: FLASH Animations

There are folks who remade hundreds of old school intro productions from the Commodore 64, Commodore Amiga and old MS DOS PC to the Adobe/Macromedia Shockwave Flash format. Although the effects in the original production was probably accomplished via code, most of those remakes are not doing this and use pre-created animations for those effects instead. Many of them perfect for the use with OSDM.

Here are some sites where you can find those flash productions. They don’t provide links to download the flash animation in SWF format to your local machine, but as most content loaded with a web page, those flash animations are being downloaded to your web browser cache first and then executed there, so you can have a look there and copy the file to a different location on your hard disk.

There are also tools and browser plug-ins available that let you download/extract flash animation files from web pages. There are tons of options out there, but the cheapest and simplest is to look into the local temp folder as I already mentioned.

Retro-Remake web sites - Extraction from Flash Remakes of Intros/Cracktros

• Flashtro.com
• Doc Snyder’s Flash Remakes
  

Flash Resources Extractors

Use a SWF Resource Extractor/De-compiler tool to extract images from Flash files.
Probably the best tool for this kind of task is the commercial de-compiler by SourceTec, however, that one is not free, nor is it cheap.

• SWF Decompiler by SourceTec/Sothink (commercial, $80), same as Eltima Flash De-compiler

But I did a quick test with the free tool SWF Picture Extractor and it also seems to do the trick. It only extracts the images from a SWF file, but that is all we really care about in the first place.

• SWF Picture Extractor (Freeware)
  

Here are two other supposedly free SWF extraction tools that I have found on the internet, but which I have not tested myself, so I don’t know if they are any good or not:

• SWF Extractor Free
• Fortop SWF Resources Extractor Version 1.0 (supposed to be freeware)
  current SW version is only $10 though

Source: Other Frame Animations

Another not so obvious source for an animation could be frame animation images that were created by others for example. They might be ready to use, if you plan to use them in the same way the original creator intended it or used in his own production, but this might also not be the case.

For example. If you have a cool Vertical frame animation that you would like to use, but via the Sprites or Bounce Bobs features instead of the Logo, then you have a problem, because Sprites and Bounce Bobs support only Horizontal frame animations.

Since you do not have the original individual frame images, the Frame Animation Creator tool won’t help you with this. At least not without an additional intermediate step, the conversion back from the frame animation image to single frame images. Since this option is not provided by FAC nor OSDM itself, I decided to write a little tool in PureBasic that is doing just that. It slices up Vertical and also Horizontal frame animations in PNG image format.

• Vertical/Horizontal Frame Animation PNG to Frame Images Converter (78 KB)

Conclusion

Okay, that rounds up my little tutorial about the creation of animations for the Oldskool Demomaker by Peace/Testaware.

Make sure to check out the OSDM related section on my own web site for demo and intro productions that I created with the tool as well as useful resources that you might also learn to appreciate for your very own intro/demo project.

I also suggest stopping by the OSDM support portal, which has a community form, wiki and other goodies. There you can find answers to your questions, either from what is already there or by simply asking others by posting to the forum. I am hanging out there too.

And last but not least the best “bonus” of them all. I created a set at my image sharing account at Flickr.com, just for OSDM ready frame animation images, horizontal and vertical as well. There are already several hundred animations that you are free to use for your own production. I also add new ones every now and then, so coming back to revisit it once in a while does not hurt.

Cheers!

Carsten aka Roy/SAC
http://www.roysac.com/