Microsoft GIF Animator Mini-Tutorial

View previous topic View next topic Go down

Microsoft GIF Animator Mini-Tutorial

Post by .Luke on Fri Nov 23, 2012 5:58 pm

Microsoft GIF Animator Mini-Tutorial, by .Luke

Seeing as there are quite a few of you who don't know where to begin utilizing the single best freeware tool, by Microsoft themselves, for creating animated GIF images, I've decided to write up a quick mini-tutorial to help you see just how easy it is to use, though time-consuming. If you hate the classic 256-color limit of GIFs and would prefer APNG images, (Animated PNG lossless compression picture files.) that's a whole other matter, but for now, let's try to get this one covered. Believe me, the interface is not as complicated as it looks, as we will see in the following step-by-step process.

*-*-*Step 1 . Obtaining Microsoft GIF Animator*-*-*

If you don't have Microsoft GIF Animator, it's development has long since been abandoned, and now their official site doesn't even host it for download anymore. However, SnapFiles.com still has a working download of the original at your convenience. Its installer program is light and fast, so it allows you to get right to using the program in no time at all on a modern machine.

Link : http://www.snapfiles.com/get/msgifanimator.html

Encase this has to be mentioned, GIF Animator will work on any version of Windows, from Win98 and even the more recent Windows 7. (Although I have yet to see if it works on Windows 8, however. It should in theory, but I personally cannot guarantee it since I don't have Windows 8 yet.)

It also runs perfectly under the WINE Windows Application Compatibilty Layer within Linux as well, so you don't have to boot into Windows to use it either. In fact, the screen shots in this tutorial were taken on Xubuntu Linux under WINE! (WINE is not an emulator, btw. Just to clear things up, it provides UNIX equivilants of Windows-based API calls for Linux, and plugs Direct-X calls through OpenGL. No more, no less. Both operating systems can run on the same processors, so there's nothing to actually emulate on the CPU level.)

*-*-*Step 2 . Getting Started*-*-*



Here, we are greeted to a mostly blank template. Only a third of the available tabs are visible since we don't have a project started yet. I do not recommend using the import button to start things off, it will not index the color information to a 256-color palette properly in my experience.

Make sure you have all the necessary frames you want in separate window(s), and set the Import Dither Method on the Options tab to "Solid" for most GIFs. The default, Error Diffusion, is hideous for solid colors. Different dithering methods have their uses, but we're working with basic video game styled sprites, so "Solid" is good for now. If it doesn't have a desirable effect, use a different one until you have what you want, simple as that.

You can leave the Import Color Palette alone if you want. By pasting images into the project we negate the need for custom palettes altogether.



Now that we're all set, it's time to paste your frames into the project. Keep going until you're done.



You'll notice that two more tabs become visible once you start importing frames. These are important, because without them your GIF cannot come to life! Onto Step 3 we go.

*-*-*Step 3 . Looping Your Images*-*-*



If you just want to loop your GIFs, this is the only setting on the Animation tab you need to tick, really. Click Looping and then Loop Forever. You can also adjust the canvas size here too, and check out the number of images in your GIF.

*-*-*Step 4 . Transparency and Speed Settings*-*-*



This is probably the most "complicated" part of creating your GIF animation, but actually it's the extra options that give you the most control over how it animates! Let's get started with overviewing the Image tab.

Options You Don't Need and Can't Change

- Image Width and Image Height just displays the canvas size, which you can't edit in this tab. Go back to the Animation tab if you want to change that.

- Left and Top adjust the center of axis, but this is usually greyed out, so it's nothing we need to pay any mind to.

Options You Will Actually Have Use For!

- Duration (1/100) changes the animation speed of that specific frame, and this is measured in one hundredth of a second. You can leave this at zero ( 0 ) if you want a fast-moving animation, but if you want it slowed down a notch, 10 or 15 works well. And obviously, if you want it to last longer than a couple of seconds, 200 or more. You can test out the animation speed to see if each frame will be at the right speed in your web browser with the Preview Button. (The icon to the left of the Help Button.)

- Undraw Method tells the GIF when to clear information from the previous frame. Sounds confusing, I know, but if you know what you're doing, for instance, you can paste a background without characters in the first frame, and have a character dance around in blankness with every frame afterwards; the end result being that a character dances inside the GIF without gobbling tons of unnecessary space with each frame! You can use Draw Methods to optimize your GIF for a much lighter file size.

