Matchmove fun

I’m still studying at Animation Mentor, this term I’m taking the Creature Animation: Fight or Flight class.

This is a great class. Fantastic opportunity to study a range of animals and learn some different body mechanics! I’ve learned things about birds, bats, hippos, frogs, crocodiles, turtles, frogs, snakes, lizards and frogs that are amazing. Those are stories for another day.

One interesting technical aspect to this class is animating within a live action “plate”. This is a quick post to describe what that’s like.

Matchmove scene

A nice coastline vista (I think it’s Hawaii, not sure).

The live footage is setup as an image plane in Maya and renders in the shot_cam.

How do you place a character in the scene and have them look like they belong there? That’s the matchmove magic.

Matchmove was already setup, so when I opened the maya scene this is what I saw. A set of geo matching the cliffs, and a moving camera.

The camera is timed to match the live footage camera. I think lots of points on the image plane are selected across several frames, then some fancy algorithms and maths figure out how the camera must have moved. I’m sure there’s a lot of work making that just right — “Matchmove Artist” is a job, check the credits on any film with epic special effects!

This playblast shows a better view of what’s happening with the camera and image plane. Note: the image plane flickered when I made this playblast. I’ve never had that issue from the shot_cam though.

Put a creature in the shot

Since everything is setup like this, we can put our creature (Dozer) in the set and animate like normal. Here is my initial concept, as seen in Maya with the geo and camera from the perspective camera.

And here’s what that looks like from the shot_cam.

It works. But the solid geo is nowhere near the quality of the live action footage!

Here’s what it looks like if we turn off the geo. We can see the image frame nicely, but now Dozer looks pasted on top of everything.

We want him to be in the scene, and so we want parts of the image frame to show up in the foreground. The solution is to mask out the geo. Everywhere the geo is, we want to see the background. Maya knows where Dozer is in relation to the geo, so it will handle the depth for us.

This type of masking in Maya is done with a “use background” material.

How to setup the mask

Screenshot showing how set "use background" in Maya

  1. Select the geo
  2. Right-click and choose “Assign New Material…”
  3. In the hypershade window that pops up, choose “Use Background”

That’s it. When you playblast now, you should see your image plane where the geo is. If other objects are behind the geo, then they are masked and you see the image plane. When they are in front of the geo, then you see them in front of the image plane like normal.

Practising bass (2016 version)

Yes it is the annual day for recording bass! I try to play once every week (or more—sometimes less) for fun. Once in a while it’s good to listen back and see how my playing has changed.

Here’s my attempts at playing Hey Ya! which was one of the first songs I learned. I’ve worked on the tab a couple of times so it’s easier and more fun now. I think it’s getting more consistent, though I still make mistakes 🙂

Here’s a random set of other songs I played:

There’s a couple in there that can be compared to previous years too!

Fragile Bird

My first bass tutor had me play this in my first lesson. It blew my mind trying to play on off-beats. I’m not sure why but there was a habit there that had to be unlearned first. Good exercise!

Sweet Virginia

I think we played this once in a jam after work. Quite peaceful to play on the bass, and it’s a lot of fun varying the rhythm during the sax solo!

Making of shot-2290 (Circus Jam)

Animation Mentor is a great school. Last year, in addition to the awesome classes, they ran an anim jam—a chance for students and alumni to animate on a theme and have the results published with all the polish of a professional short. Check out the result!

A chance to collaborate

I missed out on taking a collaborative class so it was exciting to hear the anim jam announcement. We were told about the jam concept and that there would be three sets based around a circus theme. The first set opened and was filled quickly—so quickly I was asleep and missed it completely!! The second set went live at a different time of day (yes, Animation Mentor care about timezones and their international community!) so I signed up for shot 2290. What was shot 2290? That was up to me.

Shot ideas

At AM (Animation Mentor) we are encouraged to think about storytelling. I enjoy coming up with ideas for shots. For inspiration, we had the set design, a set of props and character skins—with a medieval flavour.

