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:

Additional learning links:

Mike Swanson's  Tutorial

2

THANKS FOR WATCHING!