Окно сообщений на ActionScript 3.0

При создании флеш-приложений часто возникает необходимость выводить те или иные сообщения для пользователя. Сообщения могут быть самые разнообразные:

- сообщения при возникновении ошибок (например, при загрузке внешних файлов мы обязаны отслеживать возникновение ошибок и оповещать об этом наших пользователей);

- предупреждения для пользователя (например, если пользователь вводит неправильные данные или не выполнил какое-то важное действие, без которого невозможна дальнейшая работа приложения);

- короткие подсказки для пользователя.

Во всех перечисленных случаях мы просто обязаны выводить окно с сообщением, которое оповестит пользователя о возникшей проблеме и (или) подскажет её решение.

Получается, что такое окно за время выполнения работы приложения может быть выведено не раз, и не два, а много-много раз. В таком случае будет разумнее заранее написать класс, выводящий окна с сообщениями. Назовём его ... «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 Player

Вводим в поле ввода свой текст и нажимаем кнопку «Поехали!». Открывается окно с введённым вами ранее сообщением. При этом расположенные ниже объекты (поле ввода и кнопка) блокируются, то есть становятся недоступными. Нажимаем на окне сообщения кнопку в виде крестика в верхнем правом углу и окно закрывается, а поле ввода и кнопка снова становятся доступными. Что нам и требовалось.

Исходник под Adobe Flash CS5.5 и сам класс Mes скачать можно здесь.

Автор: admin

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

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

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

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

Социальные закладки:
Комментарии:
Комментатор
Комментарий добавил(а): Дмитрий
Дата добавления: 2012-11-03
Всё, спасибо! Во всём разобрался.
Комментатор
Комментарий добавил(а): edapskov
Дата добавления: 2012-11-02
Вот исходник - http://edapskov.ru/content/mes_v2.zip
Комментатор
Комментарий добавил(а): Дмитрий
Дата добавления: 2012-11-02
Выдаёт ошибку, говорит, что в классе Mes нужен подкласс flash.display.SimpleButton. Я его туда ввожу, сохраняю, а он ни в какую. Подскажите пожалуйста, как быть?
Комментатор
Комментарий добавил(а): edapskov
Дата добавления: 2012-10-31
Нарисуйте кнопку и сделайте её мувиком. Потом в библиотеке найдите этот мувик и вызовите у него контекстное меню (правый клик мышки). В контекстном меню выбрать пункт СВОЙСТВА. Откроется окно. В этом окне поставьте галочку у пункта ЭКСПОРТ ДЛЯ ACTIONSCRIPT и дайте имя классу (например, MyBtn). Теперь эту кнопку можно добавлять куда угодно и сколько угодно раз с помощью метода addChild() и позиционировать с помощью свойств x и y.
Комментатор
Комментарий добавил(а): Дмитрий
Дата добавления: 2012-10-31
Скажите пожалуйста, как добавить в это окно кнопку?
(желательно нарисованную во Flash)
Комментатор
Комментарий добавил(а): edapskov
Дата добавления: 2012-08-02
Там код открыт - допишите класс под свой вкус.
Комментатор
Комментарий добавил(а): Daniel
Дата добавления: 2012-08-02
Его можно изменить на свой?
Комментатор
Комментарий добавил(а): edapskov
Дата добавления: 2012-08-02
В смысле? Там же, вроде, есть крестик?
Комментатор
Комментарий добавил(а): Daniel
Дата добавления: 2012-08-01
А крестик с помощью которого можно закрыть окно стандартный?
Комментатор
Комментарий добавил(а): anna
Дата добавления: 2012-03-16
спасибо!!!
Добавить комментарий:







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

Идиот-тест

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

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