In Listing 7-4 we see that ImageSequenceView extends Group , and it takes a single imageSequence when
created. The init function creates an ImageView for each Image in the ImageSequence . Each ImageView is
translated so its center is at 0.0 of the ImageSequenceView and set to be invisible. The ImageViews are
centered for two reasons: First, I used this class in a game, and knowing the center is more convenient in
terms of game logic. Second, if the Images are not all the same size, I want them aligned by their centers.
The ImageViews are set to invisible ( visible: false ) because only one image will be visible at a time, so it
makes sense to start them all invisible. Each ImageView is then inserted into the content of the
The last thing init does is call the function updateImage . Note that updateImage is also called when
the variable currentImage is changed. The function updateImage coordinates which ImageView in the
content is visible. This is done by finding the last ImageView that was visible, setting it to invisible, and
then setting the ImageView at the index of currentImage to visible.
Figure 7-8 shows a graph diagram for an ImageSequenceView .
Figure 7-8. Node graph of an ImageSequenceView
The circle is the ImageSequenceView itself. The big squares are the ImageViews that are contained in
the content of the ImageSequenceView , which extends Group . The third big square from the left, shown in
a darker color, is the currently displayed ImageView .
In this chapter, ImageSequenceViews are used to represent cyclical animations, but this is not their only
function. They could also be used to store all of the different images that comprise a sprite in a game, for
example. Consider a character from a side-scrolling game: The character will require five or six images to
represent the sprite when it is walking, at least one to represent it when it is just standing still, and
perhaps three or four more for each action it performs. An ImageSequenceView could be used to store all
of these images, and changing how the sprite looks would be as simple as setting currentImage to the