But for most GIFs, like say you're animating sprite rips, Restore Background is the most suitable method for clearing the previous frame.



- Transparency actually defines which color in the image will be flagged as the transparent color. For instance, say your image has a blue background, it can be easily removed by clicking on the Custom Color box.



In this case, the color indicated by the mouse is the color of our project file's background, so we can make it disappear and only show the actual sprite on your web page. If you don't need it to be transparent or your game software uses the bottom-leftmost pixel for choosing the transparent color, then you shouldn't have to worry about changing this setting; I personally wouldn't bother with this unless you want to post it on the internet and have it to not clash with the theme of a site your friends and buddies use to communicate on.

*-*-*Step 5 . Putting It All Into Practice*-*-*



Now I've shown you what everything in the Image tab does, it's time to put all of that into practice. Each and every frame in your GIF has their own settings in the Image tab, so click your frames and apply appropriate settings to all of them as you see fit. This might be a bit time-consuming depending on what settings you have in mind, but seeing the finished result in action is worth it, I guarantee it. Playful Wink

*-*-*Summary*-*-*

In retrospect, that is essentially how you should utilize Microsoft GIF Animator for your typical GIF animations. In fact, every smiley on our forums were animated using this program, so it's not completely useless for something so old, now is it? You won't find a better free program for creating GIFs. It's not worth the hassle of buying, or risk catching spyware in the process of pirating, a commercial tool for this purpose when you already have what you need for the task, freely and at your convenience.

For larger project files, however, Microsoft GIF Animator may get a little annoying having to manually adjust the speed of hundreds of frames. I would recommend using GIMP to compile a large set of frames, dithering it all, and then exporting it as a looping gif with the speed you want. After that, I would use MS GIF Animator to make any minor adjustments.

For simple GIFs such as this one I made , GIF Animator would do just fine, but for something more complex like the below, save it for GIMP and do minor tweaks in GIF Animator post-exporting from there.

avatar
.Luke
Retired Staff

  : Site Bird Trainer
Posts : 991
Age : 27
Location : United States
Join date : 2012-05-22

http://shantaefansportal.tumblr.com/

Back to top Go down

Re: Microsoft GIF Animator Mini-Tutorial

Post by Axol The Axolotl on Sun Jul 07, 2013 5:39 pm

Here is the result of my first one.

avatar
Axol The Axolotl
Hailing from Water Town
Hailing from Water Town

  : Skin maker
Posts : 182
Age : 24
Location : Under the docks
Join date : 2013-05-13

Back to top Go down

Re: Microsoft GIF Animator Mini-Tutorial

Post by .Luke on Mon Jul 08, 2013 4:07 am

I'm pretty sure she's supposed to be standing in place, but nicely done. ^^ I'm glad you found the tutorial useful, Axol.
avatar
.Luke
Retired Staff

  : Site Bird Trainer
Posts : 991
Age : 27
Location : United States
Join date : 2012-05-22

http://shantaefansportal.tumblr.com/

Back to top Go down

Re: Microsoft GIF Animator Mini-Tutorial

Post by Axol The Axolotl on Mon Jul 08, 2013 2:43 pm

But how do I make my animation stand in place?
avatar
Axol The Axolotl
Hailing from Water Town
Hailing from Water Town

  : Skin maker
Posts : 182
Age : 24
Location : Under the docks
Join date : 2013-05-13

Back to top Go down

Re: Microsoft GIF Animator Mini-Tutorial

Post by .Luke on Mon Jul 08, 2013 6:58 pm

There's no easy way to do it with the software itself, that I know of. You'd have to adjust that manually in your art program. If you're using MS Paint, for instance, you can keep multiple windows up, and click between different windows, each opened with different frames, to check how the animation is moving, using the select tool to move each frame around appropriately, then save it. And if you're using GIMP, there's an animation plugin for checking the animation too, it even works with layer groups.
avatar
.Luke
Retired Staff

  : Site Bird Trainer
Posts : 991
Age : 27
Location : United States
Join date : 2012-05-22

http://shantaefansportal.tumblr.com/

Back to top Go down

Re: Microsoft GIF Animator Mini-Tutorial

Post by Sponsored content


Sponsored content


Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum