Whilst everything you learnt in the previous section was great, there's
nothing that catches the eye like movement, so DesktopX makes it easy for you to
add animation to your objects.
The ‘animation’ tab is where you can define how your object animates.
The first thing to explain is that there are the two different types of
animation that DesktopX can do.
A 'Static animation' is the most simple animation option. This simply changes
the level of transparency rather than the image itself.
Slightly more complex is a standard animation with different images over time.
Static Animations
We will start with a 'Static animation'. To start with, set a number of
frames. A frame is an individual part of an animation, so the higher the number
of states the more different 'images' an animation has. Once you set this value
higher than '1', the 'Interval' is enabled. This is how long each part of the
animation lasts in milliseconds. The higher the value the longer the animation
takes. For example, a 5 frame image with an interval of 50ms will take 250ms
(1/4 of a second). You also need to check the 'Static animation' checkbox so
that DesktopX knows not to expect an animated image, just to vary transparency.
If you check the 'Loop' box then the animation will be repeated as long as the
object is in that state. Normally if the state changes then the animation will
play through to the end, but if you check the 'Interruptible' box then to state
will change immediately without playing to the end.
After that you simply need to set the direction in which the animation will fun
by selecting one of the 4 options available.
If you are looping the animation it will probably make sense to choose one of
the bottom pair as this will lead to a nice smooth pulsing transparency effect.
The final thing that you need to do is specify the change in transparency. This
is where you get to use the third option on the 'Transparency' tab. Here you
specify how the transparency varies in one cycle of the animation. This will
then be impacted by the animation style you chose and whether you chose to
'Loop' the animation.
Try experimenting with these options and see how they change the appearance of
the object.
Image animations
We will now look at actually animating the image itself, rather than just
animating the transparency.
Though I said that this is more complicated, it still isn't actually that
difficult. The change you need to make is to combine all the frames of the
animation into your source image.
What you need to do is place the frames of the animation side by side from left
to right.
The above is the source image for a six frame animation of the DesktopX logo
being worked on in Fireworks. There are six 100x100 images next to each other in
one 600x100 image.
If you run this forwards then the image will increase in size.
Once you have done this then just change the other settings as you were shown
for the 'Static animation'. This includes transparency so you can change both
the image and the transparency over the course of an animation.
PDF available
