Увеличение кнопок
Исходный файл: Expandingbuttons.fla
Многие сайты используют Flash для навигации от страницы к странице. Даже простой Flash-ролик с одной кнопкой может значительно оживить статическую Web-страницу. При помощи ActionScript вы сможете сделал эти кнопки анимированными.Задача проекта
Задача проекта - создать кнопки, которые в случае, если подвести к ним курсор мыши, не меняют цвет, а увеличиваются и затем, когда курсор убран, возвращаются к нормальному размеру. На рис. 5.1 изображенс пять подобных кнопок, курсор расположен над второй из них.
Взглянув на рисунок, можно подумать, что когда на кнопку наводится курсор, она изменяет свой размер внезапно. Однако увеличение кнопки происходит не в одно мгновение, а постепенно, создавая приятный визуальный эффект. Посмотреть, как это выглядит, можно загрузив ролик Expandingbuttons.fla .
Подход
Каждая кнопка реагирует на наведение и снятие курсора. При наведении курсора на кнопку обработчик получит новое значение масштаба. Если в начальный момент времени масштаб клипа (с кнопкой внутри) составляет 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) изображена главная временная шкала, клип содержащий кнопку, а также два сценария.
Сценарий клипа начинается с того, что значение переменной 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, тем самым растягивая или сжимая клип. При использовании отрицательного значения клип будет зеркально отражен по горизонтали или вертикали.
Для того чтобы завершить создание панели с кнопками, необходимо скопировать клип несколько раз. Внутри каждого клипа измените сценарий on (release), чтобы он выполнял какое-нибудь другое действие, например переход к другой странице. Следует также изменить текст в клипа, чтобы кнопки выглядели так, как это изображено на рис. 5.1.Все клипы содержат копию одного и того же сценария ActionScript. плохо, поскольку любое изменение сценария повлечет за собой необходимость внесения таких же изменений в сценарии всех остальных кнопок.В результате в библиотеке окажется столько же клипов, сколько и кнопок, однако на самом деле вам необходима всего одна. Каждой кнопке каждого клипа будет назначен свой сценарий, в то время как каждый клип на главной временной шкале будет содержать копию одного и того сценария.
Вместо того чтобы копировать, а затем вставлять один и тот же сценарий во все кнопки, вы можете использовать команду #include, которая позволяет при компиляции кода считывать сценарий из внешних файлов. При изменении сценария внешнего файла все кнопки соответственно изменят свой сценарий. Тем не менее, вам все же придется скопировать и вставить команду #include в каждую копию клипа.
Другие возможности
Значения параметров _хscale и _yscale не обязательно должны быть равны. Вы можете изменить только один из них, чтобы получить другой эффект. Вы также не обязаны придерживаться приводимых в книге значений. Кнопка может увеличиваться до большего или меньшего размера. Немного изменив код, вы можете заставить кнопки пульсировать. Для этого необходимо задать возвращение значения переменной newscale к 100 сразу после того, как кнопка достигнет максимального размера. В результате при наведении курсора кнопка будет мгновенно увеличиваться и сразу же уменьшаться.
|