Увеличение кнопок
Исходный файл: Expandingbuttons.fla.
Многие сайты используют Flash для навигации от страницы к странице. Даже простой Flash-ролик с одной кнопкой может значительно оживить статическую Web-страницу. При помощи ActionScript вы сможете сделал эти кнопки анимированными.
Задача проекта
Задача проекта – создать кнопки, которые в случае, если подвести к ним курсор мыши, не меняют цвет, а увеличиваются и затем, когда курсор убран, возвращаются к нормальному размеру. На рис. 5.1 изображено пять подобных кнопок, курсор расположен над второй из них.
Рис. 5.1. Если поместить курсор мыши над кнопкой, она увеличивается
Взглянув на рисунок, можно подумать, что когда на кнопку наводится курсор, она изменяет свой размер внезапно. Однако увеличение кнопки происходит не в одно мгновение, а постепенно, создавая приятный визуальный эффект. Посмотреть, как это выглядит, можно загрузив ролик Expandingbuttons.fla.
Подход
Каждая кнопка реагирует на наведение и снятие курсора. При наведении курсора на кнопку обработчик получит новое значение масштаба. Если в начальный момент времени масштаб клипа (с кнопкой внутри) составляет 100%, то новое значение будет, например, 150%.
С каждым кадром сценарий будет постепенно изменять текущий масштаб: от 100% до 150% с шагом 10%.
После того как пользователь уберет курсор с кнопки, эффект будет обратным. Новое значение будет равно 100%, и с каждым кадром кнопка будет уменьшаться на 10%, пока не достигнет этого значения.
Подготовка ролика
Ролик содержит несколько кнопок. Каждая кнопка представляет собой отдельный ролик с кнопкой внутри. Из одного библиотечного эталона кнопки я создал пять разных клипов. В каждый клип поместил одну и ту же кнопку, но разный текст.
— Регулярная проверка качества ссылок по более чем 100 показателям и ежедневный пересчет показателей качества проекта.
— Все известные форматы ссылок: арендные ссылки, вечные ссылки, публикации (упоминания, мнения, отзывы, статьи, пресс-релизы).
— SeoHammer покажет, где рост или падение, а также запросы, на которые нужно обратить внимание.
SeoHammer еще предоставляет технологию Буст, она ускоряет продвижение в десятки раз, а первые результаты появляются уже в течение первых 7 дней.
Кнопка может иметь любую форму и цвет. Я использовал классический стиль, поскольку хотел просто продемонстрировать работу сценария.
Создание кода
В ролике используется два типа сценариев: назначенные кнопкам и назначенные клипам. Первый тип сценария назначен кнопке, находящейся в клипе. Сценарий, назначенный кнопке, реагирует на события мыши, происходящие именно с этой кнопкой. Такие сценарии – обработчики событий – мы уже рассматривали в уроке 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%.