用firebug调试as的基本原理

ExternalInterface.call('console.log', "string is [%s]",  "abcde");

利用as的ExternalInterface和js交互，然后调用firebug的console.log，将as的变量输出到控制台，这样也能达到调试的目的。

当然，要使用firebug，前提当然是你使用的firefox浏览器。如果是ie，那么只好使用alert弹出信息。

这个时候Arthropod就显得很有用。

用法

• 在actionscript中导入Debug类:

  import com.carlcalderon.arthropod.Debug;

• 输出debug信息

  Debug.log("My log message");

• 然后启动arthropod

由于YUI Uploader是利用javascript + flash实现的，所以用户的浏览器上只要有flash player就可以使用，也不需要额外安装别的插件了，这显然也是YUI Uploader的一大优势。

我的YUI Uploader试用之旅

• 首先下载Uploader批量上传页的html源文件
• 解压后放置在你的web服务器上，比如我就是在自己的台式机上安装了一个xampp
• 现在需要一个处理上传操作的后端程序，在这里我是用php简单的写了一个，如果你用别的语言也是不成问题的。在uploader-advanced-source.html的同一目录下放置upload.php，源文件如下：

  foreach ($_FILES as $fieldName => $file) {
  	$name = md5(microtime());
  	move_uploaded_file($file['tmp_name'], "./" . $name . '.jpg');
  	echo $fieldName . ' uploaded!';
  }

• 下载http://yui.yahooapis.com/2.5.1/build/uploader/assets/uploader.swf，然后把uploader.swf放在和upload.php的同一目录下，这是为了避免javascript和flash交互过程中出现跨域问题。
• 修改uploader-advanced-source.html
  • 把”YOUR UPLOAD URL GOES HERE”替换成你的upload.php所在的url，比如我的就是http://localhost/yui/upload.php
  • 把YAHOO.widget.Uploader.SWFURL修改成你的uploader.swf实际url
• 现在访问uploader-advanced-source.html，试试批量上传功能吧

试用的一点补充

• 这个例子里面的php源文件只是考虑上传n张jpg文件的情况，可根据实际情况调整。
• 上传后的文件名是md5随机加密的，在upload.php同一目录可见
• 由于flash的bug，运行在windows下的firefox无法正确获得flash传递过来的cookie，如果上传应用对cookie有依赖，可能会需要做额外的处理。
• 为了能够确切的显示上传进度条，可能需要php 5.2的apc扩展支持
• 上传进度由flash完成
• YUI 2.5.2已经附上uploader.swf的actionscript，有一定的学习价值

贴一张Uploader使用效果图

使用方法

• 首先下载安装air runtime
• 下载flvMaster.air，文件很小，只有29k
• 双击flvMaster.air即可呼出air的安装界面，进一步安装
• 界面非常简单，在url输入框里输入豆单的播放url，然后点击search按钮，这样就会在下面的输入框中生成豆单的下载清单
• 接下来点击save按钮就可以保存下载清单到桌面了，保存的文件名最好以lst做后缀
• 可以用flashget来导入下载清单并批量下载flv视频

用air来写这种小工具真的是非常方便，一点点html+javascript代码就可以完成很实用的功能，尤其是ajax操作，完全没有跨域限制，很强大。

贴一张运行时的界面图

补充

Air现在发布了1.1中文版，国内用户也可以享受到中文界面的Air了。

与CachegrindVisualizer具有类似功能的软件还有wincachegrind,相比之下,wincachegrind的功能更为强大,使用上也更方便.但是即便如此,我还是乐见CachegrindVisualizer发展的更好.

CachegrindVisualizer支持的操作系统

Windows 2000 SP4, Windows XP SP2, Windows Vista Home and Ultimate Edition, Mac OS 10.4.7 and above (Intel and PowerPC), Mac OS X Leopard.

运行时的抓图

相关连接

• AIR RUNTIME下载
• xdebug

Javascript

• + 不需要额外的插件.
• - 不同的浏览器下可能会产生不同的行为
• - 不能访问音视频设备
• - 可能会有少数用户会关闭javascript
• - 如果你写的代码很烂,大家都能看到

Flash

• - 需要额外安装插件
• + 在各种浏览器上,如果flash player的版本一致,那么flash的行为也会基本一致
• - 用户可能不会安装有相同版本的flash player
• + 可以直接访问音视频设备
• - 可能会有很多用户屏蔽flash
• + 如果你写的代码很烂,不用担心,大家都看不到

最近做一个应用，flash和javascript之间互有调用。最后一次写点Actionscript也是在flash 7的时候了，因此按照我的想法，只要用fscommand和getUrl(“javasciprt:…….”)这种形式，flash和javascript之间互相调用应该不是什么大问题。

没多久就开始觉着自己落后了，Flash 8早已经新增了ExternalInterface API专门处理flash与外部应用的交互，只要浏览器装有flash player，支持的范围应是更广。

ExternalInterface class能够运行的环境

• Internet Explorer for Windows (5.0 and later)
• Firefox 1.0 and later
• Mozilla 1.7.5 and later
• Netscape 8.0 and later
• Safari 1.3 and later.

使用心得

ExternalInterface class仅仅只有两个方法：

• addCallback(methodName:String, instance:Object, method:Function) : Boolean
  Registers an ActionScript method as callable from the container.
• call(methodName:String, [parameter1:Object]) : Object
  Calls a function exposed by the Flash Player container, passing 0 or more arguments.

