From Dan Mabbutt,
Your Guide to Visual Basic.
FREE Newsletter. Sign Up Now!

Mar 24 2007

GDI+ is the way to draw shapes, fonts, images or generally anything graphic in Visual Basic .NET. You can get the most from this tutorial by starting with Part 1 where the fundamentals of GDI+ are explained.

Previous Lesson Links

• Part 1 - Introduction to GDI+ and the Graphics object
• Part 2 - Drawing a curve with a series of connected points
• Part 3 - Advanced vector graphics with an intro to bitmapped graphics
• Part 4 - Blending and merging colors and shapes in the same graphic
• Part 5 - Coordinate Spaces and Matrix Transformations
• Part 6 - Using the GraphicsPath object and clipping regions
• Part 7 - Colors and Transparency
• Part 8 - Image Based Graphics
• Part 9 - Metafiles

One of the "features" provided by .NET is the ImageAnimator object in the .NET System.Drawing namespace. This gives you the ability to use animated images inside VB.NET applications. I put the word "features" in quotes because ... well ... frankly, the animation you can achieve isn't wonderful. But it does "work" and rather than leave it out of this tutorial completely, I decided to show you the good, bad, and ugly.

Animation is accomplished simply by painting a new, slightly updated image to create the apparent impression of motion. The easiest way to create animations is to use what are called animated GIF's. These are files created using the Gif89a standard which allows multiple images to be saved in a single compressed file along with information about how to display them such as the delay time between images. A host application has to be able to read this information and display the individual images according to the instructions.

One more point should also be mentioned. While researching this article, I found books and articles that continue to warn that the use of the GIF format is under patent protection due to the embedded LZW compression used in it. That was once true, but it's now outdated information. According to Wikipedia:

"The US LZW patent expired on June 20, 2003. The counterpart patents in the United Kingdom, France, Germany and Italy expired on June 18, 2004, the Japanese counterpart patents expired on June 20, 2004 and the counterpart Canadian patent expired on July 7, 2004. Consequently, while Unisys has further patents and patent applications relating to improvements to the LZW technique, the GIF format may now be used freely."

There are two principal problems with the .NET implementation of GIF animation.

First, .NET doesn't provide a way to create the images at all. The usual solution is to use a third party utility to create animated GIF files. I used Animation Shop 3 to create the example I show a bit later. (This is one case where some other technologies are out in front. For example, Java has the AnimatedGifEncoder class that gives programmers a lot of these capabilities. Let's get moving, Microsoft!)

Second, the ImageAnimator class in .NET doesn't handle timing the display of the individual images very well. GDI+ uses the event processing provided by Windows Forms and the Windows message pump. That's just not good enough to keep the animation from being jumpy and even skip frames entirely. There are a couple of solutions to this problem that I'll describe briefly a little later on. The ImageAnimator class also won't give you access to the information stored inside an animated GIF file such as the number of times the animation should be repeated. The ImageAnimator class just repeats them all infinitely.

I was a little hard on Microsoft for not providing a GDI+ class to create animated GIF's. Although they deserve it, I have to admit that the job is usually complex enough to require a development system of its own to do it right. Describing how to create an animated GIF goes waaay outside the parameters of Visual Basic so I'll refer you to the About.Com Graphics Software page for more information.

The animated GIF we'll be working with is shown in the illustration below. To see the animation again, click the "refresh" button on your browser.

--------
Click Here to display the illustration
Click the Back button on your browser to return
--------

In this case, the application displaying the animated GIF is your browser software. But using the ImageAnimator class in a Windows form to display a GIF is relatively straightforward ... once you have the animated GIF file. The methods in the ImageAnimator class are static methods. That means that they aren't instantiated before they're used; they're called directly from the class.

There are only four methods available:

• Animate
• CanAnimate
• StopAnimate
• UpdateFrames

The next page will show how to use them.