用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,这个逻辑是在文档类中添加的。代码如下
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中,有如下代码:
查看flex的源码,里面没有任何内容,只有一个对flash文件所在目录的引用。这个project的作用,仅在于用flex编写actionscript。用flash编码太不方便了,用flex可以显著提高开发效率。由于是用flex编码,对于没有用到的引用,如
错误显示代码行为0,这个错误提示对程序员调试没有任何意义。
总结一下,编码与设计分离对设计师和程序员的要求:
一,对于设计师,在主场景中和复杂的影片剪辑中,所有非静态的,有行为的影片剪辑都要有一个英文名称。
二, 对于设计师,一个影片剪辑只做一件事情或一组相关的事情。
三,对于程序员,用文档类绑定flash主场景,自定义类绑定flash中有行为的影片剪辑。
编码与设计完全分离是一个理想状态,它要求程序员对面向对象开发的思想有深入的了解;同时也要求设计师洞悉协作开发的原理 ,并具有把复杂的影片剪辑化繁为简,化整为零的能力。 需要设计师与程序员有一个磨合的进程,彼此都了解对方的开发习惯之后,协作会更加容易些。
程序员未必要做出精美的创意和设计,但却要可以拿出一个框架来。设计师未必要会编写AS代码,但也要了解程序员的用意。程序员在这里的角色,不单是actionscript programmer,更多的是一个前端分析架构师的角色。