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

Использование камеры в 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. Рисование и создание объектов в 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. Известные проблемы

 

В этом разделе рассматривается работа с камерой в Animate.

Инструмент «Камера» в программе Animate позволяет аниматорам имитировать настоящую камеру.  Раньше аниматорам приходилось использовать сторонние расширения со степенями качества и совместимости или модифицировать анимации с целью моделирования движения камеры. Аниматоры могут использовать следующие функции, необходимые для работы с видеоматериалами.

  • Панорамирование с субъектом кадра
  • Наезд на объект, представляющий интерес, для получения драматического эффекта
  • Выезд из кадра, чтобы напомнить зрителю об окружающей обстановке
  • Изменение фокусной точки для переноса внимания зрителя с одного предмета на другой
  • Поворот камеры
  • Использование оттенка цвета или фильтров для применения цветовых эффектов на сцене 

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

Инструмент «Камера» доступен для всех встроенных типов документов в Animate — HTML Canvas, WebGL и ActionScript.

Включение или выключение камеры

Для включения инструмента «Камера» используйте любые из следующих параметров.

  • Щелкните значок «Камера» на панели «Инструменты».
  • Нажмите кнопку «Добавить/удалить камеру» на панели «Временная шкала».

При включении камеры граница рабочей области отображается тем же цветом, что и слой камеры.

Рабочее пространство камеры

A. Контур рабочей области B. Значок «Камера» C. Свойства камеры D. Цветовые эффекты камеры E. Инструмент «Камера» F. Значок «Камера» G. Слой «Камера» 

Теперь рабочая область будет выступать в качестве камеры для документа. На панель Временная шкала добавлен новый слой камеры с объектом камеры. При выборе инструмента «Камера» в инспекторе свойств активируется значок камеры.

Когда камера включена, происходит следующее.

  • Текущий документ переводится в режим камеры..
  • Рабочая область преобразуется в камеру.
  • На границе рабочей области отображается рамка камеры.
  • Выбирается слой камеры.  

Масштабирование, поворот или панорамирование камеры

Масштабирование камеры

  1. Используйте элементы управления масштабом на экране, чтобы изменять масштаб объекта, или задайте значения масштаба на панели «Свойства камеры».

    Изменение масштаба и поворот
    Изменение масштаба и поворот

  2. Чтобы увеличить масштаб сцены, изменяйте значения масштаба или регулируйте ползунок в нижней части рабочей области.

  3. Чтобы увеличить масштаб содержимого, переместите ползунок в сторону, обозначенную знаком «+», а для уменьшения масштаба содержимого переместите ползунок в сторону, обозначенную знаком «-».

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

Поворот камеры

  1. Используйте элементы управления масштабом на экране, чтобы повернуть объект, или задайте значения поворота на панели «Свойства камеры».

  2. Для определения воздействия поворота на каждом слое измените значения поворота или используйте элементы управления ползунком поворота.

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

Панорамирование камеры

  1. Щелкните ограничительную рамку камеры и перетащите ее в любое место на слое камеры в рабочей области.

  2. Прокрутите вверх или вниз, чтобы выполнить панорамирование выделенного объекта, или нажмите клавишу Shift, чтобы выполнить панорамирование по горизонтали или по вертикали без наклона.

  3. Когда активен инструмент «Камера», любое действие перетаскивания выполняется как операция панорамирования в пределах границы камеры.

Использование элементов управления камерой для панорамирования

Для точного панорамирования камеры можно использовать координаты на осях X и Y панели Свойства камеры в инспекторе свойств камеры. 
Элементы управления камерой для панорамирования
Элементы управления камерой для панорамирования

Чтобы панорамировать объекты в горизонтальном направлении, наведите курсор мыши на значение координаты по оси X и перетащите ползунок вправо или влево. 

Чтобы панорамировать объекты в вертикальном направлении, наведите курсор мыши на значение координаты по оси Y и перетащите ползунок вправо или влево.

Сброс параметров для эффектов камеры

Можно сбросить изменения, внесенные с помощью камеры для эффектов панорамирования, масштабирования, поворота и цвета, если требуется восстановить исходные настройки. Для сохранения предыдущих значений свойств щелкните значок «Сброс» рядом с каждым свойством.

