<?xml version="1.0" encoding="utf-8"?>
<s:Application
 xmlns:fx="http://ns.adobe.com/mxml/2009"
 xmlns:s="library://ns.adobe.com/flex/spark"
 xmlns:mx="library://ns.adobe.com/flex/mx">

	<fx:Style>
		@namespace s "library://ns.adobe.com/flex/spark";
		@namespace mx "library://ns.adobe.com/flex/mx";

		s|Button {
			color: #0000FF;
		}

		mx|Button {
			color: #FF0000;
		}

		.myStyle{
			font-style: italic;
		}
		#myId{
			font-size: 18;
		}
	</fx:Style>

	<s:Panel title="JuLabs.me Flex4 CSS Demo" styleName="myStyle" width="100%" height="100%">

		<s:layout>
			<s:VerticalLayout />
		</s:layout>

		<s:Button label="蓝色 spark 18号" id="myId" />

		<mx:Button label="红色 halo 斜体" styleName="myStyle" />

	</s:Panel>

</s:Application>

在此例中CSS代码写在fx:Style标签里，CSS代码首先要申明命名空间，如下：

@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";

上面的代码把s指向了Spark，把mx指向了Halo。然后就可以写相应的CSS代码了，但在每个样式前面也要加上命名空间名称，子选择符也要加上。如：

s|Button {
	color: #0000FF;
}
mx|Button {
	color: #FF0000;
}

上面的代码一个定义了Spark样式的蓝色Button，第二个定义了Halo样式的红色Button。如果在项目中只使用一种样式，那么也可以将这个样式定为默认样式。比如要将Spark定为默认样式，可以用下面的语句：

@namespace "library://ns.adobe.com/flex/spark";

这样，在写CSS样式时就不用在每个选择符前面加s|了。

如果是自定义的组件，可以用下面的语句：

@namespace theme “me.julabs.theme.*”;
theme|Button {
	padding-left: 20;
}

上面的代码把theme指向自己定义的组件，这样就可以用theme|引用自定义的组件了。

也完全可以使用组件的styleName和id属性来设置它们的样式，这样也不需要在选择符前面加s|之类的命名空间名称。如下：

.myStyle{
	font-style: italic;
}
#myId{
	font-size: 18;
}

这个例子里的CSS代码都是直接写在mxml文件中的fx:Style标签里的，这其实不符合大项目应用的。可以直接把CSS代码单独保存为一个文件，比如：style.css，用fx:Style的source属性来指向这个文件，这样就可以实现结构和样式分离的原则。如：

<fx:Style source="style.css" />

这是日本人建的一个网站，与众不同的是它直接展示源代码，旁边就显示效果，非常直观。这里有大量的人员发布他们的代码，有很多非常有创意的想法与技巧。

gotoAndLearn

这个网站不仅提供源文件下载，还会以视频的形式教授整个制做过程，是个难得可贵的教学网站。所教内容包括Flash，Flex以及AIR。

安装Flashbug也非常方便,不过要先给火狐安装FireBug插件，还得给火狐安装Debug版本的Flash播放器。

在实际操作中还要注意两点：

一、在编译生成swf文件时，要输出成debug版本的文件，如下命令：

D:\flex4\bin\mxmlc.exe -debug=true --strict=true main.mxml

注意里面-debug=true，加了这一段就能输出debug版本的swf文件。

二、要把生成的swf文件嵌入到HTML文件中，不能用浏览器直接打开swf文件，否则Flashbug会失效。

Flashbug的使用很简单，打开FireBug，切换到Flash Console标签，在Trace Log里就能看到在Flash文件中通过trace方法输出的信息，还能查看Shared Objects的信息。

但Flashbug只能输出字符串信息，当要输出类型为Object对象的信息时，它只会输出[object Object]。如果仍然想查看Object对象的信息，就要用到ActionScript中的ExternalInterface方法，通过这个方法来调用FireBug的console.log命令，输出对象的信息，这和调试JavaScript的方式是一样的。下面为实例代码：

var newObj:Object = new Object();
newObj.url = 'julabs.me';
flash.external.ExternalInterface.call("console.log",newObj);
flash.external.ExternalInterface.call("console.log",['aa','bbb','ccc']);

Flashbug一个非常有用的功能就是能够查看AMF信息，查看方法和AJAX的方法一样，在FireBug中切换到网络标签，在所有栏中查找Flash请求的地址。点击这个地址，你会发现下面多出了一个AMF标签，点击它就能查看AMF信息了。如下图所示：

另外还有一个基于FireBug的插件——FlashFirebug，功能更强大，但使用比较复杂。

flash.system.System.totalMemory

