Flex

2015年12月22日

2015年12月25日添加FlexBuilder

1 目标：使HTML能够调用Flash的显示功能。

2 原理：使用Flex编写与HTML相似的页面，调用Flash的功能，然后编译为SWF，并将SWF嵌入HTML。在浏览器嵌入AdobeFlashPlayer解析Flash（.swf）。

HTML模拟：MXML页面。

JavaScript模拟：ActionScript。

编译器：FlexBuilder。

SWF播放器：AdobeFlashPlayer。

SWF调试器：AdobeFlashPlayer（Debug版）（官网下载）。

3 流程：编写页面，编译为含SWF的HTML，在浏览器调用。

3.1 新建Flex项目

3.2 新建页面：项目右键-》新建-》MXML应用程序。

新建Demo.xml

3.3 编写页面：修改Demo.xml

//Demo.xml

<?xmlversion="1.0" encoding="utf-8"?>

<s:Applicationxmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:s="library://ns.adobe.com/flex/spark"

xmlns:mx="library://ns.adobe.com/flex/mx"

minWidth="955"minHeight="600" viewSourceURL="srcview/index.html">

<fx:Declarations>

</fx:Declarations>

<s:Label x="201" y="177" fontSize="24"text="Hello,World"/>

</s:Application>

3.4 编译，运行

4 方法:MXML

参考：http://www.iteye.com/topic/204923

4.1 目标：页面框架，组织各种可视化程序与逻辑脚本。

4.2 原理：XML。将会被编译为SWF。

4.3 方法：语法和组织结构

4.3.1语法：与HTML相似

详见：http://www.voidcn.com/article/p-voshsvia-ch.html

文件名、变量：遵守AS命名规则（文件将被编译为AS的一个类），区分大小写，必须以字母或下划线开始，且只能包含字母、数字和下划线。

不能命名为application ，application是主程序文件的默认标记，不可再使用。

程序不能使用“mx”做为目录名，mx 是官方组件库的命名空间。

命名空间：FLEXSDK根标签fx，旧版可视化组件mx，新版可视化组件s。

注释： <!- -注释 -->

插入AS文件：

<mx:Scriptsource="my.as"/>

插入AS块：<fx:Script>

<fx:Script>

4.3.2组织结构

根节点Application

-|各种组件

-|脚本

<![CDATA[

AS代码

]]>

</fx:Script>

5 方法：ActionScript

参考：http://www.blogjava.net/freeman1984/archive/2011/10/09/360290.html

http://blessht.iteye.com/blog/1130171

5.1 语法：遵守ECMAScript，但与JavaScript不同,参考Java。

变量：格式=var 变量名：类型。

varname:String="xx";

函数：格式=作用范围 function 名称（参数）：返回值。

注释：//单行，/*多行*/

事件：

创建完成：createComplete。

打印：trace(str)。

5.2 示例：Label，Button，消息框

参考：http://blessht.iteye.com/blog/1108623

//Demo.mxml

<?xmlversion="1.0" encoding="utf-8"?>

<s:Applicationxmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:s="library://ns.adobe.com/flex/spark"

xmlns:mx="library://ns.adobe.com/flex/mx"minWidth="955" minHeight="600">

<fx:Declarations>

</fx:Declarations>

<s:Labeltext="HelloWorld"/>

<s:Buttonclick="btn(event)" label="Btn" x="0"y="100"/>

<fx:Script>

<![CDATA[

import mx.controls.Alert;

public function btn(event:MouseEvent):void{

Alert.show("Hello,Btn");

}

]]>

</fx:Script>

</s:Application>

6 方法：FlexBuilder4.7

6.1 修改编译错误：无法打开 playerglobal.swc 11.2

参考：https://github.com/mangui/flashls/issues/318

默认的FlexBuilder4.7使用11.1的swc，需要下载11.2版本（下载地址https://helpx.adobe.com/flash-player/kb/archived-flash-player-versions.html，版本真是又多又乱）。

下载后copy到：安装目录\sdks\4.6.0\frameworks\libs\player\11.2，改名为playerglobal.swc。

6.2 同一项目所有模块共同编译运行

指定所有模块输出路径为相同的路径。

Flex