Как изменить частоту кадров в Adobe Animate

Обновлено: 06.07.2024

Анимацию в Интернете можно выполнять с помощью SVG , JavaScript , включая WebGL , анимацию CSS , анимированные GIF и даже анимированные PNG и другие типы изображений. Затраты на анимацию CSS-свойства могут варьироваться от одного свойства к другому, а анимация ресурсоемких CSS-свойств может привести к перебоям в работе браузера, поскольку он изо всех сил пытается достичь плавной частоты кадров.

Для анимационных медиафайлов, таких как видео и анимированные GIF-файлы, основной проблемой производительности является размер файла. Самая большая проблема заключается в том, чтобы загрузить размер файла достаточно быстро, чтобы не оказывать отрицательного влияния на производительность. Анимации на основе кода, будь то CSS, SVG, , webGL или другие анимации JavaScript, могут вызвать проблемы с производительностью, даже если пропускная способность невелика. Эти анимации могут потреблять ресурсы ЦП и/или вызывать зависания.

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

Пользователи ожидают, что все взаимодействия с интерфейсом будут плавными, а все пользовательские интерфейсы — отзывчивыми. Анимация может помочь сделать сайт более быстрым и отзывчивым, но анимация также может сделать сайт более медленным и дерганым, если она не сделана правильно. Отзывчивые пользовательские интерфейсы имеют частоту кадров 60 кадров в секунду (fps). Хотя не всегда возможно поддерживать 60 кадров в секунду, важно поддерживать высокую и постоянную частоту кадров для всех анимаций. Давайте посмотрим, как мы можем использовать инструменты браузера для проверки частоты кадров. Мы также обсудим несколько советов по созданию и поддержанию высокой и стабильной частоты кадров.

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

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

По сравнению с анимацией элементов с помощью JavaScript, CSS-анимацию создавать проще. Они также могут повысить производительность, так как дают браузеру больше контроля над тем, когда отображать кадры, и при необходимости отбрасывать кадры.

Однако затраты производительности на изменение свойства CSS могут различаться в зависимости от свойства. Принято считать, что 60 кадров в секунду — это скорость, при которой анимация выглядит плавной. При скорости 60 кадров в секунду у браузера есть 16,7 миллисекунды для выполнения сценариев, пересчета стилей и макета, если это необходимо, и перерисовки обновляемой области. Медленные скрипты и анимация дорогостоящих свойств CSS могут привести к зависаниям, поскольку браузер изо всех сил пытается достичь плавной частоты кадров.

Водопад рендеринга

Процесс, используемый браузером для отображения изменений на странице, когда элемент анимирует свойства CSS, можно описать как каскад, состоящий из следующих шагов:


  1. Пересчитать стиль: при изменении свойства элемента браузер должен пересчитать вычисленные стили.
  2. Макет: затем браузер использует рассчитанные стили для определения положения и геометрии элементов. Эта операция называется "макет", но иногда ее также называют "перекомпоновка".
  3. Отрисовка: наконец, браузеру необходимо перерисовать элементы на экране. Последний шаг в этой последовательности не показан: страница может быть разделена на слои, которые рисуются независимо друг от друга, а затем объединяются в процессе под названием «Композиция».

Процесс, используемый браузером для отображения обновленных изменений элемента холста, отличается. В сценарии макет страницы не меняется. Скорее, страница многократно перерисовывается на основе функций JavaScript canvas API. Когда холст анимирует рисунок, анимацию холста можно описать как водопад, состоящий из следующих шагов:

Эти последовательности должны помещаться в один кадр, так как экран не обновляется до тех пор, пока они не будут завершены.

Стоимость свойства CSS

В контексте водопада рендеринга одни свойства стоят дороже, чем другие:

Свойства, которые не влияют на геометрию или положение, но не отображаются в своем собственном слое, не запускают компоновку.


< img class="lazyload" data-src="https://developer.mozilla.org/en-US/docs/Web/Performance/Animation_performance_and_frame_rate/layout-faint.jpg" />

Примечание. На веб-сайте CSS Triggers показано, какая часть водопада активируется для каждого свойства CSS, а также информация для большинства свойств CSS в зависимости от движка браузера.

Пример: маржа или трансформация

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

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

Если вы хотите поиграть, демо-сайт находится здесь. Это выглядит так:


У него есть два элемента управления: кнопка для запуска/остановки анимации и группа переключателей, позволяющая выбрать анимацию с помощью margin или анимацию с помощью transform .

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

