Tools for HTML5 Animation Kojima@CCU CSIE, 2013 13年6⽉月29⽇日星期六 

Outline HTML5 Animation Handmade samples Libraries WYSIWYG Tools 13年6⽉月29⽇日星期六 

HTML5 Animation HTML5 creating flash like animation CSS3 transition animation 13年6⽉月29⽇日星期六 

Handmade samples 3D NES controller http:/ /codepen.io/Dreamdealer/pen/Clutk CSS only 3d Macbook Air http:/ /codepen.io/neoberg/pen/istyp HTML5 Canvas Animation - Oscillation http:/ /jsfiddle.net/N8CVN/ 13年6⽉月29⽇日星期六 

Libraries 13年6⽉月29⽇日星期六 

KineticJS an HTML5 Canvas Javascript framework animations, transitions, node nesting, filtering, layering, caching, event handling for desktop and mobile applications Preview http:/ /jsfiddle.net/DxtAD/ 13年6⽉月29⽇日星期六 

Three.js a JavaScript 3D library provides , , CSS3D and WebGL renders Preview http:/ /jsfiddle.net/ksRyQ/ http:/ /ppt.cc/3mrZ (Textures) 13年6⽉月29⽇日星期六 

CreateJS a suite of JavaScript libraries & tools comprised of EaselJS, TweenJS, SoundJS, PreloadJS, and Zoë. Preview http:/ /ppt.cc/Reg5 (EaselJS) http:/ /ppt.cc/czrU (EaselJS+TweenJS) Recommendation CreateJS, ੽ Flash Ց Javascript - ৷ԈᎲ http:/ /blog.eddie.com.tw/2013/05/20/createjs-from-flash-to-javascript/ 13年6⽉月29⽇日星期六 

WYSIWYG Tools (What You See Is What You Get) 13年6⽉月29⽇日星期六 

Adobe Edge Animate CC Mac OS X / Windows Shareware (paid membership of Adobe CC) Robust Flash-like UI and more events control Code is clean and easy to tweak 13年6⽉月29⽇日星期六 

13年6⽉月29⽇日星期六 

Tumult Hype Mac OS X Only Shareware ($59.99) easy to integrate, lightweight code Preview 2012 ʕ͍༟ʈᐄၣ१ http:/ /www.cs.ccu.edu.tw/~cscamp/site2012/ 13年6⽉月29⽇日星期六 

13年6⽉月29⽇日星期六 

Sencha Animator Mac OS X / Windows / Linux Shareware ($99) cross-platform, well-documented 13年6⽉月29⽇日星期六 

13年6⽉月29⽇日星期六 

DEMO 13年6⽉月29⽇日星期六 

Review HTML5 Animation Canvas, CSS3 Handmade samples Libraries KineticJS, Three.js, CreateJS WYSIWYG Tools Adobe Edge Animate, Tumult Hype, Sencha Animator 13年6⽉月29⽇日星期六 

Any Questions? 13年6⽉月29⽇日星期六 

Thanks for listening! 13年6⽉月29⽇日星期六