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

  1. Руководство пользователя Adobe Animate
  2. Введение в Animate
    1. Новые возможности Animate
    2. Визуальный глоссарий
    3. Системные требования Animate
    4. Сочетания клавиш Animate
    5. Разные типы файлов в Animate
  3. Анимация
    1. Основы анимации в Animate
    2. Кадры и ключевые кадры в Animate
    3. Покадровая анимация в Animate
    4. Классическая анимация движения в Animate
    5. Инструмент «Кисть»
    6. Руководство по движению
    7. Анимация движения и язык ActionScript 3.0
    8. Сведения об анимации движения
    9. Анимация движения
    10. Создание анимации движения
    11. Использование ключевых кадров свойств
    12. Положения в анимации движения
    13. Использование Редактора движения для анимаций
    14. Редактирование траектории анимации движения
    15. Управление анимациями движения
    16. Настраиваемое ускорение и замедление
    17. Создание и применение стилей движения
    18. Настройка диапазонов анимации движения
    19. Сохранение анимации движения в файлах XML
    20. Анимация движения и классическая анимация
    21. Анимация фигур
    22. Инструмент «Кость» в Animate
    23. Скелетная анимация персонажей в Animate
    24. Слои-маски в Adobe Animate
    25. Работа со сценами в Animate
  4. Интерактивность
    1. Создание кнопок в Animate
    2. Преобразование проектов Animate в другие форматы документов
    3. Создание и публикация документов HTML5 Canvas в Animate
    4. Добавление интерактивных возможностей с помощью фрагментов кода в Animate
    5. Создание пользовательских компонентов HTML5
    6. Использование компонентов в HTML5 Canvas
    7. Создание пользовательских компонентов: примеры
    8. Фрагменты кода для пользовательских компонентов
    9. Рекомендации: реклама в Animate
    10. Разработка и публикация контента для виртуальной реальности
  5. Рабочая среда и рабочий процесс
    1. Создание и использование малярных кистей
    2. Использование шрифтов Google в документах HTML5 Canvas
    3. Использование библиотек Creative Cloud Libraries и Adobe Animate
    4. Использование рабочей области и панели «Инструменты» в Animate
    5. Рабочие процессы и рабочая среда Animate
    6. Использование веб-шрифтов в документах HTML5 Canvas
    7. Временные шкалы и ActionScript
    8. Работа с несколькими временными шкалами
    9. Задание настроек
    10. Использование панелей разработки Animate
    11. Создание слоев временной шкалы в Animate
    12. Экспорт анимаций для мобильных приложений и игровых платформ
    13. Перемещение и копирование объектов
    14. Шаблоны
    15. Поиск и замена в Animate
    16. Отмена/повтор действий и панель «История»
    17. Сочетания клавиш
    18. Использование временной шкалы в Animate
    19. Создание HTML-расширений
    20. Параметры оптимизации изображений и GIF-анимаций
    21. Настройки экспорта для изображений и GIF
    22. Панель «Ресурсы» в Animate
  6. Мультимедиа и видео
    1. Преобразование и объединение графических объектов в Animate
    2. Создание экземпляров символов и работа с ними в Animate
    3. Трассировка изображения
    4. Использование звука в Adobe Animate
    5. Экспорт SVG-файлов
    6. Создание видеофайлов для использования в Animate
    7. Добавление видео в Animate
    8. Работа с ключевыми точками видео
    9. Рисование и создание объектов в Animate
    10. Изменение линий и фигур
    11. Обводки, заливки и градиенты в Animate CC
    12. Работа с Adobe Premiere Pro и After Effects
    13. Панели «Цвет» в Animate CC
    14. Открытие файлов Flash CS6 в Animate
    15. Работа с классическим текстом в Animate
    16. Размещение иллюстраций в Animate
    17. Импортированные растровые изображения в Animate
    18. Трехмерная графика
    19. Работа с символами в Animate
    20. Рисование линий и фигур в Adobe Animate
    21. Работа с библиотеками в Animate
    22. Экспорт звуков
    23. Выделение объектов в Animate CC
    24. Работа с AI-файлами Illustrator в Animate
    25. Нанесение узоров с помощью инструмента «Аэрограф»
    26. Применение режимов наложения
    27. Упорядочивание объектов
    28. Автоматизация задач с помощью меню «Команды»
    29. Многоязычный текст
    30. Использование камеры в Animate
    31. Использование Animate с Adobe Scout
    32. Работа с файлами Fireworks
    33. Графические фильтры
    34. Звук и ActionScript
    35. Настройки рисования
    36. Рисование инструментом «Перо»
  7. Платформы
    1. Преобразование проектов Animate в другие форматы документов
    2. Поддержка специализированных платформ
    3. Создание и публикация документов HTML5 Canvas в Animate
    4. Создание и публикация документа WebGL
    5. Упаковка приложений AIR for iOS
    6. Публикация приложений AIR for Android
    7. Публикация для Adobe AIR на настольных ПК
    8. Параметры публикации ActionScript
    9. Рекомендации: размещение ActionScript в приложении
    10. Использование ActionScript в Animate
    11. Рекомендации: специальные возможности
    12. Специальные возможности в среде Animate
    13. Создание и использование сценариев
    14. Обеспечение поддержки специализированных платформ
    15. Общие сведения о поддержке специализированных платформ
    16. Создание содержимого со специальными возможностями
    17. Работа с плагинами поддержки специализированных платформ
    18. Отладка сценариев ActionScript 3.0
    19. Обеспечение поддержки специализированных платформ
  8. Экспорт и публикация
    1. Экспорт файлов из Animate CC
    2. Публикация OAM
    3. Экспорт SVG-файлов
    4. Экспорт графики и видео из Animate
    5. Публикация документов AS3
    6. Экспорт анимаций для мобильных приложений и игровых платформ
    7. Экспорт звуков
    8. Экспорт видеофайлов в QuickTime
    9. Управление воспроизведением внешнего видео с помощью ActionScript
    10. Рекомендации: советы по созданию контента для мобильных устройств
    11. Рекомендации: правила работы с видео
    12. Рекомендации: руководство по созданию SWF-приложений
    13. Рекомендации: формирование структуры FLA-файлов
    14. Рекомендации: оптимизация FLA-файлов для Animate
    15. Параметры публикации ActionScript
    16. Задание параметров публикации для Animate
    17. Экспорт файлов-проекторов
    18. Экспорт изображений и анимированных файлов GIF
    19. Шаблоны публикации HTML
    20. Работа с Adobe Premiere Pro и After Effects
    21. Быстрая публикация анимаций