这两个方法的使用在手册有详细说明，使用范例可以从flash的安装路径例如C:\Program Files\Macromedia\Flash 8\Samples and Tutorials\Samples\ActionScript\ExternalAPI下面找到，没太大悬念。

碰到的问题

在IE浏览器下，将flash对象放在form标签之间，ExternalInterface class就会给你报javascript错，而firefox下完全正常，这简直是让人很郁闷的事情，折腾了一天才找到问题原因，可能是IE的Bug吧，这个在livedoc上有人反映过类似的问题。见下面的url:
http://livedocs.macromedia.com/flash/8/main/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Parts&file=00002200.html

有人提出这样的解决办法，将下面这段javascript放在html里的flash之前：

<script type="text/javascript">
function ExternalInterfaceManager()
{
	this.registerMovie = function(movieName) {
		if(!window.fakeMovies) window.fakeMovies = new Array();
		window.fakeMovies[window.fakeMovies.length] = movieName;
	}
	this.initialize = function() {
		if(document.all)
		{
			if(window.fakeMovies)
			{
				for(i=0;i<window.fakeMovies.length;i++)
				{
					window[window.fakeMovies[i]] = new Object();
				}
				window.onload = initializeExternalInterface;
			}
		}

	}
}
function initializeExternalInterface() {
	for(i=0;i<window.fakeMovies.length;i++) {
		var movieName = window.fakeMovies[i];
		var fakeMovie = window[movieName];
		var realMovie = document.getElementById(movieName);

		for(var method in fakeMovie) {
			alert(arguments);
			realMovie[method] = function() {flashFunction = "<invoke name=\"" + method.toString() + "\" returntype=\"javascript\">" + __flash__argumentsToXML(arguments, 0) + "</invoke>";this.CallFunction(flashFunction);}
		}

		window[movieName] = realMovie;
	}
}
var eim = new ExternalInterfaceManager();
eim.registerMovie("ShockwaveFlash1");
eim.registerMovie("ShockwaveFlash2");
eim.initialize();
</script>

这样就可以一定程度上解决ExternalInterface在form标签之间会报错的问题，是asp.net开发者的福音。

原理

下面是浏览器载入一个包含ExternalInterface调用的flash之后，flash player可能会用到的方法

function __flash__arrayToXML(obj) {
    var s = "<array>";
    for (var i=0; i<obj.length; i++) {
        s += "<property id=\"" + i + "\">" + __flash__toXML(obj[i]) + "</property>";
    }
    return s+"</array>";
}
function __flash__argumentsToXML(obj,index) {
    var s = "<arguments>";
    for (var i=index; i<obj.length; i++) {
        s += __flash__toXML(obj[i]);
    }
    return s+"</arguments>";
}
function __flash__objectToXML(obj) {
    var s = "<object>";
    for (var prop in obj) {
        s += "<property id=\"" + prop + "\">" + __flash__toXML(obj[prop]) + "</property>";
    }
    return s+"</object>";
}
function __flash__escapeXML(s) {
    return s.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/"/g, """).replace(/'/g, "'");
}
function __flash__toXML(value) {
   var type = typeof(value);
    if (type == "string") {
        return "<string>" + __flash__escapeXML(value) + "</string>";
    } else if (type == "undefined") {
        return "<undefined/>";
    } else if (type == "number") {
        return "<number>" + value + "</number>";
}

可以认为现在的ExternalInterface Class仅仅只是可用而已，不够成熟

socketJs目前有如下可调用的api

function SocketConnect(host,port){}
function SocketSend(data){}
function SocketClose(){}
function SocketOnInit(){}
function SocketOnConnect(success){}
function SocketOnData(data){}
function SocketOnClose(){}

注意要点

• php也可以构建socket server,请看手册http://cn.php.net/manual/en/ref.sockets.php
• 通过flash的xmlSocket client的发送的xml，应该用”\0\n”结尾，切记切记

• 用svn获取Red5源程序
• 使用eclipse来过滤源文件列表,使之更可读
• 用ant来编译源程序,并运行red5 server

什么是red5?
red5是一个开源的flashcom server端

相关文章:Red5 0.3 Released

• Red5 0.3 Documentation
• Red5项目主页以及demo

[actionscript]
class Move extends MovieClip {

private var speed = 3;
private var xMin = 0;
private var yMin = 0;
private var xMax = 400;
private var yMax = 400;

public function onLoad(){
Key.addListener(this);
this.xMin += this._width/2;
this.xMax -= this._width/2;
this.yMin += this._height/2;
this.yMax -= this._height/2;
}

public function onEnterFrame(){
if( this._x < this.xMin ){
this._x = this.xMin;
}
if( this._x > this.xMax ){
this._x = this.xMax;
}
if( this._y < this.yMin ){
this._y = this.yMin;
}
if( this._y > this.yMax ){
this._y = this.yMax;
}
}

public function setSpeed(speed:Number){
this.speed = speed;
}

public function onKeyDown(){
switch(Key.getCode()){
case 83: // s
this._rotation = 180;
this._y += this.speed;
break;

case 65: // a
this._rotation = -90;
this._x -= this.speed;
break;

case 68: // d
this._rotation = 90;
this._x += this.speed;
break;

case 87: // w
this._rotation = 0;
this._y -= this.speed;
}
}

private function onRelease(){
trace(’test’);
}
}

[/actionscript]