Создание компонента изображения DOM
- Руководство пользователя Adobe Animate
- Введение в Animate
- Анимация
- Основы анимации в Animate
- Кадры и ключевые кадры в Animate
- Покадровая анимация в Animate
- Работа с классической анимацией движения в Animate
- Инструмент «Кисть»
- Руководство по движению
- Анимация движения и язык ActionScript 3.0
- Сведения об анимации движения
- Анимация движения
- Создание анимации движения
- Использование ключевых кадров свойств
- Положения в анимации движения
- Использование Редактора движения для анимаций
- Редактирование траектории анимации движения
- Управление анимациями движения
- Настраиваемое ускорение и замедление
- Создание и применение стилей движения
- Настройка диапазонов анимации движения
- Сохранение анимации движения в файлах XML
- Анимация движения и классическая анимация
- Анимация формы
- Анимация с использованием инструмента «Кость» в Animate
- Работа с риггингом персонажей в Animate
- Слои-маски в Adobe Animate
- Работа со сценами в Animate
- Интерактивность
- Создание кнопок в Animate
- Преобразование проектов Animate в другие форматы документов
- Создание и публикация документов HTML5 Canvas в Animate
- Добавление интерактивных возможностей с помощью фрагментов кода в Animate
- Создание пользовательских компонентов HTML5
- Использование компонентов в HTML5 Canvas
- Создание пользовательских компонентов: примеры
- Фрагменты кода для пользовательских компонентов
- Рекомендации: реклама в Animate
- Разработка и публикация контента для виртуальной реальности
- Рабочая среда и рабочий процесс
- Создание и использование малярных кистей
- Использование шрифтов Google в документах HTML5 Canvas
- Использование библиотек Creative Cloud Libraries и Adobe Animate
- Использование рабочей области и панели «Инструменты» в Animate
- Рабочие процессы и рабочая среда Animate
- Использование веб-шрифтов в документах HTML5 Canvas
- Временные шкалы и ActionScript
- Работа с несколькими временными шкалами
- Задание настроек
- Использование панелей разработки Animate
- Создание слоев временной шкалы в Animate
- Экспорт анимаций для мобильных приложений и игровых платформ
- Перемещение и копирование объектов
- Шаблоны
- Поиск и замена в Animate
- Отмена/повтор действий и панель «История»
- Сочетания клавиш
- Использование временной шкалы в Animate
- Создание HTML-расширений
- Параметры оптимизации изображений и GIF-анимаций
- Настройки экспорта для изображений и GIF
- Панель «Ресурсы» в Animate
- Мультимедиа и видео
- Преобразование и объединение графических объектов в Animate
- Создание экземпляров символов и работа с ними в Animate
- Трассировка изображения
- Использование звука в Adobe Animate
- Экспорт SVG-файлов
- Создание видеофайлов для использования в Animate
- Добавление видео в Animate
- Рисование и создание объектов в Animate
- Изменение линий и фигур
- Обводки, заливки и градиенты в Animate CC
- Работа с Adobe Premiere Pro и After Effects
- Панели «Цвет» в Animate CC
- Открытие файлов Flash CS6 в Animate
- Работа с классическим текстом в Animate
- Размещение иллюстраций в Animate
- Импортированные растровые изображения в Animate
- Трехмерная графика
- Работа с символами в Animate
- Рисование линий и фигур в Adobe Animate
- Работа с библиотеками в Animate
- Экспорт звуков
- Выделение объектов в Animate CC
- Работа с AI-файлами Illustrator в Animate
- Применение режимов наложения
- Упорядочивание объектов
- Автоматизация задач с помощью меню «Команды»
- Многоязычный текст
- Использование камеры в Animate
- Графические фильтры
- Звук и ActionScript
- Настройки рисования
- Рисование инструментом «Перо»
- Платформы
- Преобразование проектов Animate в другие форматы документов
- Поддержка специализированных платформ
- Создание и публикация документов HTML5 Canvas в Animate
- Создание и публикация документа WebGL
- Упаковка приложений AIR for iOS
- Публикация приложений AIR for Android
- Публикация для Adobe AIR на настольных ПК
- Параметры публикации ActionScript
- Рекомендации: размещение ActionScript в приложении
- Использование ActionScript в Animate
- Специальные возможности в среде Animate
- Создание и использование сценариев
- Обеспечение поддержки специализированных платформ
- Общие сведения о поддержке специализированных платформ
- Работа с плагинами поддержки специализированных платформ
- Отладка сценариев ActionScript 3.0
- Обеспечение поддержки специализированных платформ
- Экспорт и публикация
- Экспорт файлов из Animate CC
- Публикация OAM
- Экспорт SVG-файлов
- Экспорт графики и видео из Animate
- Публикация документов AS3
- Экспорт анимаций для мобильных приложений и игровых платформ
- Экспорт звуков
- Рекомендации: советы по созданию контента для мобильных устройств
- Рекомендации: правила работы с видео
- Рекомендации: руководство по созданию SWF-приложений
- Рекомендации: формирование структуры FLA-файлов
- Рекомендации: оптимизация FLA-файлов для Animate
- Параметры публикации ActionScript
- Задание параметров публикации для Animate
- Экспорт файлов-проекторов
- Экспорт изображений и анимированных файлов GIF
- Шаблоны публикации HTML
- Работа с Adobe Premiere Pro и After Effects
- Быстрая публикация анимаций
- Устранение неполадок
В этой статье приводится пример пользовательского компонента HTML5.
В этой статье описывается создание пользовательских компонентов. В первом примере рассматривается компонент изображения (который также включен в Animate), а также предоставляются общие сведения о структуре и действиях по разработке. Во втором примере описывается упаковка существующего компонента ИП (такого как jQueryUI) и его импорт в Animate.
-
Создайте категорию под названием Мои компоненты.
a. Создайте папку с именем mycomponents в папке <HTML5Components> при первом запуске.
b. Загрузите прилагаемый файл myimage.zip и извлеките его содержимое в папку
mycomponents.
Загрузить
c. Перезапустите Animate.
Теперь должна отображаться новая категория «Мои компоненты» в папке components, а в ней новый компонент «Мое изображение». Его можно перетащить на рабочую область, задать свойство источника изображения и опубликовать фильм для просмотра пользовательского компонента в действии.
Метаданные компонент — components.js
Обратите внимание, что в качестве категории выбирается CATEGORY_MY_COMPONENTS. В именах каждого свойства также используются подобные ключи. Это ключ для локализованной строки для имени категории. При открытии файла strings.json из папки соответствующей локали отобразятся следующие записи.
Самая распространенная ошибка при редактировании этого файла заключается в добавлении лишней запятой после последнего элемента массива.
Полю значка icon задается значение Sp_Image_Sm. В папке ресурсов появятся следующие два файла png с префиксом Sp_Image_Sm.
Это значки для темного и светлого интерфейса пользователя.
Полю источника source в components.json задается значение src/myimage.js.
(function($) { // Регистрация компонента с className: my.Image, // и прототипа со следующими переопределениями // getCreateOptions // getCreateString // getProperties // getAttributes $.anwidget("my.Image", { options: { 'visible': true, 'position': 'absolute' }, _props: ["left", "top", "width", "height", "position", "transform-origin", "transform"], _attrs: ["id", "src", "alt", "class", "border"], // Возврат уникального идентификатора с префиксом image // _widgetID является глобальной переменной, объявленной в anwidget // Этот идентификатор используется, только если пользователь не задал никакой идентификатор экземпляра для компонента в Animate // В противном случае используется настроенное пользователем имя getCreateOptions: function() { return $.extend(this.options, { 'id': "image" + _widgetID++ }); }, // Возврат строки для создания элемента DOM // Для изображения нужно создать только тег <img> getCreateString: function() { return "<img>"; }, // Набор настраиваемых свойств 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 для загрузки зависимых источников.
Имеется два источника по умолчанию: jQuery и anwidget.js. Так как anwidget.js отсутствует в CDN, в CDN нет соответствующей записи.
Следующий набор записей предназначен для других ресурсов, необходимых для загрузки виджета datepicker из пользовательского интерфейса jquery. Если вы упаковываете виджет из другой библиотеки, можно подобным образом задать для него набор зависимых источников. Эти зависимые объекты загружаются до инициализации компонента.
В разделе свойств отображается только одно свойство label, которое связано со свойством label для компонента date-picker. Аналогичным образом, можно отображать и другие свойства, которые нужно сделать доступными для настройки пользователем в среде разработке Animate. Во время выполнения каждое их этих свойств будет доступно для пары «ключ-значение» в массиве options, например. Настроенное значение можно извлечь и применить во время выполнения.
Разделы, отличающиеся от примера
-
getCreateString:
Виджет datepicker из jQuery-UI принимает такой элемент текстового ввода и преобразует элемент date-picker во время выполнения. Поэтому соответствующим образом инициализируется DOM.
-
attach:
Необходимо переопределить эту функцию для данного виджета. Этот API-интерфейс вызывается каждый раз, когда элемент присоединяется к DOM. Однако из-за того, как работает базовая среда выполнения (в данном случае это createjs), этот API-интерфейс может вызываться несколько раз на протяжении одного диапазона кадра.
Мы запоминаем состояние присоединения базового элемента, а затем вызовите API-интерфейс attach для базового класса (используя this._superApply(arguments)). Если элемент в первый раз присоединяется к родительскому DOM, то используется вызов базового виджета jQuery-UI, чтобы преобразовать DOM компонента в datepicker. См. https://jqueryui.com/datepicker/
Большинство виджетов javascript работают одинаково. Можно использовать тот же прием для упаковки любого выбранного компонента и его импорта в Animate таким же образом.
-
Обновить: API-интерфейс update переопределяется, свойства css применяется к контейнеру div, а атрибуты к реальному элементу DOM.
Когда переопределяются API-интерфейсы, такие как attach, detach или update, проанализируйте реализацию по умолчанию для базового класса и вызовите базовую реализацию в нужное время, иначе инициализация компонента может завершиться ошибкой.