Secret Lab built the Play School Play Time app for the Australian Broadcasting Corporation.

We're really excited that Play School Play Time for iPad, an app we built for the Australian Broadcasting Corporation, is a finalist in two categories of the 20th AIMIA Awards!

Play School Play Time is a finalist in "Best of Tablet – Entertainment" and "Best of Tablet – Learning and Education". 

If you haven't checked out the app, if you're in Australia you can grab it from the App Store here, for free, or here, if you're elsewhere!

We're thrilled that Secret Lab is in such good company again this year! Previously, in the 19th AIMIA Awards, Play School Art Maker for iPad, also built by Secret Lab for the ABC was a finalists in "Effectiveness", "Best Application for a Tablet", and "Best Children's", and in the 18th AIMIA Awards, Foodi for iPad was a finalist in "Best Cultural or Lifestyle", and Play School Art Maker for iPad was a finalist in "Best Application on a Tablet or Mobile".

Recently, we were also thrilled to win a Tasmanian ICT Industry Award for 2013, for our work on innovative apps for kids! 

This is the second in a series of posts about animation by Rex Smeal, animator, and friend to cephalopod and amphibia alike.

Welcome back! If you haven’t read the first part of our animation basics trilogy, you should check it out! This second article is about Timing!

Timing

So, if Spacing determines how quickly or slowly something moves, what is there left to call timing? A lot of the time (ha ha), timing is the functional time requirement of your subject. For example, when animating a boxer throwing a punch, you must make the timing quick enough to accurately convey the speed of the punch: too fast and we miss it, too slow and he looks silly. Another example would be interfaces, which need to move quickly into place in order to be practical.

This is something most people know how to do instinctively, or can easily adjust for when a mistake is obviously too slow or too fast. Where timing gets interesting is the way choices in timing can affect multiple elements moving together.

View fullsize

View fullsize

As mentioned in the Spacing article, where Spacing is the placement of instances through time, Timing is the distribution of time across defined instance points, or keyframes.

Techniques

Real World Imitation

All good animators spend a great deal of time looking at real-world reference footage. Animal motion, the motion of objects under gravity: stones, balls, feathers, objects halted by a rope. Using natural timing at least as a starting point will cause objects to appear much more real. The closer the timing of an imaginary object mirrors a counterpart in reality, the more readily a viewer will accept it, irrelevant of how ridiculous the subject itself is. For example, an animated desk lamp that moves with the timing of a real, living creature can be more easily believed by an audience than a hyper-realistic figure which moves sluggishly or haltingly.

Where spacing demonstrates path of motion and slows and starts at a micro level, the wider choices about where objects move at what times is determined at a macro Timing level. These two concepts do blur quite a lot at their borders; I think of timing as requirements and spacing as the flair of a motion.

Timing Contrast

If one were listening to a drum which kept steady 4:4 time it would become very boring very fast. But with a second instrument playing a melody, or a second drum playing a different beat, interesting new combinations arise and we’re enjoying contrasts in timing. In terms of animation, this means that monotonous or homogenous motion across multiple objects is going to look bland, and a dynamic and heterogeneous cascade of objects moving at different speeds and in different styles, whilst requiring a little more effort on the part of the animator, will look much more interesting!

This isn’t always desirable, as often an audience is required to concentrate on something that isn’t moving, and in those situations a panoply of motion cues isn’t going to be advantageous.

Secondary Animation

Imagine a car driving around a corner (and our spacing is evenly distributed around the corner as we’re recklessly not slowing down), I guess you could say that this would be our Primary animation (an object appearing to move on it’s own initiative/by it’s own power). If the car has a trailer though we might call the motion of the trailer Secondary animation (an object’s motion that is separate from, but mostly determined by a primary object).

The other forces acting on the trailer might be gravity, it’s own momentum, the elasticity of the tether to the car, and if it were a lighter object, such as a flag, wind might be another factor. A flag on a stick, long hair on someone’s head, the tail of a kite, an injured arm hanging loosely from someone’s shoulder, even your clothes on your body are all examples of a secondary action linked to, caused by, but not identical to, a strong primary motion force.

This linked or tethered motion often provides a nice timing contrast, and good use of secondary animation both accentuates and deepens a motion and makes it much more interesting and attractive to a viewer. In fact, the emergent action of an object under forces is often more interesting than the primary motion. In touchscreen interface motion, the primary motion could be considered to be the gestures of the user and the interfaces move as secondary action.

View fullsize

Staggering

Some people like to call this overlap, and the definitions get very messy when you’re talking about it in terms of secondary animation or two parts of one object, but what it really means is two parts of the same object moving in a similar (or even identical) way at different times. This helps to separate the objects, and adds a lot of interest to the motion. Inversely, regular timing can unite otherwise separate objects.

These two groups are composed of identical frame instances, just presented out of synch by one and two frames for the staggering effect.

View fullsize

Cycles

Cycles are a really interesting technique, particularly as an economy measure. An animation cycle is where a sequence or motion may be looped and reused more than once. The difference between a ‘Cycle’ and a ‘Loop’ is that a cycle may only apply to one component, whereas a loop generally applies to everything that is displayed.

One of the most well-known uses for this technique is the “run cycle” where a character’s two steps loop seamlessly to create the illusion of an ongoing running action, when in reality the animator has obviously only been required to animate two steps.

The main difficulty in making viable cycles is preventing your audience from really seeing too much of the “seam” where the cycle repeats. In many cases there won’t be a seam: a spinning object, for example, could be said to loop from any point in it’s rotation. But more complex motions, like a character jumping, or running, often lend themselves to a logical starting point.