Свойства камеры
Свойства камеры

Применение оттенка к слою камеры

  1. Выберите Камера > Свойства. Установите флажок Оттенок, чтобы включить или выключить эффект «Оттенок». 

    Цветовые эффекты камеры
    Цветовые эффекты камеры

  2. Измените значение оттенка (в процентах) и цвет оттенка RGB для текущего кадра.

     Эта функция поддерживается для типов документов AS3 и WebGL.

Регулировка фильтров цвета на слое камеры

  1. На панели «Свойства камеры» установите флажок «Настроить цвет», чтобы включить или выключить эффект фильтра.

  2. Настройте значения яркости, контрастности, насыщенности и оттенка для текущего кадра. Допустимый диапазон для значений яркости, контрастности и насыщенности — от -100 до 100 %, а для оттенка — от -180 до 180°.

     Эта функция поддерживается только для типов документов AS3.

Создание эффекта смещения с помощью камеры и глубины слоя

Как дизайнеру или разработчику игр вам может потребоваться создать динамический проект для игры. С помощью различных объектов игры на слоях переднего и заднего планов вы можете управлять скоростью и положением этих объектов. Поддерживая фокус камеры на одной фокальной точке, можно перемещать объекты с разной скоростью, чтобы создавать трехмерный эффект. В Animate при создании двухмерных анимаций этого эффекта можно достичь, используя камеру и функцию глубины слоя. Можно создать эффект смещения для объектов, изменяя глубину слоев с помощью панели Глубина слоя. Чтобы применить глубину слоя, выберите Окно > Глубина слоя.

Щелкните здесь для получения дополнительной информации о глубине слоя. 

  1. Создайте несколько объектов на разных слоях в Animate.

  2. Добавьте различные глубины слоя для каждого слоя.

  3. Добавьте слой камеры, щелкнув инструмент «Камера».

    Слой камеры на панели «Глубина слоя»
    Слой камеры на панели «Глубина слоя»

Этот эффект позволяет видеть глубину и перспективу объектов.

  • Объекты, которые находятся ближе к камере, движутся быстрее объектов, которые удалены от камеры.
  • Когда слою камеры соответствует значению 0, ближайшие к камере объекты имеют наименьшие положительные значения. А объекты, наиболее удаленные от камеры, обладают высокими положительными значениями. Слои, которые находятся за камерой, обладают отрицательными числами. 

Видео с эффектом смещения и изменением глубины камеры по оси Z

В этом видео показан эффект смещения и последующее изменение масштаба камеры.

Фиксация слоя с камерой

Как аниматору или дизайнеру игр вам может понадобиться зафиксировать некоторые объекты анимации в виде камеры. Например, кнопку действия, HUD-дисплей с отсчетом времени или оружие. В таких случаях необходимо, чтобы ресурс повторял движения камеры. Функция Прикрепить к камере в Animate позволяет достичь этого эффекта.

Фиксация слоя с камерой
Фиксация слоя с камерой

Когда слой прикрепляется к камере, объекты в этом слое привязываются к камере и всегда перемещаются вместе с ней. Таким образом, перемещение камеры никак не отражается на этих объектах в выводе.

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

Далее показано поведение слоя до и после прикрепления к камере: 

Изображение с анимацией, когда слой не прикреплен к камере:

Слой без фиксации камеры
Слой без фиксации камеры

Изображение с анимацией, когда слой прикреплен к камере: 

Слой с фиксацией камеры
Слой с фиксацией камеры

Вы также можете прикрепить или открепить все слои относительно камеры, щелкнув значок прикрепления камеры на временной шкале. 

Прикрепление всех слоев к камере
Изображение, где все слои прикреплены к камере

Использование камеры во время выполнения

Можно добавить, вызвать камеру или управлять ею во время выполнения с помощью API-интерфейсов класса Camera для документов AS3, WebGL и HTML Canvas. Ниже приводится список API-интерфейсов времени выполнения класса Camera для документов типа AS3, WebGL и HTML Canvas:

Тип

Класс 

Пример

Описание

AS3

VirtualCamera

import fl.VirtualCamera;

