LWF overview and adoption guide for new to LWF. This presentation is prepared for Open Hack day. http://yhacks.jp/hackday/conference

1. LWF 101
Hiroyuki Haga
GREE, CTO Office

2. Agenda
1. Issue that LWF will resolve.
2. LWF Overview
3. LWF Adoption

3. Issues

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. 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. 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. Common issue at engineering part 4
• “The exports know best.” is fact.
• I’m a not artist. I’m an engineer.

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. 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. LWF Overview

11. LWF Overview Issue Overview Adoption
LWF is an open source, 2D user-interface and 2D
animation framework
that enables to extract “art and UI design” part perfectly.

12. LWF Overview cont. Issue Overview Adoption
LWF framework affords artists to create 2D user-
interface and 2D animation contents in FLASH format for
both HTML5 and Unity application.
LWF framework affords you to focus on engineering part
only.
LWF framework makes you happy.

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. So… Issue Overview Adoption
• HELP! We need FLASH artists!

15. LWF Overview .. Issue Overview Adoption
• Main Promise：
A FLASH artist is in your team.
• Benefits:
“The exports know best”

16. LWF Adoption

17. LWF Adoption Issue Overview Adoption
• For engineer
• For artist
• For committer

18. LWF package overview Issue Overview Adoption
• https://github.com/gree/lwf 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. 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.
• https://github.com/gree/lwfs
LWF preview environment “LWFS”
Resource
files
Flash script for LWF LWF player
Converter
publishing SWF for Browser
(Ruby) (Javascript)
(JSFL)
PNG
PNG

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. For engineer Issue Overview Adoption
1. 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. Demo Issue Overview Adoption

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
http://github.com/gree/lwfs
• Preview your flash animation file by using LWFS.

24. Demo Issue Overview Adoption

25. For committer
• Read Kazuki’s presentation about implementation
http://gree.github.com/lwf/presentation20121115
• Fork http://github.com/gree/lwf
• Send pull request to http://github.com/gree/lwf

26. Demo Issue Overview Adoption

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. 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.”