A stage with circus tents in the background, a stage door, trampolines and trapezes. Top left: Stella in medieval mackup. Top right: Stan, a knight in black armour. Bottom right: cartoony muscians. Bottom left: sketch of Stella, Stan and a fair-haired knight.
Anim Jam medieval circus set and characters

I jotted down these ideas:

  • prince saving the princess from the knight
  • princess saving the knight from the prince
  • mock fight
  • use the cannon with the imps
  • juggling
  • clowning: Stella baps Stewart with the juggling pin
  • Stella catches Stan and carries him off
  • he was afraid of heights on the trapeze
  • she saved him from Stan
  • imps playing music

Got to say, there were some awesome props that were never seen in the final cut, including the trampolines shown above and a super amazing vintage fire engine!

Choosing an idea

I decided to focus on the idea of a fight between the 2 knights: Stewart vs Stan. I also thought it would be funny to stuff Stan, the biggest character, into the cannon. I’m not sure how Stan felt about this, especially after we did a test pose…

A large man standing in an upright cannon. His upper body does not fit and his arms are spread in mute appeal.
Stan stuffed in the cannon on Circus Jam

Still, I liked the idea and so I jotted down a rough plot:

  1. both enter
  2. glare at each other
  3. march to sides of set (one at a time or together?)
  4. Stewart turns and slams his shield into position
  5. Stan jumps into cannon
  6. Stewart surprised, then braces
  7. Stan levers cannon down to aim at Stewart
  8. Stan strikes sword along ground and lights cannon fuse
  9. Stan aims sword at Stewart
  10. BOOM (shockwave through set)
  11. Stan flies across into Stewart and both are bowled out of the set.

The pitch

I made a quick animatic and shot some video reference to share the idea with the rest of the set 2 crew.

Got a thumbs up (that was pretty much the greenlighting process) and a suggestion that I team up with others to share the workload.

Collaboration and story evolution

I asked for help and Clarissa Amiata volunteered. We tossed some ideas around she agreed to tackle the second half, and suggested having Stan shoot some monster balls for Stewart to dodge (which, as you can see in the final cut, turned out awesome).

Animation: video reference

I shot some initial reference and added to it as needed later on. I especially needed new reference for a jump hookup (added later) and waving the sword around—the cardboard tube in my initial reference was too light. Cricket bat helped!

Animation: Blocking

My first blocking passes tackled layout, the walk and turn. I was going for a riff on “pistols at noon” Western thang, so the walk was pretty key. Plus, walk mechanics always need attention, might as well start them early.

By the final blocking pass, Stewart’s entrance had been replaced with a jump (I forget why. I think it was feedback I received to add more variety.) and I added some craziness with monster ball making faces.

I started blocking on 18 August and finished on 8 September, to give you a rough idea of timeframes. This was all done in my spare time whilst working a regular day job.

Animation: spline cleanup and polish

Not too much to say about spline cleanup, just got to get everything moving then make it appealing (and mechanically sound). Blocking sets a lot of the timing but you do get to tweak the rhythm of all the moves. Here’s my first and last pass:

I worked on cleanup from 8 September through to 19 September, and then started polishing. At this point I thought that polish was like cleanup—just keep improving things a bit each pass. I’ve come to learn that’s not a good approach to polish—you should bite off a chunk (say 100 frames) and polish it! That means, make it awesome and make it final! (I learned this later in my AN05 class—thanks Ethan Hurd! I still need to practice it!)

Direction—the cut

On 30 September we got some key direction. Our Director (Bobby Beck) had worked out a story cut from all the available shots. Luckily my shot made the cut, mostly  because it tied in with other shots story-wise. It also helped that I had been making steady progress. This story cut was the first time we saw the entire “set 2” as one sequence and it was very cool to take that in.

