Getting animated

Exercises & examples

Exercise 1: Scenarios

The first exercise in the book is to write some example scenarios. I included one in the book, but I actually wrote three different approaches and then made Adam pick one (which is what we often do - although it’s usually the client we’re making pick. I’m including them all here as examples of different visual approaches.

The first version is the version that was included in the book. It’s a version of the ‘slideshow’ animation - essentially transitioning between and animating charts in interesting ways.

The second version is a ‘changing scenery’ animation, with a single chart - in this case a bubble chart, but the content of the chart and the background changes as the story evolves.

The final version uses a completely different visual approach - using photographs and film footage rather than just pure vectors - and relies much more on the conventional film language of montage through editing to build a story.

Exercise 2: Storyboards

Here is the example storyboard from the book, hopefully at a larger, more legible size.

Notice how much space is given over to describing the first chart compared to the line chart. The transition of the lollipop chart requires a lot of explanation, while the line chart just draws itself on in the way you’d expect.

Here’s that storyboard sequence animated:

In the final animation, those two charts take about the same time to animate in, but notice how some new elements have appeared that weren’t storyboarded. There’s design elements like the mobile in the background, for instance, but I also didn’t realise that I’d need to move the left hand labels around until I’d got to that point in the animation.

Examples

Here are some examples of the four kinds of animation visual approaches I mentioned in the book:

Slideshow

This animation is essentially just transitions between individual ‘slides’ of information. However the frames of information all have little bits of animation and loops in, and the transitions are all exciting and rapid (all brilliantly animated by Angela Gigica), so everything moves along and keeps our attention.

Rostrum camera

Here we have a whole scene - a lovely little town drawn (and animated) by the splendid Jamie Lenman - which the camera roams over, discovering new things at different resting places. This makes a virtue of when we want to revisit places and discover new things there - instead of ‘rewinding’, we’re ‘re-exploring’, which feels more purposeful.

(One thing I had to cut from the book was the story of Ken Morse, the rostrum cameraman whose name appeared in the credits of so many documentary shows that he became a minor celebrity and the BBC2 Late Show did a whole programme about him)

Changing scenery

Here we have a single visualisation - 10 houses, each standing for 10% of the UK housing stock (illustrated by Zhenia Vasiliev, animated by Rosie Roche). The visualisation stays in the same place and updates in the same way, individual houses being highlighted to show percentages, while around them the context changes - the text updates, extra bits of animation and scenery appear, constantly updating and decontextualising the visualisation.

Scene by scene

This is pretty much pure montage, cutting from sequence to sequence, all to illustrate the story the cartoon scientist is telling us. This animation, by Jamie Lenman again is also a really good example of how animation can character and emotion to a factual, information rich story. However, even simple character animation like this is incredibly hard and time consuming.

Examples of concepts

Some of the concepts in animation were quite hard to explain in print, so here are some further, moving, examples.

For a start, here’s some examples of easing in tweens.

Hang on. A what in a what?

A tween is filling in the movement between two key frames in an animation. In this case I have given all the circles the same beginning and end points, and the same number of frames in which to make the transition. I have then asked the computer to fill in those frames. However, I have applied a different easing to each tween.

The first circle has no easing at all - it travels the same distance in every frame, a even speed.

The second circle has in easing on its journey right, that means it starts slowly and then accelerates as it approaches its destination. It then has out easing on the journey back left. It starts quickly and then slows down to reach the end.

The third circle has both in & out easing on both legs of its trip. This means it starts slowly, speeds through the middle and slows down again to finish. Because it’s using exactly the same number of frames as the circle with no easing, this means that it pretty much jumps across the middle of the journey, it happens in only a frame or two, because it needs a lot fo frames to do the slow motion.

As I point out in the book, this has an effect on how we interpret the object moving. With easing comes a naturalness and also a drama of movement. This can frame how we read the data:

Both these charts are showing the same data, but in two different ways. Obviously there are fundamental differences in how the two charts, line & bubble, show data in the first place. The area of the bubble tends to hide small differences in the data that are obvious in the line chart.

But the manner of animation also changes how we think about the data. Both dramatise the development of the data over time, but while the line chart draws its own history, the bubble exist only in the moment, denying us any ability to compare the present with the past. Meanwhile the judders and bumps of the bubbles are far more dramatic and surprising than the careful drawing of the line.

All these things mean we can use animation to add drama and character to a dataset:

This animated chart uses a lot of those techniques on the list from the book, Disney animation: the Illusion of Life. The biggest feature is probably the use of squash and stretch in the bounces, where the ball elongates and squashes as it flies about, and the anticipation, drawing back before it zooms up or taking a little run up before it bounces.

All of these give even just a data dot character - its hard to not to read intention and emotion into its movements.