Есть также видеоверсия этого пошагового руководства:

Анимация с использованием поля

Оставив параметр "Использовать поля" установленным, запустите анимацию, откройте инструмент "Производительность" и сделайте запись. Вам нужно будет записать всего несколько секунд.

Откройте первую запись. То, что вы увидите, во многом зависит от вашего компьютера и загрузки системы, но это будет примерно так:


< /p>

Здесь показаны три разных представления: (а) обзор водопада, (б) частота кадров и (в) сведения о временной шкале.

Обзор водопада


Это сжатый вид водопада. Преобладание зеленого цвета говорит нам о том, что мы тратим много времени на рисование.

Частота кадров


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

Водопад

В остальной части записи показан вид на водопад. Если вы прокрутите это, вы увидите такой шаблон:


< /p>

Это показывает водопад рендеринга. В каждом кадре анимации мы пересчитываем стили для каждого элемента, затем выполняем один макет, затем перерисовываем.

Вы можете видеть, что краска здесь особенно снижает производительность. На снимке экрана выше мы выделили операцию рисования, и поле справа показывает, что она заняла 13,11 мс. При нашем общем бюджете всего 16,7 мс неудивительно, что нам не хватает стабильно высокой частоты кадров.

Вы можете поэкспериментировать с этим: попробуйте удалить тень блока с помощью Инспектора страниц и посмотрите, как это повлияет на время рисования. Но далее мы увидим, как использование преобразования вместо поля полностью устраняет эти дорогостоящие краски.

Анимация с использованием преобразования

Теперь переключите переключатель на веб-странице на "Использовать преобразование" и сделайте новую запись. Это будет выглядеть примерно так:


< /p>

Обзор водопада


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

Частота кадров


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

Водопад

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


< /p>

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

В этом примере главы из книги Adobe Animate CC Classroom в книге (выпуск 2018 г.) вы узнаете, как изменить практически любой аспект объекта — положение, цвет, прозрачность, размер, поворот и многое другое. — со временем.

Из книги

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

Анимация положения, масштаба и поворота объектов

Настройте темп и время анимации

Анимация прозрачности и специальных эффектов

Изменить траекторию движения объекта

Создать вложенную анимацию

Разделить анимацию движения

Изменить замедление движения объекта

Анимация в 3D-пространстве

f0123-01.jpg

Используйте Adobe Animate CC для изменения практически любого аспекта объекта — положения, цвета, прозрачности, размера, поворота и т. д. — с течением времени. Анимация движения — это основной метод создания анимации с использованием экземпляров символов.

Начало работы

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

note.jpg

Примечание

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

Дважды щелкните файл 04End.mp4 в папке Lesson04/04End, чтобы воспроизвести окончательную анимацию, которая была экспортирована как видеофайл.

f0124-01.jpg

Этот проект представляет собой анимационную заставку, которая будет размещена на веб-сайте для воображаемого фильма, который скоро выйдет на экраны. На этом уроке вы будете использовать анимацию движения для анимации нескольких компонентов на странице: городского пейзажа, главных актеров, нескольких старомодных автомобилей и главного заголовка.

Закройте файл 04End.mp4.

Дважды щелкните файл 04Start.fla в папке Lesson04/04Start, чтобы открыть исходный файл проекта в Animate. Этот файл представляет собой документ ActionScript 3.0, который частично завершен и уже содержит многие графические элементы, импортированные в библиотеку для использования вами. Вы будете использовать все функции анимации, доступные в документе ActionScript 3.0, но вместо использования Flash Player для воспроизведения в браузере вы будете экспортировать видеофайл MP4.

В параметрах просмотра над сценой выберите «Вписать в окно» или выберите «Просмотр» > «Увеличение» > «Вписать в окно», чтобы увидеть всю сцену на экране компьютера.

Выберите «Файл» > «Сохранить как». Назовите файл 04_workingcopy.fla и сохраните его в папке 04Start.

Сохранение рабочей копии гарантирует, что исходный начальный файл будет доступен, если вы захотите начать заново.

Инструктор по Flash Марк Шеффер делится своими лучшими методами создания анимации в Adobe Flash CS3 Professional.

Из книги

Если вы создавали иллюстрацию в Photoshop или Illustrator (или на бумаге, если уж на то пошло), вы привыкли рисовать в визуальном пространстве. К чему вы, возможно, не привыкли, так это к рисованию в времени.

