WEB INTERACTION & ANIMATION

INSTRUCTOR : ERIC SILVAY | STUDENT : AARON WILSON

WEEK 2 VIDEO SCREENCAST PRESENTATION | AI2CANVAS PLUGIN

WEB INTERACTION

& ANIMATION

INSTRUCTOR : ERIC SILVAY | STUDENT : AARON WILSON  |                  |  WEEK 2 VIDEO SCREENCAST PRESENTATION | AI2CANVAS PLUGIN

Plugin Developer | Mike Swanson

AI2Canvas Plugin

Adobe Illustrator extension that adds javaScript animation functionality to the objects on a layer and outputs the AI layers as a <canvas> tag embedded HTML file.

Found at:

http://blog.mikeswanson.com/ai2canvas

WEB INTERACTION

& ANIMATION

INSTRUCTOR : ERIC SILVAY | STUDENT : AARON WILSON  |                  |  WEEK 2 VIDEO SCREENCAST PRESENTATION | AI2CANVAS PLUGIN

Ai2Canvas Plugin

Why Use This Tool?

PROS VS. CONS

BENEFITS

DRAWBACKS

CHALLENGES

INNOVATIONS

 

2

WEB INTERACTION

& ANIMATION

INSTRUCTOR : ERIC SILVAY | STUDENT : AARON WILSON  |                  |  WEEK 2 VIDEO SCREENCAST PRESENTATION | AI2CANVAS PLUGIN

Ai2Canvas Plugin

PROS:

  • Rapid deployment of CANVAS artwork and animations
  • Direct JavaScript manipulation of AI layers
  • Plugin brings animation capabilities to Adobe Illustrator application
  • Adobe Illustrator acts as a visual guide to develop and render artwork & animation

2

WEB INTERACTION

& ANIMATION

INSTRUCTOR : ERIC SILVAY | STUDENT : AARON WILSON  |                  |  WEEK 2 VIDEO SCREENCAST PRESENTATION | AI2CANVAS PLUGIN

Ai2Canvas Plugin

CONS:

  • Limited use of JavaScript functions through the plugin
  • More intricate animations need direct manipulation of JavaScript file code
  • Code weight of output HTML file is heavy
  • From own review, child layers unfunctional

2

WEB INTERACTION

& ANIMATION

INSTRUCTOR : ERIC SILVAY | STUDENT : AARON WILSON  |                  |  WEEK 2 VIDEO SCREENCAST PRESENTATION | AI2CANVAS PLUGIN

Ai2Canvas Plugin

Why I Chose This Plugin:

  • It made me curious when I first saw it
  • The pure accuracy & functionality of it captivates me
  • If it would be as powerful as JavaScript canvas animations and functions itself
  • To see if it has a quick learning curve

2

WEB INTERACTION

& ANIMATION

INSTRUCTOR : ERIC SILVAY | STUDENT : AARON WILSON  |                  |  WEEK 2 VIDEO SCREENCAST PRESENTATION | AI2CANVAS PLUGIN

Ai2Canvas Plugin

WHO WOULD USE:

  • Developers looking for quick development of artwork with animation
  • Developers looking for an adequate solution to produce custom banner ads
  • ​Designers with minimal JavaScript Skills
  • AI users looking to add JS animation to projects

2

WEB INTERACTION

& ANIMATION

INSTRUCTOR : ERIC SILVAY | STUDENT : AARON WILSON  |                  |  WEEK 2 VIDEO SCREENCAST PRESENTATION | AI2CANVAS PLUGIN

Ai2Canvas Plugin

KEY FEATURES:

  • Animation features: Move, rotate, and scale
  • ​Timing features: easing & triggers
  • Event features: add minimal direct JavaScript code
  • Conversion of AI artwork & animation to CANVAS tag - HTML output file

2

WEB INTERACTION

& ANIMATION

INSTRUCTOR : ERIC SILVAY | STUDENT : AARON WILSON  |                  |  WEEK 2 VIDEO SCREENCAST PRESENTATION | AI2CANVAS PLUGIN

Ai2Canvas Plugin

LET'S DIVE IN:

Simple Artwork & Animation:

Watch Shapes Move & Rotate

Holiday Artwork & Animation:

It's Gobble Gobble Time!

2

WEB INTERACTION

& ANIMATION

INSTRUCTOR : ERIC SILVAY | STUDENT : AARON WILSON  |                  |  WEEK 2 VIDEO SCREENCAST PRESENTATION | AI2CANVAS PLUGIN

Ai2Canvas Plugin

CITATIONS & INFO:

  1. All Sample Artwork & Animations: Aaron Wilson
  2. All Plugin Info From Developer: Mike Swanson

Additional learning links:

Mike Swanson's  Tutorial

2

THANKS FOR WATCHING!