Руководство пользователя Отмена

Создание пользовательских компонентов: примеры

  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. Рисование и создание объектов в Animate
    9. Изменение линий и фигур
    10. Обводки, заливки и градиенты в Animate CC
    11. Работа с Adobe Premiere Pro и After Effects
    12. Панели «Цвет» в Animate CC
    13. Открытие файлов Flash CS6 в Animate
    14. Работа с классическим текстом в Animate
    15. Размещение иллюстраций в Animate
    16. Импортированные растровые изображения в Animate
    17. Трехмерная графика
    18. Работа с символами в Animate
    19. Рисование линий и фигур в Adobe Animate
    20. Работа с библиотеками в Animate
    21. Экспорт звуков
    22. Выделение объектов в Animate CC
    23. Работа с AI-файлами Illustrator в Animate
    24. Применение режимов наложения
    25. Упорядочивание объектов
    26. Автоматизация задач с помощью меню «Команды»
    27. Многоязычный текст
    28. Использование камеры в Animate
    29. Графические фильтры
    30. Звук и ActionScript
    31. Настройки рисования
    32. Рисование инструментом «Перо»
  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. Специальные возможности в среде Animate
    12. Создание и использование сценариев
    13. Обеспечение поддержки специализированных платформ
    14. Общие сведения о поддержке специализированных платформ
    15. Работа с плагинами поддержки специализированных платформ
    16. Отладка сценариев ActionScript 3.0
    17. Обеспечение поддержки специализированных платформ
  8. Экспорт и публикация
    1. Экспорт файлов из Animate CC
    2. Публикация OAM
    3. Экспорт SVG-файлов
    4. Экспорт графики и видео из Animate
    5. Публикация документов AS3
    6. Экспорт анимаций для мобильных приложений и игровых платформ
    7. Экспорт звуков
    8. Рекомендации: советы по созданию контента для мобильных устройств
    9. Рекомендации: правила работы с видео
    10. Рекомендации: руководство по созданию SWF-приложений
    11. Рекомендации: формирование структуры FLA-файлов
    12. Рекомендации: оптимизация FLA-файлов для Animate
    13. Параметры публикации ActionScript
    14. Задание параметров публикации для Animate
    15. Экспорт файлов-проекторов
    16. Экспорт изображений и анимированных файлов GIF
    17. Шаблоны публикации HTML
    18. Работа с Adobe Premiere Pro и After Effects
    19. Быстрая публикация анимаций
  9. Устранение неполадок
    1. Исправленные неполадки
    2. Известные проблемы

 

В этой статье приводится пример пользовательского компонента HTML5.

В этой статье описывается создание пользовательских компонентов. В первом примере рассматривается компонент изображения (который также включен в Animate), а также предоставляются общие сведения о структуре и действиях по разработке. Во втором примере описывается упаковка существующего компонента ИП (такого как jQueryUI) и его импорт в Animate.

  1. Создание компонента изображения DOM

    Создайте категорию под названием Мои компоненты

    a. Создайте папку с именем mycomponents в папке <HTML5Components> при первом запуске.

    b. Загрузите прилагаемый файл myimage.zip и извлеките его содержимое в папку

        mycomponents.

    Загрузить

    c. Перезапустите Animate.

Структура каталогов в папке mycomponents
Структура каталогов в папке mycomponents

Теперь должна отображаться новая категория «Мои компоненты» в папке components, а в ней новый компонент «Мое изображение». Его можно перетащить на рабочую область, задать свойство источника изображения и опубликовать фильм для просмотра пользовательского компонента в действии. 

Метаданные компонент — components.js

Код Components.js
Components.js

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

 Самая распространенная ошибка при редактировании этого файла заключается в добавлении лишней запятой после последнего элемента массива.

Сведения о категории
Сведения о категории

Полю значка icon задается значение Sp_Image_Sm. В папке ресурсов появятся следующие два файла png с префиксом Sp_Image_Sm.

Значение поля icon
Значение поля icon

Это значки для темного и светлого интерфейса пользователя.

Полю источника source в components.json задается значение src/myimage.js. 

