Создание кнопок в Adobe Animate

Поиск

Последнее обновление 25 мая 2023 г.

Кнопки в Animate (ранее программа называлась Flash Professional) – это символы, содержащие 4 кадра. Каждый кадр символа кнопки представляет свое состояние кнопки: «Не нажата», «Наведен курсор», «Нажата» и «Нажатие». Эти состояния определяют, как кнопка выглядит, когда курсор мыши находится над ней или когда пользователь нажимает кнопку. Этот документ содержит пояснения о том, как создать стандартные кнопки и кнопки с дополнительными функциями.

Создание стандартной кнопки

Выберите пункт меню «Вставка» > «Создать символ» или нажмите клавиши Control+F8 (Windows) или Command+F8 (Macintosh).
Примечание: В программе Flash 3 и более ранних версиях отмените выбор всех элементов в рабочей области и выберите пункт меню «Вставка» > «Создать символ».
В диалоговом окне «Параметры символа» введите имя нового символа кнопки и выберите вариант «Кнопка с параметрами поведения. Нажмите кнопку «ОК».

Flash переключается в режим редактирования символов. Заголовок временной шкалы изменяется для отображения четырех последовательных кадров: «Не нажата», «Наведен курсор», «Нажата» и «Нажатие». Первый кадр кнопки в отпущенном состоянии (Не нажата) представляет собой пустой ключевой кадр.
Чтобы создать изображение кнопки в состоянии «Не нажата», при помощи инструментов рисования импортируйте изображение или поместите в рабочую область другой экземпляр символа. Внутри кнопки можно использовать любой фрагмент ролика или графический символ. Однако нельзя использовать другую кнопку. Для создания анимированной кнопки можно использовать символы клипа.
Выберите второй кадр с меткой «Наведен курсор» и выберите пункт меню «Вставка» > «Ключевой кадр». в рабочей области появляется изображение кнопки из первого кадра.
Измените изображение кнопок для состояния «Наведен курсор». Повторите шаги 4 и 5 для кадров состояний «Нажата» и «Нажатие».
Примечание. Кадр «Нажатие» не отображается в рабочей области при воспроизведении, но он задает область кнопки, реагирующую при нажатии на нее. Убедитесь, что изображением для кадра «Нажатие» выступает сплошная область, достаточно большая, чтобы охватить все графические элементы в кадрах «Не нажата», «Наведен курсор» и «Нажата». Область также может выходить за границы видимой кнопки. Если вы не задали область нажатия, то для ее определения используется изображение кнопки в кадре «Не нажата».
После того, как вы заполнили изображения четырех состояний кнопок, выполните команду «Редактирование» > «Редактировать фильм», чтобы выйти из режима редактирования символа.
Откройте окно «Библиотека» с помощью команды меню «Окно» > «Библиотека». Найдите кнопку на панели «Библиотека», а затем перетащите символ кнопки из библиотеки в рабочую область. На этом шаге в клипе создается экземпляр кнопки.

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

Назначьте простое действие кнопке (Flash 5)

В режиме «Редактирование клипа» выберите экземпляр кнопки, созданный на шаге 7, описанном выше.
Воспользуйтесь командой «Окно» > «Действия» для открытия панели «Действия».
В списке в левой части панели выберите категорию «Основные действия» для отображения основных действий.
Чтобы назначить действие, выполните одно из следующих действий.
- Дважды щелкните действие в категории «Основные действия».
- Перетащите действие из категории «Основные действия» из левой части панели в правую.
- Нажмите кнопку «Добавить» (+) и выберите нужное действие во всплывающем меню.
- Используйте сочетание клавиш.
Если выбранное действие содержит какие-либо связанные параметры, то они отображаются на панели «Параметры» в нижней части палитры «Действия». (Если панель «Параметры» не отображается, щелкните на треугольнике в правом нижнем углу панели.) Выберите или введите параметры, соответствующие данному действию. Например, действие gotoAndPlay, показанное ниже, содержит три параметра: Сцена,Тип, Кадр и параметр для Перехода к воспроизведению.

Назначьте простое действие кнопке (Flash 4 и более ранние версии)