Along with this cut came notes: my shot was shortened to make the story stronger—a welcome change that reduced my workload!—and had a new hookup at the start with Patricia Milton’s shot of Pinky in a hula hoop (I love that shot!). I’d never tackled hookups before and our first attempt was amusing! It’s hard for 2 people to animate half a jump and have it work correctly!

Everyone worked through their polish and hookups and the results speak for themselves.

Here’s where my animation ended:

My shot received additional fix/polish animation from Aaron Johnston and Bobby Beck, with awesome results. I especially love the overlap added to Stan’s body as he pulls out monster ball.


We got to see the updates as the lighters went through the shots and made them look amazing. This was a new experience for me—every day or two there was another awesome new clip to watch, and one day (12 November) it was my shot! Ben Sarlo worked magic with the lighting! 🙂

Overall impressions

It was a great process! Very similar to how we approach our own shots at first, but then we had director advice and shots were cropped and cut together and we had hookups with other animators. Feedback was regular, but different to when peers give you their thoughts in AM—feedback was coming from the lead animator (Sergey Berengard on set 2) and director and it was much more specific on what needed work to get the shot to the required level. Plus there was the overall sense that we were all involved together, which was very neat!

Seeing it all lit, rendered and with sound, it’s fabulous. Loved being part of it!

Read more: Circus Jam: Online Collaboration – The Making of the Future

Curiously you’ll read the director had an easier time with shot 3—where shots were planned and storyboarded in advance and animators picked a shot and worked on it. I’m glad I had a chance to put more of my own ideas into my shot though 🙂

Practicing bass (2015 version)

Bass guitar continues to be a fun hobby, and a great break from all the other busy activities in life! Need to play more (playing is practice!) to smooth out the sound and make fewer mistakes. I also need to learn how to use the recording settings in Amplitube because I recorded the traditional ‘Hey Ya!’ to compare progress. Well, I played it into the iPad. I did not record it. I will have to play it again.

In the meantime, here’s a selection of other bass lines I enjoy playing. Cringe-worthy mistakes and all!

MVP approach to rigging for newbie animators

MVP (minimum viable product) just means doing something quick and/or easy (minimum) but still useful (viable) in solving the problem. As a newbie animator sometimes I need to rig up a prop for a shot. I have a LOT to learn about modeling and rigging, but while I’m busy learning animating (I have a lot to learn there, but at least I’m actively learning that!) this is my approach. So far it’s getting me by (probably because my props only need to work in a student assignment shot, so being “viable” is pretty easy).

Making a stapler

Plan! What is a stapler and what does it need to do in the shot? In this case, the rig just needs to be able to “staple” (open and close like a stapler). I know from experience (I may have stapled a few things in my time) that a stapler has a bottom, top and that metal bit under the top that holds the staples. And I know when I staple something, I press the top down. The top and the metal bit don’t move at the same speed. So I want a rig that can do that!

Also I want to refresh in my mind: what does a stapler look like? Google images is great for this!

Many photos of staplers (google image search screenshot)

Simple model

Start building the main parts. For the base I went with a simple block polygon. I edited the size in the channel box to use whole numbers, just to keep it simple. No idea if it’s to scale with the characters I use. I make sure the block is centred in X, Y and Z, and then I adjust Y so that the base of the model sits on the ground. By default Maya puts the centre on the ground, so half the block is below ground. I don’t want that when I import it into another scene, so I shift it up by half it’s height (I type the numbers in the channel box so it’s exact).

Top, front, side and perspective views showing a thin flat rectangle

I drew a second block approximately the same size, but taller, then edited all the sizes in the channel box. But the top of a stapler is a bit more jaunty so I switched to edge mode and did a little chamfer here and there. (I used “chamfer” in a post!) Turning off ‘discrete move’ in the tool settings helped, maya was snapping to the grid or something and not letting me get the fine tuning I wanted. Even in MVP I have standards!

There was one other part I added to the model: the bit that holds staples. It’s called the “magazine”. How do I know that? I looked up staplers on Wikipedia! I also learned the ‘top’ is called the ‘arm’, and in maya I named all the polygons thus: stapler_base, stapler_arm, stapler_magazine.

