flex与flash 结合应用简单范例

    前不久在与人交流中，谈到一个话题，如何将Flash酷炫的效果与Flex结合到一起，使用户体验更好。为此，进行了一下尝试，基本达到了目的。在此整理如下。

工具：Adobe Flash Professional CS5 （这个不用说了吧），Flash Builder 4 Plug-in，两个必备工具。

在开始之前，我先说一下思路，其实很简单，就是用Flash 制作动画效果，发布成Ｓｗｃ原件，然后在Flash Builder工程中引入并使用这个原件。

好了，下面看是第一步，使用Ｆｌａｓｈ制作并发布一个简单的原件。嗯，做个什么呢，就做一个小风机吧，为了演示动画效果，风叶我们制作为旋转的。如果不会用ｆｌａｓｈ，可以先网上充充电，还是很简单的。

１、打开flash ，我们新建一个影片剪辑，命名为：WindTurbine，并制作一个旋转的风机。

如图：

 

2、

使用快捷键Ctrl + L,　调出库面板，选中刚刚建立的WindTurbine原件，点击“命令”--“将原件转换为Flex组件”，结果如图：

这时，会有相关的输出提示，说明WindTurbine原件已经成功转换为Flex组件。并按照提示，选择文件>发布。

这样我们会在源文件同级目录下， 看到与flash源文件同名的swc文件。(说明：我的源文件命名为normal，诸位可以根据自己喜好命名)

到此，我们已经将动画组件做好了，如果你有更好的创意或更高的动画制作水平，你可以制作出更绚丽的效果组件。

 

3、打开Flash Builder 4，新建一个工程，在工程文件夹上右键——“属性”，在弹出窗口左面选择“Flex构建路径”，在右边点击“添加SWC”按钮

    找到刚刚发布的normal.swc,点击“确定”按钮，等待工程编译。如图：

 

4、在Flash Builder中的代码实现

针对此例子简单说明下：在应用的creationComplete事件方法中，实例化此对象，并将此对象添加到应用中的显示容器中。

主要代码如下：

protected function application_creationCompleteHandler(event:FlexEvent):void
{

　　var wt:windTrubine = new windTrubine();
　　wt.x = 30;
　　wt.y = 40;
　　this.bc.addElement(wt);

}

<s:BorderContainer id = "bc" x="0" y="0" width="100%" height="100%" ></s:BorderContainer>

 

5、运行程序，你会在浏览器中看到一个旋转的绿色小风机，如图

到此，一个最基本的采用flash制作动画组件并在flex中引用的例子就完成了。当然，由简入深，结合自定义组件，我们可以做出更多的效果。