AN1001 - Animation in SHIP

Animation in SHIP

Animation is a common element of many GUIs. Whether a rotating fan, slowly filling indicator, or a glowing element, subtle animations can enhance a GUI and make it more professional and modern.

At the core of every animation is a series of images that, when rotated through in-place one after another, form the impression of an animated object.

Animation in SHIP is the process of cycling through a series of images at a certain rate, making each one visible in sequence with the others invisible.

SHIPTide Project Files for AN1001

Assuming you've downloaded and installed the SHIPTide Rapid GUI Development Environment, download the following zip file. Unzip the projects to a directory of your choice and open up the project corresponding to your target platform in SHIPTide.

• AN1001 SHIPTide Project Sources for SIM102,110,205,225,YLCDRX63N  ↴ 

There are many ways to implement animation in SHIP; the attached project uses the concept of "grouped images" and demonstrates 4 different timer modes.

Animation Images

Just like the cartoon drawings you might have drawn as a child on a corner of a book and "flipped" through to animate, these images will be sequentially shown within the runtime SHIPEngine environment. Therefore, as you create the images in Photoshop or your graphics design program of choice, ensure that each image transitions to the next in exactly the right location within the borders of the image boundary.

Creating a set of Animation Images

Each animation image should be exactly the same size -- in this example project the fan images are all exactly 75 pixels square. Here they are, all in fully transparent alpha-blended .png format:

In this example the three fan images are not only the same size (75 x 75 pixels), but the actual drawings within the image boundaries are in exactly the same location just rotated. If one of the fan images were shifted to the right (for example) you would see horizontal jitter in the animation.

This may be a desired effect, for example if you wish to animate an arrow moving from left to right towards a target. But for many animations you will want to pick a drawing center-point and ensure the various versions of the image are centered on that point within the image boundaries.

Image Formats and Optimizations

In SHIPTide, look in the Project Resources pane and find the three fan images. Click on one of them and examine the properties of the image in the Properties pane:

All images in SHIPTide need to be pre-scaled to the desired size for the GUI. SHIPTide does not scale images because on small LCD screens generic auto-scaling algorithms rarely produce attractive results. Edges often get very jagged and distorted.

SHIPTide does not attempt to replace high-end graphics design tools -- you will want to use tools like Adobe Photoshop, Fireworks, or Illustrator to develop your icons, backdrops, and images. You can even use Microsoft PowerPoint to generate some images -- beveled buttons are surprisingly easy to create and export in PowerPoint! Illustrator is particularly powerful as you can create your source images in vector format, scale them well, export them to a fixed size and then use an image editing tool like Photoshop to clean up any residual issues.

Small image and icon creation is an art. Sites like Icojam, IconFinder, DryIcons, and many, many more (browser-search for "icons" and you will see!) feature innumerable talented small-image artists -- many can be contracted to develop your images and ensure you have sufficient legal rights to use them.

You will typically use .png or .gif images with transparency so that the animation can alpha-blend on top of any background. While the example project uses a fixed color background, you can change this background color or even layer a background image underneath the fan animation and the fan will rotate and "float" over the background with the background showing through the non-blade part of the fan images. Here is the same fan image over top of an image where you can see the underlying image coming through:

In almost all graphic design tools images can be saved with an 8- or 32-bit color depth, with or without alpha-transparency. Here is a brief chart of the various image formats and their capabilities:

Format	Color Depth (Bits)	Alpha Transparency
BMP	8,32	No
JPG	24	No
GIF	8	Yes
PNG	8,32	Yes

SHIPTide can read and use all these formats. At Serious we generally prefer 8- or 32-bit PNGs -- PNGs are a superset of the other formats.

Try creating your images with 8-bit color depth (with alpha transparency) and see if there is sufficient color depth to create a viable result -- the memory requirements and access times of these smaller 8-bit images are generally advantageous in your runtime GUI environment. For even more speed-sensitive applications, you can pre-blend the image(s) onto the single desired background and save the image as a non-transparent png/gif/jpg/bmp. These image, while not as flexible since they cannot be dropped on top of various backgrounds, will have no transparency channel and will not require run-time alpha blending -- a faster and simpler operation.

Grouping the Images

The three fan images, instead of being placed directly in the resources/images area, are placed in a named group. Exploring the project in SHIPTide the group looks like this:

We'll explain why this is important when we demonstrate how the images are assigned to a container visually. A group of images can function as a basic indexed array and there are functions that can extract and assign these to visual containers.

Creating the Visual Container

To display an 'image', one simply needs to add a 'box' to the layout and set the 'object property' to an 'image resource'. After doing this, you can easily adjust the image's 'position', 'opacity', 'alignment', and more by manipulating the corresponding properties on the 'box'.

Here is an enclosing animation image box from the example project:

Notice it is simply a horizontally and vertically centered box within it's parent box, with the first of the three images attached to its Template:Prop:box:object property. This sets up the box's width/height/position at build time (vs. run time) to match the images we're animating.

When the GUI runs, this first image will be displayed statically in the page. If you do not want this image visible at all until some signal or condition, just hide the box by setting its Template:Prop:box:visible property to false in SHIPTide, then set it to true in a SAIL script when you want the image displayed.

Animating the Image

There are various ways to create the effect of an animated image in SHIPTide, but this section will discuss the preferred method.

Description

We are going to group our image resources in such a way that we will be able to use a single variable to display the correct image from the animation sequence at a specific interval.

We will be using a 'group' to hold a set of 'images', a 'variable' to keep track of the next image, and a 'timer' to trigger a 'listener' that will run a 'script' to change the 'object property' on the 'box' that is holding our image.

Inside the 'script', we will use the getChildCount() and getChild() functions.

Step 1

Create a 'group' to refer to the set of images that make up your animation.

Step 2

Add the 'image' resources that make up your animation to the group.

NOTE: It is very important that the images are sorted in the correct sequential order after being added to the group.