PopUp-окно, ActionScript 3.0 и JavaScript

Совсем недавно мы уже создавали окно вывода сообщений на 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(); }

Результат будет следующим:

Загрузить Adobe Flash Player

Нажимаем на кнопку. Должно открыться новое окно с главной страницей данного сайта.

Но поддержка 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)); } }

Результат будет следующим:

Загрузить Adobe Flash Player

Проверяем работу флеш-приложения.

Вообще, связка 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.

Автор: admin

Дата добавления: 2011-11-23

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

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

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

Социальные закладки:
Комментарии:
Комментатор
Комментарий добавил(а): edapskov
Дата добавления: 2012-02-02
На 404-ю ошибку внимания не обращайте - просто нет у меня файла с таким именем, как у вас указан в коде :-)
Комментатор
Комментарий добавил(а): edapskov
Дата добавления: 2012-02-02
Вообще-то, всё у вас работает:

http://edapskov.ru/content/popup_3.html

Это я просто скопировал и скомпилировал ваш код.

Попробуйте запустить свою флешку на локальном сервере или с какого-либо сайта...
Комментатор
Комментарий добавил(а): kabab
Дата добавления: 2012-02-01
Забыл добавить что меняю кнопку на свою.
Комментатор
Комментарий добавил(а): kabab
Дата добавления: 2012-02-01
С прокруткой спасибо, работает. Но вот с ИЕ не получается. Но это что то я не так делаю наверное... Если беру Ваши файлы и заливаю себе на сервер, то все отлично работает и в ИЕ, меняю на свои значение перестаёт работать. Вот что у меня прописано

import PopUp;
var popUp:PopUp = new PopUp();
popUp.url = "index1.html";
popUp.title = "Site";
popUp.width = 640;
popUp.height = 480;
popUp.resize = "yes";
popUp.window = "_self";
var btn:Btn=new Btn();
addChild(btn);
btn.x=100;
btn.y=200;
btn.alpha=1;
btn.addEventListener(MouseEvent.CLICK,func);
function func(event:MouseEvent):void{
if (ExternalInterface.available)
{
popUp.openWindow();
}
}
btn.addEventListener(MouseEvent.MOUSE_OVER,funcOver);
function funcOver(event:MouseEvent):void{
btn.alpha=0.5;
}
btn.addEventListener(MouseEvent.MOUSE_OUT,funcOut);
function funcOut(event:MouseEvent):void{
btn.alpha=1;
}
Комментатор
Комментарий добавил(а): edapskov
Дата добавления: 2012-02-01
Чтобы была прокрутка, надо её указать. То есть добавить в класс scrollbars=yes. Можете просто в классе заменить строчку на эту:

_urlRequest.url="javascript:window.open('"+url+"','"+title+"','width="+width+",height="+height+", scrollbars=yes ,resizable="+resize+"');newWindow.focus(); void(0);";
Прокрутка появится - проверено.

Что до кода:

else { addChild(new Mes("Браузер не поддерживает JavaScript!",stage.stageWidth,stage.stageHeight)); }
то это просто вывод альтернативного сообщения в самой флешке на тот случай, если попар-окно не получится открыть.

Что до IE, то и там работает. Но, возможно, или плеер старенький, или настройки у браузера такие. В 8-м IE точно работает - проверено...
Комментатор
Комментарий добавил(а): kabab
Дата добавления: 2012-02-01
Сделал кнопку как в видио-уроке. Запустил на сайте флешку, во всех браузерах всё отображается, кроме как в фаерфоксе нету прокрутки вниз попап окна и в ИЕ кнопка есть, но при нажатие ничего не происходит.

Если вставляю -
else
{
addChild(new Mes("Браузер не поддерживает JavaScript!",stage.stageWidth,stage.stageHeight));
}
кнопка пропадает и не отображается нигде.
Я во флеше полный ноль... но вот думаю может быть проблема после вставки этой строчки в том что во флешке уже есть addChild(btn);? Админ помоги плиз разобраться. Спасибо. :)
Комментатор
Комментарий добавил(а): edapskov
Дата добавления: 2011-12-02
Yura, я не поленился (а я очень ленив) и специально проверил на нескольких браузерах: Safari 5.0.5, IE8, на последнем Firefox-е, в Opera 11.5. ВЕЗДЕ флешки отображаются и везде они работают корректно.
Комментатор
Комментарий добавил(а): yura
Дата добавления: 2011-12-02
ДА КАК?!! IE9, опять же, кнопок нэма.
Комментатор
Комментарий добавил(а): edapskov
Дата добавления: 2011-12-01
Yura, проблема в вашем браузере. Флешки все на месте. Более того, повторюсь, я проверял их работу в Хроме и у меня проблем не было.
Комментатор
Комментарий добавил(а): Yura
Дата добавления: 2011-12-01
Да блин, вместо флэшек я вижу белый фон!
Добавить комментарий:







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

Идиот-тест

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

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