Изменяем web-страницу из flash-ролика

Довольно давно я уже писал пост про вызов 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, которое ... не совсем стандартное :-) Но уж больно это удобно, да и все популярные браузеры его поддерживают.

Автор: admin

Дата добавления: 2012-06-28

Просмотров: 3044

Рейтинг поста: +6-

Правила перепечатки

Социальные закладки:
Комментарии:
Комментатор
Комментарий добавил(а): edapskov
Дата добавления: 2014-01-20
Комментатор
Комментарий добавил(а): Juventus
Дата добавления: 2014-01-20
дайте возможность увидеть это чудо на языке AS2
заранее СПОСИБО
Комментатор
Комментарий добавил(а): Александр
Дата добавления: 2013-02-09
В закладки, попробую на сайте,
Добавить комментарий:







[ + ] помощь по форматирование текста

Идиот-тест

Если все обязательные поля (отмечены * ) заполнены необходимой информацией, то нажимаем кнопку Добавить комментарий.

Меню
Подписка
Рубрики
Метки
Последние комментарии
Рейтинг постов
Реклама
Друзья
География гостей
Статистика
Яндекс.Метрика