Tools for HTML5 Animation

A71d39d7553c4a35b81642af73c7061b?s=47 Chaowen Chang
June 27, 2013
Technology
0
110

Tools for HTML5 Animation

A71d39d7553c4a35b81642af73c7061b?s=128

Chaowen Chang

June 27, 2013
Tweet

More Decks by Chaowen Chang

See All by Chaowen Chang
A71d39d7553c4a35b81642af73c7061b?s=48 kojima
0
36
A71d39d7553c4a35b81642af73c7061b?s=48 kojima
0
15
A71d39d7553c4a35b81642af73c7061b?s=48 kojima
0
16

Other Decks in Technology

See All in Technology
2ee165e506f59e3fe6f463bf7f150ccb?s=48 minamizaki
0
510
F3c727195d975cf7a4b300e4f5c2c0d1?s=48 am7cinnamon
2
2.6k
3bd2c1eac6c4d0852c6a788dd835db44?s=48 awsbelaraby
4
1k
D99b232749259de3083102b4b32199bc?s=48 ray_30cm_ns
0
270
9e7a653ed313b3da4b263a772bfc5026?s=48 clustervr
0
190
D7f27502ce4dfef29afae545df767b27?s=48 hsano
0
120
921515dc03f89bafe3d8f5d0b3ca0b74?s=48 mmarukaw
0
1.4k
1062ced7020a42219b8f668e14963746?s=48 asaju7142501
0
240
404139d782ec666acea93dffc86e089f?s=48 sylph01
0
160
53850955f15249a1a9dc49df6113e400?s=48 line_developers
PRO
0
1.7k
E39a62a5c1f1829cc6ce0ec642424947?s=48 cmwatanabeseigo
0
320
510ec964f5d26c2724c883fd7b671e3d?s=48 cygames
1
330

Featured

See All Featured
5f83ef806155b403c3393160ce51f955?s=48 jlugia
216
16k
9375a9529679f1b42b567a640d775e7d?s=48 schacon
145
6.6k
462dad0dd24c568a32dcdb0ae895ae1b?s=48 rasmusluckow
318
18k
A16eb159db895e3b01d3dc95767ad595?s=48 jonyablonski
14
1.1k
C620790ae5bf5b50c245b2e0ef95f338?s=48 deanohume
295
27k
E76911cbe088e5b850d966de3fc7435b?s=48 robhawkes
52
2.8k
E14f55d3f939977cecbf51b64ff6f861?s=48 keithpitt
401
20k
2bb923c57a1fdc3a2eb484bb8d565fd2?s=48 ufuk
56
5.4k
E195ae45320d9202eaa01c9f1d31a416?s=48 marktimemedia
6
330
D67fff74178013024d833b3eec6cf27f?s=48 lynnandtonic
270
16k
0fe2973fa8d27d96547e43322341183a?s=48 swwweet
206
6.8k
Af6a12710770ad9a7cfd08c97efd40d3?s=48 pedronauck
652
110k

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⽇日星期六