Post on 23-Jun-2015
description
Kevin Cao Flash Designer, Developer Creative Technologist
Workflow Refactoring Flash Design + Develop �
Overview
• Principle
• Design in Flash
• Export Assets for Development
• Develop in FDT
• Conclusion
Workflow Refactoring • Workflow帮助沟通,但不能代替沟通。 • Workflow不能代替前期规划。 • Workflow是一个持续改进的过程。 • 借鉴软件开发的做法进行优化:Agile,TDD…。
Principle 好的制作流程应该做到:
• 表现层(视图)与应用层(逻辑)分离。 • 设计过程与开发过程可以独立地进行。 • 功能迭代。 • 便于排错与测试。 • 能够应对大多数需求修改。�
Project Folder Structure
/bin� 发布目录�
/build build.xml�
用于Ant发布的模板文件�
/fla � Flash源文件�
/lib� SWC类库和资源�
/src � ActionScript文件�
设计师�
程序员�
共享池�
Design in Flash
• Animation
• Visual asset
• Component skin
类绑定�
Design in Flash
Don’t do that.�
Design in Flash
• 尽可能少地在时间线上放置代码。
• 不要调用程序对象,而是发出事件。�
dispatchEvent(new Event(Event.COMPLETE));
Export Assets for Development • Export as SWF • Export as SWC
Export Assets for Development
Use SWF
SWC
• SWC文件包含各种资源(MC,Graphic,Sound…),和编译过的ActionScript代码。
• SWC通常用于打包组件和类库。 • Flash和Flex/FDT都可以导出SWC。 • SWC本质上就是一个包含SWF文件的压缩包。�
在发布面板里选择导出SWC。 默认与SWF放在相同的文件夹下。�
Export SWC in Flash
Use SWC
SWF vs. SWC
SWF� SWC�
运行时加载,资源更新无需重新编译主文件。�
资源编译到最终文件。�
需要额外的代码提供加载和提取类定义功能。�
强类型,方便代码提示和排错。�
Best Practice for Exporting Assets • 将SWF中的资源统一导出到assets包。
• 使用S前缀标识(代表Symbol),把ActionScript类和在Flash中导出的资源区分开。�
Develop in FDT • API • Component • Model/Service • Page/View • Mediator • Debug • Testing
Why using FDT ?
• 跨平台 • 支持代码模板和自动完成 • 完善的代码开发功能 • 更快的编译速度 • Debug & Profiler • Ant支持�
Debug & Profiler
• 设置断点 • 监视程序效能和内存占用
Testing
测试用的ActionScript文件�
Conclusion • The Good • The Bad • Solution • Examples
• 实现了设计和开发的工作完全独立进行。 • 更好的利用了FDT的代码编辑功能。 • mxmlc的高级编译功能和更快的编译速度。 • 方便排错与测试。 • 方便版本管理。 • 代码更容易重用。 • 能够应付大多数修改需求�
The Good
• 只有程序员可以编译最终的文件,设计师没办法直观的看到最终效果。�
The Bad
• 提供设计和开发的基本规范和指南。 • 提供一个基于Flash IDE的测试环境,方便设计师进行效果测试。
• 利用JSFL和ANT进行自动化操作。 • 开发组件供设计师使用。
The Solution
Example #1
SimpleButton ?
MCButton ?
Example #1 Guideline / Standard
Example #1 Component
More Information: http://github.com/kyoji2/KafeComponent �
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));
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”); }
Demo…
Questions?
More on Gaia + RL
• http://kevincao.com/2010/09/robotgaia-update/ • http://kevincao.com/2010/03/workflow-further-thought/
Kevin Cao (@kyoji2) http://kevincao.com kevin@kevincao.com
Thank You !