January Project
MomsEggs.com needed something extra in the web design. The retro sunburst artwork was a nice print branding, but I wanted to add something slightly more memorable like an animated chicken (add chicken metaphors and jokes here).
I gave myself 1 month to make an animated chicken. It’s my January project. I’m motivated. I’m focused.
Lessons Learned
Keep hours next time, not just dates. I have to guess I spent 16 – 20 hours this month on the chicken.
Adobe Animate is just Flash re-branded. I had almost forgotten how to use movieclips and Actionscript, but it started coming back to me the more I worked with it. It was like reuniting with an old friend 🙂
Animate outputs right to HTML5 canvas object. This means the vector artwork is drawn by the accompanying JavaScript file. No images whatsoever! No assets needed.
The processing of drawing the SVG images is done by the Graphics Card (GPU) leaving the CPU free to do other things such as listen for button clicks, load upon scrolling, etc.
To give the animation that hand drawn feel, draw it on paper, scan it, then trace it in Illustrator. My animation came out looking like it’s made of shapes… which it is. Obviously I don’t have a pen & tablet, I don’t think I need one, I don’t do this often… yet.
Outstanding Questions/Problems
Why is it not working on mobile? Does the technology not work on mobile or is it a problem with my CSS? *EDIT – I just needed to clear my phone browser.
Why does the chicken run in place on the big TV in the living room? (LG) ALSO on Firefox. *EDIT – added webkit
Now you have to address the loading time of the hero image, it’s blocking animation. *EDIT – implemented webp image with fallback method.
How’d I Do? A Self-Rating
Animation look/act like a chicken? B
Animation used thoughtfully? A
Quality of drawings C
Cross browser consistent B
Cross device consistent B
Stay within confines of 1 month A
