Playground

The Tins

TheTin is full to the brim with talented and exciting individuals who all bring something totally unique to the table. From our super-organised project managers and experienced strategists to the technical wizardry and boundless creativity of our development and design teams, we’ve all got a role to play in delivering the best solutions possible for our clients.
But it’s how we work together as a team where we really deliver the goods.

Which got us thinking… when it comes to the functions of our business, TheTin has a lot in common with a band. And like any band, when we get it right, we make some absolute bangers.

So… live and direct, straight outta London and Newcastle we give you… The Tins!

Experiments with Character Animator
by Daisy Harding

We wanted the style of these illustrations to be simple but fun; I sketched out some rough concepts on paper first and then did the main work in Adobe Illustrator. When it came to creating the characters themselves, I had a lot of fun, and they all have a few subtle nods to some my personal music favourites - bits of Alex Turner, David Bowie, Kim Deal and Bloc Party are in there somewhere.

Serendipitously, around the time we were visualising the concept of the band, we were experimenting with Adobe’s latest Creative Cloud package, which includes a pretty smart addition to their already extensive animation software.

Character Animator allows you to take character artwork from Photoshop or Illustrator and, with a few naming conventions and some clever layer ordering, instantly apply natural looking movement to that character’s face and body - all through a webcam and microphone. Move your head to the left, open your mouth wide, raise a sarcastic eyebrow - and your character will mimic your actions in real time.

As you can imagine, it was great fun playing around with this tool. I took some pre-built ‘puppets’ from Adobe’s library and started bringing them to life at the blink of an eye (literally), and I knew immediately that this would be a brilliant and quick way to bring some life to the band - but like any new bit of software, it wasn’t without its challenges.

The tricky part was taking my pre-existing illustrations and building them up layer by layer so the software would know what movements to generate and how. Right Arm, Left Arm, Head, Neck - not to mention the variety of mouth shapes that change according to real phonetic sounds. There was a fair bit of trial and error (arms flying about everywhere, accidental decapitations) but when things worked, the effect was great. I was able to create simple animations that showed fun, life-like movement very quickly. After a few tweaks in After Effects, we had a fully functioning rock band!

Getting the band back together
by David Robinson

Now we needed to get the band onto the page, and to do this we went from Adobe’s newest tool to one of its oldest, Animate (formally known as Flash Professional). As a tool, Flash had changed dramatically over the years, and whilst still used today for rapid prototyping and building cross platform mobile applications, its roots lay in animation, hence its recent name change.

Animate allows us to quickly create layered animations and export for both video and the web. Layout can be tweaked visually, and interactivity can be added using standard JavaScript. Animate takes care of generating sprite sheets, handling animation loops, and then rendering everything within a canvas element in an HTML page. Without any modification, the output works across desktop and mobile.

Thanks to Simon for supplying us with guitar, bass and drum stems for the band to play and everyone who laid down vocals for the track.

Read more about TheTin band metaphor in this excellent article by Daisy Harding here.

Share this