The Bullet Animation – Paths, Text and Gradients

If you’ve been following along, you’ll know that I started off this whole animation project with defining a bunch of scenes I wanted to render, converted some sketches into vectors and I figured out how to make stuff move.

By putting in a background and having layers for your characters, you could very easily knock up a South Park looking animation, or even a smooth transitioning storyboard, depending on what you’re after. If you’re after motion of parts of your characters, eyes, for example, or mouths, you’ll need to get into some of the finer points.

Animating Paths

The scenes for The Bullet did not call for a lot of motion, contrary to what the subject matter might suggest. As I was getting through it, though, I figured I wanted a bit more realism with my characters, the Worker and the Assassin especially. The eyes of the Worker were quite important since, if the Bullet went under his gaze and his eyes did not move, it would destroy Anim1the notion that the Bullet was being scrutinised.

Having already labeled the layers that held the eyes, it was easy enough to identify them. Had I known about canvases ( before I started this, I would have used this to make the eyes group on an independent time frame. Not to worry, got there in the end and the concept is still the same.

I started the eyes pointing off to right (viewing the previous bullet), swiveled them back sharply and had them smoothly roll in time with the viewpoint of the Bullet before snapping back again, ready to inspect the next bullet. I toyed with TCB and the Constant waypoints, but neither gave the impression of what might constitute real eye motion, while Linear seemed far too unnatural. Clamp turned out to be the best first for the task, although I think the flyback should have been a little faster. If I were to do it again, I’d consider some jerkiness and random motions of the eye. When a person is looking at something closely, the eye will make many microscopic adjustments as it scans the intricate details of the subject. Lesson learnt.

Anim2The worker was going to be smoking a cigarette originally, but, as one might imagine, cigarettes and gunpowder don’t mix. In the end, I pulled the stick out of his mouth. It didn’t belong and it detracted from the enormous, distorted eyeballs.

Speaking of eyeballs, the Assassin, coming in at the end of the rifle run, needed to have a bit more life to him. I wound up giving him a goatee beard, shaggier hair and sinister eyes.

His mouth starts off flat, almost grumpy, but it turns to a smile as he approaches. How? Select the mouth layer and simply move the mouth to where you want it to be at a certain time, and let the animation engine do the rest. Curling up the edges of the mouth, I found, was not a very effective way to bring life to a character. It was just too subtle and was lost in the motion of the whole head as it zoomed and rotated.

Anim4Upping the extent of the smile didn’t cut it. Exaggerating the mouth motion looked too, well, exaggerated. And, besides, the smile was for the Assassin, no one else, and needed to be almost imperceptible. Instead, I got him to blink.

Blinking involves the covering of an eyeball with the eyelid. Again, since I had labeled my layer previously, it was only a matter of finding it on the right hand layer panel, clicking the little red man to begin animating, grabbing the waypoints and closing them together, then opening them up again.

Anim5Now, a normal, natural blink is very fast indeed. A Step / Constant waypoint certainly looked like a blink, but, at only a single frame, the animation was just too flashy. Instead, I used a Clamp to animate in and out, but over only a few frame. The result is that the eyelid closes rapidly, but not so rapidly that it’s lost on the viewer.

If anything, it’s slow enough to give the Assassin the air of being cool, calm and calculating, which is exactly what I was after.


Without the use of thick lines to define my characters’ features, or any form of cross-hatching or shading, I had to rely on the slabs of colour of the regions. Not terrible. Not great. You don’t get a lot of depth out of it. Or mood. Or ambiance. This is where gradients can help.

Taking the worker scene, it looked far to bright and airy, not at all like the confused, claustrophobic world into which the Bullet was born. To bring the focus back onto the worker, and provide a narrowness of view, I used a radial gradient over the top of the worker group, running from transparent to a dark red on the edges.

Anim3The radius of this layer, like pretty much everything else, can be animated. This way, the field of view grows and shrinks as the Bullet travels along, obscuring the image. I did apply a fish-eye, or sphere distortion, which added to the confusion, but I pulled it: It was just becoming too confused.

To aid the idea that the Worker was near a furnace or a boiler, I applied a linear gradient, which I labeled ‘Heat Flare’ across his face to give it a rosy hue. I did something similar in the next scene, the Metamorphosis, to have the Bullet move from a hot red area to a cooler grey one, animating the endpoints and colours of the gradient as the scene progressed.


Lastly, I had to decide between voice-overs or text. I have a microphone on my webcam, and another that I can plug in the back of the box. Neither, I discovered, were suitable for recording clean, crisp voice. In fact, I think I’ll have to get onto the whole sound portion of this clip in another post. In any case, I decided upon text to display contextual snippets.

To do this, simply add in a Text Layer. Type in the text as the ‘value’ and, Presto! You have words. I imagine one might want to animate words in or out, or type one letter at a time, but I went for a simple fade in / fade out option.

Changing the font is a tricky matter, though. You need to know the name of the font that you’re after. I opened up Open Office and scrolled through the fonts I was after, but the Windows Font Viewer will do the job. Put the name, verbatim, into the font family field and that’ll do the trick.

Because fonts behave like vectors, they’ll scale and rotate very nicely without all the pixelation.

Can you add a gradient to your text? Of course! Can you use your text to define the alpha channel of an underlying layer? Definitely (and how cool would that look?). The only real issue I found with text is that the rendering gets a bit jumpy if you try to animate the size. Maybe non-integer values aren’t suitable for the rendering engine, but I’d only be guessing. Everything else is fair game.

But an animation isn’t all just visual. In my next updates I’ll go over the music and sound.

The Bullet Animation – Animating

The last post yammered on about how cool Synfig is. For a dude like me who hasn’t the training, the cash or the patience for the professional stuff, it does the job admirably and there’s a whack of stuff in there that I haven’t even had the chance to look at yet.

Enough already!

Alright, alright, I’m getting to it. With my vector images ready to go and a little practice under my belt, I was ready to try and get a scene in motion. I started by importing the svg into Synfig. Go to File > Import and select your file (you can use this to bring in jpg and png images as well). This will make a group layer that contains a bunch of other layers, one for each layer in the original file, and inside each of those is a layer for each path.


If you’ve labeled your layers in Inkscape, they won’t have these labels when imported into Synfig. No worries, just spend a minute to select and re-label those layers – a stitch in time and all of that.

Now, one issue I did come across was that regions that had bits that had been subtracted (I’m talking annuli, doughnuts, holes, cutouts) still had the paths present, but they hadn’t been subtracted, like you can see in the image on the left.

The Worker’s glass and head brace naturally wanted to allow him to be able to see the Bullet as it goes past. Only thing is, the import left the cutout as the same colour and composition style as the rest of the headgear, so I ended up with a blast shield over the lenses.


One workaround for this, I found, was to select the layer that was to be the cutout, and set its composition to subtract the alpha from the underlying region. This will mimic the hole punch effect of one region upon another.

To add a little bit of depth, I also took the opportunity to add in a ‘lens’ layer, merely a circle that colourised everything beneath it, so as to give the skin and eyes an unnatural, soft, blue hue.

So there’s a little bit of tidying up that needs to be done when bringing in your SVGs, but it’s not a killer and it also gives you a chance to get everything prepped, and also, more importantly perhaps, the incentive to fiddle around with the settings to see what flies.

Animate it !

Synfig lets you animate properties of your layers, and these can be done by adding waypoints for these properties. The various styles of your waypoints affect how the engine calculates the resulting points in between your waypoints. Each of these can have a different style for in and out. For example, you can use a ‘Linear’ waypoint (the yellow one) to linearly transition from one state to another. Alternatively, you can choose for a more flowing ‘Clamped’ to give a smoother lead in or out. There’s also TCB which is pretty cool but hard to control.

Synfig5There’s also the step or constant which you can use to instantly transition a state, which comes in handy when you want to make something, say, disappear or reappearĀ or change from one colour to another in the blink of an eye. The best way to figure these out is to muck around with them and get a feel for how they behave.

One of my scenes that I decided upon was to have my characters zooming in from the sides, scaling from little to really big, and fading in from invisible to visible and invisible again. I’ll pick on the Foreman to give you an example. I’ve taken a shot just a frame or two after my first waypoint so you can get a feel for where he starts off: Top left, barely visible and tiny.

With the little man set to green, I prime my layer to be where I want it to be at the start.

Synfig6Then, I click on the green man to turn him red. This means I’m in ‘animating’ mode, and I can create waypoints. Moving the timeline forward to an applicable spot, I can drag the balls on the graphical layer to position it where I want it to be at this time. This will create a waypoint for the position.

You can see these waypoints in the bottom panel. Each will have a graphic for the ‘in’ portion and one for the ‘out’. So you can, for example, linearly transition something in, then apply a constant on the out.

To change a waypoint, you can drag it left or right to set the frame, or right click to alter the type of in/out/both, or duplicate it, remove it, etc. Notice, too, that the waypoints are inline with the properties that they are animating. In the example there, the Amount (think opacity) is animated with clamped points from 0.0 to 1.0 and back down to 0.0 again to fade in and fade out. The Transformation (position, scale, rotation) can have a completely separate set of waypoints to follow.

Synfig7To resize or rotate or move the layer, you can just grab the little balls on the screen, or if you want precise control, you can set the numeric value directly in the property – value window on the bottom left. This is handy if you want to perform precise motion, like the rotation of gears or the path of a conveyor belt.

This is how I got the bulk of my animation covered, but there are still some facets that I’d like to cover, namely animating paths or object within other objects, as independent entities.

Say what? Just bear with me, it’ll make sense in the next post.