(function($) {    

// Регистрация компонента с className: my.Image,
 // и прототипа со следующими переопределениями 
 // getCreateOptions
 // getCreateString
 // getProperties
 // getAttributes
    $.anwidget(&quot;my.Image&quot;, {
         options: {
   'visible': true,
   'position': 'absolute'
         },
  _props: [&quot;left&quot;, &quot;top&quot;, &quot;width&quot;, &quot;height&quot;, &quot;position&quot;, &quot;transform-origin&quot;, &quot;transform&quot;],
  
_attrs: [&quot;id&quot;, &quot;src&quot;, &quot;alt&quot;, &quot;class&quot;, &quot;border&quot;],
  
// Возврат уникального идентификатора с префиксом image
  // _widgetID является глобальной переменной, объявленной в anwidget
  // Этот идентификатор используется, только если пользователь не задал никакой идентификатор экземпляра для компонента в Animate
  // В противном случае используется настроенное пользователем имя
  getCreateOptions: function() {
   return $.extend(this.options, { 'id': &quot;image&quot; + _widgetID++ });
  },
  
// Возврат строки для создания элемента DOM
  // Для изображения нужно создать только тег <img>
  getCreateString: function() {
   return &quot;<img>&quot;;
  },
  
// Набор настраиваемых свойств
  getProperties: function() {
   return this._props;
  },
  
// Набор настраиваемых атрибутов
  getAttributes: function() {
   return this._attrs;
  }    
 });   
})(jQuery);

Чтобы разобраться в этом, читайте комментарии в коде. 

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

Упаковка компонента jQuery-UI

В этом разделе описывается упаковка виджета jQuery-UI и его использование в Animate. Такой же подход можно использовать для упаковки любого другого существующего компонента из любой другой инфраструктуры интерфейса пользователя.

Давайте рассмотрим упакованный компонент DatePicker с Animate, который образует виджет jQuery-UI. Загрузите и извлеките содержимое следующего архива и используйте его в качестве справочного ресурса.

Загрузить

Структура извлеченного содержимого
Структура извлеченного содержимого

Папка с именем jquery-ui-1.12.0 является источником инфраструктуры интерфейса пользователя jQuery, который содержит исходный виджет DatePicker и его ресурсы, такие как изображения и таблицы css, чтобы упаковать и использовать их в Animate, как любой другой компонент HTML5. Это необходимо только для локального предварительного просмотра; когда в параметрах публикации включены «размещенные библиотеки», предоставляется возможность использовать cdn для загрузки зависимых источников. 

Код Components.js
Components.js

Имеется два источника по умолчанию: jQuery и anwidget.js. Так как anwidget.js отсутствует в CDN, в CDN нет соответствующей записи.

Следующий набор записей предназначен для других ресурсов, необходимых для загрузки виджета datepicker из пользовательского интерфейса jquery. Если вы упаковываете виджет из другой библиотеки, можно подобным образом задать для него набор зависимых источников. Эти зависимые объекты загружаются до инициализации компонента.

В разделе свойств отображается только одно свойство label, которое связано со свойством label для компонента date-picker. Аналогичным образом, можно отображать и другие свойства, которые нужно сделать доступными для настройки пользователем в среде разработке Animate. Во время выполнения каждое их этих свойств будет доступно для пары «ключ-значение» в массиве options, например. Настроенное значение можно извлечь и применить во время выполнения.

Главный исходный файл: src/datepicker.js.
Главный исходный файл: src/datepicker.js.

Разделы, отличающиеся от примера

  1. getCreateString:

    Виджет datepicker из jQuery-UI принимает такой элемент текстового ввода и преобразует элемент date-picker во время выполнения. Поэтому соответствующим образом инициализируется DOM.

  2. attach:

    Необходимо переопределить эту функцию для данного виджета. Этот API-интерфейс вызывается каждый раз, когда элемент присоединяется к DOM. Однако из-за того, как работает базовая среда выполнения (в данном случае это createjs), этот API-интерфейс может вызываться несколько раз на протяжении одного диапазона кадра.

    Мы запоминаем состояние присоединения базового элемента, а затем вызовите API-интерфейс attach для базового класса (используя this._superApply(arguments)). Если элемент в первый раз присоединяется к родительскому DOM, то используется вызов базового виджета jQuery-UI, чтобы преобразовать DOM компонента в datepicker. См. https://jqueryui.com/datepicker/

    Большинство виджетов javascript работают одинаково. Можно использовать тот же прием для упаковки любого выбранного компонента и его импорта в Animate таким же образом.

  3. Обновить: API-интерфейс update переопределяется, свойства css применяется к контейнеру div, а атрибуты к реальному элементу DOM.

     Когда переопределяются API-интерфейсы, такие как attach, detach или update, проанализируйте реализацию по умолчанию для базового класса и вызовите базовую реализацию в нужное время, иначе инициализация компонента может завершиться ошибкой.

 Adobe

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

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