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

Подход

Каждая кнопка реагирует на наведение и снятие курсора. При наведении курсора на кнопку обработчик получит новое значение масштаба. Если в начальный момент времени масштаб клипа (с кнопкой внутри) составляет 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");

}...

Каждый из трех обработчиков в вышеприведенном листинге содержит строку кода, выполняемого после определенного события кнопки. Например, когда пользователь нажимает и отпускает кнопку, выполняется команда 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;

}

}...

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

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

...

К сведению

Для того чтобы завершить создание панели с кнопками, необходимо скопировать клип несколько раз. Внутри каждого клипа измените сценарий on (release), чтобы он выполнял какое-нибудь другое действие, например переход к другой странице. Следует также изменить текст в клипе, чтобы кнопки выглядели так, как это изображено на рис. 5.1.

Все клипы содержат копию одного и того же сценария ActionScript. Это плохо, поскольку любое изменение сценария повлечет за собой необходимость внесения таких же изменений в сценарии всех остальных кнопок. В результате в библиотеке окажется столько же клипов, сколько и кнопок, однако на самом деле вам необходима всего одна. Каждой кнопке каждого клипа будет назначен свой сценарий, в то время как каждый клип на главной временной шкале будет содержать копию одного и того же сценария.

...

Все это можно увидеть, загрузив файл Expandingbuttons.fla.

Другие возможности

Значения параметров _xscale и _yscale не обязательно должны быть равны. Вы можете изменить только один из них, чтобы получить другой эффект. Вы также не обязаны придерживаться приводимых в книге значений. Кнопка может увеличиваться до большего или меньшего размера. Немного изменив код, вы можете заставить кнопки пульсировать. Для этого необходимо задать возвращение значения переменной newscale к 100 сразу после того, как кнопка достигнет максимального размера. В результате при наведении курсора кнопка будет мгновенно увеличиваться и сразу же уменьшаться.

Исходные файлы: Colorchange.fla, Colortransform.fla, Gradualchange.fla, Spiral.fla

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

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

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

Подход

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

Объект Color

Объект Color предназначен для изменения цветов клипа. Его можно представить как набор функций, позволяющих узнавать и управлять цветами клипа.

Сначала надо создать объект Color, связанный с клипом, который вы собираетесь изменять. Это можно сделать следующим образом:

myColorObject = new Color(«myMovieClipName»);

...