用Flash cs3与flex 3让程序员与设计师分工协作以实现编码与设计分离的一种方法；

思路：Flash专注于UI设计，Flex实现AS脚本编写；方法：Flash里建立项目，组件界面设计在Flash完成，并且赋予唯一ID，组件关联到唯一的AS类文件；主场景也关联到一个AS类，用来进行整个场景的控制；所有的AS类文件存放到一个Package里（对应于一个目录）；Flex建立项目，项目里新建一个链接类型的目录，这个目录链接到Flash项目的Package目录，这样就可以直接在Fl

arshoon

1345人浏览 · 2008-05-16 10:18:00

arshoon · 2008-05-16 10:18:00 发布

思路：Flash专注于UI设计，Flex实现AS脚本编写；

方法：Flash里建立项目，组件界面设计在Flash完成，并且赋予唯一ID，组件关联到唯一的AS类文件；主场景也关联到一个AS类，用来进行整个场景的控制；所有的AS类文件存放到一个Package里（对应于一个目录）；

Flex建立项目，项目里新建一个链接类型的目录，这个目录链接到Flash项目的Package目录，这样就可以直接在Flex打开As文件进行编码工作了；

思考：这仍旧是种折衷的办法，Flex里导入的仍旧是flash.*组件，Flex很多mx.controls.*没用到，Flex是否可以找到完全替代Flash的方法？

下面有一篇基于这种思路的文章，转载过来和大家分享：

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

用Flash cs3与flex 3让程序员与设计师分工协作以实现编码与设计分离

实现编码与设计的好处是显而易见的：

一，代码易于维护与二次开发。所有AS代码以面向对象的思想在flash外部组织，用notepad即能打开。比起传统的as2分散于frame之间，以及更早的分散于影片与按纽之上，其优点好处不言而喻。

二，设计独立于代码之外。可以在没有程序员的清况下，修改程序（系统）的外观，亦可以新做一批theme；程序没有变，只是改改图片和排列位置，大小等，就可以迅速焕然一新。譬如，在春节时，加一些春节的时令元素进去，这将是一件很容易做的事情。

本实例演示如何让AS程序员与设计师使用Flex与flash协作开发，理想状态下，设计师只做设计，AS程序员只写代码，彼此修改自己的工作内容并不会影响对方或影响极低。在这个demo中，我们在flash文件中看不到一行ActionScript代码。
软件要求：Flash cs3 professional, Flex Builder 3 Professional

flex3与flashcs3协作开发之足球场demo.swf

flex3与flashcs3协作开发之足球场demo-flash-source-code

flex3与flashcs3协作开发之足球场demo-flex-source-code

继续阅读以下内容请先下载源码。

打开flash文件，点击空白区域，可以在属性面板中看到文档类已经指向了 com.pmggroup.ebiz.footballField.DocumentClass。在flash文件中，有两个影片剪辑实例： oneBall与txtBtn。这两个剪辑的名称需要在flash文件的属性面板中定义，而不能在文档类中定义，在DocumentClass有以下描述：

//不能这样定义：
//public var oneBall : Ball;
//public var txtBtn : TextButton;

当点击 txtBtn时，我们要改变足球的ToolTip，这个逻辑是在文档类中添加的。代码如下：

txtBtn.addEventListener(
MouseEvent.CLICK,
function(event : MouseEvent) : void {
trace(”try change tooltip outside.”);
footField.oneBall.toolTip = “modify football outside.”;
}
);

txtBtn并没有在文档类中定义，它是在flash文件中指定的。这便是对flash设计的第一个要求，所有非静态的，有行为的影片剪辑都要有一个英文名称。这条原则不单适应于主场景中，同样适用于影片剪辑中，打开库面板，footBallField是一个足球影片剪辑，它这个剪辑中，有一个 footBallProxy的实例，名为oneBall。

当拖动demo中的足球时，足球即滚动，释放鼠标时滚动停止。关于这个滚动的动画，它是单独在football元件时定义，它极其简单，只是在30 frame之内原地转动一圈。这便是对flash设计的第二个要求：影片剪辑设计要简单，一个影片剪辑只做一件事情或一组相关的事情。在一个影片剪辑的时间轴内只定义一个对象的动画，如果这个影片剪辑行为复杂，就把它分成几个小的影片剪辑，如footBallProxy。

flash文件中有一个textButton，这个元件的类绑定在 com.pmggroup.ebiz.footballField.TextButton.demo中有它，旨在说明对于按纽，要继承自 SimpleButton。在开发中，提倡所有元件都是MovieClip，均要继承自UIMovieClip。继承自UIMovieClip的用意在于可以在Flex中使用。

在footBallProxy这个元件中，有一个动态文本，动态文本对应的类是flash.text.TextField。这个元件添加一个动态文本框，旨在提醒程序员注意，如果在flash元件中使用了flash本身提供的组件，一定要在其元件的类中引入它。查看footBallProxy的绑定类com.pmggroup.ebiz.footballField.FootBallProxy中，有如下代码：

import flash.text.TextField;

查看flex的源码，里面没有任何内容，只有一个对flash文件所在目录的引用。这个project的作用，仅在于用flex编写actionscript。用flash编码太不方便了，用flex可以显著提高开发效率。由于是用flex编码，对于没有用到的引用，如

flash.text.TextField，在智能感知作用下，flex会将它自动清除，造成flash编译时出现如下错误：

1046: 找不到类型，或者它不是编译时常数: TextField。

错误显示代码行为0，这个错误提示对程序员调试没有任何意义。

总结一下，编码与设计分离对设计师和程序员的要求：

一，对于设计师，在主场景中和复杂的影片剪辑中，所有非静态的，有行为的影片剪辑都要有一个英文名称。

二，对于设计师，一个影片剪辑只做一件事情或一组相关的事情。

三，对于程序员，用文档类绑定flash主场景，自定义类绑定flash中有行为的影片剪辑。

编码与设计完全分离是一个理想状态，它要求程序员对面向对象开发的思想有深入的了解；同时也要求设计师洞悉协作开发的原理，并具有把复杂的影片剪辑化繁为简，化整为零的能力。需要设计师与程序员有一个磨合的进程，彼此都了解对方的开发习惯之后，协作会更加容易些。

程序员未必要做出精美的创意和设计，但却要可以拿出一个框架来。设计师未必要会编写AS代码，但也要了解程序员的用意。程序员在这里的角色，不单是actionscript programmer，更多的是一个前端分析架构师的角色。

在这里查看原始版本：http://blog.sban.com.cn/2008/03/20/flex3-flash-cs3-work-together-code-design-separate.html