При создании флеш-приложений часто возникает необходимость выводить те или иные сообщения для пользователя. Сообщения могут быть самые разнообразные:
- сообщения при возникновении ошибок (например, при загрузке внешних файлов мы обязаны отслеживать возникновение ошибок и оповещать об этом наших пользователей);
- предупреждения для пользователя (например, если пользователь вводит неправильные данные или не выполнил какое-то важное действие, без которого невозможна дальнейшая работа приложения);
- короткие подсказки для пользователя.
Во всех перечисленных случаях мы просто обязаны выводить окно с сообщением, которое оповестит пользователя о возникшей проблеме и (или) подскажет её решение.
Получается, что такое окно за время выполнения работы приложения может быть выведено не раз, и не два, а много-много раз. В таком случае будет разумнее заранее написать класс, выводящий окна с сообщениями. Назовём его ... «Mes» (предсказуемое название, не так ли:-)). Этот класс вы всегда сможете прикрепить к новому флеш-проекту и вызывать окна сообщений минимальным количеством кода (например, всего одной строчкой). Кроме этого мы сделаем наше окно в стиле «code only», то есть вся графика будет генерироваться стандартными методами динамического рисования ActionScript 3.0. Это и быстро, и удобно. И если вы с этим согласны, то давайте воплотим наш замысел в жизнь.
Итак, давайте напишем класс, отрисовывающий окно сообщения. При этом наше окно вывода сообщений должно удовлетворять следующим условиям:
- быть модальным (в нашем случае это будет означать, что окно перекроет доступ к интерактивным элементам на сцене флеш-ролика);
- быть масштабируемым.
Пишем код...
Код ActionScript 3.0:
/*
@edapskov, v 1.0
*/
package ru.edapskov.display
{
/*
подключение необходимых классов
*/
import flash.display.Sprite;
import flash.display.LineScaleMode;
import flash.display.CapsStyle;
import flash.display.JointStyle;
import flash.text.TextField;
import flash.text.TextFormat;
import flash.filters.DropShadowFilter;
import flash.filters.BitmapFilterQuality;
import flash.events.MouseEvent;
/*
тело класса
*/
public class Mes extends Sprite
{
/*
константы
*/
private const _ANGL:uint = 16; // сглаживание углов окна вывода сообщений
private const _BTN:uint = 10; // размеры кнопки, закрывающей окно вывода сообщений
/*
переменные
*/
private var _conteiner:Sprite;
/*
функция конструктор
*/
public function Mes(str:String="Error!",widthCont:uint=550,heightCont:uint=400)
{
/*
форматирование текста
*/
var fTxt:TextFormat = new TextFormat ;
fTxt.size = 12;
fTxt.color = 0x333333;
fTxt.font = "Verdana";
/*
фильтр DropShadowFilter, который создаст небольшую тень вокруг нашего окна
*/
var shadow:DropShadowFilter = new DropShadowFilter ;
shadow.distance = 3;
shadow.angle = 45;
shadow.alpha = 0.5;
shadow.color = 0x333333;
shadow.quality = BitmapFilterQuality.HIGH;
/*
контейнер, который будет перекрывать всю видимую область флеш-ролика, а также в нём будет размещаться само окно сообщений
*/
_conteiner = new Sprite ;
_conteiner.graphics.beginFill(0xffffff,0.8);
_conteiner.graphics.drawRect(0,0,widthCont,heightCont);
_conteiner.graphics.endFill();
addChild(_conteiner);
/*
окно вывода сообщений
*/
var window:Sprite = new Sprite ;
window.graphics.lineStyle(1,0xffffff,0,false,LineScaleMode.NORMAL,CapsStyle.ROUND,JointStyle.MITER,1);
window.graphics.beginFill(0xffffff,1);
window.graphics.drawRoundRect(0,0,widthCont / 5 * 3,heightCont / 5 * 3,_ANGL,_ANGL);
window.graphics.endFill();
_conteiner.addChild(window);
window.x = widthCont / 5;
window.y = heightCont / 5;
window.filters = [shadow];
/*
текстовое поле, в которое будет выводиться текст сообщения
*/
var txt:TextField = new TextField ;
txt.defaultTextFormat = fTxt;
txt.width = window.width / 5 * 3;
txt.height = window.height / 5 * 3;
txt.selectable = false;
txt.multiline = true;
txt.wordWrap = true;
txt.htmlText = str;
window.addChild(txt);
txt.x = window.width / 5;
txt.y = window.height / 5;
/*
кнопка, закрывающая окно вывода сообщений
*/
var btn:Sprite = new Sprite ;
btn.graphics.beginFill(0xffffff,1);
btn.graphics.drawRect(0,0,_BTN,_BTN);
btn.graphics.endFill();
btn.graphics.lineStyle(4,0x333333,1,false,LineScaleMode.NORMAL,CapsStyle.ROUND,JointStyle.MITER,1);
btn.graphics.moveTo(0,0);
btn.graphics.lineTo(_BTN,_BTN);
btn.graphics.moveTo(_BTN,0);
btn.graphics.lineTo(0,_BTN);
window.addChild(btn);
btn.x = window.width - _BTN - _BTN;
btn.y = _BTN;
btn.alpha = 0.6;
btn.buttonMode = true;
btn.useHandCursor = true;
btn.mouseChildren = false;
btn.addEventListener(MouseEvent.MOUSE_UP,mouseUpObj);
btn.addEventListener(MouseEvent.MOUSE_OVER,mouseOverObj);
btn.addEventListener(MouseEvent.MOUSE_OUT,mouseOutObj);
}
/*
закрытие окна
*/
private function mouseUpObj(event:MouseEvent):void
{
_conteiner.parent.removeChild(_conteiner);
}
/*
наведение на интерактивный объект
*/
private function mouseOverObj(event:MouseEvent):void
{
event.target.alpha = 1;
}
/*
увод курсора с интерактивного объекта
*/
private function mouseOutObj(event:MouseEvent):void
{
event.target.alpha = 0.6;
}
}
}
Код снабжён комментариями и ничего сложного в нём нет. Просто сохраним код в виде файла Mes.as, но при этом не забудьте его разместить правильно, то есть в папке display, которая вложена в папку edapskov, которая, в свою очередь вложена в папку ru (именно об этом нам и говорит определение package). Использовать его также просто.
Код ActionScript 3.0:
/*
подключаем наш класс Mes
*/
import ru.edapskov.display.Mes;
/*
вызываем окно вывода сообщения
*/
var mes:Mes = new Mes('Внимание, произошла ошибка!');
/*
добавляем окно в список отображения
*/
addChild(mes);
или
Код ActionScript 3.0:
/*
подключаем наш класс Mes
*/
import ru.edapskov.display.Mes;
/*
вызываем окно вывода сообщения и добавляем его в список отображения
*/
addChild(new Mes('Внимание, произошла ошибка!'));
При создании объекта класса Mes мы можем передать в конструктор объекта три следующих параметра:
- текст выводимого сообщения (он может содержать html-форматирование);
- ширина контейнера, содержащего окно вывода сообщений (по умолчанию равна 550 px);
- высота контейнера, содержащего окно вывода сообщений (по умолчанию равна 400 px).
Так как на практике контейнер с сообщением, как правило, должен перекрывать всю видимую область флеш-ролика (и тем самым блокировать все расположенные под ним интерактивные объекты), то логично будет использовать код следующего вида...
Код ActionScript 3.0:
import ru.edapskov.display.Mes;
var mes:Mes = new Mes('Внимание, произошла ошибка!',stage.stageWidth,stage.stageHeight);
addChild(mes);
Настало время посмотреть, как на практике работает наш класс Mes. Смотрим:
Вводим в поле ввода свой текст и нажимаем кнопку «Поехали!». Открывается окно с введённым вами ранее сообщением. При этом расположенные ниже объекты (поле ввода и кнопка) блокируются, то есть становятся недоступными. Нажимаем на окне сообщения кнопку в виде крестика в верхнем правом углу и окно закрывается, а поле ввода и кнопка снова становятся доступными. Что нам и требовалось.
Исходник под Adobe Flash CS5.5 и сам класс Mes скачать можно здесь.
Рейтинг поста: 
