Contents
Picture Clip Animation Sample Help

Sample Description: Picture Clip Animation

Points of Interest

Clipping Bitmaps

Producing Animation

Control

Image

For Help on Help, Press F1


Picture Clip Animation

The Picture Clip Animation demonstration is designed to illustrate how the Image controls CropXOffset and CropYOffset properties may be used with a Timer object to produce an animation effect of a graphical Bitmap object.

In our sample, the source Bitmap was created with Microsoft Paint and is a series of 3D images of a top with a multi-shade grey background.  There are (3) rows and (6) columns of the top image.  You can think of this as a 3x6 film strip containing 18 different images of a 3D top.

To run the Picture Clip Animation sample, click the Options/Menu entry Start.  To stop the demonstration, click the Options/Menu entry Stop.


Clipping Bitmaps

The source bitmap image for our demonstration contains (3) rows by (6) columns of various oriented images of a 3D top.  In total, there are 18 different images of this same top, only shown in at a different spin rotation.

To change the currently shown view, the CropXOffset and CropYOffset properties of the Image control named imgTop.  The viewing size of the bitmap is determined by the CropXSize (66) and CropYSize (61), and is fixed throughout the animated demonstration.

Each time the CropXOffset value is increased, the image is in turn shifted towards the left.  Therefore, if we increase the CropXOffset by (66) pixels, we in turn are viewing the next image of the top.  When we reach the last column of the tops image, column 6, we need to increase the CropYOffset by the height of the displayed image.  This in turn presents the second row of top images.

By cycling through the display of the (6) columns and (3) rows of images, we in turn see the top appear to spin.  The faster we cycle through these images, the faster the top appears to spin.


Producing Animation

In order to cycle quickly through the 18 different images of the top, we use an Envelop Timer object named TimerSpinTop.  When this timer is enabled, by the Start menu entry, a Timeout method named TimerSpinTop_Timeout is executed at each timer interval.  This method in turn calls the SpinTop method.

The SpinTop method looks at a SpinCounter property to see which top is currently being displayed.  Based on which image is currently displayed, a call is made to a method named DisplayImage which then increments the CropXOffset and CropYOffset values to display the next top.  As the timer runs, the Timeout method is executed at each timer interval.  This in turn updates the particular top image that is displayed and thus produces the animation effect.