Effect - Animated Image Sequences

C H A P T E R 7

■ ■ ■

137

Effect: Animated Image Sequences
Not all animations in an application are dynamic. It is often desirable to create the animations in a
dedicated tool and then play the animation in the app. JavaFX has good support for video, for example,
but sometimes video is too heavy of a solution. Or perhaps you want to have an animation sequence
with partial transparency or be able to specify exactly which frames of the animation are visible when. In
these cases, animating a sequence of image files can produce desirable results, and as a bonus, most
animation software supports exporting image sequences directly.
This chapter discusses strategies for creating images and displaying the sequence as an animation
in a JavaFX scene. By displaying one image at a time an animation will be created, much like an old film
movie where each frame is a picture on the filmstrip. This will be implemented using a few core JavaFX
classes, such as Image and ImageView. The number of images that can be used to create animations like
this is surprisingly high, but some effort must be made to do this without ruining the performance of
your application. But before we get to the code, let’s first discuss how to create the images.
Creating Images
There are excellent tools available for creating animations, and you should feel free to use any tool you
are comfortable with. Some are better suited for 2D animations, such as Adobe’s After Effects, and other
tools are better at 3D. For 3D I can’t recommend Blender enough. The learning curve is amazingly steep,
but after 20 hours or so you will find yourself able to create any shape you can think of. You will also find
video tutorials for all animation tools online, and I find this a good way to learn. Conduct a web search
for “Blender tutorial videos,” take your pick from the results, and start following along. And check out
the Blender web site at which contains documentation and
videos to assist you.
Figure 7-1 shows a Blender project set up to create an animation. The plethora of buttons on the
screen hints at Blender’s power and learning curve.
Download at WoweBook.com

CHAPTER 7 ■ EFFECT: ANIMATED IMAGE SEQUENCES

138


Figure 7-1. Blender
If you choose to explore Blender as a tool for creating content in your JavaFX scenes, remember that
you can add as much detail as you want. You can also render the animation with the most time-
consuming rendering options if you want. This is the real beauty of pre-rendering these animations:
Once the work is committed to a sequence of images, it does not matter how complex your 3D scene is.
All of that detail is presented to the user in a fluid animation.
If the JavaFX scene you are creating will contain multiple image sequences, then it is best to track
how each item is lit. Combining content that looks 3D to the user will be confusing if one item seems to
be lit from the left and another is lit from the right. An example of this can be seen in Figure 7-2.
CHAPTER 7 ■ EFFECT: ANIMATED IMAGE SEQUENCES

139


Figure 7-2. Multiple asteroids with consistent lighting
CHAPTER 7 ■ EFFECT: ANIMATED IMAGE SEQUENCES

140

Figure 7-2 shows four different asteroid sequences that are all animated with several light sources,
but in the same location for each asteroid. This gives them a consistency within the scene. Note that the
buildings at the bottom are also illuminated in a way consistent to each other. You can also see that the
light on the asteroids might be coming slightly from the left, while on the buildings the light is coming
from the right. This is inconsistent, but I think it is close enough for a $1 game.
One criterion for this exercise is that the animation tool must be able to export the frames of the

animation as a sequence of images that JavaFX knows how to read. I find PNG files perfect for this task.
The demo code, shown later in the chapter, provides three examples of using images as frames in an
animation; the screenshots in Figure 7-3 show each example with a gradient background to highlight the
transparency.

Figure 7-3. Asteroid
Figure 7-3 shows an asteroid that was created with Blender. When animated, the asteroid appears to
be spinning.
Figure 7-4 shows a jack that I created to be a sort of space bomb in a video game I originally created
for the iPhone.
CHAPTER 7 ■ EFFECT: ANIMATED IMAGE SEQUENCES

141


Figure 7-4. Jack
While porting the game to JavaFX, I decided to include it as an example in this book. The jack rotates
on two axes, which makes it look like it is falling out of control in the game.
Figure 7-5 is an animation created with Adobe After Effects by my colleague Tim Wood. Tim is a
professional designer, and it shows—I think his animation looks a lot more interesting than my
examples.
CHAPTER 7 ■ EFFECT: ANIMATED IMAGE SEQUENCES

142


Figure 7-5. Skulls
When looking at the image sequence playing in the sample app, it is clear that there are a lot of
subtle animations at play. While JavaFX possesses the ability to express this animation, the quick
iterations of a dedicated tool make the production of animations much easier. With JavaFX you have to

make a change to the code and recompile and run the application. With a dedicated tool, it is much
easier to fuss with sliders until the animation is just right.
When creating these animations, it is important that the animation is a loop. That is to say, when
the last image in the sequence is replaced with the first image, we want to avoid a visual jump.
Figure 7-6 shows the entire set of asteroid images, starting at the upper left and progressing to the
right.