Опубликован: 27.03.2013 | Доступ: свободный | Студентов: 1531 / 280 | Длительность: 08:07:00
Специальности: Программист
Лекция 18:

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

< Лекция 17 || Лекция 18 || Лекция 19 >
Аннотация: В лекции подробно рассмотрен алгоритм создания различных видов анимации кнопки.

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

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

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

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

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

  • Up – на кадре находится изображение кнопки
  • Over – на кадре находится то изображение, которое будет у кнопки при наведении на нее мыши
  • Down – это изображение будет у кнопки, при нажатии по ней мыши
  • Hit – экранная область, которая считается зоной действия кнопки

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

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

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

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

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

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

  • кнопки, стилизованные под объемные. Иллюзию объема создает использование градиентной заливки. Не забудьте, что цвет фона и цвет по краям кнопки должен быть одинаков или почти одинаков.
  • Кнопки с иллюзией "вдавленности" при нажатии. Данный эффект возникает при использовании такого приема:

    -кнопка имеет обводку (верхняя и левая грань белые, нижняя и правая – черные);

    -при наведении на нее мыши цвет заливки чуть-чуть осветляется (затемняется);

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

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

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

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

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

  • Рассмотрим пример 1. Ролик вставлен в первый кадр кнопки – кнопка анимирована сама по себе, при наведении (нажатии) на нее мыши анимация останавливается. Во 2 и 3-ем кадрах кнопки ролики разгруппированы; либо, наоборот:

    -сначала создаем статичное изображение кнопки во всех трех кадрах;

    -затем в первом кадре изображение преобразуем в символ "Фрагмент ролика";

    -теперь "входим" в ролик (двойной клик);

    -создаем анимацию: движения, формы или покадровую; используем слои, маски и все те приемы создания анимации, которые умеем делать!

  • Рассмотрим пример 2. Ролик вставлен во второй кадр кнопки – при наведении на нее мыши проигрывается анимационный ролик.

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

  • найдите подходящее растровое изображение;
  • импортируйте его во Флеш;
  • выделите, преобразуйте в векторный формат ("Модификация" - "Растровое изображение" - "Векторизация");
  • "очистите" нужное изображение от "шелухи" (путем выделения и удаления некоторых, мешающих восприятию изображения, областей);
  • выделите, что осталось, преобразуйте в кнопку;
  • во второй кадр кнопки вставьте ролик (в том же слое, где находится изображение кнопки, либо отдельным слоем). Например, свет от горящего фонаря (данный ролик прост в реализации – увеличение полупрозрачного круга (alfa 30%) с одновременным изменением прозрачности до 0%).

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

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

  • Используя созданную в практической работе №1 кнопку, добавьте к ней анимацию (при наведении мыши). Анимация должна быть такого рода: плавное осветление кнопки.
  • Второй вариант анимации кнопки: при наведении на нее мыши из нее медленно "вытекает" подсказка (от совсем прозрачной до полупрозрачной).

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

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

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

  • либо разбивать на большое количество разделов;
  • либо создавать сложную структуру (многоуровневую) – каждый раздел разбит на подразделы, которые в свою очередь также разбиты на подразделы и т.д.

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

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

  • если меню содержит большое количество кнопок можно создать так называемое "скрытое" меню
  • создаем горизонтальную "ленту" из кнопок меню;
  • каждой кнопке на панели Cвойств даем имя (but1, but2, but3, …);
  • на сцене располагаем маску, через которую "видна" часть ленты (3-5 кнопок);
  • создаем еще 2 кнопки "пролистывания ленты" (на слое, расположенном выше слоя с маской); даем им имена Vlevo, Vpravo;
  • выделяем первый кадр временной шкалы, открываем окно "Действия", создаем скрипт:
    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.1. Меню в виде дерева

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • Свойства и методы экземпляра символа
  • Скрытое меню
  • Меню "Дерево"
  • Прозрачность структуры приложения

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

Вопросы

  • Перечислите возможности анимации кнопки (по сложности).
  • Перечислите ситуации, в которых рационально использование каждого из рассмотренных в лекции видов анимации кнопки.
  • Чем на временной диаграмме отличаются кадры, имеющие номера от кадров с метками?

Упражнения

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

< Лекция 17 || Лекция 18 || Лекция 19 >
Яна Борисова
Яна Борисова

В тестах есть вопросы, детали которых в тестах не рассматриваются. Ест ли возможность рассмотреть материал в лекциях более подробно и в деталях?

Александра Замбровская
Александра Замбровская

Я прохожу бесплатное (самостоятельное) изучение курса Создание интерактивных приложений в Adobe Flash Могу ли я (имея высшее образование) заказать официальное удостоверение по программе повышения квалификации? Сколько это будет стоить и где можно заказать (если можно, то ссылку на страничку)?