创建与外部 API 的交互

可在浏览器和嵌入网页的 SWF 文件之间创建交互。以下过程将文本发送到包含 SWF 文件的 HTML 页,而 HTML 在运行时会将消息发送回 SWF 文件。

创建 Flash 应用程序:

  1. 创建一个新的 Flash 文档,并将它保存为 extint.fla
  2. 将两个 TextInput 组件拖动到舞台上,并为其给定实例名称 in_tiout_ti
  3. 将一个 Label 组件拖动到舞台上,为其分配实例名称 out_lbl,将其定位在 out_ti TextInput 实例之上,并在属性检查器的"参数"选项卡中将文本属性设置为 Sending to JS:
  4. 将一个 Button 组件拖动到舞台上,将其定位在 out_lbl 标签旁边,并为其给定实例名称 send_button
  5. 将一个 Label 组件拖动到舞台上,并为其分配实例名称 in_lbl,将其定位在 in_ti TextInput 实例之上,并在"参数"选项卡中将其文本属性设置为从 JS 接收:
  6. 将下面的 ActionScript 添加到主时间轴中的第 1 帧:
    import flash.external.ExternalInterface;
    
    ExternalInterface.addCallback("asFunc", this, asFunc);
    function asFunc(str:String):Void {
        in_ti.text = "JS > Hello " + str;
    }
    
    send_button.addEventListener("click", clickListener);
    function clickListener(eventObj:Object):Void {
        trace("click > " + out_ti.text);
        ExternalInterface.call("jsFunc", out_ti.text);
    }
    

    前面的代码分为三个部分。第一个部分导入 ExternalInterface 类,因此无需使用完全限定的类名称。第二部分代码定义一个回调函数 asFunc(),在后面的示例中将在 HTML 文档中从 JavaScript 调用该函数。此函数设置舞台上 TextInput 组件内的文本。第三部分代码定义一个函数,并将其指定为用户单击舞台上的 Button 组件实例时的事件侦听器。无论何时单击按钮时,SWF 文件都将在 HTML 页中调用 jsFunc() JavaScript 函数,并传递 out_ti 文本输入实例的 text 属性。

  7. 选择"文件">"发布设置",然后选择"格式"选项卡并确保 Flash 和 HTML 都已选中。
  8. 单击"发布"创建 HTML 和 SWF 文件。

    完成后,转到下一过程为 SWF 文件创建容器。

在对前面的 Flash 文档进行测试之前,需要修改生成的 HTML 代码并添加一些其它的 HTML 和 JavaScript。下面的过程为 SWF 文件修改 HTML 容器,以便两个文件在浏览器中运行时可以进行交互。

为 SWF 文件创建 HTML 容器:

  1. 完成前面的过程。
  2. 打开当您发布应用程序时 Flash 创建的 extint.html 文件。

    它与 Flash 文档位于相同文件夹中。

  3. 在开始和结束 head 标签之间添加以下 JavaScript 代码:
    <script language="JavaScript">
    <!--
        function thisMovie(movieName) {
            var isIE = navigator.appName.indexOf("Microsoft") != -1;
            return (isIE) ? window[movieName] : document[movieName];
        }
    
        function makeCall(str) {
            thisMovie("extint").asFunc(str);
        }
    
        function jsFunc(str) {
            document.inForm.inField.value = "AS > Hello " + str;
        }
    // -->
    </script>
    

    此 JavaScript 代码定义三种方法。第一个方法根据用户的浏览器是 Microsoft Internet Explorer (IE) 还是 Mozilla 浏览器返回对嵌入式 SWF 文件的引用。第二个函数 makeCall() 调用 asFunc() 方法,您在前面示例中的 Flash 文档中定义了该方法。thisMovie() 函数调用中的 "extint" 参数引用嵌入式 SWF 文件的对象 ID 和嵌入名称。如果将 Flash 文档保存为不同的名称,则需要更改此字符串以便与对象和嵌入标签中的值匹配。第三个函数 jsFunc() 设置在 HTML 文档中 inField 文本字段的值。当用户单击 send_button 按钮组件时,将从 Flash 文档中调用此函数。

  4. 在结束 </body> 标签之前添加以下 HTML 代码:
    <form name="outForm" method="POST" action="javascript:makeCall(document.outForm.outField.value);">
        Sending to AS:<br />
        <input type="text" name="outField" value="" /><br />
        <input type="submit" value="Send" />
    </form>
    
    <form name="inForm" method="POST" action="">
        Receiving from AS:<br />
        <input type="text" name="inField">
    </form>
    

    此 HTML 代码创建两个 HTML 表单,它们与上一练习中在 Flash 环境内创建的表单类似。第一个表单将 outField 文本字段的值提交给上一步骤中所定义的 makeCall() JavaScript 函数。第二个表单用于显示当用户单击 send_button 实例时从 SWF 文件发送的值。

  5. 保存该 HTML 文档,并将 HTML 和 SWF 文件都上载到 Web 服务器。
  6. 在 Web 浏览器中查看 HTML 文件,在 out_ti TextInput 实例中输入一个字符串,然后单击"Send"按钮。

    Flash 将调用 jsFunc() JavaScript 函数并传递 out_ti 文本字段的内容,它将在 HTML 表单 inForm inField 输入文本字段中显示此内容。

  7. outField HTML 文本字段中键入一个值,然后单击"Send"按钮。

    Flash 将调用 SWF 文件的 asFunc() 函数,后者将在 in_ti TextInput 实例中显示字符串。

可在硬盘上的 Samples 文件夹中找到范例源文件 ExtInt.fla。

有关使用外部 API 的更复杂的示例,请参见使用外部 API 控制 Flash Video。有关本地文件安全性的更多信息,请参见关于本地文件安全性和 Flash Player

注意

请避免使用其它访问插件对象的方法,例如 document.getElementById("pluginName")document.all.pluginName,因为这些其它方法不能在所有浏览器中一致地工作。