Tools for HTML5 Animation

Transcript

1. Tools for HTML5 Animation Kojima@CCU CSIE, 2013 13年6⽉月29⽇日星期六
2. Outline HTML5 Animation Handmade samples Libraries WYSIWYG Tools 13年6⽉月29⽇日星期六
3. HTML5 Animation HTML5 <canvas> creating flash like animation CSS3 transition animation 13年6⽉月29⽇日星期六
4. 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⽇日星期六
5. Libraries 13年6⽉月29⽇日星期六
6. 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⽇日星期六
7. Three.js a JavaScript 3D library provides <canvas>, <svg>, CSS3D and WebGL renders Preview http:/ /jsfiddle.net/ksRyQ/ http:/ /ppt.cc/3mrZ (Textures) 13年6⽉月29⽇日星期六
8. 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⽇日星期六
9. WYSIWYG Tools (What You See Is What You Get) 13年6⽉月29⽇日星期六
10. 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⽇日星期六
11. 13年6⽉月29⽇日星期六
12. 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. 13年6⽉月29⽇日星期六
14. Sencha Animator Mac OS X / Windows / Linux Shareware ($99) cross-platform, well-documented 13年6⽉月29⽇日星期六
15. 13年6⽉月29⽇日星期六
16. DEMO 13年6⽉月29⽇日星期六
17. Review HTML5 Animation Canvas, CSS3 Handmade samples Libraries KineticJS, Three.js, CreateJS WYSIWYG Tools Adobe Edge Animate, Tumult Hype, Sencha Animator 13年6⽉月29⽇日星期六
18. Any Questions? 13年6⽉月29⽇日星期六
19. Thanks for listening! 13年6⽉月29⽇日星期六