这个属性能够获得系统分给Flash Player的内存总数量，而不仅仅是此应用（application）所占用的内存数量。所以通过flash.system.System.totalMemory获得的数值会大于应用（application）所占用的内存数量。这里给出书中所举的例子：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" initialize="initTimer()">
	<mx:Script>
	<![CDATA[
		import flash.utils.Timer;
		import flash.events.TimerEvent;

		[Bindable]
		public var time:Number=0;

		[Bindable]
		public var totmem:Number=0;

		public function initTimer():void{

		var myTimer:Timer=new Timer(1000,0);
		myTimer.addEventListener("timer",timerHandler);
		myTimer.start();

		}

		public function timerHandler(event:TimerEvent):void{

		time=getTimer();
		totmem=flash.system.System.totalMemory;

		}

	]]>
	</mx:Script>

	<mx:Form>

	<mx:FormItem label="Time:">
		<mx:Label text="{time}" />
	</mx:FormItem>

	<mx:FormItem label="Total Memory:">
		<mx:Label text="{totmem} bytes" />
	</mx:FormItem>

	</mx:Form>
</mx:Application>

下载页面还提供样章试读，不过觉得没多大用，它的完整电子版可以从网上下载，搜下就可以了。

单个界面设计上就可以感受到设计人员对待作品的感情，界面设计地非常精细到位，细节把握地很好，没有敷衍之感。国人不应该仅仅学习他们的的设计技术，更应该学习他们的这种设计精神。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="initVars()">
<mx:Script>
<![CDATA[
	// Declare bindable properties in Application scope.
	[Bindable]
	public var myName:String;
	[Bindable]
	public var myHometown:String;

	// Assign values to new properties.
	private function initVars():void {
	myName = Application.application.parameters.myName;
	myHometown = Application.application.parameters.myHometown;
	}
]]>
</mx:Script>
<mx:VBox>
	<mx:HBox>
		<mx:Label text="Name: "/>
		<mx:Label text="{myName}" fontWeight="bold"/>
	</mx:HBox>
	<mx:HBox>
		<mx:Label text="Hometown: "/>
		<mx:Label text="{myHometown}" fontWeight="bold"/>
	</mx:HBox>
</mx:VBox>
</mx:Application>

下面是网页代码，可以看下效果：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" style="width:100%;height:100%;margin:0;padding:0;">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>julabs flex接收flashvar参数值</title>
</head>
<body style="width:100%;height:100%;margin:0;padding:0;">
<div style="width:100%;height:100%;margin:0;padding:0;">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,79,0"
width="100%"
height="100%"
id="FlashMovie"
align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="FlashVars" value="myName=julabs&amp;myHometown=china" />
<param name="movie" value="/blog/demo/getflashvarsinflex.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<embed src="/blog/demo/getflashvarsinflex.swf" FlashVars="myName=julabs&amp;myHometown=china" quality="high" bgcolor="#ffffff" width="100%" height="100%" NAME="FlashMovie" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" swLiveConnect="true" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</div>
</body>
</html>

其中需要注意的是如果你想在火狐和Opera中也能正常使用这项功能的话一定要在网页中的flash代码中使用“embed”标签，并且一定要在“embed”标签加入“FlashVars”参数的值，否则在火狐和Opera中就取得不到“FlashVars”所传递的值。当然用swfobject向Flash中写入“FlashVars”值是最简单的方法了，详细请查看《翻译：SWFOBJECT 2.0官方文档》。

一，在Flex中，addCallack所输出供给JS调用的函数名称不能与JS中己有的函数名称相重复，如下所示:

ExternalInterface.addCallback("play",callThis);

上面这一句在IE中就发生错误，因为“play”这个函数名称已经被分配给DOM元素了，改一个名字就可以了，如下就正确了。

ExternalInterface.addCallback("MyPlay",callThis);

二，在向页面中嵌入swf文件时，要用Adobe的官方JS文件或者版本为2.+的SWFOBJECT。

Adobe的官方JS文件就是AC_OETags.js文件,如果你用的是Flex SDK，可以在Flex SDK安装目录下的templates文件夹中找。在用AC_OETags.js文件时,请把下面这段代码加入到页面中:

function getMovie(movieName){
	if (navigator.appName.indexOf("Microsoft")!=-1){
		return window[movieName];
	}else{
		return document[movieName];
	}
}

用下面的代码调用Flex中的命令:

getMovie('MyFlex').MyPlay();

如果使用的是SWFOBJECT，请使用2.0或2.0以上的版本，使用方法可以查看《翻译：SWFOBJECT 2.0官方文档》，然后使用如下语句调用Flex中的命令：

swfobject.getObjectById("MyFlex").MyPlay();

查看演示请点击这里。mxml文件代码如下 ：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" applicationComplete="init();" layout="vertical" verticalAlign="middle" horizontalAlign="center">
<mx:Script>
<![CDATA[
import flash.events.MouseEvent;
import flash.external.ExternalInterface;

public function init():void{
	btn.addEventListener(MouseEvent.CLICK, btnClick);
	ExternalInterface.addCallback("jsCallFlex",callThis);
}

public function btnClick(evt:MouseEvent):void{
	ExternalInterface.call("alert","Flex调用JS方法!");
}

public function callThis():void{
	mx.controls.Alert.show('JS调用Flex内部方法!');
}
]]>
</mx:Script>
<mx:Button label="点击这里" id="btn" />
</mx:Application>

html文件代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>AddCallBack几个bug的解决方法</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-CN" />
<script type="text/javascript" src="swfobject.js"></script>
</head>
<body>
<div style="text-align:center;">
<div>
<object id="flexApp" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="500" height="320">
	<param name="movie" value="addCallBack.swf" />
	<!--[if !IE]>-->
	<object type="application/x-shockwave-flash" data="addCallBack.swf" width="500" height="320">
	<!--<![endif]-->
	<div>
	<h1>Alternative content</h1>
	<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
	</div>
	<!--[if !IE]>-->
	</object>
	<!--<![endif]-->
	</object>
	</div>
<p><input type="button" value="点击这里" id="myBtn" /></p></div>
<script type="text/javascript">
//<![CDATA[
swfobject.registerObject("flexApp", "9.0.0", "expressInstall.swf");

document.getElementById('myBtn').onclick=function(){
	var obj = swfobject.getObjectById("flexApp");
	if(obj){
	obj.jsCallFlex();
	}
};
//]]>
</script>
</body></html>

三，Flex中调用“init()”语句的命令最好放在“applicationComplete”中。

即mxml文件代码中的第二行:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" applicationComplete="init();" layout="vertical" verticalAlign="middle" horizontalAlign="center">

因为有时JS调用Flex的命令中需要用到Flex的组件做出反应，如果用creationComplete 调用“init()”有可能会发错，所以最好是用applicationComplete。creationComplete是在组件定义完成并已经在显示列表时触发，而applicationComplete是在所有的组件初始化完成并显示时触发。关于此方面的更多详情请查看Flex Application 初始化顺序。

四，注意页面文件编码格式

即文件的encoding类型，这个本来不算问题的,但却让我碰到了，文件编码格式不对称有时在IE中显示不了内容。

第一种，如果是在浏览器直接打开swf文件，如下所示:

http://www.example.com/example.swf?name=value

上面这种情况下可以直接使用this.parameters.name这种方式在flex里面取url参数。

第二种，如果是要在一个包含swf文件的html页面中获得参数值，如下所示:

这时取得url参数就相对要麻烦点，在网上找了些方法，觉得还是jexchen的方法最方便，详细请看:《Flex程序如何获取html容器传递的URL参数值》。

我把他的代码稍微改了点,可以用表格的方式直接看url参数。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init();" verticalAlign="middle" horizontalAlign="center">
	<mx:Script>
	<![CDATA[
		import mx.collections.ArrayCollection;
		[Bindable]
		public var dp:ArrayCollection = new ArrayCollection();

		private function init():void{
			var myStr:String=ExternalInterface.call("window.location.search.substring",1);
			if(myStr){
				var pairs:Array = myStr.split("&");
				for(var i:uint=0;i< pairs.length;i++){
					var pos:int = pairs[i].indexOf("=");
					if(pos != -1){
						var argname:String = pairs[i].substring(0, pos);
						var value:String = pairs[i].substring(pos+1);
						var myObj:Object=new Object();
						myObj['name']=pairs[i].substring(0, pos);
						myObj['value']=pairs[i].substring(pos+1);
						dp.addItem(myObj);
					}
				}
			}
		}
	]]>
	</mx:Script>

	<mx:DataGrid dataProvider="{dp}">
	<mx:columns>
		<mx:DataGridColumn dataField="name" headerText="Name" />
		<mx:DataGridColumn dataField="value" headerText="Value" />
	</mx:columns>

	</mx:DataGrid>
</mx:Application>

演示:请点击这里。jexchen现在又找到一个用SWFObject的新方法来获得url参数值，可以参看《再谈：Flex程序如何获取html容器传递的URL参数值》。

配置Flex环境首先要配置Java环境，Java的版本要是1.6的，你可以用下面的命令查看系统中Java的版本。

java -version

如果已经是1.6的版本了，你就可以进行下面的步驟了，如果不是，就查看《Java安装配置》，安装最新版本的Java。

到Flex SDK下载页面下载最新的Flex SDK。最好选择最新的Adobe Flex SDK，我刚开始用的是Open Source Flex SDK，出现了很多错误，后来选择Adobe Flex SDK就正常了，我选的是118M的Adobe Flex SDK，如图：

下载文件为flex_sdk_3.zip，我把它放到了桌面上，打算把它放在目录/media/tools/flexsdk/中，当然你可以把它解压到任何目录中。用命令行操作的话键入如下命令：

sudo mkdir /media/tools/flexsdk
cd 桌面
sudo unzip flex_sdk_3 -d /media/tools/flexsdk

这时基本上就可以用了，但为了保险我还做了些操作。到你存放Flex SDK的目录下，找到bin文件夹，里面有个mxmlc文件，注意：后面不带任何后缀名。首先你一定要有修改这个文件属性的权限，右键这个文件，在弹出的菜单中选择属性，在属性窗口中选择权限一栏，勾选允许以程序执行文件选项，如图：

好了，现在就可以使用了。建立一个mxml文件，比如叫hello.mxml，写入相应的代码。在终端中进入到mxml文件所在的目录下，输入如下命令，注意下面的/media/tools/flexsdk/要改成你自己的Flex SDK所在的目录：

/media/tools/flexsdk/bin/mxmlc hello.mxml

如果没有问题的话就能生成一个hello.swf的文件。