AS3与JavaScript进行交互[转]

Posted by admin in ActionScript 2 & 3二 3rd, 2010 | 9 responses

1.JS调用AS3中的函数

首先，我们新建一个FLASH文档，然后在舞台上绘制一个动态文本，该文本的实例名称为wen_txt。好了！美工的部分就算完成了（我们这里是一个非常简单的实例，不要求太复杂。力求突出重点）！

现在，我们要在FLASH中建立一个允许被外部调用的函数。那么如何去建立声明这样一个函数呢？我们要使用到一个类，这个类的名字就是ExternalInterface。很多人都没有太注意过这个类。这个类实际上是在flash.external 包中。这个包是专门用来和外部容器进行通信的。那么对这个ExternalInterface类，它的官方解释是“ExternalInterface 类是外部 API，在 ActionScript 和 Flash Player 的容器之间实现直接通讯的应用程序编程接口，例如，含有 JavaScript 的 HTML 页。”很显然，这里已经提到了JS。好了！下面我们就来写一下脚本吧！

代码如下：

1
2
3
4

ExternalInterface.addCallback("abcd",yun);
function yun(zi:String):void{
wen_txt.text = zi;
}

我们看，建立一个可以被外部调用的函数实际上就是使用了ExternalInterface类的addCallback方法。我们可以从宏观上这样理解。但实际上它的真正作用是将一个函数注册为可从容器调用。实际上我们的FLASH端就这么简单。好了！保存文件，发布。注意！这里，我发布出来的SWF文件的文件名是ab.swf。

上面我们已经将FLASH端的脚本写好了，下面我们来编写JS代码，其实也是一个HTML网页代码，这个HTML代码中包含JS代码！

代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>FLASH与JS交互</title>
<script language="JavaScript">
     function pageInit() { 
        sendToActionScript("你好");
     }
     function sendToActionScript(value) { 
         window.ExternalInterfaceExample.abcd(value);
     }
</script>
</head>
<body onload="pageInit();">
     <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
             id="ExternalInterfaceExample" width="500" height="500"
             >
         <param name="movie" value="ab.swf" /> 
     </object>
</body>
</html>

好了！现在将这个网页保存到和ab.swf同一文件夹下，然后运行这个网页。当程序运行的时候，我们就可以看到FLASH中的动态文本会出现“你好”字样！这个过程就是JS调用AS3函数，同时向FLASH传递了一个参数，或者说传递了一组数据。

关于这段JS代码，我们就不多说了。因为涉及到很多JS脚本的只是。大家可以在网上查找相关的资料，就可以明白这段JS脚本的含义了！

2.AS3调用JS函数

先说说原理吧。实际上我们所浏览的每一个网页都可以看作是一个容器。那何为容器呢？说白了就是一个盒子。在这个盒子里面放着许多东西，包括网页中的文字，图片，FLASH，脚本，按钮，文本框等。所以，我们的FLASH如果想访问网页中的JS函数，实际上就是访问上一级中的函数。这种操作相对就要简单一些。因为我们的JS函数对网页中的成员都是公开的，这个网页中的任何元素都能够调用这个JS函数。同样，FLASH也拥有这样的权限。那么好了！我们来看看在网页中具体是怎样做的。

我们这次先来写网页代码，因为网页这边是接受端。

代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>FLASH与JS交互</title>
<script language="JavaScript">
     function sendToJavaScript(value) {
     document.forms["form1"].output.value += "\n" + "ActionScript says: " + value;
     }
</script>
</head>
<body>
     <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
             id="ExternalInterfaceExample" width="500" height="500"
             >
         <param name="movie" value="ab.swf" /> 
     </object>
     <form name="form1" onsubmit="return false;">
         <textarea cols="60" rows="20" name="output" readonly="true">
         Initializing...
         </textarea>
     </form>
</body>
</html>

具体的什么意思笔者在这里就不多说了，属于JS方面的知识，大家可以去查看相关资料。好了下面就是FLASH端的代码了！我们先来做美工界面。画一个输入文本，实例名为wen_txt，再做一个影片剪辑元件，实例名为an_mc。好了！美工部分做完了！我们来写脚本。

代码如下：

1
2
3
4

an_mc.addEventListener(MouseEvent.CLICK,chuan);
function chuan(evt:Event):void {
ExternalInterface.call("sendToJavaScript", wen_txt.text);
}

其实在FLASH中调用外部的JS函数还是用到了ExternalInterface类。而这次我们是使用的call方法。
好了！运行网页，我们在FLASH的输入文本中输入一串文字，然后按一下按钮。之后这段文字就会出现在网页的文本框里面！
大家可以自己动手做一次，体会一下FLASH向JS传递参数的过程！



Leave a Reply