Увеличение кнопок
Исходный файл: Expandingbuttons.fla.
Многие сайты используют Flash для навигации от страницы к странице. Даже простой Flash-ролик с одной кнопкой может значительно оживить статическую Web-страницу. При помощи ActionScript вы сможете сделал эти кнопки анимированными.
Задача проекта
Задача проекта – создать кнопки, которые в случае, если подвести к ним курсор мыши, не меняют цвет, а увеличиваются и затем, когда курсор убран, возвращаются к нормальному размеру. На рис. 5.1 изображено пять подобных кнопок, курсор расположен над второй из них.
Рис. 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%.