Глава 5 Создание визуальных эффектов

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

• Вращающаяся и изменяющая цвета спираль

• Случайность и эффект старого кино

• Перемещение букв

• След от курсора

• Эффект трехмерности

Большинство глав данной книги описывают игры. Несмотря на то, что игры интерактивны, прежде всего мы рассмотрим Flash‑ролики, которые обладают минимальной интерактивностью или вообще ее не имеют. Эти неинтерактивные ролики напоминают простые Flash‑анимации, но создаются при помощи ActionScript.

В данной главе также рассматривается несколько простых примеров действующего ActionScript‑кода. Хотя многие замечательные эффекты могут быть созданы только при помощи анимационных приемов Flash, Action‑Script также способен на многое.

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

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

Исходный файл: 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;

}

on (release) {

// Код, исполняемый при нажатии на кнопку.

trace("Home");

}

Примечание

С помощью конструкции on в сценарии кнопок вводятся фрагменты кода, выполняемые после определенных событий. Такими событиями могут быть press, release, releaseOutside, rollOver, dragOver, dragOut и keyPress.

Каждый из трех обработчиков в вышеприведенном листинге содержит строку кода, выполняемого после определенного события кнопки. Например, когда пользователь нажимает и отпускает кнопку, выполняется команда trace. При этом слово «Home» помещается в окно Output.

На самом деле в таких случаях обычно используется команда getURL, которая сообщает браузеру, что нужно перейти к новой странице. Команда trace приведена здесь только в качестве примера.

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

Сценарий клипа помещается на один уровень выше, чем сценарий кнопки. На диаграмме (рис. 5.2) изображена главная временная шкала, клип, содержащий кнопку, а также два сценария.

Рисунок 5.2. На диаграмме показано расположение двух сценариев ActionScript относительно главной временной шкалы, клипа и кнопки

Сценарий клипа начинается с того, что значение переменной newscale задается равным 100. Затем при каждом обращении к кадру сценарий сравнивает эту переменную со значением _xscale клипа. Если они не совпадают, параметр _xscale изменяется на 10 единиц ближе к значению переменной newscale. Параметр _yscale изменяется соответственно.

onClipEvent(load) {

// Начальный размер кнопки 100%.

newscale =100;

}

onClipEvent(enterFrame) {

if (this._xscale > newscale) {

// Уменьшаем значения параметров.

this._xscale ‑= 10;

this._yscale ‑= 10;

} else if (this._xscale < newscale) {

// Увеличиваем значения параметров.

this._xscale += 10;

this._yscale += 10;

}

}

Примечание

Обработчик OnClipEvent используется в сценариях клипов. Он устроен аналогично обработчику on() для кнопки, но может реагировать на события, происходящие не только в данном клипе, но и во всем ролике. Событие enterFrame возникает каждый раз при переходе к новому кадру или возврате в начало цикла. Событие mouseDown происходит при каждом нажатии кнопки мыши, даже если курсор не находится над заданным клипом. Кроме того, описание onClipEvent реагирует на события load, unload, mouseMove, mouseUp, keyDown, keyUp и data.

При запуске ролика значение переменной newscale равно 100, параметр _xscale также равен 100. Во время события enterFrame ничего не происходит. Затем, когда пользователь помещает курсор над клипом, а следовательно, и над кнопкой внутри клипа, сценарий кнопки изменяет значение переменной newscale на 150.

При запуске события enterFrame значения параметров _xscale и _yscale будут меньше, чем значение переменной newscale. В результате масштаб увеличивается на 10. Кнопка начинает увеличиваться. Когда значение достигает 150, увеличение заканчивается, а значения newscale и _xscale еще раз становятся равными. Аналогичный процесс возникает, когда пользователь снимает курсор с кнопки и переменная newscale возвращается к значению 100.

Примечание

Свойства клипа _xscale и _yscale соответствуют размеру клипа по вертикали и горизонтали. Значение 100 обозначает, что размер соответствует исходному размеру копии эталона клипа. Вы можете изменять данные параметры с помощью ActionScript, тем самым растягивая или сжимая клип. При использовании отрицательного значения клип будет зеркально отражен по горизонтали или вертикали.