Presenting – Grosvenor Lane Ghost

Wow! I’m bushed.

I thoroughly gave a Synfig, Audacity, Anvil Studio, Gimp, Corel and good ol’ Microsoft Movie Maker a workout.

I haven’t got a lot to say except that the promotional animation for Grosvenor Lane Ghost is now up on You Tube and Daily Motion (hehehe… Daily Motion. You know, like, one’s daily constitutional?) and any other place that I can find.

Please share, enjoy and criticise. Don’t worry, I won’t be listening, I’ll be sleeping. Right now it’s a warm Milo and off to bed.Mini Jeztyr Logo

The Front Porch at Grosvenor Lane

With the backdrops pretty much ready to go, with the exception of the fireplace, which needs some serious shadows, I’ve been looking at the animation side of things.

Nothing gets stuff done like getting stuff started, eh?

Synfig

Opening up Synfig, I set the dimensions to 1280 x 720, which gives a 16 : 9 ratio, ready to go.

Synfig-properties.png

Now, the scenes are to be slow and progressive so, unlike Adaptation which was more a collection of conceptual shots, I’ll be looking for a lengthy time span of about ten seconds. At a frame rate of 30 fps, that’s, uh, wait, let me get my calculator out… carry the 1… 300 frames.

Synfig-properties-time

Hit the OK button and get ready to rumble.

I start by adding a flat colour for the background. Black is good, considering the number of shadows. Why do I need a background if I’ve got a backdrop? If any part of the backdrop image happens to be transparent, or if I use a layer over the top which modifies the alpha of the backdrop, I don’t want to make sure it doesn’t use white or something to compensate.

