Приемы создания кнопок меню

Приемы создания кнопок меню

Материалы к лекции Вы можете скачать здесь.

На предыдущих лекциях был рассмотрен алгоритм создания кнопок. Вспомним этот алгоритм:

Создаем кнопку, два раза кликаем по изображению кнопки. Этим мы входим в режим редактирования кнопки.

На временной шкале появится 4 кадра:

Для анимации кнопки необходимо изменить изображение на 2-ом и 3-ем кадрах (Over и Down) временной шкалы кнопки. В итоге изображение при наведении и нажатии по кнопке мыши изменится.

Рассмотрим подробнее процесс создания анимации кнопки.

Сложность анимации кнопки (изменение ее поведения в ответ на действие пользователя) условно разделим на три уровня:

Уровень 1. Анимация кнопки простейшая. В кадрах Over и Down статичный графический объект:

Во всех приведенных выше примерах векторное изображение кнопки смотрится достаточно примитивно. Хотя и векторный редактор дает возможность создавать реалистичные изображения. В предложенных далее примерах вы найдете:

Практическая работа №1

Создайте кнопку с эффектом объема и одновременно с эффектом "вдавленности" при клике по ней мыши.

Уровень 2. Анимация кнопки сложная (в кадрах Over и Down анимационные ролики).

Рассмотренные выше примеры все же не устраивают нас по причине "резкого" поведения кнопки. Гораздо эффектнее смотрится плавное изменение внешнего вида. Это достигается за счет включения ролика в первый или (и) второй кадры кнопки:

Создание кнопок в приведенных выше примерах требуют некоторых художественных навыков (в частности, "Пример 2"). Не умеющим рисовать (либо когда рисованные кнопки не гармонируют с растровым фоном) можно предложить следующий прием:

Осталось добавить, что ролик, вставленный в кнопку должен останавливаться в конце проигрывания (не забудьте поставить команду Stop(); на последнем кадре ролика).

Практическая работа №2

Уровень 3. Анимация ПОЛОЖЕНИЯ кнопок на сцене.

Что подразумевается под анимацией положения кнопок, рассмотрим на примере.

Допустим, есть материал для некоего информационно-справочного приложения. Информации много, ее необходимо группировать:

Теперь обрисовываем себе проблему: как на экранном пространстве разместить большое количество кнопок меню (каждая кнопка открывает свой раздел)? Или как создать "прозрачность" структуры при большой степени вложенности меню (т.е. когда каждый режим меню имеет подменю, которые имеют свои подменю и т.д.)?

Выход один – в создании "динамичного" меню:

Vlevo.addEventListener(MouseEvent.CLICK, fun1);
function fun1 (e:MouseEvent):void
  {
but1.x -=5;
  but2.x -=5;
  but3.x -=5;
}
Vpravo.addEventListener(MouseEvent.CLICK, fun2);
function fun2 (e:MouseEvent):void
  {
but1.x +=5;
  but2.x +=5;
  but3.x +=5;
}

Рассмотрим подробнее команды, стоящие в теле функции fun1 и fun2:

В процессе разработки приложения мы можем программировать экземпляры символов. Каждый экземпляр обладает определенным набором свойств (характеристик объекта) и методов (набором всевозможных действий, выполняемых объектом). Иначе говоря, объект характеризуется так: "Какой он?" - это свойства и "Что он умеет делать?" - это методы.

Для программирования объекта используют такую конструкцию:

Имя.объекта.Свойство.объекта = Значение этого свойства
Имя объекта.Метод (параметры)

В приведенном выше скрипте задается такое значение свойства объектов but1, but2, but3, как положение по оси Х (свойство х). Значение данного свойства при каждом нажатии мыши по кнопке Vlevo уменьшается на 5 (-=5), при нажатии по кнопке Vpravo увеличивается на 5 (+=5).

Если меню сложной структуры (многоуровневое), есть готовый, не нами придуманный, способ отображения такой структуры – в виде "дерева" (). (рис 17.1) Меню в виде дерева

Достоинство такой организации меню – оно делает "прозрачной" структуру приложения. Недостаток – большое количество экранного пространства, необходимое для вывода меню. Выход заключается в создании дерева, в котором доступ к каждому пункту меню возможен без "открытия" всех "веточек"

(рис 17.2) Пример иллюстрации скрытого меню

Организация данной структуры также невозможна без программирования. Основная идея заключается в изменении координат по оси у.

Кого-то может не устроить стандартный прием – "иерархическое дерево". Можно придумать что-то свое, авторское.

Предположим, что каждая из 4-х кнопок имеет еще и подменю. А места на экране нет! Можно поступить так – при наведении на кнопку мыши копка "расширяется" и на ней располагаются вложенные в нее подрежимы. Мышка "ушла" - кнопка сузилась. При расширении кнопка, естественно, будет сдвигать "соседей":

(рис 17.3) Пример 2-хуровневого меню (каждая кнопка расширяется и в ней отображается подменю)

Практическая работа №3

Используя созданную в практической работе №2 кнопку, размножьте ее на сцене (скопируйте и вставьте либо многократно "вытащите" из библиотеки). Создайте многоуровневое меню.

Может быть, у вас появятся свои идеи организации меню на сцене? Главное – должен быть соблюден принцип прозрачности структуры! "Прозрачность структуры приложения" - это, вкратце, когда видно, как мы в данный раздел попали, и как из него выйти в любой другой раздел приложения.

Краткие итоги лекции:

Три уровня сложности анимации кнопки:

Анимация кнопки простейшая. В кадрах Over и Down статичный (но разный) графический объект. Один из вариантов таких кнопок – кнопки с эффектом "вдавленности".

Анимация кнопки сложная. В кадрах Over и Down анимационные ролики.

Анимация положения кнопок на сцене ("скрытое" меню с видимостью части кнопок, меню в виде раскрывающегося "дерева" и др.)

Ключевые термины

Набор для практики:

Вопросы

Упражнения

В созданном ранее нестандартном меню разрабатываемого приложения анимируйте кнопки (используя возможности, рассмотренные в лекции).