Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

LWF 101 for Open Hack Day

2.820 visualizaciones

Publicado el

LWF overview and adoption guide for new to LWF.
This presentation is prepared for Open Hack day.

Publicado en: Tecnología
  • Inicia sesión para ver los comentarios

LWF 101 for Open Hack Day

  1. 1. LWF 101 Hiroyuki HagaGREE, CTO Office
  2. 2. Agenda1. Issue that LWF will resolve.2. LWF Overview3. LWF Adoption
  3. 3. Issues
  4. 4. Common issue at engineering part 1 “Sealed package”• Because the look-and-feel was poor, users don’t want to try core-features of the your service that you’ve done very well. It’s too difficult for me to try..
  5. 5. Common issue at engineering part 2 “Package is also big part of application”• Users started to use and respect the your service and core-features when the look-and-feels was improved even if you didn’t apply any modifications to core- features. Great service!
  6. 6. Common issue at engineering part 3• By the way, I have evaluated goodness of core- features based on look-and-feel in some cases. Wow! I “Looks” great service!
  7. 7. Common issue at engineering part 4• “The exports know best.” is fact.• I’m a not artist. I’m an engineer.
  8. 8. Common(?) issue at engineering part 5• I had to reproduce Flash animation’s behaviors by using platform specific scripts manually. Platform specific Convert manually xD scripts
  9. 9. Issues Issue Overview Adoption• Prevent a “sealed application”.• Look-and-feel is also big part of application• I’m feeling confidence about core-mechanics, problem is looks.• Better leave it to a specialist• “I just want to play FLASH animation on ****** platform!!!”
  10. 10. LWF Overview
  11. 11. LWF Overview Issue Overview AdoptionLWF is an open source, 2D user-interface and 2Danimation frameworkthat enables to extract “art and UI design” part perfectly.
  12. 12. LWF Overview cont. Issue Overview AdoptionLWF framework affords artists to create 2D user-interface and 2D animation contents in FLASH format forboth HTML5 and Unity application.LWF framework affords you to focus on engineering partonly.LWF framework makes you happy.
  13. 13. LWF Overview Issue Overview Adoption• What you don’t need to do are… • Tweak position of text or image by yourselves. • Control tween animation by yourselves. • Control complex UI events such as firing an “pushed” animation after playing specific animation on button is pressed. • Boring tasks such as loading images for playing animation…• What you need to do are… • Find a nice FLASH artist • Under stand LWF’s limitation • Convert FLASH animation by using LWF’s converter
  14. 14. So… Issue Overview Adoption• HELP! We need FLASH artists!
  15. 15. LWF Overview .. Issue Overview Adoption• Main Promise: A FLASH artist is in your team.• Benefits: “The exports know best”
  16. 16. LWF Adoption
  17. 17. LWF Adoption Issue Overview Adoption• For engineer• For artist• For committer
  18. 18. LWF package overview Issue Overview Adoption • package includes: • JSFL Flash script that publishes scene into LWF preferred SWF file. • Converter that generates LWF file and images from the given SWF file. • Javascript LWF player that works on browser • C# LWF player that works in the Unity Resource LWF player files for Browser (Javascript)Flash script for LWF Converter publishing SWF (Ruby) (JSFL) LWF player PNG PNG for Unity (C#)
  19. 19. LWFS Issue Overview Adoption • Production ready LWF preview environment for Windows and Mac OSX • Automated installation process for smooth adoption • Prompt iteration by automated convert and deploy. • LWF preview environment “LWFS” Resource filesFlash script for LWF LWF player Converter publishing SWF for Browser (Ruby) (Javascript) (JSFL) PNG PNG
  20. 20. LWF package in detail Issue Overview Adoption• LWF package contains variety of options that are required in production use for maximize rendering performance and productivity. js LWF player Resource Flash script for SWF Converter for Browser files (Javascript publishing (Ruby) (JSFL) ) LWF PNG PNG LWF player for Unity PNG (C#) Json(LWF doesn’t include this) Sprite Atlas generator like Texture Packer.
  21. 21. For engineer Issue Overview Adoption1. Source a “lwf.js” in the header of html.2. Initialize LWF instance with specified resource files.3. Joy… 1. Play FLASH animation 2. Jump to Label in FLASH animation 3. Implement function that will be called by button press event in FLASH animation.
  22. 22. Demo Issue Overview Adoption
  23. 23. For artist Issue Overview Adoption• Make a FLASH animation with movie clip by using key-framing only. Note that shape is not supported.• Add labels, that will be specified by engineer, to timeline.• Add actions, that will be specified by engineer, to button that will be fired after button-pressed-animation played. • For Javascript writer : Add view login javascript to /* js */• Download LWF previewer “LWFS” from• Preview your flash animation file by using LWFS.
  24. 24. Demo Issue Overview Adoption
  25. 25. For committer• Read Kazuki’s presentation about implementation• Fork• Send pull request to
  26. 26. Demo Issue Overview Adoption
  27. 27. LWF Adoption wrap-up Issue Overview Adoption• For engineer You can enjoy paradise after patient of adoption.• For artist You can enjoy paradise after patient of adoption.• For committer Let’s make paradise 
  28. 28. Wrap up• Look-and-feel is important also. Let’s make it “Better leave it to a specialist.”• LWF Framework enables “Better leave it to a specialist.”• By LWF adoption, enjoy “Better leave it to a specialist.”