Updated: Apr 13
I rarely get to do much animation these days, although my background is in 2D animation, so this recent assignment for "Leprechaun Liquids" via client Bruno Tilley was interesting in as much as it was easing myself back into a type of animation that isn't motion graphics but without jumping back into character animation full-on - the brief was the same : adding character through movement, with an added intriguing element - they were to be used in an augmented reality app.
A challenging aspect - besides working with augmented reality for the first time - was that the animation element was an afterthought - Bruno had commissioned illustrator Manhar Chauhan to produce a series of rich, characterful illustrations depicting the various mascot leprechauns that represent various vape liquids that the company produces - these were created using traditional media and some digital work and were not "animation-ready", ie they weren't conveniently broken down into layers so various parts could be animated, since this was never the original intention.
This aspect meant that even before I could consider the type of action - which had to be looping since the animations were intended for use in the "Artivive" augmented reality app as well as for the website as GIF's - the illustrations had to be scaled (they were print resolution) after breaking down into layers, which involved restoring areas as elements were separated out.
The workflow I settled on for the animations was centered around leveraging the Puppet Tool in After Effects CC, recently upgraded to include tools to allow for more flexibility.
It's not the first tool of choice for animators working in digital 2D animation since it has some quirks but I discovered that these can be worked around and it is actually great for adding life to static images such as these by virtue of the fact that images are converted into meshes that can be distorted using "pins" - one thing it can't do "out of the box", without resorting to scripting expressions, is setting up hierarchies easily.
For the purposes of this assignment, the characters really only had to have enough movement to add some life to them - where possible, I added eye blinks and small shifts of the eye line by animating the pupils. Value was added by additional effects like twinkles and the twisting "vape" smoke, which was created using a particle system in After Effects and whose path could be customized for each animation, with variations to the scale, direction and decay of the smoke.
The Artivive app was still in Beta phase when it was chosen for this project so there was a lot of liaising with the developers to address various technical issues - out of the box the app really does what it says it does - a trigger image (in this case, a poster or a product label) causes an animation to appear to float in the air in front of the trigger when viewed via the app on a mobile device. However, although the app interface - "Artivive Bridge" - is pretty straightforward to use and features a 3D interface, some features were missing, most importantly a way of using images with irregular outlines since it was developed initially for images contained within a rectangular box.
The latest version addressed these issues after the project was finalized so there was a lot of R&D - mainly involving using a key color background that the app makes transparent - the most recent version of Artivive allows images and movies with alpha channels to be loaded and control over the level of transparency to achieve subtle effects that were not available in the beta.
Once the AR aspect had been addressed, the next stage was outputting GIF loops for the website, which was another learning curve. The solution to this was to import Quicktime animations with alpha channels into Photoshops' animation timeline and use the "export to web" output option to render out animated GIF's, which were surprisingly good after colour palette reduction to 650 colours.
Client : Bruno Tilley
Illustrations : Manhar Chauhan
Happy Robot 2019