Creating a Microsoft. NET Compact Framework-based Animation Control

Alex yakhnin
Intelliiprog, Inc.

March 2003

Applies:
Microsoft. NET Compact framework
Microsoft Visual Studio. NET 2003
Microsoft Windows CE. net

Summary:Learn how to build a. NET Compact framework-based animation control. (8 printed pages)

Download animationcontrol. MSI.

Contents

Introduction
Creating a storyline
Let's animate
Movie time!
Conclusion

Introduction

During a recent project, one of the requirements was to show an animated GIF on a Microsoft. NET Compact Framework Windows Form. version 1.0 of. NET Compact Framework does not include the capability to display animated GIF files nor does it induplicate ateImageAnimatorHelper class from the full. NET Framework.ImageAnimatorClass allows animation of an image that has time-based frames.

Even though it is possible to write C # code to read the animated GIF in GIF86a format, I have chosen a more simplistic and straightforward way to display animation in my program.

Creating a storyline

If you open an animated GIF in the GIF editor of your choice, you will see that this file consists of a few images (Frames) That follow each other:

Figure 1. Animation frames

These images are stored in a compressed format with information on the size, quantity and delay time between the frames. This information is read by the program that displays the animation.

Parameters of the GIF editors allow you to extract the image frames into a sequential "storyboard" of the frames:

Figure 2. Storyboard

I saved this into a single bitmap file, which I later converted into GIF format as it uses less memory within. NET Compact Framework. now I am going to show you how to use this image to create. NET Compact Framework-basedAnimationControl.

Let's animate

The way in which we're re going to animate the bitmap is rather simple. it relies on the fact that when you're using an image in. NET Compact Framework, you don't necessarily have to display the entire image you 've loaded into memory. one of the overloaded methods ofGraphics. DrawImageMethod accepts a Rectangle object as a parameter. this rectangle will be our way of framing each image in the storyboard bitmap. by moving the position of the frame rectangle, we can dynamically load a different section of the bitmap to be displayed on our form.

We add a new classAnimateCtlInto a. NET Compact Framework project and derive this class fromSystem. Windows. Forms. Control:

using System;using System.Windows.Forms;using System.Drawing;using System.Drawing.Imaging;public class AnimateCtl : System.Windows.Forms.Control{   // Add class implementation here}

Let's add a public Bitmap property to the class that will be used to pass the bitmap from the client. don't forget to declare a private member for the bitmap, for use within the class:

private Bitmap bitmap;public Bitmap Bitmap{   get   {return bitmap;   }   set   {      bitmap = value;   {{

The control we create will draw the frames by usingDrawImageMethod ofGraphicsObject retrieved from the control:

private void Draw(int iframe){      //Calculate the left location of the drawing frame      int XLocation = iframe * frameWidth;      Rectangle rect = new Rectangle(XLocation, 0, frameWidth,         frameHeight);      //Draw image      graphics.DrawImage(bitmap, 0, 0, rect, GraphicsUnit.Pixel);}

This method accepts the current frame number that needs to be drawn. We then create the drawing rectangle by calculating its left position.

In order to implement the looping logic of the control I 've chosen to utilizeSystem. Windows. Forms. Timer.

Although quite a few other options exist to provide the same functionality suchSystem. Threading. TimerOr even create a separate thread, the usage ofSystem. Windows. Forms. TimerProved to be a more simple and convenient approach. Let's add the following code in the control's constructor:

public AnimateCtl(){   //Cache the Graphics object   graphics = this.CreateGraphics();   //Instantiate the Timer   fTimer = new System.Windows.Forms.Timer();   //Hook up to the Timer's Tick event   fTimer.Tick += new System.EventHandler(this.timer1_Tick);}

In the constructor we cache the Graphics object from the control's instance and create a new instance of the Timer. and we shoshould not forget to hook into the Timer's Tick event. we are ready to insertStartAnimationMethod that will actually start the animation:

public void StartAnimation(int frWidth, int DelayInterval, int LoopCount){      frameWidth = frWidth;      //How many times to loop      loopCount = LoopCount;//Reset loop counter      loopCounter = 0;      //Calculate the frameCount      frameCount = bitmap.Width / frameWidth;      frameHeight = bitmap.Height;      //Resize the control      this.Size(frameWidth, frameHeight);      //Assign delay interval to the timer      fTimer.Interval = DelayInterval;      //Start the timer      fTimer.Enabled = true;}

This method accepts a few parameters that are very important for animation: frame width, delay interval and loop count.

And don't forget the looping logic:

private void timer1_Tick(object sender, System.EventArgs e){         if (loopCount == -1) //loop continuously         {            this.DrawFrame();         }         else         {            if (loopCount == loopCounter) //stop the animation               fTimer.Enabled = false;               else               this.DrawFrame();         }}private void DrawFrame(){      if (currentFrame < frameCount-1)      {         //move to the next framecurrentFrame++;      }      else      {         //increment the loopCounter         loopCounter++;         currentFrame = 0;      }      Draw(currentFrame);}

In the code above inTimerw.tickEvent we checkLoopCountThat keeps track of the how many loops have already been drawn and compare it toLoopCounterThat we captured whenStartAnimationMethod was called.

Movie time!

We are done withAnimateCtlAnd ready to test it in action. as a first step we need to add the image file with "storyboard" into your project. we can do this by making this file an embedded resource or just by telling Visual Studio. network 2003 to copy this file as a part of the project. right click on the project in the Solution Explorer and select"Add Existing Item Â..."From the Pop Up menu. Browse to the image file and make sure thatBuild ActionProperty for this file is set"Content".

Now let's Insert the following into your form's constructor:

public Form1(){//      // Required for Windows Form Designer support      //      InitializeComponent();      //Instantiate control      animCtl = new AnimateCtl();      //Assign the Bitmap from the image file      animCtl.Bitmap = new Bitmap(@"/Program         Files/AnimateControl/guestbk.gif");      //Set the location      animCtl.Location = new Point(50, 50);      //Add to control to the Form      this.Controls.Add(animCtl);}

In the code above we assign the bitmap property of the animation control with the bitmap object that was created from our image file.

Place two buttons on your form in the designer and add the code to their click events:

private void button1_Click(object sender, System.EventArgs e){      animCtl.StartAnimation(92, 100, 3);}private void button2_Click(object sender, System.EventArgs e){      animCtl.StopAnimation();}

When running the project and tapping on the "Start Animation" button you shoshould see the animation:

Figure 3. The final product

The amount of frames ininitialized into the pseudo-animated GIF files cocould vary as well as the delay time between the frames. You wowould certainly need to adjustDelayIntervalParameter when callingStartAnimationMethod for different animations.

In no way is this code considered in its final version.AnimateCtlDoes not provide all required functionality that cocould be ininitialized into animated GIF's. For example,AnimateCtlControl can't handle a different delay times between the frames. such as, you might want to show the very first frame a little bit longer than others. the code provided with this article is a good starting point for you to extend this control for your needs.

Please keep in mind that displaying a high-resolution graphics animation cocould impose a heavy load on the system resources. be aware of the memory and resource constraints of the some of the devices you cocould be running this code on. don't forget to test it thoroughly and make sure that your application is not hogging up all the memory or taking up all the processor time.

Conclusion

Although. NET Compact Framework is a subset of the full. NET Framework developers still have the power to create compelling user interfaces which are more attractive to end users. by utilizing available GIF editor tools and the drawing capabilities of. NET Compact Framework are able to display the animation in their Smart Device projects.