Время — это то, что делает возможной анимацию. Анимация — это не просто бегающие мультяшные персонажи; этот термин относится к любому постепенному изменению визуальных элементов с течением времени. Текст, движущийся по сцене, — это анимация; как и черно-белая фотография, которая превращается в цвет.

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

Игра в название фрейма

Большинство разработчиков Flash не используют точную терминологию в своей повседневной работе.Например, кадр и ключевой кадр — технически разные вещи, но люди обычно неофициально называют их «кадрами», например «Перейти к кадру, в котором взрывается воздушный шар». Точно так же ячейка на временной шкале технически не является кадром, если в ней что-то есть, но в повседневном разговоре люди все время называют пустые ячейки «фреймами», как в «Расширьте эту последовательность до кадра 128». Если уж на то пошло, вы даже можете услышать, как саму сцену называют рамкой, например, «Уберите это облако из рамы». Большинство этих употреблений пришло из мира традиционного кино и анимации, где они вполне приемлемы. Иногда вы также встретите неформальное использование этого слова в этой книге, когда это сделает инструкции или пояснения более читабельными.

Временная шкала — это место, где вы управляете тем, как объекты в рабочей области изменяются с течением времени. Вертикальная красная линия, пересекающая временную шкалу, называется указатель воспроизведения; она отмечает течение времени, проходящего по временной шкале слева направо (рис. 30).

Рисунок 30

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

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

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

Чтобы вставить ключевой кадр на временную шкалу, выберите ячейку, в которой должен появиться ключевой кадр, и выберите «Вставка» > «Временная шкала» > «Ключевой кадр» или нажмите F6. В ячейке появится маленький черный кружок.

В некоторых случаях может потребоваться, чтобы все, что было в предыдущем ключевом кадре, исчезло. Это можно сделать, выбрав «Вставка» > «Временная шкала» > «Пустой ключевой кадр» или нажав F7. Пустой ключевой кадр представлен на временной шкале белым кружком вместо черного.

Рамка. Кадр (который мы иногда будем называть обычным кадром, чтобы отличить его от ключевого кадра) сигнализирует Flash о том, что вы хотите сохранить статус-кво. Когда указатель воспроизведения проходит через обычный кадр, он указывает рабочей области продолжать отображать все, что было в самом последнем ключевом кадре. Чтобы вставить кадр на временную шкалу, выберите ячейку, в которой должен появиться кадр, и выберите «Вставка» > «Временная шкала» > «Кадр» или нажмите клавишу F5. В ячейке появится белый прямоугольник.

Чтобы вставить серию кадров, выберите ячейку, в которой должна заканчиваться серия. (Flash предполагает, что вы хотите, чтобы серия начиналась в ячейке, следующей сразу за самым последним ключевым кадром.) Когда вы выбираете «Вставка» > «Временная шкала» > «Кадр» или нажимаете F5, в последней ячейке серии появляется белый прямоугольник. Промежуточные кадры не содержат белых прямоугольников, но исчезают разделительные линии между ячейками; отсутствие разделительных линий позволяет отличить серию кадров от серии пустых ячеек.

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

Также обратите внимание, что на разных слоях могут происходить разные вещи. Когда указатель воспроизведения достигает любой заданной точки на временной шкале, скажем, кадра 12, Flash просматривает весь столбец ячеек и следует инструкциям для каждого слоя. Например, если кадр 12 на слое 1 является ключевым кадром, Flash заменит все, что было ранее на этом слое, новым в этом ключевом кадре. Если кадр 12 на слое 2 является обычным кадром, Flash продолжит отображать то, что было в предыдущем ключевом кадре этого слоя. Если кадр 12 на слое 3 является пустым ключевым кадром, Flash очистит все, что было ранее на этом слое. Все эти изменения происходят одновременно, когда указатель воспроизведения достигает заданного кадра, независимо от того, сколько или мало слоев имеется.

Делайте это во сне

