Workflow Refactoring

34
Kevin Cao Flash Designer, Developer Creative Technologist

description

Flash website design + develop workflow.

Transcript of Workflow Refactoring

Page 1: Workflow Refactoring

Kevin Cao Flash Designer, Developer Creative Technologist

Page 2: Workflow Refactoring

Workflow Refactoring Flash Design + Develop �

Page 3: Workflow Refactoring

Overview

•  Principle

•  Design in Flash

•  Export Assets for Development

•  Develop in FDT

•  Conclusion

Page 4: Workflow Refactoring

Workflow Refactoring •  Workflow帮助沟通,但不能代替沟通。 •  Workflow不能代替前期规划。 •  Workflow是一个持续改进的过程。 •  借鉴软件开发的做法进行优化:Agile,TDD…。

Page 5: Workflow Refactoring

Principle 好的制作流程应该做到:

•  表现层(视图)与应用层(逻辑)分离。 •  设计过程与开发过程可以独立地进行。 •  功能迭代。 •  便于排错与测试。 •  能够应对大多数需求修改。�

Page 6: Workflow Refactoring

Project Folder Structure

/bin� 发布目录�

/build build.xml�

用于Ant发布的模板文件�

/fla � Flash源文件�

/lib� SWC类库和资源�

/src � ActionScript文件�

设计师�

程序员�

共享池�

Page 7: Workflow Refactoring

Design in Flash

•  Animation

•  Visual asset

•  Component skin

Page 8: Workflow Refactoring

类绑定�

Design in Flash

Don’t do that.�

Page 9: Workflow Refactoring

Design in Flash

•  尽可能少地在时间线上放置代码。

•  不要调用程序对象,而是发出事件。�

dispatchEvent(new Event(Event.COMPLETE));

Page 10: Workflow Refactoring

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

Page 11: Workflow Refactoring

Export Assets for Development

Page 12: Workflow Refactoring

Use SWF

Page 13: Workflow Refactoring

SWC

•  SWC文件包含各种资源(MC,Graphic,Sound…),和编译过的ActionScript代码。

•  SWC通常用于打包组件和类库。 •  Flash和Flex/FDT都可以导出SWC。 •  SWC本质上就是一个包含SWF文件的压缩包。�

Page 14: Workflow Refactoring

在发布面板里选择导出SWC。 默认与SWF放在相同的文件夹下。�

Export SWC in Flash

Page 15: Workflow Refactoring

Use SWC

Page 16: Workflow Refactoring

SWF vs. SWC

SWF� SWC�

运行时加载,资源更新无需重新编译主文件。�

资源编译到最终文件。�

需要额外的代码提供加载和提取类定义功能。�

强类型,方便代码提示和排错。�

Page 17: Workflow Refactoring

Best Practice for Exporting Assets •  将SWF中的资源统一导出到assets包。

•  使用S前缀标识(代表Symbol),把ActionScript类和在Flash中导出的资源区分开。�

Page 18: Workflow Refactoring

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

Page 19: Workflow Refactoring

Why using FDT ?

•  跨平台 •  支持代码模板和自动完成 •  完善的代码开发功能 •  更快的编译速度 •  Debug & Profiler •  Ant支持�

Page 20: Workflow Refactoring

Debug & Profiler

•  设置断点 •  监视程序效能和内存占用

Page 21: Workflow Refactoring

Testing

测试用的ActionScript文件�

Page 22: Workflow Refactoring

Conclusion •  The Good •  The Bad •  Solution •  Examples

Page 23: Workflow Refactoring

•  实现了设计和开发的工作完全独立进行。 •  更好的利用了FDT的代码编辑功能。 •  mxmlc的高级编译功能和更快的编译速度。 •  方便排错与测试。 •  方便版本管理。 •  代码更容易重用。 •  能够应付大多数修改需求�

The Good

Page 24: Workflow Refactoring

•  只有程序员可以编译最终的文件,设计师没办法直观的看到最终效果。�

The Bad

Page 25: Workflow Refactoring

•  提供设计和开发的基本规范和指南。 •  提供一个基于Flash IDE的测试环境,方便设计师进行效果测试。

•  利用JSFL和ANT进行自动化操作。 •  开发组件供设计师使用。

The Solution

Page 26: Workflow Refactoring

Example #1

SimpleButton ?

MCButton ?

Page 27: Workflow Refactoring

Example #1 Guideline / Standard

Page 28: Workflow Refactoring

Example #1 Component

More Information: http://github.com/kyoji2/KafeComponent �

Page 29: Workflow Refactoring

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));

Page 30: Workflow Refactoring

Example #2 Develop

More Information: http://www.bigspaceship.com/blog/labs/bss-actionscript-the-display-package https://github.com/bigspaceship/as3�

var myStandardInOut:StandardInOut = new StandardInOut(myMovieClip); myStandardInOut.addEventListener(AnimationEvent.IN, _onAnimateIn_handler); myStandardInOut.animateIn(); function _onAnimateIn_handler($evt:AnimationEvent) {

trace(“In Animation Complete”); }

Page 31: Workflow Refactoring

Demo…

Page 32: Workflow Refactoring

Questions?

Page 33: Workflow Refactoring

More on Gaia + RL

•  http://kevincao.com/2010/09/robotgaia-update/ •  http://kevincao.com/2010/03/workflow-further-thought/

Page 34: Workflow Refactoring

Kevin Cao (@kyoji2) http://kevincao.com [email protected]

Thank You !