Rig it!

The first rigging step, to me at least (after the planning above), is to organise the polygons and add a root/layout control. So I grouped everything twice. The group named ‘stapler’ will hold the entire rig. The ‘grp_stapler’ inside that will hold all the parts AND the base control. I’ve learned to always (?) attach controls to groups. That way you can change the items inside that group without having to adjust all the animation already applied to a rig in a shot.

The base control is just a nurbs circle on the ground. MVP remember. Make it large enough to fit around the model. Centre it at 0, 0, 0 then parent it to the ‘grp_stapler’ group. Test it out by selecting the control and rotating it or moving it about. Everything should work nicely. Zero it out again and save. That’s the first version of your rig! If your rig doesn’t have any moving parts, you’re done!! 🙂

Rigging the stapler arm and magazine

Moving parts challenge me and this is where I know more can be done (but I don’t know how yet). Ideally I would like a control where I move the stapler arm and it moves, and at the appropriate time it also moves the magazine until it connects with the base and then the arm pushes down on top. That’s the control I want as an animator! But it’s beyond my rigging knowledge atm, so I’m going to make 2 controls: one for the arm and one for the magazine. It means more work when animating than I’d like, but it will be functional.

I only want the arm to move one way, and that’s to rotate open and shut. Nurbs circles are the most common controls I’ve seen for rotations. They need to be centred around the pivot point. I tried adding one in the front view, but then realised the circle would look exactly the same no matter how the arm was rotated. That’s not helpful!

So I moved around 90° and looped the circle around the arm. I had to guestimate the position to be where I thought the arm should pivot from (better planning might help that!). I made a second controller, slightly smaller, and centred it on the same point (using the channel box values).

Time to setup more parent constraints! The process is very similar to the base control, with one important step at the start. These new control curves are not centred in the scene file, but we want the values to be zero for animation. Use ‘freeze transformations’ on the curves. It sets the values to zero without translating the objects.

Those parenting steps again:

  1. freeze transformations on the control curve
  2. create a group for the rig part(s) being manipulated
  3. select the control
  4. shift-select the group
  5. choose ‘parent’ from the constrain menu.

Screenshot of maya outliner and constrain menu

Done! Test out each controller and make sure everything moves how you want. Try zeroing-out the values in the channel box to make sure that behaves as well. If you make any mistakes (I made a few), just delete the constraints in the outliner and try again.

During this testing I noticed the controls let me drag the stapler parts all over the place, or rotate them on the wrong angles. I selected the curve controllers and then locked all the channels except for Rotate Z (which moves in the open/close direction). I’ve seen rigs that completely remove unused channels (like elbow and finger joint rotations) but I don’t know how they do that. (Yet.) Locking helps me when animating from accidentally moving the control the wrong way.

Save it. Your rig is ready to use 🙂

Here’s the final structure in the outliner:

Somewhere along the way I also added some basic colours for the rig. I went with a dark grey blinn for the plastic on the base and arm, and a light grey phong for the metal magazine.


You can grab the stapler rig I made today from github. Free to use!

Kudos to Animation Mentor for the Maya Workshop course they offer. I wouldn’t know any modeling or rigging if not for that course. One year later I’m making staplers, woot! ~:)

Helping people make websites

I like making websites and I love helping other people make sites.

I started learning how to make web pages, writing HTML that is, in 1996. The most important tools back then were a browser (Netscape Navigator), text editor (Notepad) and FTP client (hmmm, I can’t remember what client I used). If you saw something cool on a webpage you could just view the source and learn how that developer had made it work. You could ask anyone you met online for their homepage and they had one. It might have had midi background music and blinking text, but it was theirs and it told their story. Social media is cool, but I can’t help feeling we lost some of that personal creativity.