В режиме «Редактирование клипа» выберите экземпляр кнопки, созданный на шаге 7, описанном выше.
Убедитесь, что флажок «Разрешить кнопки» в меню «Управление» не установлен.
Дважды щелкните на кнопке, чтобы открыть диалоговое окно «Свойства экземпляра».
Примечание. В программе Flash 2 это диалоговое окно было свойствами ссылки: Диалоговое окно «Кнопка».
Назначьте действие, т. е. выберите вкладку «Действия» в диалоговом окне «Свойства экземпляра». Затем нажмите кнопку со знаком «плюс» (+) и дважды щелкните соответствующее действие.
Примечание. В Программе Flash 2 назначьте действие с помощью всплывающего меню «Действия» в диалоговом окне «Свойства ссылки». Диалоговое окно «Кнопка». Только одно действие можно назначить кнопке.
Убедитесь, что пункт «Разрешить кнопки» активирован (установлен флажок рядом с ним) в меню «Управление».
Если выбранное действие содержит какие-либо связанные параметры, то они отображаются на панели «Параметры» в правой части палитры «Действия». Выберите или введите параметры, соответствующие данному действию.

Создание кнопок с дополнительными функциями

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

При разработке сложных кнопок крайне важно понимать состояние нажатия кнопок. Активную область кнопки определяют форма и область кнопки. Чтобы поэкспериментировать с состоянием кнопки «Нажатие», выполните следующие действия:

Добавьте кнопку из общих библиотек в рабочую область. Отредактируйте кнопку.
Выделите кадр с состоянием кнопки «Нажатие» и вставьте ключевой кадр. Проверяйте поведение кнопки в клипе.
Значительно измените размер объекта в состоянии «Нажатие» и попробуйте работу кнопки еще раз.
Удалите ключевой кадр в состоянии «Нажатие» и проверьте работу кнопки.
Обратите внимание на эффект, когда курсор мыши располагается над кнопкой, проверьте состояния «Нажата», «Не нажата» и «Наведен курсор», когда кнопка включена.

Невидимые кнопки

Можно оставить состояния кнопки «Не нажата», «Наведен курсор», «Нажата» пустыми. Если эти состояния пустые, задайте состояние «Нажатие» так, чтобы оно было заполнено содержимым.

Если состояние кнопки «Не нажата» – пустое или невидимое, кнопка представляется в рабочей области синей фигурой. Эта фигура эквивалентна содержимому в следующем ключевом кадре внутри кнопки. Эту голубую фигуру в конечном фильме не будет видно.

Кнопки с анимированными состояниями

Чтобы в Animate создать анимированные кнопки, разместите клип на том состоянии кнопки, которое нужно анимировать.

Создайте клип для каждого состояния кнопки, которое вы хотите анимировать.
Создайте кнопку.
Расположите клипы в состояниях кнопок, чтобы анимировать их.
Расположите кнопку в рабочей области.
Примечание. Клипы невозможно протестировать в редакторе Animate. Чтобы проверить новую кнопку, выберите команду «Управление» > «Тестировать клип» или экспортируйте клип в формате SWF-файла.

Прокрутка в одной области клипа влияет на другую область клипа

Для создания этого эффекта, переместите элементы состояния «Нажатие» в другую часть рабочей области, чем элементы в состоянии кнопок «Курсор наведен». Такой метод подходит для эффектов «простая прокрутка». Активная зона находится в другом месте рабочей области, чем эффект прокрутки.

Дополнительная информация

Хороший способ побольше узнать о кнопках и их разработке – это изучить кнопки, включенные в Animate в качестве примеров. В версии 5 этих примеры кнопок доступны в меню «Окна» > «Общие библиотеки» > «Кнопки». Если вы используете версию 4, можете получить доступ к этим кнопкам, выбрав пункт «Библиотеки» > «Кнопки». Для второй версии библиотеки примеров кнопок доступны в меню Xtras.

Полная инструкция по созданию кнопки также доступна в Учебных занятиях, поставляемых с версией 5. Для получения доступа к этим занятиям выберите «Справка» > «Учебные занятия» > «06 Кнопки во Flash».

Adobe

Получайте помощь быстрее и проще

Новый пользователь?