Основные этапы создания кнопок

  1. Выберите тип кнопок, которые оптимально соответствуют вашим потребностям.

    Символ кнопки

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

    Кнопка фрагмента ролика

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

    Компонент кнопки ActionScript

    Если необходима только стандартная кнопка или переключатель и расширенная их настройка не требуется, используйте компонент кнопки. Компоненты кнопок в версиях ActionScript 2.0 и 3.0 содержат встроенный код, обеспечивающий изменения состояний. Поэтому определять внешний вид и поведение состояний кнопок не придется. Просто перетащите компонент в рабочую область.

    • Компоненты кнопок ActionScript 3.0 поддерживают некоторую настройку. Кнопку можно привязать к другим компонентам, а также совместно использовать и отображать данные программ. Они имеют встроенные функции, такие как поддержка специальных возможностей. Доступны компоненты кнопки, переключателя и флажка

    • Компоненты кнопок ActionScript 2.0 не поддерживают настройку. Компонент обеспечивает изменение состояний.

  2. Определите состояния кнопок.

    Кадр «Отпускание»

    Внешний вид кнопки, если пользователь не взаимодействует с ней.

    Кадр «Наведение»

    Внешний вид кнопки, когда пользователь собирается выбрать ее.

    Кадр «Нажатие»

    Внешний вид кнопки, когда пользователь выбирает ее.

    Кадр «Щелчок»

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

    • Содержимое кадра щелчка не отображается в рабочей области во время воспроизведения.

    • Изображением для кадра щелчка выступает сплошная область, достаточно большая, чтобы охватить все графические элементы в кадрах Отпускание, Нажатие и Наведение.

    • Если кадр щелчка не указан, используется изображение для состояния Отпускание.

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

  3. Свяжите действие с кнопкой.

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

    Примечание.

    Версия ActionScript 2.0 несовместима с ActionScript 3.0. Если в текущей версии Animate используется ActionScript 3.0, в кнопку невозможно вставить код ActionScript 2.0 (и наоборот). Перед тем как вставить в кнопки код ActionScript из другого источника, убедитесь в совместимости версии.

