Posts Tagged: Animation

Mar 11

Motion Graphics Design @ The Arnolfini

After the fun of Ignite Bristol‘s recent SS Great Britain event (this one was hilarious!) we had another great event for the creative-minded of Bristol – this time in the form of an evening of talks by some pretty amazing motion graphics designers that gave some valuable insight in to the minds and creative processes behind their work. The West of England Design Forum did a great job lining up the formidable talents of Jack Laurence (Moving Brands), Shane Walter (onedotzero), Charlie Mawer (Red Bee Media) and Matthew Rudd (Rudd Studio). Unfortunately, The Mill had to pull out due to “unforeseen client complications” (we’ve all been there!) but it was a sell-out event nonetheless.

Personally, I think W of E Design Forum missed a trick not having at least one of their speakers from the interactive side of motion graphics design. Here’s a snapshot of what they were talking about.

Jack Laurence (Moving Brands)

Jack talked through some of the work that Moving Brands do and mainly focused on the rebrand of Nokia they did that swapped the old “hand-in-hand” schmaltz for the more modern style you’ll recognise from anything post-2007. Still conveying the core message “Connecting People” but giving it a much more up-to-date feel.

Moving Brands created a ‘living identity’ that uses Processing to generate 3d visuals dynamically. This way they created tools that could be given to all the brand managers internationally. Tweaking a few settings they could create animated or static artwork that was unique and fitting for their uses and also stayed consistent with the overall brand identity. Smart stuff.

Processing, if you haven’t come across it before, is an open framework based on Java that allows for some pretty rapid experimentation with generative art, without getting you bogged down in the complexity of Java programming. Check it out here.

Also nice in his talk was a mood video Moving Brands made for Nokia, not for public consumption, but just as their response to the brief and to show their interpretation of the brand. Lovely stuff.

Shane Walter (onedotzero)

Shane is something of a rock-star of the motion graphics world. CEO & Creative Director of onedotzero, he’s a busy guy and it’s not surprising when you see the scale and number of festivals and events that onedotzero run worldwide. Adventures in Motion 2010 was a big success this year and you can check it out here. He was just back from their latest festival in St Petersburg that looked pretty cool. I’ll definitely be marking Adventures in Motion in my calendar for next year!

Charlie Mawer (Red Bee Media)

Charlie gave us a brief intro to what Red Bee Media do, and they do a lot… rebranding BBC1, BBC3, Dave, Virgin1, Disney, Discovery, ESPN, Canal+… pretty much every TV station has had the Red Bee treatment. On the night, Charlie took us through the work they’d done for Belgian children’s broadcaster KetNet. They did a great job of creating reusable and adaptable stings and idents for KetNet that allowed them to keep the visuals fresh and interactive by integrating programme trailers, live action presenters and also user generated content. The case study is on their site here.

A five year old could do this...


"Chair designed by committee" - Hockney

Matthew Rudd (Rudd Studio)

And finally we had Matthew Rudd, of the eponymous Rudd Studios. When he walked out first I thought he was a recent art-school graduate but it became quickly apparent he’s an insanely accomplished and talented visual artist.

Matthew’s session was an inspirational meander through his background as an artist and how he applies that thinking to his work. Along with some of his own photography, Matthew showed how art informs his thought process. For example, the way that Picasso’s cubist paintings and also David Hockney’s photo montages (pictured) capture the same moment from different angles led directly to his recent work for Channel 4.

Given that the existing Channel 4 idents were so still popular, Rudd came up with the elegant solution you can see in the video above. Using this simple device of splitting the screen to show the same animation from different perspectives managed to breathe a whole new life in to their idents without clashing with the existing ones.

The best ideas are often the simplest. Inspirational stuff.

Follow Shane on Twitter: @shane_casey

Nov 10

Animation in Advertising

Editor’s note: It was an epic Show & Tell this week. The first part was Marine’s presentation on the use of animation in advertising. Stay tuned for part 2 with all the rest of the headlines and discussion.

I have a certain passion for animation and whilst doing some research on the use of animation in advertising, Here are a few great ads that I thought I would share with you. I was really struck by the fact that animation is actually a very efficient element/tool for brands that wish to communicate. In fact, animation develops consumers’ imagination, it can be adaptable and become top of mind in consumers’ mind and has also a strong capacity to touch an audience by approaching serious matters in a sympathetic way…

Enough about the theory, here are three ads I have chosen to share:

Amnesty International: Signatures

The first one is an ad done by TBWA for Amnesty International called “Signatures” which speaks from itself, which I found stunning and moving just by using a nice stylish illustration. When interviewing the artistic director Stéphane Gaubert he explained that their choice went towards black and white animation because they thought a simple but fresh illustration would have a great impact on people’s mind, reaching their sympathy. In terms of results the charity got great reviews with 600,000 views on YouTube and €1.8 millions of free diffusions and press articles.

AIDS: Zizi graffitis

The next ad is also one from TBWA for AIDS this time called “Zizi graffitis” which is really sweet and funny. When I interviewed Ingrid Varetz, the creative director who worked on the ad, she explained that animation was the base of their concept, she said “it seemed to me appropriate to use sexual graffiti which is usually found in schools in order to talk to the youth and encourage them to wear condoms. The results for this ad were amazing with 1 million views in a week, 8.5 millions in September so for those who will tell me, this ad is so French, I say, ‘well it worked!’”

