Dussehra with Google Web Designer
About three weeks ago, Google launched their latest product: Google Web Designer. It’s free; it runs on both Windows and Mac, and even Linux; it’s an awesome way for a beginner to learn the basics of animation.
So, Tenant and Antonym finished with the Dussehra poster, and it looked great. ‘”Let’s make it do stuff. This will be a good way to test out Google Web Designer (GWD)”, said Headant. The first step towards this would be to have separate images for all the animated characters. Then we wanted these individual characters to be able to show movements (shooting, moving body parts). So Tenant and I sat together and went about separating (tearing apart) body parts of the characters. Now, we had 30 odd images to work with.
This ended the preparation phase of the animation. Next was importing the images into GWD and placing them in position as per the poster. The order and grouping of the images was of prime importance. For example, all of the Raavan’s body parts (two hands, torso, heads) while separate, were grouped together under one div . This way, we made sure that fewer and fewer mistakes were made. Of course, this point was reached after loads of mistakes were made.
Moving on, a ‘BOOM!’ here, a ‘BANG!’ there, a soldier calling for reinforcements and a fallen warrior later, the animation was done. GWD, while being an excellent piece of software, no doubt came with its set of flaws:
- It would hang often, but would still allow you to save your project so that you could simply restart the project and continue working.
- It would crash often, in which case the above option wouldn’t exist, and you would have to take a deep breath and go about recreating the project since the last save.
- The zoom functions had erratic behaviour.
- There is no option (yet) to repeat the whole timeline indefinitely.
The engineers of the GWD team say that a full-fledged version will be launched soon. This version will allow you to create complete web pages with increased functionality. We have to say, we’re looking forward to it.
In the process of figuring out the software, we wrote to the GWD team on a regular basis. They played a huge role in helping us find our way around Google Web Designer. On one such occasion, we had to send them our animation and they wrote back saying they liked it. You can view the thread here.
Now that Diwali is done and dusted, we hope we can renew some of your spirit of the bygone festival with this animation of ours. We know we made it in good time (rolls eyes), but we hope you like it.
This is a behind-the-scenes account by Sid (Tenant) on the concept development for the poster that eventually led to the animation:
Walking sacks, jumping beans to rogue robots destroying cities, animation as a moving art form has always attracted my curiosity. Being an ardent animation junkie, I could not help learning the little tidbits of this science and found that the only way I could contribute was with my sketching skills and concept development. This is what the character development looked like:
What we did with the BlueAnt Digital Dussehra poster is what animators would call ‘applying the straight ahead principle’ i.e. there was no meticulous planning on postures or little details, we were playing with it as if it were clay.
We were discovering new pockets with a completely new platform called “Google Web Designer’. New ideas emerged with every new motion that was put into the characters by our very own Coolant.
The preproduction phase was the real fun part for me. Sketching out the concept and our special Raavan Robot was a treat. This phase required a lot of rough drawings and thumbnails. Thumbnails were made to keep the composition and character placement right. Character concepts required a lot of rough drawings. Questions like ‘Will the robot be detailed? Or Should I make it more along humorous lines?’ This was a tad bit tricky because the character needed to look quirky and menacing at the same time. Drawing fellow ‘ants’ in their combat suits and positions was more fun than difficult.