Flash. Взаимодействие ActionScript 3 и JavaScript, ExternalInterface

В этой статье я хотел бы познакомить Вас с таким классом в ActionScript 3, как ExternalInterface. Смысл работы данного класса можно понять, просто переведя его название на русский язык - «внешний интерфейс». Данный класс позволяет связать flash-приложение со средой, в которую встроен проигрывающий это приложение FlashPlayer (то есть его контейнер).

Для веб-разработчиков интерес представляет интернет-браузер, как контейнер для FlashPlayer. По средствам ExternalInterface можно реализовать взаимодействие между flash-приложением и JavaScript-кодом, встроенным в HTML-страницу. Перейдем непосредственно к рассмотрению реализации данной связи.

Допустим у нас во флеш приложении имеется кнопка, по нажатию на которую должно отработать какое-то действие в JavaScript-коде данной страницы, а также на HTML-странице есть тоже кнопка, по нажатию которой должно выполниться действие из flash-приложения (ActionScript). Класс самого flash-приложения будет выглядеть примерно следующим образом:

package {
import flash.display.Sprite;
import fl.controls.Button;
import fl.controls.Label;
import flash.events.*;
import flash.external.ExternalInterface;
 
public class Main extends Sprite {
 
private var _btn: Button;
private var _label: Label;
 
public function Main():void
{
super();
 
// Создаем и добавляем кнопку на сцену
_btn = new Button();
_btn.label = 'вызов функции из JavaScript';
_btn.width = 200;
_btn.move(20, 20);
addChild(_btn);
 
// Создаем метку и добавляем ее на сцену
_label = new Label();
_label.width = 200;
_label.move(20, 50);
addChild(_label);
 
// Вешаем на кнопку обраюотчик клика по ней
_btn.addEventListener(MouseEvent.CLICK, clickButton);
 
// Регистрируем событие добавление на сцену
this.addEventListener(Event.ADDED_TO_STAGE, Init);
}
 
// Функция, которая срабатывает по нажатию на кнопку _btn
private function clickButton(e: MouseEvent):void
{
// Допустим мы в JavaScript хотим вызвать функцию show_message
// так и пишем передавая ей параметр - строку 'Привет из AS3'
var answer:* = ExternalInterface.call('show_message', 'Привет из AS3');
_label.text = String(answer);
}
 
// Функция инициализации приложения
public function Init(e:Event):void
{
/*
Какие-нибудь инициализирующие действия
*/

 
// Регистрируем функцию во внешнем контейнере (в нашем случае JavaScript)
ExternalInterface.addCallback('select_js', Select);
}
 
public function Select(param:String):void
{
/*
какие-нибудь действия, которые должны выполниться
при вызове из JavaScript функции select_js
*/

_label.text = param;
}
}
}

Описывать словами не буду, так как подробно прокомментировал код.

Если приложение скомпилировано под именем example.swf, внедрим его в HTML-страницу следующим образом:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>example</title>
</head>
<script>
function show_message(param)
{
alert(param);
return 'Выполнено';
}
function clickButton()
{
document.example.select_js('Привет из JavaScript');
}
</script>
<body bgcolor="#ffffff">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0" width="250" height="150" id="example" align="middle">
<param name="allowScriptAccess" value="always" />
<param name="allowFullScreen" value="false" />
<param name="movie" value="example.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" /> <embed src="example.swf" quality="high" bgcolor="#ffffff" width="250" height="150" name="example" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" />
</object>
<br/>
<input type="button" value="Вызвать функцию из AS3" onclick="clickButton()"/>
</body>
</html>

Как Вы могли заметить, в html-разметке дополнительно в теге <script> прописано 2 JavaScript-функции, одна из которых вызывает выполнение функции AcsionScript (clickButton), а другая - функция, вызываемая из AcsionScript-кода (show_message).