Создание кнопки с помощью символа кнопки

Чтобы сделать кнопку интерактивной, поместите экземпляр символа-кнопки в рабочую область и назначьте ему соответствующие действия. Действия назначаются корневой временной шкале FLA-файла. Не добавляйте действия на временную шкалу символа кнопки. Чтобы добавить действия на временную шкалу кнопок, используйте вместо этого кнопку фрагмента ролика.

  1. Выберите Редактирование > Отменить выделение всего или щелкните пустую область в рабочей области, чтобы убедиться в отсутствии выделенных элементов в рабочей области.

  2. Выберите Вставка > Создать символ.

  3. В диалоговом окне Создать символ введите имя. Например, в качестве типа символа выберите Кнопка.

    Animate переходит в режим редактирования символа. Временная шкала изменяется для отображения четырех последовательных кадров: Вверх, Наведение, Вниз и Щелчок. Первый кадр кнопки в отпущенном состоянии представляет собой пустой ключевой кадр.

  4. Чтобы создать изображение кнопки в отпущенном состоянии, выберите на временной шкале соответствующий кадр. Затем при помощи инструментов рисования импортируйте графику или поместите в рабочую область другой экземпляр символа.

    Для кнопки можно использовать графические символы или символы фрагмента ролика, однако использование другого символа кнопки невозможно.

  5. На временной шкале щелкните кадр Наведение и выберите Вставка > Временная шкала > Ключевой кадр.

    Animate вставляет ключевой кадр, дублирующий содержимое предшествующего кадра «Вверх».

  6. Не отменяя выделение кадра Наведение, измените или отредактируйте изображение кнопки в рабочей области для придания необходимого внешнего вида кнопки в состоянии наведения.

  7. Повторите этапы 5 и 6 для кадра нажатия и необязательного кадра щелчка.

  8. Чтобы назначить звук состоянию кнопки, щелкните кадр этого состояния на временной шкале и выберите Окно > Свойства. Затем выберите звук в меню Звук инспектора свойств. В меню Звук показаны только уже импортированные звуки.

  9. При необходимости выберите Правка > Редактировать документ. При этом повторно откроется главная временная шкала FLA-файла. Чтобы создать экземпляр кнопки, созданной в рабочей области, перетащите символ кнопки с панели Библиотека в рабочую область.

  10. Для тестирования работы кнопок используйте команду Управление > Тест. Чтобы просмотреть состояния символа кнопки в рабочей области, можно также выбрать Управление > Разрешить использование простых кнопок. Так можно проверить состояние кнопки при нажатии, отпускании и наведении курсора, не прибегая к команде Управление > Тест.

Включение, редактирование и проверка символов кнопок

По умолчанию при создании символов кнопок Animate оставляет их отключенными. Выберите и включите кнопку, чтобы просмотреть ее реакцию на события мыши. Рекомендуется отключать кнопки во время работы и включать их для быстрой проверки их поведения.

  • Для выбора кнопки используйте инструмент Выделение, чтобы расположить прямоугольник выбора вокруг кнопки.

  • Чтобы включить или отключить кнопки в рабочей области, выберите Управление > Разрешить использование простых кнопок». Эта команда действует в качестве переключателя между двух состояний.

  • Чтобы перенести кнопку, используйте клавиши со стрелками.

  • Чтобы изменить кнопку, используйте инспектор свойств. Если он не отображается, выберите Окна > Свойства.

  • Чтобы проверить кнопку в среде разработки, выберите Управление > Разрешить использование простых кнопок.

  • Чтобы проверить кнопку в проигрывателе Flash, выберите Управление > Тестировать ролик [или Тестировать монтажный кадр] > Тест. Этот способ является единственно возможным при проверке кнопок фрагментов роликов.

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

Устранение неполадок с кнопками

Используйте следующие ресурсы для решения распространенных проблем с кнопками:

Дополнительные ресурсы по использованию кнопок

Следующие статьи TechNotes содержат инструкции для некоторых особых сценариев кнопок:

Логотип Adobe

Вход в учетную запись