Keeping away from dead stops and overly regular spacing will help, obviously repeating frames will sit as a kind of afterimage in the viewer’s mind as the animation cycles. Where cycle economy becomes really powerful (infinite, really) is when there are several cycles working together, all with different lengths. Take this simple example.

View fullsize

Okay now brace yourself for some maths: Two cycles (with different timing) are playing in the next example, and the total length of the animation is double the longest of the two cycles. Despite doubling the on-screen time of the animation, technically we’ve only really stolen twelve frames for free here (24+36=60). But this is with two relatively compatible cycles.

If I had added another really short cycle with an uneven number of just five frames, the animation as a whole would not have truly looped until unique frame number 360, stealing us 295 frames for free and making the largest and most terrible gif ever to be displayed on the Internet.

This is great for long animations of spinning logos, but also useful for things like water ripples, cloud motion, shifting colours across an object. Extending cycle lifetime is the strongest way to avoid obvious repetition, and joining cycles like this is the cheapest way to extend overall cycle lifetime.

View fullsize

With the use of procedural animation, we can control these cycles just as we control loops in code: randomised frame segment orders, dynamic particle generators, and so on. Using these techniques, we can extend these cycle times dramatically, or infinitely, for no extra ‘drawings’ and close to zero extra effort. Eased rests, cycles and code-assisted animation are where an intelligent animator will be able to save the most time/money.

We hope you’ve enjoyed part two! Chat to us on Twitter and Facebook, or email us or if you have any questions!

Join us next time for the final episode in this animation basics series: Spatial Distortion!

We'll be running our popular iOS developer in Melbourne and Brisbane again in February 2014! Early Bird registrations are now open.

If you have any questions, don't hesitate to contact us.

Recently the Secret Lab was connected to the National Broadband Network (NBN). For our overseas readers, or those not following along in Australia, the NBN is an Australia-wide project to upgrade our telecommunications infrastructure. The NBN originally planned to offer fibre-to-the-premises (FTTP) to the majority of Australians, and fixed wireless and satellite connections to rural areas; when the federal government changed in September, as part of the new government policy a review into the possibility of changing from FTTP to fibre-to-the-node (FTTN) and other technologies commenced. That review is still ongoing. Either way, our office is now connected to FTTP, at the speeds of 100 Mbit/s down, and 40 Mbit/s up – a big step up from our previous ADSL2 connection, which maxed out at 23 Mbit/s down, and 0.9 Mbit/s up (we had basically the best ADSL2 connection you could get in Australia). NBN is one of the most transformative, impactful things that could have happened to us. Here's why.

We're, primarily, a game development studio, and we also teach iOS development. We build games for iPads, iPhones, Androids, Macs, and PCs. Games require lots, and lots, and lots of large asset files, sound files, music files, and the like. Most of the games we build are for clients. We also write training material, and create large instructional videos. This means, on a daily basis, we have to upload and download a lot of data around just to get anything done – often we need to upload between 3 GB and 30 GB in a day; this was impossible with ADSL2.

What did we do? We sent hard drives, or USB flash drives, through the postal service, or we left uploads running overnight in the faint hope that they'd successfully complete while we slept; worse still, and most deleterious to a small business – we resorted to expensive Telstra 4G LTE, which can upload between 5 Mbit/s and 10 Mbit/s at a cost of ~$50 AUD per 4 GB or so, so our upload went up relatively quickly but cost a fortune in doing so.

This was not sustainable. We can't run a game development studio for very long like that, as it's simply too stressful/expensive/time consuming/unproductive. Until the NBN came along, our only other options for a useful connection – primarily for uploading – were expensive HFC cables (if it was even available where our office is, which is debatable), expensive high-latency satellite options, or expensive and complicated bonded solutions (routing multiple connections together into a single connection). If we wanted to remain competitive, keep our working capital healthy, and keep our internal IT maintenance administrative requirements low (our IT requirements consist of one of us rebooting the router as needed!), then none of these options were suitable.

The NBN gives us a speedy 100 Mbit/s down, and an absolutely vital 40 Mbit/s up, and it gives it to us at a price equivalent to what we'd pay for a copper-based and all-but-useless for uploading ADSL2 connection. We can upload amounts of data that would have previously taken overnight, if we could do it at all, or required us to spend ridiculous amounts of money using 4G LTE technology, instead of resorting to the postal service and hard disk drive. We can move faster than we could before, since when one of us is using Skype to talk to a client we don't have to pause all our downloads and uploads, and stop checking code into source control since – thanks to having a 100/40 connection at our disposal – Skype no longer breaks down if something else is happening on the network. We don't have to raise our prices, since our broadband connection is both usable and cost friendly to a small business, and we no longer have to pay for extras such as hard drives to post, or Telstra 4G. Best of all, we no longer have to even consider leaving Tasmania – a beautiful place to live and work – solely because we couldn't get the connectivity we would have needed to make our business more effective, sustainable, and better equipped to make new games and software.

We're absolutely thrilled to have won a TASICT award last night at the Tasmanian ICT Industry Awards for 2013. We won the "Best Software Product" award for our work on innovative apps for kids. Thanks to TASICT, TasmaNet for sponsoring the particular award that we won, and Michael Ferguson for presenting the award to us. Congratulations to all the other amazing nominees and winners: Elan Projects, Jobric, CGI, ISW, Vodafone, Anittel, Kingborough Council, UXC Eclipse, Ionata Web Solutions, Synateq, Acrodata, Aurora Energy, and RBF. Thanks also to the event sponsors: Autech, Fuji Xerox, Insight4, Aurora Energy, HP, Hays, Anittel, and the Tasmanian Government.

Don't forget to check out Malcolm Turnbull's recorded message, regarding the NBN, on YouTube (thanks, Josh Deprez!)