Chef – Animations

Illustrations are finished for my Honours Project Chef. So why not to go on an extra journey which attracts me and try to animate them? 🙂

I stumbled upon animating few times in my past. Usually it meant creating something in Adobe Flash (may it rest in peace), like banners. This time, I knew that I would like to create razor-sharp, vector-based animation for web (since Chef is essentially a web app). I thought that using some SVG animation javascript library might be a way to go – there is Spirit.js coming and it looks promising. But until it’s out, I can’t see any easy-to-use option.

Adobe Animate

So I went for Adobe Animate CC, which I already have in my awesome Creative Cloud membership. It feels relatively intuitive to somebody who used flash a bit in the past and is used to the nature of Creative Cloud applications. It integrates CC Libraries greatly, which I definitely appreciate.

CC Libraries integrated in Adobe Animate CC
CC Libraries integrated in Adobe Animate CC

Once I animate the objects as I want in Animate, I export them as SWF. Why not exporting them as the HTML5 Canvas? Well I was quite disappointed seeing that the canvas isn’t using SVGs, but just PNG/JPEGs for the actual layers. That yields in larger size and pixelation. There are some plugins for Animate/Flash to export animated SVGs, but they didn’t work/install for me at all.

GIF export of animated tomato cutting
GIF export of animated tomato cutting

Staying sharp

Exported SWF is actually fully vector (as long as you use vectors of course 🙂 ), so that’s one reason there to appreciate the good old flash, despite many negativity addressed to it.

Google’s project Swiffy converts SWF to HTML5 Canvas animation which uses SVGs for layers, and it works really well. I decided to use it, because once you import their library (around 100 kB of javascript), the animations are just small javascript files with the vectors coded into themselves – convenient!

So this is how my overall animation workflow looks (read more about illustrating & colouring here):

The workflow

  1. Draw the elements on paper with pencil/mechanical pencil
  2. Line them over with a sharpie marker (or directly start with sharpie if I am confident enough)
  3. Take a photo & vectorise using Adobe Capture CC, save in CC library
  4. Bring into Adobe Illustrator, colourise the illustrations and dissect them into layers for animating, save into CC library
  5. Bring the colourised objects from CC library to Animate CC, create animation with them
  6. Export as SWF
  7. Use Google’s Swiffy to convert SWFs to animated SVG
  8. Bring this animation to my project – DONE! 🙂