var cameraObj = VirtualCamera.getCamera(root);

Получение объекта камеры, чтобы получить или задать свойства камеры во время выполнения.

HTML Canvas

VirtualCamera

var cameraObj = AdobeAn.VirtualCamera.getCamera(exportRoot);

Получение объекта камеры, Убедитесь, что при создании содержимого камера включена.

WebGL

VirtualCamera

var cameraObj = flwebgl.VirtualCamera.getCamera(stage.getPlayer());

Получение объекта камеры, Убедитесь, что при создании содержимого камера включена.

 Все методы применимы для типа документа AS3. Некоторые из методов недоступны для типов документов WebGL и HTML Canvas. Методы, которые применимы/неприменимы для документов WebGL и HTML Canvas, отображаются в двух последних столбцах таблицы.

Методы виртуальной камеры

№ п/п

Метод

Прототип

Пример

Описание

HTML Canvas

WebGL

1

getPosition

getPosition():Object

trace(cameraObj.getPosition().x, cameraObj.getPosition().y,
cameraObj.getPosition().z);
Возвращает объект со свойствами x, y и z, которые определяют текущее положение камеры.

Да

Да

2

setPosition

setPosition(posX:Number,posY:Number, posZ:Number=0):void

cameraObj.setPosition(100,100,100);

Камера перемещается в абсолютное положение, заданное входными параметрами. Значение по умолчанию = 0.

Да

Да

3

moveBy

moveBy(tx:Number,ty:Number,tz:Number=0): void

cameraObj.moveBy(100,100,100);

Камера перемещается относительно текущего положения на tx, ty или tz.
Примечание. tz имеет смысл только в том случае, если включена глубина слоя. Значение по умолчанию = 0.

Да

Да

4

resetPosition

resetPosition():void

cameraObj.resetPosition();

Положение камеры сбрасывается до исходной позиции, т. е. (0,0,0).

Да

Да

5

getZoom

getZoom():Number

trace(cameraObj.getZoom());

Возвращает текущее значение zoom для камеры, значение по умолчанию = 100 %.

Да

Да

6

setZoom

setZoom(zoom:Number):void

cameraObj.setZoom(120);

Камера масштабируется до абсолютного значения, заданного входным параметром в процентном выражении.

Да

Да

7

zoomBy

zoomBy(zoom:Number):void

cameraObj.zoomBy(100);

Камера масштабируется относительно текущего значения масштабирования (в процентном выражении).

Да

Да

8

resetZoom

resetZoom():void

cameraObj.resetZoom();

Масштабирование камеры сбрасывается до ее масштаба по умолчанию (т. е. 100 %).

Да

Да

9

getRotation

getRotation():Number

trace(cameraObj.getRotation());

Возвращается текущий угол камеры.  

Да

Да

10

setRotation

setRotation(angle:Number):void

cameraObj.setRotation(45);

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

Да

Да

11

rotateBy

rotateBy(angle:Number):void

cameraObj.rotateBy(60);

Камера поворачивается относительно текущего угла, заданного входными параметрами.

Да

Да

12

resetRotation

resetRotation():void

cameraObj.resetRotation();

Угол камеры сбрасывается до нуля.

Да

Да

13

setTint

setTint(tintColor:uint,tintPercent: Number):void

cameraObj.setTint(0x56FFFF, 68);

Задается оттенок камеры с использованием свойств tintColor(RGB) и tintPercent (процент оттенка).

Нет

Да

14

setTintRGB

setTintRGB(red:uint,green:uint,blue: uint,tintPercent:Number):void

cameraObj.setTintRGB(0xff, 0, 0, 50);

Задается оттенок камеры с использованием разложенных значений цвета R, G, B и свойства tintPercent (процент оттенка).

Нет

Да

15

getTint()

getTint():Object

var tint=cameraObj.getTint();
trace("color:",tint.color,
"percentage:",tint.percent);

Возвращает объект с двумя свойствами: percent и color.

Нет

Да

16

getTintRGB

getTintRGB():Object

var tint = cameraObj.getTintRGB();
trace("tint color red:", tint.red,"green:",
tint.green," blue:",tint.blue,"tint percent: ",tint.percent);

