21.1.使用Flex组件工具包创建组件
21.1.1.问题
我想把Flash IDE中的创作的内容用到Flex程序中。
21.1.2.解决方案
在Flash CS3 IDE中安装Flex组件工具包（Flex Component Kit）。然后创建一个元件，并使用[转换成Flex组件]命令把它转换成组件。最后把影片发布成SWC，添加到Flex项目中就可以了。
21.1.3.讨论
你可以使用SWFLoader类或者flash.loader类把Flash的内容加载到Flex应用程序中。把它们加载到应用程序中后就可以控制它们了，但是使用Flex组件工具包会更加容易些。Flex组件工具包简化了把Flash IDE中创建的内容加载到Flex应用程序中的流程。
首先，从Adobe网站下载Flex组件工具包。在本书编写时，可以从http://www.adobe.com/cfusion/entitlement/index.cfm?e=flex%5Fskins处下载组件工具包。点击运行FlexComponentKit.mxp，就可以把Flex组件工具包安装到Flash IDE中了。要测试这个工具包，创建一个MovieClip元件，然后选择[元件转换成Flex组件]命令把元件转换成Flex中可以使用的UIMovieClip。比如在图21-1中，创建了一个名为Cloud的元件，并把它转换成Flex组件。
图21-1.把元件转换成Flex组件
由于所有的Flex程序默认以每秒24帧的速度运行，所以Flash IDE会显示一个对话框询问是否要把元件转换成24fps。(图21-2)
图21-2.把文档的帧频调成跟应用程序一样
把组件文档的帧频设置成跟你的Flex应用程序的帧频一样。
当发布工程的时候，会生成一个SWC文件（默认是在跟FLA文件同一目录下——参照图21-3），你可以在Flex Build Path菜单中把它添加到Flex应用程序库路径中。
图21-3.把SWC添加到构建路径中
现在，Flash中创建的组件就可以像下面这样用到Flex中：代码：
当这个组件第一次被导出时，Flash自动为他创建一个类。以后想要扩展这个组件时，你可能想在Cloud类上添加代码。但是自动生成的类是不能编辑的，所以，需要扩展UIMovieClip创建一个新的Cloud类，并保存为FLA文件。然后打开库中这个影片剪辑的链接属性，点击类输入框后面的验证标志（就是那个对号）。如果你把类和FLA文件放在一起，它会提示你类找到了。如果在基类框中有mx.flash.UIMovieClip，记得要把它清除，因为基类需要是对真实类的引用。把它替换成默认的flash.display.MovieClip。
在Flash中重新编译这个SWC后，你可以在Flex中调用这些方法：：
这个技术让你认识到使用Flex框架之后Flash IDE在设计方面可以发挥更多的用处，并使得设计者和开发者在一个项目中更加紧密的结合在一起。
我想把Flash IDE中的创作的内容用到Flex程序中。
21.1.2.解决方案
在Flash CS3 IDE中安装Flex组件工具包（Flex Component Kit）。然后创建一个元件，并使用[转换成Flex组件]命令把它转换成组件。最后把影片发布成SWC，添加到Flex项目中就可以了。
21.1.3.讨论
你可以使用SWFLoader类或者flash.loader类把Flash的内容加载到Flex应用程序中。把它们加载到应用程序中后就可以控制它们了，但是使用Flex组件工具包会更加容易些。Flex组件工具包简化了把Flash IDE中创建的内容加载到Flex应用程序中的流程。
首先，从Adobe网站下载Flex组件工具包。在本书编写时，可以从http://www.adobe.com/cfusion/entitlement/index.cfm?e=flex%5Fskins处下载组件工具包。点击运行FlexComponentKit.mxp，就可以把Flex组件工具包安装到Flash IDE中了。要测试这个工具包，创建一个MovieClip元件，然后选择[元件转换成Flex组件]命令把元件转换成Flex中可以使用的UIMovieClip。比如在图21-1中，创建了一个名为Cloud的元件，并把它转换成Flex组件。
图21-1.把元件转换成Flex组件
由于所有的Flex程序默认以每秒24帧的速度运行，所以Flash IDE会显示一个对话框询问是否要把元件转换成24fps。(图21-2)
图21-2.把文档的帧频调成跟应用程序一样
把组件文档的帧频设置成跟你的Flex应用程序的帧频一样。
当发布工程的时候，会生成一个SWC文件（默认是在跟FLA文件同一目录下——参照图21-3），你可以在Flex Build Path菜单中把它添加到Flex应用程序库路径中。
图21-3.把SWC添加到构建路径中
现在，Flash中创建的组件就可以像下面这样用到Flex中：代码：
+展开
-XML
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute" xmlns:local="*" doubleClickEnabled="true">
<local:Cloud height="200" width="400"/>
</mx:Application>
layout="absolute" xmlns:local="*" doubleClickEnabled="true">
<local:Cloud height="200" width="400"/>
</mx:Application>
当这个组件第一次被导出时，Flash自动为他创建一个类。以后想要扩展这个组件时，你可能想在Cloud类上添加代码。但是自动生成的类是不能编辑的，所以，需要扩展UIMovieClip创建一个新的Cloud类，并保存为FLA文件。然后打开库中这个影片剪辑的链接属性，点击类输入框后面的验证标志（就是那个对号）。如果你把类和FLA文件放在一起，它会提示你类找到了。如果在基类框中有mx.flash.UIMovieClip，记得要把它清除，因为基类需要是对真实类的引用。把它替换成默认的flash.display.MovieClip。
+展开
-ActionScript
package
{
import flash.display.MovieClip;
import mx.flash.UIMovieClip;
public class Cloud extends UIMovieClip {
public function growCloud(value:int):void {
this.scaleX *= value;
this.scaleY *= value;
}
public function darkenCloud(value:int):void
{
trace('darken');
//create custom filters and darken the cloud image
}
public function lightenCloud(value:int):void {
trace('lighten');
//create custom filters and lighten the cloud image
}
}
}
{
import flash.display.MovieClip;
import mx.flash.UIMovieClip;
public class Cloud extends UIMovieClip {
public function growCloud(value:int):void {
this.scaleX *= value;
this.scaleY *= value;
}
public function darkenCloud(value:int):void
{
trace('darken');
//create custom filters and darken the cloud image
}
public function lightenCloud(value:int):void {
trace('lighten');
//create custom filters and lighten the cloud image
}
}
}
在Flash中重新编译这个SWC后，你可以在Flex中调用这些方法：：
+展开
-XML
<local:Cloud height="200" width="400" id="cloud" click="{cloud.lightenCloud(1)}"
doubleClick="{cloud.darkenCloud(1)}"/>
doubleClick="{cloud.darkenCloud(1)}"/>
这个技术让你认识到使用Flex框架之后Flash IDE在设计方面可以发挥更多的用处，并使得设计者和开发者在一个项目中更加紧密的结合在一起。
加支付宝好友偷能量挖...