Now another way of approaching the same subject but in a very different direction and I personally didn’t like it at all but I will let you judge from yourselves. I just thought it’s a bit wrong to associate mass murderers with people who are HIV-positive

Facebook: Unfriend Coal

The last one I would like to share is an ad from Greenpeace which came out strategically a few weeks before the film “The Social Network”. Light, funny and entertaining it shows you how Facebook’s creator is not doing the right choice by using coal instead of wind farms.

Oct 10

Takin’ it to the MAX

Short of a couple of sneak peeks, the Adobe keynote at this year’s Flash on the Beach really didn’t give much away… they save the good stuff for MAX. Yesterday, they certainly delivered on that.

One recurring theme though, throughout the Flash on the Beach, was that no matter what happens with HTML5, Flash will always be ahead of the curve.

HTML5/CSS3 may be moving in as heir apparent to take over basic video content delivery, prettier fonts, basic animation etc but Flash has always been doing things that couldn’t be done without the use of a plug-in. In many ways, it’s responsible for pushing the boundaries of what people expect from the web and this week they’ve been pushing that even further.

Anyway, back to the cool new stuff…

Real 3D in Flash

Check this out.

Introducing the new Molehill 3D API. Molehill means full-textured 3D models, made of hundreds of thousands of triangles rendered on the fly in Flash with hardware DirectX & OpenGL 3D acceleration. And these capabilities are available to use with existing 3D libraries like Away3D and Alternativa3D.

Not only that, this will be available in the browser too, not just through Air on the desktop. Awesome.

Air 2.5 – Coming to a screen near you

Also revealed at MAX was the new release of the Air run-time. Air 2.5 is really mobile focused, with support for Android 2.2, Windows Phone 7 and BlackBerry Tablet OS, – and obviously, it’s running on Windows, OSX and Linux – but the new version is also compatible with set-top boxes and works with Google TV.

That’s right, Flash on your TV and the results look pretty impressive so far. Adobe’s aiming to have Flash/Air on every screen and they’ve made lots of enhancements to APIs to help account for the lower-processing power of mobile devices and set-top boxes.

The desktop run-time has also moved on with greater support for CSS in HTML-based Air apps. You can use TypeKit now and newer CSS features like drop-shadow and @font-face.

For further reading, you can check out all the details are in the Air 2.5 release notes.

So, where’s it all going?

All of these are really positive steps for Adobe, in my opinion. They may have been late to the party on mobile but everything we’re seeing here is right on the money. A lot of people have been really quick to write off Adobe but all of this is adding up to:

  • a solid offering on mobile/tablet/set-top platforms;
  • packaging of ActionScript based apps for iOS devices;
  • increased support and integration with HTML5/CSS3;
  • hardware acceleration cross-platform;
  • and still more features that you just can’t get anywhere else.

Even InDesign is pulling its weight in digital with the Digital Publishing Suite! (Mashable has a good overview here)

I have to say, I’m impressed with what’s coming out of Adobe at the moment. Innovative solutions, in all the right areas. Long may it last.

Postscript: From the Bleeding Edge

Also, you’ve gotta check this out. Adobe have been working on a visual prototyping tool for HTML5/CSS/JavaScript powered animations. Codenamed “Edge” it looks pretty damn handy and Adobe was always the logical place that this kind of a solution would come from. Watch the video from the Adobe DevNet anyway and let me know what you think.

Follow Shane on Twitter:

Nov 09

Adventures in Lip-sync: Part 2

This post follows on from Adventures in Lip-sync: Part 1

So, at this stage, we’ve got a string of gibberish from Repeat After Me and not much else. To get this working there’s four key ingredients:

  • the audio soundtrack;
  • the phoneme info from Repeat After Me;
  • the graphic representations of the mouth shapes (visemes);
  • and a dictionary to translate one to the other.

All I need to do is hook them up.

Continue reading →

Oct 09

Adventures in Lip-sync: Part 1

Recently I’ve been working on an animation for the pharma division of Harte-Hanks. It’s in our classic MZ-stylee and it’s been fun doing some old-school 2d Flash animation. Zoe’s given me some great illustrations to work with and Charlie’s imagination has been running riot with karate-chopping leaps and flabby men on treadmills. Lots of tweens, lots of Graphic symbols, lots and lots of keyframes. I’ve also gotten to play with CS4′s new IK bones for some of the sequences too but that’s a whole other post.

From the outset though, I’ve been procrastinating about lip-syncing the narrator’s voice-over with the character. My rationale was that any edits to the timing would mean re-doing work… always fun, so best leave it til last, but really it just seemed like it’d be an arduous time-consuming manual task. In all the years I’ve been doing animation in Flash I’ve never found an easy way of doing this. Animation is a craft and it seems the only solution to most tasks is put some time and love into it. That said, code is your friend (and a cruel, cruel mistress) that has often helped avoid the monkey work.

So I went looking for a pre-existing solution… First port of call, as always, was “The Animator’s Survival Kit” by Richard Williams (if you don’t own it, get it!). Then some Googling that rapidly disappeared down the rabbit hole of visemes, phonemes and natural language simulation dissertations. Whew! No easy answers there either.

At the last Bristol FUG, I had a good chat with master-animator Dave Cropley (from Evans & Finch) about how he does it. He pointed me towards software called Magpie that seems to be the standard in the 3d animation world. Nothing seemed to exist in the Flash/ActionScript world though so I decided to roll my own.

Here’s how I did it…

Continue reading →

Blog WebMastered by All in One Webmaster.