Чтобы листать позиции кадр за кадром, как если бы вы листали и пролистывали анимационные рисунки, используйте:

    • Ключ точки [.] для перехода на один вперед
    • Запятая [,] для перехода на одну позицию назад

    Чтобы просмотреть анимацию:

      • Во-первых, для первоначального предварительного просмотра нажмите клавишу Enter (клавиша возврата на Mac).
      • Для более точного предварительного просмотра в реальном времени:
        • Windows = Control + Ввод
        • Mac = Command + Return
        • Или выберите "Главное меню" > "Управление" > "Проверить ролик" > "Проверить".

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

        При запуске Animate и создании нового проекта выберите ActionScript 3.0 в разделе «Создать новый».Программа откроется с временной шкалой, инструментами и рабочей областью. Если нет, вы можете открывать различные палитры и окна, используя параметры рабочей области. Нажмите раскрывающееся меню «Рабочее пространство» в верхней части окна или выберите «Главное меню» > «Окно» > «Рабочее пространство».

        Для цифровой рисованной анимации и вырезок полезны Essentials или Classic. Вам потребуются следующие палитры (которые также можно найти, перейдя в Главное меню > Окна).

          • Смеситель цветов: палитры «Обводка» и «Заливка», значения HSB (и альфа-канала) и микшер цветов (для создания цветов, небезопасных для Интернета).
          • Информация: ширина и высота, поля ввода X и Y, значения RGBA и положения точек привязки.
          • Выровнять: чтобы выровнять объекты вместе как группы и/или по отдельности относительно рабочей области.
          • Преобразование: поля ввода для параметров Масштаб и пропорции, Поворот и наклон.

          Разрешение

          Flash предназначен в первую очередь для Интернета и, следовательно, для разрешения экрана 72 dpi. При производстве анимации мы можем игнорировать «количество точек на дюйм», потому что мы не обязательно печатаем материал. Что более важно, так это то, что мы можем изменить размеры. Следовательно, если бы мы захотели, мы могли бы создавать файлы высокой четкости с помощью Animate.

            • 1080p: 1920 (широкий) x 1080 (высокий)
            • 720p: 1280 (широкое) x 720 (высокое)

            Для этого обратитесь к свойствам документа справа от рабочей области. Кроме того, вы можете перейти в Главное меню > Изменить > Документ, чтобы установить разрешение, или контекстно щелкнуть рабочую область / рабочую область и выбрать «Свойства документа». Оттуда вы можете изменить «Размер» и «Цвет фона».

            Частота кадров

            Используйте окно настроек документа, чтобы изменить частоту кадров: Главное меню > Изменить > Документ.

            Перейдите к пункту «Частота кадров» и выберите/введите:

              • 24 кадра в секунду для покадровой анимации.
              • 12 кадров в секунду для двухкадровой анимации (которую затем можно импортировать в Premiere или After Effects и интерпретировать отснятый материал как 12 кадров в секунду для обычной анимации персонажей)

              Цвет фона

              Используя инспектор свойств или выбрав «Изменить» > «Документ», вы можете изменить цвет фона и, как следствие, изменить цвет рабочей области. Рабочая область не будет отображаться в фильмах, которые вы экспортируете. Область находится за пределами поля зрения камеры.

              Слои

              Подобно Premiere и After Effects, Animate использует временную шкалу, которая включает в себя длинную серию потенциальных кадров. Временная шкала также состоит из слоев. По умолчанию новый проект начинается с одного слоя и пустого ключевого кадра в кадре 0. Однако вы можете очень просто добавить больше слоев. Кнопка «Добавить слой» расположена в левой части строки состояния у нижнего края временной шкалы. Вы также можете создать новый слой, обратившись к главному меню и выбрав «Вставка» > «Временная шкала» > «Слой».

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

              Кадры и ключевые кадры

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

              В рамках этого процесса вы будете применять ключевые кадры при разработке фразы движения. Например, когда вы создаете нарисованную анимацию, каждому кадру, который вы отмечаете, Animate назначает ключевой кадр. В другой ситуации, когда вы устанавливаете определенные ключевые кадры (например, один в кадре 24, а другой в кадре 36),

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

              Animate использует различные кадры и ключевые кадры. Вот краткий обзор:

                • Пустой ключевой кадр, обозначенный значком "пустой кружок" на кадре. Когда вы создаете новый проект, по умолчанию Animate запускается с пустым ключевым кадром в кадре 0 на временной шкале. Пустой ключевой кадр — это ключевой кадр, содержимое которого отсутствует в рабочей области. Это ключевой кадр «без содержания». В некотором смысле пустой ключевой кадр является цифровым эквивалентом пустого листа анимации или кадра, ожидающего использования. Как только вы нарисуете на нем или разместите на нем объект, он станет ключевым кадром.
                • Ключевой кадр, представленный кадром со значком сплошного черного круга на кадре. Проще говоря, ключевой кадр отличается от пустого тем, что у него есть содержимое (например, линия, фигура, текст и т. д.).
                • Рамка. Вы можете добавить кадр к ключевому кадру или к пустому ключевому кадру, чтобы увеличить продолжительность изображения; например, с одного кадра на два кадра. После того, как вы добавили кадр, вы можете щелкнуть и перетащить его правый край, чтобы зафиксировать несколько кадров. Кроме того, если вы назначите параметр «анимация» серии кадров между ключевыми кадрами, Animate интерполирует позиции.

                Контекстное меню ключевого кадра

                Выберите кадр на временной шкале (пустой ключевой кадр, ключевой кадр или кадр) и щелкните контекстно (Windows = щелкните правой кнопкой мыши; Macintosh = щелкните, удерживая клавишу Control), чтобы открыть следующее меню:

                  • Создать анимацию движения
                  • Вставить рамку
                  • Удалить кадры
                  • Вставить ключевой кадр
                  • Вставить пустой ключевой кадр
                  • Очистить ключевой кадр
                  • Преобразовать в ключевые кадры
                  • Преобразовать в пустые ключевые кадры
                  • Вырезать кадры
                  • Копировать кадры
                  • Вставить кадры
                  • Очистить кадры
                  • Выбрать все кадры

                  Вставка и изменение ключевых кадров и пустых ключевых кадров

                  Луковая шелуха

                  Для анимации вам, вероятно, будет полезно использовать параметр Onion Skin, чтобы сделать ваши предыдущие рисунки полупрозрачными, как будто вы работаете на анимационном световом столе.

                    • Чтобы активировать эту функцию, нажмите кнопку "Луковица", расположенную в нижней части временной шкалы.
                    • Если вы посмотрите на нижний край временной шкалы, вы найдете ряд кнопок: «Центральный кадр», «Луковица», «Контуры луковицы», «Редактировать несколько кадров» и «Изменить луковые маркеры». Луковая кожица — это кнопка с белым и синим квадратами, расположенными рядом друг с другом.
                    • Нажав кнопку «Изменить луковые маркеры», вы можете изменить диапазон, отображаемый функцией «луковая кожица». Установив «Anchor Onion», левая скобка останется на одном месте, пока вы перемещаете правую скобку. «Onion 2» выделит два кадра до указателя воспроизведения и два кадра после. Точно так же «Лук 5» выделит 5 кадров с каждой стороны. «Onion All» выберет все кадры в последовательности.
                    • На временной шкале переместите скобку End Onion Skin к последнему файлу в последовательности, чтобы выбрать серию кадров.

                    Чтобы заменить линию заливкой

                    Используя инструмент выделения, выберите линию. Затем перейдите в Главное меню и выберите «Изменение» > «Форма» > «Преобразовать линии в заливки».

                    Импорт аудиоклипов

                    Чтобы использовать звуковой клип в своем проекте, он должен быть в формате MP3 или Wave. Кроме того, вы должны импортировать клипы в библиотеку проекта (библиотека аналогична окну проекта в Premiere или After Effects).

                    Прежде чем импортировать файл (или файлы), вы должны создать папку для звуков в общей папке проекта и поместить в нее файлы MP3. Как вы уже знаете, папка проекта — это «чемоданчик», который вы будете перемещать взад и вперед из сетевого пространства или переносного жесткого диска на локальный диск компьютерной станции, с которой вы работаете.

                    Чтобы импортировать звуковой файл (или файлы), откройте главное меню и выберите «Файл» > «Импорт» > «Импорт в библиотеку». Выберите файлы MP3 (или, чтобы выбрать больше, удерживайте нажатой клавишу Shift и выберите больше), а затем нажмите кнопку «Импортировать в библиотеку».

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

                    Чтобы добавить звуковой слой

                    Во-первых, вы должны создать новый слой для звука на временной шкале (и назвать его "Звук").

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

                    Animate использует несколько способов синхронизации звукового файла с изображениями, которые вы найдете в Инспекторе свойств > Синхронизация. Вы должны выбрать Sync > Stream для анимационных проектов. Это позволит вам скрабировать для синхронизации губ.

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

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

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

                    Чтобы изменить высоту звукового слоя

                    Иногда вам может потребоваться четко просмотреть форму звуковой волны (например, если вы хотите анимировать звуковую дорожку и, следовательно, определенные точки на временной шкале). Чтобы увеличить высоту слоя, контекстно щелкните слой и выберите «Свойства». В свойствах слоя вы можете установить высоту слоя на 100%, 200% или 300%. После этого нажмите OK.

                    Читайте также: