Archive for the ‘ ria ’ Category

两个学习Flash的网站

wonderfl

wonderfl

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

gotoAndLearn

gotoAndLearn

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

用Flashbug调试Flash

Flashbug是一款基于FireBug火狐插件,这给利用Flex SDK开发程序的人带来了便利。以前只能用FDB命令行来调试,现在有了Flashbug就更直观了。

安装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

阅读全文

编辑测试正则表达式的工具——RegExr

RegExr

RegExr是一款在线编辑测试正则表达式的工具,它拥有一个简洁的界面,提供了一个可以实时查看查找与替换正则表达式的文本框。它的侧边栏还提供了一些正则表达式的实例以供参考,让学习和使用正则表达式变地轻松点。

RegExr是由Flex 3构建的,使用ActionScript 3来创建的正则引擎,它提供了和RegExBuddy几乎一样的功能,而且是免费使用。你也可以将一些正则表达式保存在本地计算机里,方便以后使用。

RegExr也提供了桌面版,可以跨平台运行,桌面版可到RegExr Desktop下载。

Flex获得使用内存数

《AdvancED Flex 3》中有一段讲述获得Flex运行时所占用的内存数,里面使用了一个系统属性:

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>

FireFox下flash背景透明问题

今天修改页面,原因是flash在IE下背景是透明的,但在FireFox下却是无效的。代码如下:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" height="30" width="197">
<param name="allowScriptAccess" value="sameDomain">
<param name="movie" value="/Website/Common/Flash/staples_djs.swf">
<param name="quality" value="high"><param name="bgcolor" value="#D9DC4D">
<param name="menu" value="false"><param name="wmode" value="transparent">
<embed src="/Website/Common/Flash/staples_djs.swft" menu="false" bgcolor="#D9DC4D" quality="high" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" height="30" width="197" />
</object>

上网一查,果然不出所料,FireFox不支持写在flash中param参数里面的transparent属性,你必须把flash的wmod属性也要写在embed标签中。如下在embed标签中加一个“wmode=”transparent””flash就可以在FireFox下透明了。

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" height="30" width="197">
<param name="allowScriptAccess" value="sameDomain">
<param name="movie" value="/Website/Common/Flash/staples_djs.swf">
<param name="quality" value="high"><param name="bgcolor" value="#D9DC4D">
<param name="menu" value="false"><param name="wmode" value="transparent">
<embed src="/Website/Common/Flash/staples_djs.swf" wmode="transparent" menu="false" bgcolor="#D9DC4D" quality="high" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" height="30" width="197" />
</object>

Embed是一个不符合网页标准的标签,为什么一向被认为最接近标准的FireFox却只支持Embed标签呢?简单说一下:Embed是Netscape的技术,而FireFox和Netscape是使用相同的内核的,所以FireFox目前还只能认Embed。顺便说一句,虽然Embed不符合W3的XHTML标准,但在HTML5中它却是合法的!

Adobe Flex 2: Training from the Source

《Adobe Flex 2: Training from the Source》是一本Adobe Flex的入门书,内容循序渐进,从基本控件到与后台交互,都有详细的讲述,是本很不错的教程。它的源文件可以从Adobe官网上下载,点这里到源文件下载页面。虽然只有11、16、20、21四章的源文件下载,但全书所需要的相关图片,类文件基本上都有了。

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

Flex皮肤样式网站

scalenine网站可能几乎所有的Flexer都知道,她是Flex皮肤样式的一个资源站,里面有很多精美的实例供人下载研究学习,参考价值非常大,从他们的的作品中就可以看到。

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

scalenine gallery

flex接收flashvars参数值

flex接收flashvars的方法和flash不一样,在flash中是用“root.loaderInfo.parameters”或“stage.loaderInfo.parameters”来取得传递的参数,而在flex中则要用“Application.application.parameters”来取得。看下面的代码,我们将利用“Application.application.parameters”的方法来取得flashvars传递过来的两个参数:myName和myHometown。


<?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>

下面是网页代码,可以看下效果:

阅读全文

JS与Flex交互的几点注意事项

这段时间要做一个需要JS与Flex交互的页面,但在制做过程中不停地出现错误,查了很多资料,自己也在不断地摸索尝试各种方法,得出了一些需要注意的问题。

一,在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文件代码如下:

阅读全文

Flex获得url传递的参数值

在Flex中要获得url传递的参数值时,分两种情况:

第一种,如果是在浏览器直接打开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参数值》