Animating countryball flags: UK, USA and other tricky flags

Two rules for every flag

• Build flags from layers, not one flat drawing. Each element (field, stripes, cross, emblem) gets its own shape or layer, stacked in the order the real flag is constructed. Mistakes are then easy to fix, and parts can move independently.
• Draw the flag larger than the ball and mask it. The flag sits inside a masked group with the body shape as the mask, as described in how to draw a countryball. You can then slide the flag inside the ball without it ever spilling out.

The United Kingdom

The Union Jack combines three crosses: St George's red cross for England, St Andrew's white diagonal cross for Scotland and St Patrick's red diagonal cross for Ireland. Build it in that historical order of layers, from the back:

1. 1

   Step 1: Blue field and white diagonals

   Fill a rectangle with dark blue, then draw two thick white diagonal bars from corner to corner. These are the saltire of St Andrew.

2. 2

   Step 2: Red diagonals, offset

   Draw thinner red diagonals on top. This is the part almost everyone gets wrong: the red diagonals are not centred on the white ones. They're shifted so that, going clockwise around the flag, the red sits on one side of the white in each arm. Look closely at a reference image before drawing. Getting this right is what makes a UK ball look correct to British viewers.

3. 3

   Step 3: White cross, then red cross

   Add a wide white upright cross through the centre, then a narrower red cross on top of it, leaving a white border on each side. Keep the edges perfectly straight; snap to a grid if your program has one.

The United States

The US flag has thirteen horizontal stripes, seven red and six white, starting and ending with red, plus a blue canton in the top hoist corner that covers the top seven stripes. The canton holds fifty white stars in alternating rows of six and five.

4. 4

   Step 4: Stripes first

   Draw a white rectangle and lay seven equal red stripes on it, leaving white gaps of the same height. Use the ball's height, not the rectangle's, to size them, so the stripes look even inside the round body.

5. 5

   Step 5: Canton and stars

   Add the blue canton in the top-left corner. On a small countryball, fifty tiny stars turn into grey fuzz, so many artists simplify them into a regular grid of white dots or small stars. Whatever you choose, draw one star, duplicate it, and space the copies evenly with alignment tools. Never draw fifty stars by hand.

Vertical tricolours and complex emblems

Flags with vertical stripes, like France, Italy, Ireland or Belgium, are easy to draw but show every turn of the ball. When a ball looks to the side, slide the whole flag a little in that direction inside the mask, along with the eyes. The stripes shift and the ball suddenly feels round instead of flat.

Emblems and coats of arms, as on the flags of Mexico, Spain or Portugal, need simplifying. Trace a simplified version of the emblem as a vector once, make it a reusable symbol, and use it on every ball, map and banner for that country. Keep the outline and colours of the emblem, and drop small text and fine detail that won't be visible.

Animating flags

• Turning. Shift the flag inside the mask a few pixels in the direction the ball looks, in sync with the eyes.
• Changing flags. For a revolution or a new state, wipe the new flag in with an animated mask, or squash the ball and swap the flag on the frame where it's most squashed. The squash hides the swap.
• Flags on poles. Rig the flag with a chain of bones, or a wave deformer if your program has one, and offset the timing of each bone slightly so the wave travels along the cloth.

Practice exercise