Fast forward to 2015 and the profession has changed… in some ways a lot, and in other ways not so much. The best tools are still a web browser (Firefox, Chrome, IE, Opera, Safari—all the latest browsers have killer developer tools), text editor (Sublime) and some way to publish your content (FTP, git, other…). Only now there are so many other tools to help with design, development and operations… I am not going to list them here, but I am going to highlight some tools I’ve made to help others.

Global alert bar editor (2015)

Global alert bar editor

My most recent creation, a simple authoring tool for creating the global alert bar used on Queensland Government websites in times of a natural disaster. It’s a simple form with live preview and markup. The initial impetus for this was to get the time element markup correct. I named it GABE for short and you can find it over on codepen:

It doesn’t publish—it just generates the HTML for old fashioned copy and paste.

Queensland Government templates and patterns (2002–2015)

I’ve helped code the CUE (consistent user experience) and SWE (single website experience) templates for Queensland Government since 2002. Rolling out a template across varied government websites and applications (and many different platforms and frameworks) with minimal conflicts and 4-week releases was a really great achievement. Centrally hosted assets (css, js and images) was the key to rolling out quick changes, and a healthy respect for the diverse platforms the template was integrated in. I might personally be a bit opinionated about troubleshooting CSS conflicts with the PrimeFaces UI framework; but professionally if that’s needed then that’s supported.

Maps with data (desktop)

The pattern library is a collection of UI elements that are supported in that template, ranging from simple content patterns (example: including document metadata in a link) to “advanced” content, such as a creating a single-page mapping application with only a simple CSV data file and some HTML templates.

Always a good challenge: balancing a quality customer experience with an easy authoring process! Two examples I am particularly tickled by are instruction-based form relevance, an approach to progressive disclosure in forms that requires no scripting (by the form author, I did the heavy lifting) and having folks run up angular apps with only CSV data and custom templates (the angular app code is centrally shared).

Form builder (2012)

Form builder prototype

I consider it a “proof-of-concept” but this single-page app has been used to create many of the email forms now live on and was instrumental in getting everyone to stop talking about putting “services” online and actually start publishing them! The rush is on now to put more advanced tools in place (bring it on!)

Click anywhere to edit, drag and drop, switch to preview. Builds forms with semantic markup (my particular flavour), including HTML5 validation and progressive disclosure. There are a bunch of poorly documented keyboard shortcuts. I’d love to polish this up one day, it has a lot of potential. (Being usable without training would be a win!)

Get involved survey builder (2011)

Edit consultation dialog (2011)
Add question dialog (2011)

Get involved is the Queensland Government consultation platform. The survey builder is not as easy to use as the form builder (above), in fact it inspired me into thinking “It should easier to make forms!” Still, I helped with the UI design (with some excellent editorial advice from Rory Daly) and it helps people make surveys, consider the language they use, and choose appropriate privacy settings.

Custom quality control tools (2007, 2012)

Diagram of quality control logging tool (2007)

I worked on a couple of browser extensions to automate some of my quality control tasks, staring with custom stylesheets and scripts in Opera in 2007 to help check pages at Department of Communities.

In 2012 we tackled editorial quality by testing for passive voice, non-preferred terms, number formats and more. Computers are great at consistently performing the same checks over and over again, the challenge lies in figuring out how to test for some of these fuzzy concepts, how to present those results in a nice UI, and how to encourage people to use the tool when available. (Okay, behaviour change may be the biggest challenge in that list!)

Content management systems (2002–04, 2012)

Workflow documentation
Workflow email design (2005)

TeamSite pops up every few years in my Queensland Government jobs. I implemented the workflows, templates and deployments for Education Queensland in 2002–04, and helped set up the environment for in 2012. I’m not a huge fan of CMS products, I like flexibility in my workflow and systems like consistency so that’s an immediate challenge. Still, I am impressed when I see authors getting stuck in and making content! I have mixed opinions about whether or not they should learn HTML along the way 🙂

Jumbostore (1999)

Jumbostore edit product wizard (1999)

