Adobe Flash. Создание аркад, головоломок и других игр с помощью ActionScript. Гэри Розенцвейг
Чтение книги онлайн.

Читать онлайн книгу Adobe Flash. Создание аркад, головоломок и других игр с помощью ActionScript - Гэри Розенцвейг страница 40

СКАЧАТЬ и цветами, изменять текст, а также перемещать элементы по рабочему полю.

      Увеличение кнопок

      Исходный файл: Expandingbuttons.fla

      Многие сайты используют Flash для навигации от страницы к странице. Даже простой Flash-ролик с одной кнопкой может значительно оживить статическую Web-страницу. При помощи ActionScript вы сможете сделать эти кнопки анимированными.

      Задача проекта

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

      Рисунок 5.1. Если поместить курсор мыши над кнопкой, она увеличивается

      Взглянув на рисунок, можно подумать, что когда на кнопку наводится курсор, она изменяет свой размер внезапно. Однако увеличение кнопки происходит не в одно мгновение, а постепенно, создавая приятный визуальный эффект. Посмотреть, как это выглядит, можно загрузив ролик Expandingbuttons.fla с Web-сайта поддержки книги.

      Подход

      Каждая кнопка реагирует на наведение и снятие курсора. При наведении курсора на кнопку обработчик получит новое значение масштаба. Если в начальный момент времени масштаб клипа (с кнопкой внутри) составляет 100 %, то новое значение будет, например, 150 %.

      С каждым кадром сценарий будет постепенно изменять текущий масштаб: от 100 % до 150 % с шагом 10 %.

      После того как пользователь уберет курсор с кнопки, эффект будет обратным. Новое значение будет равно 100 %, и с каждым кадром кнопка будет уменьшаться на 10 %, пока не достигнет этого значения.

      Подготовка ролика

      Ролик содержит несколько кнопок. Каждая кнопка представляет собой отдельный ролик с кнопкой внутри. Из одного библиотечного эталона кнопки я создал пять разных клипов. В каждый клип поместил одну и ту же кнопку, но разный текст.

      Кнопка может иметь любую форму и цвет. Я использовал классический стиль, поскольку хотел просто продемонстрировать работу сценария.

      Создание кода

      В ролике используется два типа сценариев: назначенные кнопкам и назначенные клипам. Первый тип сценария назначен кнопке, находящейся в клипе. Сценарий, назначенный кнопке, реагирует на события мыши, происходящие именно с этой кнопкой. Такие сценарии – обработчики событий – мы уже рассматривали в уроке 6 главы 2, они реагируют на различные события и в случае кнопки задаются конструкцией on (<событие>) { … }.

      Сценарий кнопки включает три различных обработчика, двумя из которых являются on(rollOver) и on(rollOut). Они устанавливают значение переменной newscale равным новому масштабу для увеличения или уменьшения кнопки.

      Ниже приведен сценарий для кнопки "Home".

      on (rollOver) {

      // Задаем новый размер для увеличения.

      newscale = 150;

      }

      on (rollOut) {

      // Задаем новый размер для уменьшения.

      newscale = 100;

      }

СКАЧАТЬ