Fitc Amsterdam 2010

2,554 views

Published on

introduction to wonderfl.net - build flash online -

Published in: Technology
  • Be the first to comment

Fitc Amsterdam 2010

  1. 1. wonder fl .net Feb 22 , 2010 FITC Amsterdam
  2. 2. Me 大塚 雅和 Masakazu Ohtsuka (mash) Twitter: @maaash Software Engineer @ KAYAC Inc.
  3. 3. Do you know wonderfl.net ? Question:
  4. 4. wonderfl is an online service…
  5. 5. wonderfl is an online service… ・ Build a Flash
  6. 6. wonderfl is an online service… ・ Build a Flash ・ Free
  7. 7. wonderfl is an online service… ・ Build a Flash ・ Free ・ Share/ Community
  8. 8. wonderfl is an online service… ・ Build a Flash ・ Free ・ Share/ Community ・ more
  9. 9. DEMO
  10. 10. Everybody here Create Flash? Question:
  11. 11. For people who haven’t: Start today, It’s easy. You only need to click ONCE to create your 1 st Flash .
  12. 12. skill Beginner ? Middle? Pro? Question: How good are you?
  13. 13. wonderfl.net Is for ALL of you .
  14. 14. Beginners say: “ I want to do something, But how? ”
  15. 15. Explore wonderfl http://wonderfl.net/codes http://wonderfl.net/tags
  16. 16. There are MANY WORKING Samples 50,000 Feb/2010
  17. 17. Cool graphics http://wonderfl.net/tag/graphics My favorite ① :
  18. 18. http://wonderfl.net/code/b8ec2e7155357ddc65d21eb8b1fa2e94c8363cfc My favorite ① :
  19. 19. particles http://wonderfl.net/tag/particle My favorite ② :
  20. 20. http://wonderfl.net/code/6efe4c0d9b5e27e91db92b1175409f31e7005dca My favorite ② :
  21. 21. 3D http://wonderfl.net/tag/3d My favorite ③ :
  22. 22. http://wonderfl.net/code/d79cd85845773958620f42cb3e6cb363c2020c73 My favorite ③ :
  23. 23. http://wonderfl.net/code/3e921a9e3eeedb891c2c09ca7792d77a94e6be7e My favorite ③ :
  24. 24. Sound Generation http://wonderfl.net/tag/sound My favorite ④ :
  25. 25. http://wonderfl.net/code/ce10335ea45949194f7b26b2a7906faf1860037d My favorite ④ :
  26. 26. http://wonderfl.net/code/a61ade6375f452e6dbcc873f241652ef0f80bb96 My favorite ④ :
  27. 27. GAMES http://wonderfl.net/tag/game My favorite ⑤ :
  28. 28. http://wonderfl.net/code/e3ad9058e4ee2e00d7ff7a40e806e7ed82fdb0ef My favorite ⑤ :
  29. 29. We have working examples for EVERYTHING Flash can do (with Actionscript3)
  30. 30. Want to do something? READ CODE, THERE ’ S A LOT
  31. 31. When learning, Reading < Writing ↓ FORK IT
  32. 32. FORK DEMO
  33. 33. Remember when you started your 1 st programming language, wasn’t your 1 st step like this: ・ Copy&Paste samples ・ modify it ・ see if it works
  34. 34. Got a problem? Ask the community! Tag your code “ question ” ↓ Someone will fork your code and fix it.
  35. 35. Community features Found GOOD people? Follow them to get notices of their actions :  ・ write code, fork code  ・ follow somebody  ・ add code to favorite
  36. 36. Community features Found GOOD code? Add to Favorites to stock them
  37. 37. <ul><li>Study Flash/Actionscript3, </li></ul><ul><li>The wonderfl way. </li></ul><ul><li>watch the code ranking (rss) </li></ul><ul><li>watch your following users actions (rss) </li></ul><ul><li>find something cool? </li></ul><ul><li>read it, fork it and understand </li></ul><ul><li>add it to favorites </li></ul><ul><li>follow the author in wonderfl </li></ul><ul><li>back to 1. </li></ul>
  38. 38. Beginner ↓ Middle class
  39. 39. Middle class: “ How can I make this done easily?” (looking for a nice library, or samples)
  40. 40. <ul><li>Question: </li></ul><ul><li>What libraries do you use? </li></ul><ul><li>Tweener? </li></ul><ul><li>PV3D? </li></ul><ul><li>Box2D? </li></ul>
  41. 41. Yes, you can use these libraries in wonderfl.net Just import it in the code.
  42. 42. Supported libraries http://wonderfl.net/libraries as3corelib, Tweener , TweenLite, TweenMax tweensy , BetweenAS3, Progression, Thread, Frocessing, Stats, Papervision3D , Sandy 3D Engine, Alternativa3D , as3ds, Box2D , jiglibflash, swfassist, Flash Camouflage, minimalcomps, Union Reactor, SiON, Stardust, Funnel, Modest Maps, Google Maps, UMap AS3, FeliCa SDK, KitchenSync, QuickBox2D
  43. 43. Fastest when you want samples http://www.google.com/search?q=papervision3d http://wonderfl.net/search?q=papervision3d
  44. 44. <ul><li>The samples: </li></ul><ul><li>Just WORK </li></ul><ul><li>Complete source code </li></ul><ul><li>Easy to modify(Fork) </li></ul><ul><li>Download-able </li></ul><ul><li>License clear </li></ul>
  45. 45. Middle class ↓ Pro
  46. 46. Pro: write nice libraries (share knowledge, get famous!) You want: ・ many people to use it? ・ beta testers? ・ feed back?
  47. 47. Add the library to wonderfl (send your swc to me!) Tring a new library is EASY For 10,000 over users posting 300+ codes/day
  48. 48. wonderfl is THE BEST place to share as3 code.
  49. 49. Pro: write books! Cool idea of actionscriptbible by Roger Braunstein http://wonderfl.net/user/actionscriptbible
  50. 50. Pro: talk at FITC! I wish if all the samples in the talks were at wonderfl.net so we can play with it easily.
  51. 51. Everybody: have fun Creating Flash and sharing it is JUST FUN
  52. 52. Collaborate by FORKing   example: Gradius game
  53. 53. http://wonderfl.net/code/23552f1d7a0805e6a44c812715e89bf6b520e346 http://wonderfl.net/code/6e076415a6d24cbe1c1ce65fb5db5fc9284e9c10 http://wonderfl.net/code/aa66ffdabd0d60b9b0f78bc98d35054860212703 http://wonderfl.net/code/685b39a67b560fd762e25fb805c7cb30780efb78 http://wonderfl.net/code/e40b7ab8221ba0b85632726091fc9211c5f503c4 Collaboration example:
  54. 54. wonderfl is an online service… ・ Build a Flash ・ Free ・ Share/ Community ・ more
  55. 55. wonderfl.net /live Flash LIVE Coding
  56. 56. Code Editor wonderfl Server Code Viewer Code Viewer Code Viewer Sync every edit
  57. 57. DEMO
  58. 58. <ul><li>Adding more features in /live soon. </li></ul><ul><li>Text Chat </li></ul><ul><li>Live coding with your favorite editor </li></ul>
  59. 59. wonderfl isn’t it? that’s it!
  60. 60. Thank you. http://wonderfl. net/ Twitter: @maaash Email: wonderfl@kayac.com Questions?

×