Behind the online shopping mall “Jumbomall” there was “Jumbostore”—a content management environment for stores and products. I did a lot of the work on the UI and database to support this, customer support for merchants, and occasionally drew elephants for promotions.


My biggest contribution is mentoring. I’ve always enjoyed this on the job, but over at Thinkful I’ve found the best outlet for helping new developers on the path to mastery!

Yes, I do believe everyone can “learn to code” or more accurately, everyone can create.

Combine videos side by side in QuickTime Pro

It’s fun to compare where an animation shot began and where it ended up. One way to do this is to create a video that plays the different stages side by side. QuickTime Pro can do this, although the menus are a little hidden.

Here’s one I prepared earlier:

Here is how I made it!

Open all the videos in QuickTime. Each will open in a separate window.

Screenshot of 4 videos open in QuickTime Pro

You will need to copy all the videos into a single file. In this tutorial, I’m going to copy them into the reference video. Let’s start by copying the finished shot. Go to the video you want to copy and select all. You can select all by dragging the handles, using ‘Select All’ in the ‘Edit menu, or with the keyboard shortcut: ‘Ctrl+A‘ (Windows) or ‘⌘+A‘ (Mac).

QuickTime Pro screenshot showing selection handles on time slider

QuickTime Pro screenshot showing Select All command in Edit menu

Got it selected? Now copy it. You know the keyboard shortcuts for copy? ‘Ctrl+C‘ (Windows) or ‘⌘+C‘ (Mac). They work in almost every program. If you like menus, ‘Copy’ is in the ‘Edit’ menu again.

QuickTime Pro screenshot showing Copy command in Edit menu

Go back to your first video (the reference video in this example). Do not use paste (anyone know what Paste does?) There’s a fancy option named ‘Add to Selection and Scale’. That’s the one we want. I’m not 100% sure here, but I suspect you want to make sure that (1) nothing in this movie is selected and (2) the movie you are adding is a similar size and length. Otherwise, you might need to tweak this step to suit.

QuickTime Pro screenshot showing the add to selection and scale command in the Edit menu

The ‘Add to Selection and Scale’ will drop the copied movie right on top of the original one.

QuickTime Pro screenshot showing one video pasted over the top of the original

Wait, that’s not what we want. We’ll need to move it so they are presented side by side. To do that, we need to edit the movie properties (found in the ‘Window’ menu as ‘Show Movie Properties’).

QuickTime Pro screenshot showing movie properties command in window menu

Click the second video to select it and go to the ‘Visual Settings’ tab.

QuickTime Pro screenshot showing the track selection in movie properties

The ‘Offset’ values are how you move the video tracks around in 2D space. In this example, both videos are 720 × 405 pixels in size.

QuickTime Pro screenshot showing the offset properties

Now, in my example I had the original video (reference) offset on right. We’ll actually need to select ‘Video Track 1’ for that. Let’s offset it 720px from the left. That’s how many pixels we need so we can see all of the other video (it’s 720px wide, so we leave a 720px offset for it).

You should see your movie shoot out to twice the size in the background (you may need to press ‘Tab‘ first).

QuickTime Pro screenshot showing editing the offset properties for a second video

Just close the properties box when you’re done. To add the other videos, you need to repeat the ‘Select All’, ‘Copy’ and ‘Add to Selection and Scale’ steps for each video. Open the properties and offset the video tracks.

QuickTime Pro screenshot showing editing the offset properties for a third video

QuickTime Pro screenshot showing editing the offset properties for a fourth video

You can do all the copying first and the offsets last, or offset each video as you add it. You can also scale (for insets), flip, make semi-transparent and more. Who knew so much power was tucked away in QuickTime?

To finish up, export your movie! (You probably don’t want to save over the original file.)

QuickTime Pro screenshot showing Export command in File menu

This tutorial was done with QuickTime Pro 7.7.6 on Windows. The ‘Pro’ version is a paid unlock for the free QuickTime player.