Возвращает объект с четырьмя свойствами: percent, red, green и blue.

Нет

Да

17

resetTint

resetTint()

cameraObj.resetTint();

Удаляется оттенок камеры.

Нет

Да

18

setColorFilter

setColorFilter(brightness:Number, contrast:Number,saturation:Number,hue: Number):void

cameraObj.setColorFilter(100,-50,
50,-100);

Задается цветовой фильтр камеры с использованием разложенных значений (яркость,контрастность,насыщенность,цветовой тон).

Нет

Нет

19

resetColorFilter

resetColorFilter()

cameraObj.resetColorFilter();

Удаляется цветовой фильтр.

Нет

Нет

20

reset

reset()

cameraObj.reset();

Восстанавливаются все свойства камеры по умолчанию.

Да

Да

21

setZDepth

setZDepth(zDepth:Number):void

cameraObj.setZDepth(200);

Задается значение глубины камеры по оси Z.

Да

Нет

22

getZDepth

getZDepth():Number

trace(cameraObj.getZDepth());

Возвращается текущее значение глубины камеры по оси Z.

Да

Нет

23

pinCameraToObject

pinCameraToObject(object:DisplayObject, offsetX:Number=0,offsetY:Number=0, offsetZ=0)

cameraObj.pinCameraToObject
(getChildByName("InstanceName"), 200,50);

Камера продолжает следить за объектом, заданным в качестве входного параметра во время выполнения. Если передаются свойства offsetX, offsetY и offsetZ, камера отслеживает (x+offsetX,y+offsetY, z+offsetZ).

Да

Да

24

setPinOffset

setPinOffset(offsetX:Number, offsetY:Number,offsetZ:Number)

cameraObj.setPinOffset(-60,0);

Измените свойства offsetX и offsetY для связывания камеры с объектом. Камера следует за объектом относительно точки (x+offsetX, y+offsetY, zDepth+z) во время выполнения.

Да

Да

25

unpinCamera

unpinCamera()

cameraObj.unpinCamera();

Удаление привязки камеры к какому-либо объекту.

Да

Да

26

setCameraMask

setCameraMask(maskObj:DisplayObject)

cameraObj.setCameraMask(maskObj);

Задается maskObj в качестве маски на камере.

Нет

Нет

27

removeCameraMask

removeCameraMask()

cameraObj.removeCameraMask();

Удаляется маска с камеры.

Нет

Нет

Доступ к камере как к объекту фрагмента ролика

Тип

Метод

Прототип

Пример

AS3

getCameraAsMovieClip

getCameraAsMovieClip(container:DisplayObject):MovieClip

var cameraObj=fl.VirtualCamera.getCameraAsMovieClip(root);

HTML Canvas

getCameraAsMovieClip

getCameraAsMovieClip(container:DisplayObject):MovieClip

var cameraObj=AdobeAn.VirtualCamera.getCamera(exportRoot);

WebGL

getCameraAsMovieClip

getCameraAsMovieClip(container:DisplayObject):MovieClip

var cameraObj=flwebgl.VirtualCamera.getCameraAsMovieClip(this);

Маскирование объектов во время выполнения (для документа AS3)

Можно скрыть объекты во время выполнения с помощью следующего кода API камеры:

import fl.VirtualCamera;
fl.VirtualCamera.getCamera(root).setCameraMask(torch);

Образец снимка экрана из анимации, когда используется овальная маска, выглядит следующим образом.

Создание интерактивных анимаций камеры с помощью мастера кода операций

На следующей схеме описывается пошаговый подход к созданию анимации с использованием интерактивной камеры. Можно использовать мастер кода операций в документе HTML Canvas. 

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

Видео, демонстрирующее использование камеры во время выполнения

Образец видео, демонстрирующий использование камеры во время выполнения

Обрезка объекта в рабочей области

Adobe XD позволяет накладывать содержимое поверх другой монтажной области, чтобы имитировать интерактивные эффекты слайда. В качестве примера можно привести раскрывающиеся списки, всплывающую клавиатуру или всплывающие окна с затемнением фона. Наложения также позволяют повторно использовать монтажную область, не копируя содержимое наложения для каждой области. 

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

 Adobe

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

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