Anyway, with that in place, I add the backdrop of the door frame (taken from the actual cover. Yes, it’s grainy. Yes, it’s dark. That’s ok. The scene is at night, and it’s going to be a bit further away than our Professor, anyway. The door, however, is sharp. This is where the Professor will be spending some time opening up the lock.

So I insert the door and, presto, I’ve got a front porch!

FrontPorchInitial.PNG

Props

Now I want to be able to move things about. I want the Professor to walk from the right, over to the door while chatting to the protagonist, unlock the door and open it. And for extra focus and ‘night time’ness, I want there to be some evidence of a lantern.

ProfessorBody
The Professor’s Torso

 

 

ProfessorArm
The Professor’s Arm

I’ve broken up the Professor into two main parts: his arm, which will move about to give an impression that he’s not just a cardboard cutout, and his torso. Both the arm and torso will belong to a group so that, as the Professor ‘walks’, the arms and torso bob at the same rate.

FrontPorchWithProfessor.PNG

I’ve added the ‘lantern’ to the Professor group, so that it, too, moves along with the body. It’s really just a shroud, a radial gradient of zero-alpha to full, with a heavy offset, such that everything outside of the lantern’s influence is dark.

You’ll note, on the time line there, the bunch of green dots. This is the motion of the Professor, stepping and bobbing along. The green is Synfig’s TCB waypoint inference. It gives a looser waypoint than clamped or ease. If I set them all to linear or clamped, the Professor would be marching like a soldier. As it is, his gait is more natural.

All that’s left to do now it animate the door opening, add in a warm ‘lantern’ glow to the radial gradient and shade the door more as it opens to give an impression of darkness and depth.

Sound

There are three key sounds in this scene:

  1. The Professor nattering to the Protagonist about it being dry on the porch.
  2. The key turning and the door opening.
  3. The ambient rain, a crucial element of the story.

Getting the key and lock sound was fairly simple. I went out the back to the gate and practiced with the slide bolt. A few trial runs and I recorded it on my phone, picked the best sounding one and cleaned it up in Audacity. More on the cleaning-up bit later.

The voice was more difficult. Where, oh, where does one find a Victorian Professor in the middle of outer Melbourne suburbia? I tried a few online services, but I couldn’t get the voice actor I was after. The ‘British’ was either too uppety, too young, too old or, in most cases, too damned expensive. I’m working on a shoe-string, here.

Fiverr looked promising. There are a lot of voice over artists who are willing to lend their talents. Checking through the various videos and samples, though, it seems it’s mostly geared toward reading scripts for advertisements. Not what I’m after.

In the end, I put on my best ‘old-but-not-too-old’ British accent, practiced again and again and again. And again. Then recorded myself. Yeah. That’s what I did. I hope it sounds right. You know when you hear your voice on tape and you think, “Heck, is that me?”

Lastly, the rain. I haven’t got that sound clip yet. I’m expecting it to rain here in Fawkner tomorrow, and I’ve got a nice corrugated iron cantilever out the side that should sound awesome.

Anyway, back to Synfig: I tried adding these sounds as ‘sound layers’. That is, one adds a layer of type ‘sound’, points the sound file to the .wav or .mp3 and then set the offset.

Synfig-sound-layer.PNG

This seemed the perfect way to add sound to the clip apart from two things.

Firstly, it didn’t always play. Every so often, when re-running the clip, I’d have to select the layer to give it a poke, and the sound would then play. OK, no biggy. So long as it exports…

It didn’t export. No matter what format I exported it as, the sound didn’t come through in the final file. I vaguely remember having this issue with The Bullet. My solution there was to add the sound when assembling the final video. I guess I’ll have to do the same thing here.

More on the sound and Audacity in the next post.Mini Jeztyr Logo

Export, Upload and Done

The Adaptation – Part 1 animation is now up on YouTube!

dance excited minions celebrate

A few of the posts regarding the scenes and whatnot didn’t make it, pardon my user error. They’re there, they just haven’t been ‘published’, most notably the ‘thermal’ imagery of Lucas’ sniper scope and the crabman at the firestation.

Anyway, that’s a minor thing. Right now I’m winding down after doing the rendering and re-rendering and tweaking and syncing and, yeah, I’m spent.

Without further ado (or animated gifs of minons):

Enjoy!Mini Jeztyr Logo

 

Let’s Animate… something.

I’ve spent some time on the music. I’ll need to spend some more time on it, of course, but I’ve had my fun and I should get back to the animations and whatnot.

Looking at my plan, I’ve made a few of the assets that I wanted, like Miss Penelope and the assault at the Sanitation Facility, I’ve got a basic tune to put it to, so, really, there’s no excuse to open up Synfig and start poking about.

Scenes

With The Bullet animation, the scenes were mostly long running, which fit the slow pace of the book and music alright, but Adaptation is more action and adventure (mixed with some metaphysical introspection) so it wants shorter, dramatic shots.

Shorter shots, means a shorter run time which, in turn, means more shots per minute. Considering I’ve got the music, and the whole animation, to run for a minute, I’m going to need to up my asset count by… more than what I’ve got.

Still, the good news is that I can actually compose clips and shove them together to see what I’ve got and get a feel for where I’m going.

Composition in Synfig

I did The Bullet in Synfig Studio, I’ve gotten comfortable with it, so it makes sense to continue on with it.

All of my drawings are two dimensional, with shading and hashing to give an impression of depth, but that’s not all I can do to help. Backgrounds and foregrounds, for example, don’t have to be ‘in focus’. To give an impression of depth of field, I can use Synfig’s blurring layer over backgrounds or I can also simply blur them in Gimp, saving on rendering time in Synfig.

Crabman, an important element, gets a look-in, as will Henry and Lucas.

Now I’ve opted not to make Vectors this time, instead I’m aiming for a more ‘paper cutout’ look, with sketching, hashing, colouring and heavy light / shade. Because of this, I won’t have an opportunity to use the bones feature of Synfig Studio, but that’s OK because it wouldn’t fit the style, anyway, and I want to save that for Grosvenor Lane Ghost.

Edit: This post was supposed to be posted about a week ago. Don’t know what went wrong, guessing this fuzzy headed dude didn’t click the ‘publish’ button.Mini Jeztyr Logo

Animation for Adaptation

November? Is it really November? Yes, it is. That means it’s almost Christmas, and that means that the Software Development Cycle is preparing for end of year, and THAT means a bit of a scramble to get the bleeders tied off before we hibernate for the New Year’s break.

So… what does that all mean?

What it all means

Like exercise, if you only ever train your biceps, you’ll wind up with sore biceps and flabby everything else. A change of pace is a prime opportunity to have a change of creative outlet, so I am, once again, putting the writing on hold (well, a slow down. A couple of a pages a day, max) to work on some other pursuits.

Since The Bullet got some love with its own animation, I’ve been meaning to take the lessons learnt and apply to them to another animation. Atlas, Broken would be too hard, and while Grosvenor Lane would do well with dark silhouettes and spooky music (I’m counter-convincing myself now… damn), Adaptation needs to get some attention.

Why an animation? Books don’t get read unless you can attract a pair of eyes to look at them. I’ve said it once and I’ll say it again, as an indie author, you are responsible for getting your book seen. How you do that is up to you (just maintain your integrity. And your dignity while you’re at it.), and an online animation is just one way.

The Kit

So I’ve gotten myself kitted out with my tools once more:

  1. A pencil and paper for sketches and planning
  2. Gimp to handle importing and cleaning my sketches up
  3. Inkscape for converting things to Vector graphics
  4. Synfig to animate the whole show
  5. Anvil Studio to create a Midi Track
  6. Virtual MidiSynth and Soundfonts to give richer sound
  7. Audacity for any vocals, sound effects, etc.
  8. Window Movie Maker to plop the bits together and convert the final product to be presented on YouTube

With more of a physical, as opposed to a metaphysical story, to work with, the animation called for more ‘scenes’. My first thought was to make everything from the point of view of Ottavio or Ryan, but then I thought, no, the book isn’t about them, it’s about the world that they are in.

So I scrapped that idea and took a different approach: The promotional video is there not to tell the story, rather it tells the viewer about the story. It’s a front cover on steroids. Its a blurb that gets shown. It’s a chance to see the bits of the book that lets the reader know that the book is right for them.

The Plan

And so I looked at my options: I could play out a pivotal scene from the book. That sounded good, until I realised that no particular scene defines the intention of the book. Sure, it’d be easier given that I’d only have to make one set of drawings or scenes, but I’m not after easy, here, I’m after something I can look at and think, “Yeah. Happy with that.”

I then thought, “Why not a voice-over reading out the blurb”. No. No. No. I mean, that’s fine, soundwise, but a video wants some video. And it would be akin to a powerpoint presentation where the presenter reads out the dot points that the viewer can read for themselves. No.

So then I thought about movies, video games and television shows, and how they tended to present their entertainment: Snippets. Stills. Short clips of stuff. It gives a general feel of what it’s about, a couple of poignant comments or quotes, but it doesn’t hit the user over the head with information.

And that’s where I’m headed. Over the next few weeks I’ll be posting about the creative process, and I’ll share some of the drawings and music as I’m going along. The last post on animation was done retrospectively, whereas this will be a ‘work in progress’ one.Mini Jeztyr Logo

The Bullet Animation – All Together Now

Let me go back to where these updated began: As an independent author, it is up to me to organise any form of marketing or promoting of my books. To this end, I embarked on an adventure – Yes, I’ll go as far as to call it an adventure – to create an animation about The Bullet. Let’s see how this came together.

The Pieces of the Puzzle

Hindsight is a wonderful thing. Here is a rough chronological list of my tasks:

  1. I considered what I was after. I made a plan, sketched out my ideas into scenes, refined these down to what was I considered was doable, selecting five main sections.
  2. I researched software that was available for sketching, vector drawing and animations and downloaded Inkscape for creating the vector graphics, Synfig for animation and Gimp for image manipulation.
  3. I sketched out my characters faces and brought these into a digital format, converting them to vector graphics.
  4. Using Synfig, I created my scenes, one by one, according to my original design.
  5. I recorded a bunch of sounds on my phone, uploaded these to the machine and edited the soundwaves with Audacity, and hunted down a gunshot for the climax.
  6. With the aid of Anvil, I wrote the musical track.
  7. I used VirtualMIDISynth and the “Fluid GM” Midi Soundfont to get a richer sound
  8. I exported the music from Anvil and blended this as a separate track together with the sound effects in Audacity.
  9. I rendered the animation from Synfig to a movie file.
  10. Lastly, using Microsoft’s Movie Maker, I added the audio to the video and exported the whole shebam to a YouTube ready file and uploaded it.

The end result is a one minute and twenty second clip that I’m pretty chuffed with:

Sure, it’s not refined, it’s not going to win any medals. If I get to do it again, if I ever have time, there will be several things I’d concentrate on.

Post-Mortem

In the programming world, we use retrospectives or post-mortems to see what went wrong, what went right and what can be done better. Forgive me if I cannot resist giving the animation the same treatment.

The first issue that jumps at me is the lack of sophisticated motion. It was suitable for what it needed to be, and that’s fine, but as I think about how I might create other animations, I figure there will be more ‘going on’. Background motion, moving lips with synchronised speech, blinking eyes, torsos turning, limbs flailing. While too much can be distracting, too little can be boring.

The music I enjoyed. A lot. Creating it piece by piece, getting the soundfonts, discovering reverb and chorus (albeit too late to apply it) and adding tracks as layers was just fun. Pure and simple. I reckon I could lose hours just knocking out tunes and mucking about with rhythms.

Then comes the sound. That was a headache. It was the opposite of fun. It doesn’t matter how I look at it, it just didn’t sound ‘right’. I guess I just don’t have the skillset or the proper equipment for sound engineering, so I’d probably ask for help, or try and find someone to hire.

Likewise with voice-overs. I think a voice-over would have been great. Again, lousy recording equipment and an even lousier voice let me down, to the point where I omitted the voice-over altogether. For this I’d definitely hire someone with a voice appropriate for the context.

Lastly, I think the sketching and vectorising the characters worked out just fine, only I’d spend more time getting details and layers so as to add more dimension to them. And I’d really like to try the ‘bones’ feature out in Synfig and get some complex motion happening. Oh, for another lifetime!

In any case, I’ll call it a wrap. I’ve got to get back to writing, so I bid a fond farewell to the Land of Animation – for now. I’ve got my little bag of tricks for next time, and I hope to share with you my next foray when I get a bit of breathing space between titles.

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 (http://wiki.synfig.org/wiki/Canvas) 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.

Gradients

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.

Text

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.

Synfig4

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.

Synfig3

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.

The Bullet Animation – Synfig

In my previous post, I showed you how I turned my sketches into vector graphics, ripe for insertion into Synfig.

When I first opened Synfig Studio, I didn’t know where to start. There were panels and boxes and buttons and, yeah, no idea. I went online and looked up a tutorial on getting started. It covers the basics and a few gotchas, so it’s worthwhile sitting back and absorbing the info, even if it’s just to get the general idea of it all. Don’t skip any bits, even if it seems obvious, because you might miss out on an important detail.

Like what?

Synfig1For example, you’ll notice that there is a little green man in the bottom right of the main panel which, when clicked, turns red. It also highlights the main panel in a thick, red border to reinforce the message. This defines the static versus dynamic state, and is fundamental when animating waypoints and keyframes.

It’s mentioned in the tutorial, so I won’t go over it here, but know that if something ain’t working for you, check to make sure what mode you’re in. Once I figured out what that was all about, one of many Aha! moments, things became a whole lot easier.

The next thing to know is that Synfig works a lot with Layers. You can group layers together with a Group Layer (fancy that), and you can specify the height of one layer with respect to another. For example, if you wanted to create a layer that held your character and give it a speech bubble, you could add a Layer to hold the character and all of its paths, and a Layer to hold the speech bubble with the text in a layer above that.

But Synfig has more cool features than just that. It can also provide Blurs, radial and motion and Gaussian, to give a sense of movement or depth of field. Just add in the layer above the layers you wish to blur, adjust the amount, and you’re ready to rock.

Animating Properties, not Pixels

A groovy thing that took me a good while to get me head around was the ability to animate the various properties of a layer over time. My original concept was that I would need to move things about manually, doing it all frame by frame like claymation. Not so. In fact, a lot of the hard work is removed once one figures out how to use waypoints to define the path of a property.

For example, you could change the starting angle of a conical gradient layer in a smooth sweep by setting waypoints, and letting the Synfig engine do the math to smoothly map between the points on a frame by frame basis, which is called tweening. In fact, almost any property of a layer that is numeric can be gracefully animated, including the starting and ending colour of a gradient, or the rotation or scale of a set of points, even the opacity!

Not only this, you can also set the Blend Method for your layers, allowing you to apply the layer as a screen to the underlying layers, or add/subtract/multiply/divide, or burn or dodge or colourise.

One of the features you might be interested in before you get started is that many of the value Types can be converted. For example, you can change from a real to a random or an integer, or change a vector to a radial composite. Oh yay, maths again. It’s kind of inescapable, but it does allow you to do some very interesting things, especially when you tie one variable to another variable. If you are interested, go and have a look at some of the examples posted by Synfig gurus.

So why did I go to all the trouble of converting my Synfig2 sketches to vector graphics? Because Synfig plays very nicely with vectors and paths, allowing you to animate any of the path features easily. I’ll get into how I imported my characters in the next post.

There are a few features that I wish I’d learnt about before I finished up, as one might expect. These include the use of bones to aid complex motion, onion skins and Time Loop layers. There is even the option to have multiple canvases with independent animation within a project, which, I reckon, would be way cool for things like lip-synching, twitches, eye movements, gestures, etc. If I’m ever given enough time to make another animation again, I’m going to be looking very carefully at these features.

Lastly, you don’t have to work only with vector graphics. You can import pngs and jpgs to help give you backgrounds and al of that, and they play nicely with the whole layering concept. There’s even the ability to add a sound layer so you can insert noises or music over the top of your animation! What more do you need? (Professional animators, please don’t answer that).

What can you take away from all of this? With Synfig studio under your control, the world is your oyster.

In my next posts, I’ll show you how I composed a scene, including where I think I went wrong, where I know I went wrong, and where I could do it better.

The Bullet Animation – Vector Graphics

In my previous post, I showed you how I sketched up my characters to bring them into a digital format.

The problem is that they were still unsuited for animation in Synfig. I had to convert them from raster images into vectors. But how? Enter Inkscape stage left (inkscape.org). I had downloaded this on a previous occasion, toyed around with it and put it away because I had more pressing, important issues to attend to. Work is like that. Anyway, I’m happy I revisited it because it’s the bee’s knees. It can convert bitmap images into regions for you, it can apply paths in layers, it can fill with gradients and stroke with different styles, and you can even muck about with opacity and geometric shapes and…

Awesome, so…

So, I inserted the image into Inkscape as a layer, with the result as shown. Yeah, it looks scrappy, but it does get better. Working over the lines into paths, I traced over the top of the lines. Then I noticed that Inkscape has a layering facility. A bright idea struck me (I still have the mark) and I worked at breaking up the image into logical parts.

AssassinVector1After a couple of faces, I got into a pattern of figuring out all the different layers and regions of the eventual picture and added each of these as a separate layer. So, in the example of the Assassin here, there’s the hat, the glasses and his coat, along with the scarf. Furthermore, he has skin and hair and, on the skin, he will have skin in shadow and skin in light (Think old school, silver salt photography).AssassinVector2

The skin will appear underneath the hair and the hair underneath the hat. Get the idea?

With each of these as layers, it was then only a matter of sketching out the relevant outlines over the top of the picture to create paths. These can then be drawn and/or filled however you wish. To make life easier, I set the opacity of each layer as 50% so I could still continue to use to the underlying sketch as a guide.

I recently discovered that I could achieve the same thing if I locked the sketch layer, placed it at the top, and set the opacity of that layer to 30%. Eh, Pot-ay-to, Pot-ah-to. Got there in the end.

I chose not to have an outline on the regions, preferring instead to let the colours do the work of definition. I like line art, but after a bit of experimentation having lines on and off and with different thicknesses, I opted to go for fill only.

Darn it, now that I look at that partially coloured sketch, I kind of like the scruffy black-lines and washed up colours. Kind of like water colours. Storing that one in the back of my head for next time.

AssassinVector3Continuing on, filling in layer by layer, I ended up with the images that I could then use within Synfig. I reckon I could’ve spent longer but I had time limits imposed on my venture. After all, I’m supposed to be writing Hampton Court Ghost.

These images can be exported as .svg files, and can be used as scalable vectors in a bunch of programs. InkScape has a bundle of really cool features that I haven’t had a chance to play with yet. I was going to get all fancy with some of the plugins I did get to play with (there are some really cool plugins!) only when I tried to import the resulting svg file into Synfig, there were some issues. For example, importing regions that had bits knocked out them, like doughnuts, came in as filled.

I’m not overly sure, yet I think there’s a slight disparity in Synfig when importing SVG files in the current iteration, but it’s not a show stopper. I’ll get onto the topic of importing into Synfig in a later post.

Neat, huh?

ForemanVector1There you have it. I repeated the process for my various characters,  even for the Tester (who didn’t make it into the reel) and ended up with the pieces that I needed, ready to go. This really was a neat way to get my faces ready for animation:

Oh, whoops! I made the Foreman’s hair too dark. That’s OK, just select the hair and change the fill, adjust the hue, the lightness, the saturation.

Drat! I made him too small! Not a problem, being a vector, it’ll scale up or down without any loss in quality.

Blast! I needed a larger chin, the hat’s too short, the eyes are all wrong, I want scruffier hair. All good, just grab the path tool and add, remove or tweak the points until you’ve got it the way you want it.

That’s one of the beautiful things about this: You can add more layers to add more detail, add more points to define a better edge or, conversely, remove points and layers to simplify and posterise. I got into a rhythm of defining small paths, using the union option to join the regions together, then simplifying the path to get to a more cartoon-like style.

Creating the slug and the shell of the Bullet was the easiest of the lot. Being geometric in nature, Inkscape’s path tools made short work of it. I added another layer for the casing, and created a couple of ‘shines’ but left the gradients to be added after I imported it into Synfig Studio.

In my next few posts I’ll go through how I approached animating the scenes, you know, the ones I did way back then, and some of the problems I came across.