Совсем недавно мы уже создавали окно вывода сообщений на ActionScript 3.0. А сегодня создадим окно с использованием связки ActionScript 3.0 и JavaScript. Кроме этого, мы облегчим себе жизнь и воспользуемся специально созданным для этих целей классом PopUp, взятым с уже упоминавшегося в моих постах сайта www.cristalab.com.
Если вы уже работали с JavaScript, то, наверно, знаете, что для вызова нового окна в браузере этот язык использует метод open().
Код JavaScript:
window.open(параметры);
Параметров у этого метода много и они позволяют тонко настроить внешний вид и другие свойства окна. Приведём небольшой пример:
Код JavaScript:
window.open('esubscribe.html', 'messageWindow', 'width=400,height=300');
Данный код создаст для нас новое окно, в которое будет загружена страница esubscribe.html. Окно будет иметь размеры 400 X 300. Существуют и другие настраиваемые параметры, но речь сейчас не о них. Давайте проверим работоспособность данного JS-скрипта.
Нажмите здесь, чтобы вызвать окно!
Надеюсь, окно появилось :-)
Итак, мы знаем как вызвать новое окно с помощью JavaScript. А теперь посмотрим, как вызвать JavaScript-скрипты с помощью ActionScript 3.0. Как я уже говорил, мы не будем изобретать велосипед и воспользуемся уже готовым решением - классом PopUp (сам класс прилагается в исходнику, ссылка на который в конце поста).
Код ActionScript 3.0:
package
{
import flash.net.URLRequest;
import flash.net.navigateToURL;
public class PopUp
{
private var _url:String = "http://www.cristalab.com";
private var _width:Number = 400;
private var _height:Number = 300;
private var _title:String = "title";
private var _resize:String = "yes";
private var _window:String = "_blank";
public function PopUp()
{
}
public function openWindow(newUrl:String = null):void
{
if (newUrl)
{
this.url = newUrl;
}
var _urlRequest:URLRequest=new URLRequest();
_urlRequest.url = "javascript:window.open('" + url + "','" + title + "','width=" + width + ",height=" + height + ", resizable=" + resize + "');newWindow.focus(); void(0);";
navigateToURL(_urlRequest,_window);
}
public function set url(val:String):void
{
_url = val;
}
public function get url():String
{
return _url;
}
public function set width(val:Number):void
{
_width = val;
}
public function get width():Number
{
return _width;
}
public function set height(val:Number):void
{
_height = val;
}
public function get height():Number
{
return _height;
}
public function set title(val:String):void
{
_title = val;
}
public function get title():String
{
return _title;
}
public function set resize(val:String):void
{
_resize = val;
}
public function get resize():String
{
return _resize;
}
public function set window(val:String):void
{
_window = val;
}
public function get window():String
{
return _window;
}
}
}
В принципе, ничего сложного. Использовать класс тоже просто.
Код ActionScript 3.0:
/*
подключаем класс
*/
import PopUp;
/*
создаём экземпляр класса
*/
var popUp:PopUp = new PopUp();
/*
настраиваем наше будущее окно
*/
popUp.url = "index.php"; // это адрес страницы, которую мы откроем в новом окне
popUp.title = "Edapskov"; // название
popUp.width = 640; // ширина
popUp.height = 480; // высота
popUp.resize = "yes"; // возможность изменять размеры окна
popUp.window = "_self"; // где откроется окно
/*
создаём кнопку, при нажатие по которой будет создаваться новое окно
*/
btn.addEventListener(MouseEvent.MOUSE_DOWN, btnDown);
function btnDown(event:MouseEvent):void
{
popUp.openWindow();
}
Результат будет следующим:
Нажимаем на кнопку. Должно открыться новое окно с главной страницей данного сайта.
Но поддержка JavaScript может отсутствовать в браузере. Поэтому будет разумно, если мы проверим доступность JavaScript. Если JS недоступен, то уже в самом флеш-плеере выведем соответствующее сообщение (с помощью недавно созданного класса Mes).
Код ActionScript 3.0:
/*
подключаем классы
*/
import PopUp;
import ru.edapskov.display.Mes;
/*
создаём экземпляр класса PopUp
*/
var popUp:PopUp = new PopUp();
/*
настраиваем наше будущее окно
*/
popUp.url = "index.php";// это адрес страницы, которую мы откроем в новом окне
popUp.title = "Edapskov";// название
popUp.width = 640;// ширина
popUp.height = 480;// высота
popUp.resize = "yes";// возможность изменять размеры окна
popUp.window = "_self";// где откроется окно
/*
создаём кнопку, при нажатие по которой будет создаваться новое окно
*/
btn.addEventListener(MouseEvent.MOUSE_DOWN, btnDown);
function btnDown(event:MouseEvent):void
{
if (ExternalInterface.available)
{
popUp.openWindow();
}
else
{
addChild(new Mes("Браузер не поддерживает JavaScript!",stage.stageWidth,stage.stageHeight));
}
}
Результат будет следующим:
Проверяем работу флеш-приложения.
Вообще, связка ActionScript 3.0 и JavaScript - штука довольно непростая и может преподнести много не самых приятных сюрпризов. Например, у меня долгое время все примеры взаимодействия AS3.0/JS просто не работали. Оказалось, что тестировать их надо сервере. Есть и другие ограничения. Вот так вот :-)
Исходник под Adobe Flash CS5.5, классы PopUp и Mes скачать можно здесь.
Примечание от 13.02.2012:
[!] Если кто-то интересуется созданием popup-окон с помощью JavaScript и ActionScript 2.0 (!), то можете воспользоваться специальным визуальным генератором от www.flash-db.com.