Довольно давно я уже писал пост про вызов PopUp-окна из flash-ролика, встроенного в веб-страницу (см.: PopUp-окно, ActionScript 3.0 и JavaScript). А сегодня задали близкий к данной тематике вопрос про модификацию web-страницы из встроенного флеш-ролика. Попробую ответить на этот вопрос (насколько позволяют мои скромные познания).
Итак, перед нами стоит задача каким-то образом изменить содержимое HTML-страницы. Но эти изменения должны осуществляться по команде из флеш-ролика, который встроен в данную интернет-страницу. Для простоты примера в нашем flash-ролике будет только одна кнопка. И именно клик по этой кнопке будет запускать модификацию страницы.
Предлагаю следующее простенькое, но вполне рабочее решение...
Первым дело, нам нужна сама html-страница.
Код HTML:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ActionScript & JavaScript</title>
<style>
* {
margin:0px;
padding:0px;
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
color:#333333;
}
body {
background-color:#666666;
}
.container {
border:#999999 solid 1px;
width:700px;
margin:0 auto;
margin-bottom:20px;
margin-top:20px;
box-shadow: 0 0 10px rgba(0,0,0,0.6);
-webkit-box-shadow:0 0 0 rgba(0, 0, 0, 0.6);
-moz-box-shadow:0 0 10px rgba(0, 0, 0, 0.6);
}
.header {
margin:30px;
margin-bottom:50px;
text-align:center;
font-size:36px;
font-weight:bold;
}
.content {
padding:10px;
}
.flash{
width:550px;
margin:0 auto;
border:#222222 solid 10px;
}
.futer {
margin-top:400px;
padding:10px;
text-align:center;
font-size:12px;
color:#999999;
}
</style>
<script>
function myfunc(newhtml){
document.getElementById("flash").innerHTML = newhtml;
}
</script>
</head>
<body>
<div class="container">
<div class="header">ActionScript & JavaScript</div>
<div class="content">
<div class="flash" id="flash">
<object type="application/x-shockwave-flash" data="as_to_js.swf" width="550" height="400"><param name="movie" value="as_to_js.swf"/><param name="menu" value="false"/></object>
</div>
<div class="futer">© edapskov</div>
</div>
</body>
</html>
В этом коде, конечно, много лишнего, связанного исключительно с внешним оформлением самой страницы. Нас здесь интересует только два момента:
1.) Блок script, внутри которого размещается JavaScript-функция myfunc. Эта функция делает следующее: заменяет содержимое блока с id = "flash" на ту строку, которую функция myfunc получает в качестве своего единственного параметра.
2.) Блок div с id = "flash". Именно содержимое этого блока и модифицируется функцией myfunc. Первоначально сюда встроен флеш-ролик as_to_js.swf.
Теперь переходим к флеш-ролику (уже упоминавшемуся выше as_to_js.swf).
А flash-ролик выглядит, надо сказать, очень аскетично. Там только кнопка (мувиклип btn) и немного кода. Код следующий...
Код ActionScript 3.0:
/*
импортируем классы
*/
import flash.net.*;
import flash.external.ExternalInterface;
import flash.events.MouseEvent;
import ru.edapskov.display.Mes;
/*
код для кнопки
*/
btn.addEventListener(MouseEvent.MOUSE_DOWN, btnDown);
function btnDown(event:MouseEvent):void
{
if (ExternalInterface.available)
{
var urlRequest:URLRequest = new URLRequest();
urlRequest.url = 'javascript:myfunc("<strong>Hello!</strong>");';
navigateToURL(urlRequest,"_self");
}
else
{
addChild(new Mes("Браузер не поддерживает JavaScript!",550,400));
}
}
Подробно описывать, что и как я не буду, так как это уже делал (приведённый выше код почти без изменений позаимствован из поста PopUp-окно, ActionScript 3.0 и JavaScript). Но обращу ваше внимание на строчку с вызовом JavaScript-функции:
Код ActionScript 3.0:
urlRequest.url = 'javascript:myfunc("<strong>Hello!</strong>");';
Думаю, вы догадались, что этой строчкой флеш-ролик пытается вызвать JavaScript-функцию на HTML-странице. А в качестве параметра передаётся текст с html-разметкой.
Получилось следующее - Демо
Естественно, вы можете передавать в качестве параметра любую строку с html-разметкой и через это добиваться разных результатов. Для этого надо только отредактировать одну-единственную строчку в коде...
Для примера, поменяем наш флеш-ролик на картинку...
Код ActionScript 3.0:
/*
импортируем классы
*/
import flash.net.*;
import flash.external.ExternalInterface;
import flash.events.MouseEvent;
import ru.edapskov.display.Mes;
/*
код для кнопки
*/
btn.addEventListener(MouseEvent.MOUSE_DOWN, btnDown);
function btnDown(event:MouseEvent):void
{
if (ExternalInterface.available)
{
var urlRequest:URLRequest = new URLRequest();
var str:String = '<img src="gremyachaya_gora.jpg" alt="Картинка" title="Картинка" height="550" width="550">';
urlRequest.url = "javascript:myfunc('"+str+"');";
navigateToURL(urlRequest,"_self");
}
else
{
addChild(new Mes("Браузер не поддерживает JavaScript!",550,400));
}
}
Смотрим результат - Демо №2
А вот пример с встраиванием одного флеш-ролика на место другого...
Код ActionScript 3.0:
/*
импортируем классы
*/
import flash.net.*;
import flash.external.ExternalInterface;
import flash.events.MouseEvent;
import ru.edapskov.display.Mes;
/*
код для кнопки
*/
btn.addEventListener(MouseEvent.MOUSE_DOWN, btnDown);
function btnDown(event:MouseEvent):void
{
if (ExternalInterface.available)
{
var urlRequest:URLRequest = new URLRequest();
var str:String = '<object type="application/x-shockwave-flash" data="animationpencil.swf" width="550" height="400"><param name="movie" value="animationpencil.swf"/><param name="menu" value="false"/></object>';
urlRequest.url = "javascript:myfunc('"+str+"');";
navigateToURL(urlRequest,"_self");
}
else
{
addChild(new Mes("Браузер не поддерживает JavaScript!",550,400));
}
}
Проверяем - Демо №3
Ну вот, пожалуй, и всё. Исходники к этому уроку можно скачать здесь - скачать исходник (flash-исходник под Adobe Flash CS5.5).
ЗЫ: Описанный здесь способ, конечно, имеет свои недостатки. Так, например, я использую свойство innerHTML, которое ... не совсем стандартное :-) Но уж больно это удобно, да и все популярные браузеры его поддерживают.
Рейтинг поста: 
