The TMS GUIMotions component has 8 modes to display & animate your images, custom drawn information or controls. Animation can be controlled with the mouse or the keyboard. In the screenshot below is an overview of the major and important elements of the component.

1) When selecting an image the caption(1) will have the caption text assigned to the image. The caption can be positioned in every corner or in the top or bottom center of the control.

2) The scrollbar(2) can be used to navigate through the collection of images. This scrollbar can be positioned in every corner or in the top or bottom center of the control.

3) The most important element of the control is the collection of images(3). The images in this collection will eventually be loaded in the DirectX video memory. DirectX will create a texture on a vertex buffer which can be animated. You can define these images on three different ways:

a. Normal image: just add a PNG, JPEG, BMP, GIF file to the collection. Note that the formats supported depend on the installed TPicture formats.
b. Custom painted image : paint on the canvas of the custom image (OnImageCustomDraw required) and this will be animated
c. Control painted image : Paint a control on the image that will be animated

For each image you can also add an alternate image which can be created on the same way as the normal image (see the three image types above). The alternate image can be optionally shown when right-clicking on the selected image.

4) Depending on the animation mode choosen, the normal images will be loaded skewed, scaled or transformed. When you select an image the selected image will transform to a different state.

5) When you click on the selected image you can zoom in depending on PictureWidthZoomed and PictureHeightZoomed you have chosen.

There are three ways of loading images into video memory (controlled by the ImageQuality property)

a) iqNone : lower resolution for minimum memory usage and maximum animation speed (PictureWidth and PictureHeight properties will be used to set resolution to load Image).
b) iqSelected : Only the selected image will be loaded in high resolution (for reasonable animation speed and memory usage)
c) IqFull: all images will be loaded in video memory at full resolution. (longer loading time for images and higher memory usage)