Flash website design + develop workflow.

1. Kevin Cao
Flash Designer, Developer
Creative Technologist

2. Workflow Refactoring
Flash Design + Develop

3. Overview
• Principle
• Design in Flash
• Export Assets for Development
• Develop in FDT
• Conclusion

4. Workflow Refactoring
• Workflow
• Workflow
• Workflow
• Agile TDD…

5. Principle
•
•
•
•
•

6. Project Folder Structure
/bin
/build Ant
build.xml
/fla Flash
/lib SWC
/src ActionScript

7. Design in Flash
• Animation
• Visual asset
• Component skin

8. Design in Flash
Don’t do that.

9. Design in Flash
•
•
dispatchEvent(new Event(Event.COMPLETE));

10. Export Assets for Development
• Export as SWF
• Export as SWC

11. Export Assets for Development

12. Use SWF

13. SWC
• SWC MC Graphic Sound…
ActionScript
• SWC
• Flash Flex/FDT SWC
• SWC SWF

14. Export SWC in Flash
SWC
SWF

15. Use SWC

16. SWF vs. SWC
SWF SWC

17. Best Practice for Exporting Assets
• SWF assets
• S Symbol ActionScript
Flash

18. Develop in FDT
• API
• Component
• Model/Service
• Page/View
• Mediator
• Debug
• Testing

19. Why using FDT ?
•
•
•
•
• Debug & Profiler
• Ant

20. Debug & Profiler
•
•

21. Testing
ActionScript

22. Conclusion
• The Good
• The Bad
• Solution
• Examples

23. The Good
•
• FDT
• mxmlc
•
•
•
•

24. The Bad
•

25. The Solution
•
• Flash IDE
• JSFL ANT
•

26. Example #1
SimpleButton ?
MCButton ?

27. Example #1
Guideline / Standard

28. Example #1
Component
More Information: http://github.com/kyoji2/KafeComponent

29. Example #2
Design
dispatchEvent(new AnimationEvent(AnimationEvent.IN_START));
dispatchEvent(new AnimationEvent(AnimationEvent.IN));
dispatchEvent(new AnimationEvent(AnimationEvent.OUT_START));
dispatchEvent(new AnimationEvent(AnimationEvent.OUT));

30. Example #2
Develop
var myStandardInOut:StandardInOut = new StandardInOut(myMovieClip);
myStandardInOut.addEventListener(AnimationEvent.IN, _onAnimateIn_handler);
myStandardInOut.animateIn();
function _onAnimateIn_handler($evt:AnimationEvent)
{
trace(“In Animation Complete”);
}
More Information:
http://www.bigspaceship.com/blog/labs/bss-actionscript-the-display-package
https://github.com/bigspaceship/as3

31. Demo…

32. Questions?

33. More on Gaia + RL
• http://kevincao.com/2010/09/robotgaia-update/
• http://kevincao.com/2010/03/workflow-further-thought/

34. Thank You !
Kevin Cao (@kyoji2)
http://kevincao.com
kevin@kevincao.com