Brudenell 100 // Change of Direction

After attempting to storyboard the animation, I decided realises how huge a brief it would actually be to produce an animation as slick as the examples I had been looking at. As I had only scheduled a week for it, and had fallen behind heavily in that week, I would have to work on this amongst other briefs. I needed to be realistic about time-frame, and don't really need another heavy animation project to follow my Indie Game brief.

Looking for alternative ways to celebrate Brudenell's character, I started looking at the way animation can be incorporated on the web and found that the technology to do this well has advanced massively in recent years.

One technology I had become really interested in is HTML5 Canvas. It allows shapes to be drawn and manipulated by the browser (rather than displaying a image). This gives the designer unprecedented flexibility when dealing with animation on the web without requiring the user to have a special plug in (ie. flash, quicksilver etc.) and without making sites huge to load (the user doesn't need to download any images). 

I started to research ways that I could use this myself. Following tutorial sites, it became clear that even simple shapes required a large amount of manual coding to draw, let alone animate. Once I had taught myself the basics I became ambitious and wanted to find a way to use the more complicated shapes I had created in illustrator without coding them manually. I stumbled upon an Illustrator plugin called Ai2Canvas which turned out to be the turning point in the brief I had needed, opening up a new avenue to explore for my practice by combining web and animation in a truly new and useful way.

I could see the potential really fast, producing a demo in 15 minutes using minimal javascript. 

So this in Illustrator...

Quickly became this in the browser (moving)

 My next job was to produce a new storyboard with simple movements. This should be made easier as I can adapt the development work I have done thus far.