Загрузить PDF Загрузить PDF

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

Часть 1
Часть 1 из 3:

Покадровая флеш-анимация

Загрузить PDF
  1. Этот метод считается основным методом создания «традиционной» анимации, в которой каждый последующий кадр включает одно, но чуть измененное изображение. При воспроизведении всех кадров изображение «оживает». Этот же метод используется аниматорами, рисующими мультфильмы от руки, и отнимает больше времени, чем твининг (смотрите следующий раздел).
    • По умолчанию Flash воспроизводит 24 кадра в секунду (FPS). Это означает, что за одну секунду будут показаны 24 кадра, но не все из них должны быть обязательно разными. Вы можете изменить этот параметр (если хотите) на 12 кадров в секунду, но при 24 кадрах в секунду анимация будет воспроизводиться более «гладко».
  2. Есть множество программ для создания флеш-анимации, но наиболее мощной является Adobe Flash Professional CC. Вы можете бесплатно установить пробную версию этой программы или использовать другой продукт (если вы не хотите регистрироваться на Adobe Creative Cloud). Далее в этой статье описывается работа с Flash Professional.
  3. Так как покадровая анимация требует наличия нескольких изображений (которые немного отличаются друг от друга), то вам нужно создать эти изображения вручную. Для этого воспользуйтесь Adobe Flash Professional или нарисуйте изображения в любом графическом редакторе.
    • Если вы хотите, чтобы размер ваших изображений легко менялся без потери их качества, создавайте изображения в векторной, а не в растровой графике. Векторные изображения будут перерисовывать себя при изменении их размера (то есть вы избежите пикселизации или сглаживания). Растровые изображения – это традиционные изображения, например, фотографии, нарисованные картинки и так далее. При попытке увеличить такие изображения вы получите сильно искаженную картинку.
  4. При первом запуске Adobe Flash Professional вы увидите пустой холст (слой) и пустую временную шкалу. По мере добавления кадров временная шкала будет заполняться автоматически. Вы можете работать со слоями так же, как вы делаете это в Photoshop.
    • Прежде чем добавить изображение, создайте базовый фон вашей анимации. Переименуйте «Слой 1» в «Фон», а затем закрепите его. Создайте второй слой и назовите его как угодно. Это будет слой, на котором вы будете создавать анимацию.
    • Добавьте рисунок на холст первого кадра. Вы можете импортировать рисунок с вашего компьютера, или вы можете использовать инструменты для рисования, чтобы создать рисунок непосредственно в программе.
    • Первый кадр – это «ключевой» кадр. Ключевой кадр – это кадр, который включает изображение и образует основу («костяк») анимации. Вы будете создавать новый ключевой кадр каждый раз при изменении изображения.
    • Ключевые кадры на временной шкале обозначаются черной точкой.
    • Вы не нужен ключевой кадр в каждом последующем кадре. Создавайте ключевой кадр через каждые четыре-пять кадров, чтобы сделать хорошую анимацию.
  5. В этом случае вы сможете добавить изображение в кадр несколько раз. Это особенно полезно, если вам нужно быстро добавить несколько однотипных картинок в один кадр (например, рыбки в аквариуме).
    • Выделите рисунок. Щелкните правой кнопкой мыши по рисунку и выберите «Convert to Symbol» (Преобразовать в символ). Изображение будет добавлено в библиотеку, что упростит его использование в будущем.
    • Удалите рисунок. Не волнуйтесь - вы сможете добавлять его в кадр простым перетаскиванием из библиотеки. Так вы можете добавить в кадр один и тот же рисунок несколько раз.
  6. Если ваш первый ключевой кадр готов, вставьте пустые кадры, а затем приступайте к созданию второго ключевого кадра. Нажмите F5 (четыре или пять раз), чтобы добавить пустые кадры после первого ключевого кадра.
  7. Создайте второй ключевой кадр (после того, как вы добавили несколько пустых кадров). Есть два различных способа сделать это: вы можете скопировать существующий ключевой кадр и внести в него небольшие изменения, или вы можете создать пустой ключевой кадр и добавить в него новое изображение. Если вы используете рисунок, созданный в другой программе, воспользуйтесь вторым способом. Если вы вставляете изображение, созданное при помощи инструментов для рисования Adobe Flash Professional, воспользуйтесь первым методом.
    • Чтобы создать ключевой кадр, используя содержимое предыдущего ключевого кадра, нажмите F6. Чтобы создать пустой ключевой кадр, щелкните правой кнопкой мыши по последнему кадру на временной шкале и выберите «Insert Blank Keyframe» (Вставить пустой ключевой кадр).
    • После того как вы создали второй ключевой кадр, вам нужно внести изменения в его изображение, чтобы анимация «ожила». Если вы пользовались инструментами для рисования Adobe Flash Professional, выберите инструмент «Transform» (Преобразование), чтобы выделить элемент вашего рисунка (например, руку персонажа) и изменить его.
    • Если в каждый ключевой кадр вы вставляете новое изображение, убедитесь, что оно находится в нужном месте (согласно логической последовательности кадров).
  8. После создания двух ключевых кадров повторите процесс – добавьте несколько пустых кадров между каждыми ключевыми кадрами и убедитесь, что анимация будет проигрываться «гладко». [1]
    • Вносите небольшие изменения. Чем меньше (незаметнее) изменения, тем глаже воспроизводится анимация. Например, если вы хотите, чтобы персонаж поднимал руку, второй ключевой кадр не должен включать рисунок, на котором персонаж изображен с уже поднятой рукой. Вместо этого используйте несколько ключевых кадров для перехода от опущенной руки к поднятой руке. В этом случае анимация будет более плавной.
    Реклама
Часть 2
Часть 2 из 3:

Твининг

Загрузить PDF
  1. Flash включает функцию «Tweening» (Твининг), которая позволяет задать начальный и конечный кадр вашей анимации. Flash автоматически создаст промежуточные кадры так, чтобы переход от одного ключевого кадра к другому был плавным. Таким образом, вам не нужно создавать изображения для каждого ключевого кадра (как в покадровой анимации).
    • Твининг особенно полезен для морфинга – плавного преобразования одного изображения в другое (с помощью геометрических операций и цветовой интерполяции).
    • При создании анимации вы можете одновременно пользоваться как покадровым методом, так и твинингом.
    • Если вы хотите анимировать сразу несколько персонажей, то каждый кадр анимации должен включать несколько слоев (один слой для одного персонажа).
  2. В отличие от покадрового метода здесь не надо создавать несколько изображений для анимации. Вместо этого необходимо создать одно изображение, которое будет изменено в процессе твининга.
    • Прежде чем добавить изображение, создайте базовый фон вашей анимации. Переименуйте «Слой 1» в «Фон», а затем закрепите его. Создайте второй слой и назовите его как угодно. Это будет слой, на котором вы будете создавать анимацию.
    • Настоятельно рекомендуется использовать встроенные инструменты для рисования (в программе Flash) или импортировать векторное изображение. Если вы хотите, чтобы размер ваших изображений легко менялся без потери их качества, создавайте изображения в векторной, а не в растровой графике. Векторные изображения будут перерисовывать себя при изменении их размера (то есть вы избежите пикселизации или сглаживания).
  3. В этом случае Flash сможет манипулировать изображением. Если вы попытаетесь проделать твининг с изображением, которое не было преобразовано в символ, то программа предложит вам сделать это.
    • Выделите рисунок. Щелкните правой кнопкой мыши по рисунку и выберите «Convert to Symbol» (Преобразовать в символ). Изображение будет добавлено в библиотеку, что упростит его использование в будущем. [2]
  4. Анимированный твин переместит изображение из одного положения в другое. Щелкните правой кнопкой мыши по символу и выберите «Create Motion Tween» (Создать анимированный твин). 24 кадра будут добавлены на временную шкалу, так как это стандартная длина твина. Помните, что по умолчанию анимация будет воспроизводиться плавно на скорости 24 кадра в секунду, поэтому анимированный твин длится всего 1 секунду.
    • Когда вы создаете анимированный твин, вы автоматически перемещаетесь в последний кадр анимации.
  5. После того как вы создали твин, переместите изображение в конец анимации. Flash отобразит траекторию с точками, обозначающими положение каждого кадра твина.
    • При первом создании траектории она будет выглядеть как прямая линия (от начальной точки до конечной точки).
  6. Если вы запустите анимацию, ваше изображение будет двигаться по траектории, но фон исчезнет после первого кадра. Поэтому необходимо добавить фон в каждый кадр анимации.
    • На временной шкале выберите слой с фоном. Щелкните по последнему кадру на временной шкале (этот кадр должен быть последним кадром всей анимации). Нажмите F5, чтобы вставить фоновые кадры (от начала до конца анимации).
  7. Добавление ключевых кадров на траекторию позволит вам изменять рисунок в анимированном твине. Вы можете менять изображение только тогда, когда оно вставлено в ключевой кадр. Для добавления ключевого кадра на траекторию выберите кадр на временной шкале (тот кадр, который вы хотите сделать ключевым). Затем перетащите изображение в выбранный кадр. Траектория будет отрегулирована автоматически и ключевой кадр будет добавлен на временную шкалу. На временной шкале ключевые кадры обозначаются ромбиками.
  8. Для изменения траектории изображения перетащите маркеры кадра в новое положение. Не вносите чрезмерного числа изменений в траекторию твина, так как это приведет к беспорядочному перемещению рисунка (если, конечно, это не ваша цель!). [3]
  9. Если вы создали ключевые кадры и траекторию, вы можете преобразовать изображение так, чтобы оно плавно менялось при движении по траектории твина. Вы можете изменить форму, цвет, наклон, размер и любой другой параметр изображения. [4]
    • Выберите кадр, в котором рисунок будет преображаться.
    • Откройте панель свойств рисунка. Для этого нажмите F3.
    • Измените значения параметров в окне свойств рисунка. Например, вы можете изменить оттенок или цвет, добавить фильтры, изменить размер.
    • Вы также можете использовать инструмент «Free Transform» (Свободное преобразование), чтобы менять рисунок так, как вам угодно.
  10. Проверьте созданную анимацию, нажав Ctrl + Enter. Убедитесь, что рисунок (персонаж) правильно меняется и что анимация воспроизводится с правильной скоростью. Если анимация воспроизводится слишком быстро, уменьшите значение FPS или увеличьте продолжительность твина.
    • По умолчанию FPS равен 24, поэтому попробуйте уменьшить это значение до 12. Измените значение FPS на панели свойств. Однако при FPS = 12 анимация может воспроизводиться недостаточно плавно.
    • Чтобы изменить продолжительность твина, выберите слой, содержащий твин, и при помощи ползунка измените продолжительность твина. Если вы хотите удвоить продолжительность твина, передвиньте ползунок на 48 кадров. Не забудьте вставить фон в пустые кадры, чтобы фон не исчез посередине анимации. Для этого выберите фоновый слой, щелкните по последнему кадру анимации (на временной шкале), а затем нажмите F5.
    Реклама
Часть 3
Часть 3 из 3:

Добавление звуковых эффектов и музыки

Загрузить PDF
  1. Вы можете добавить в анимацию звуковые эффекты, чтобы сделать ее более эффектной. Музыка сделает анимацию более захватывающей и может превратить хорошую анимацию в великолепную. Flash поддерживает различные форматы аудиофайлов, в том числе AAC, MP3, WAV, и AU. Выберите формат, который гарантирует высокое качество звука при минимальном размере файла.
    • Формат MP3 гарантирует высокое качество звука при минимальном размере файла. Файлы формата WAV имеют большой размер.
  2. Импортируйте аудиофайлы в библиотеку, чтобы иметь возможность быстро добавлять звуки и музыку в анимацию. Нажмите «File» (Файл) – «Import» (Импортировать) – «Import to Library» (Импортировать в библиотеку). Найдите аудиофайл на вашем компьютере. Убедитесь, что аудиофайл имеет легко запоминающееся имя, чтобы вы могли быстро найти его.
  3. Это не обязательно и вы можете добавить звук на существующие слои, но вставка аудиофайла на отдельный слой позволит вам лучше контролировать звуковую дорожку анимации.
  4. Создайте ключевой кадр, с которого будет начинаться воспроизведение звука. На слое со звуком выберите кадр анимации, с которого будет начинаться воспроизведение звука. Нажмите F7, чтобы вставить пустой ключевой кадр. Например, если вы хотите вставить аудиофайл, который будет воспроизводиться на протяжении всей анимации, выберите первый кадр на слое с аудиофайлом. Если вы добавляете голос персонажа, выберите кадр, где персонаж начинает говорить.
  5. Нажмите «Properties» (Свойства) – «Sound» (Звук) – «Name» (Имя) и выберите аудиофайл из библиотеки.
  6. Вы можете добавить эффекты, изменить параметры синхронизации и настроить повторное воспроизведение аудиофайла (в меню «Name» (Имя)).
    • Эффекты (например, затухание или эхо). Вы можете выбрать один из предустановленных параметров в выпадающем меню, или вы можете нажать на значок в виде карандаша (рядом с меню), чтобы создать собственные пользовательские настройки.
    • Синхронизация. Определяет порядок воспроизведения звука в анимации. Параметр «Event» (Событие) воспроизведет аудиофайл до конца. Если тот же аудиофайл воспроизводится еще раз (пока первое воспроизведение не закончилось), первое воспроизведение будет продолжать играть (до конца). Параметр «Start» работает как параметр «Event» (Событие) с той лишь разницей, что первое воспроизведение останавливается при повторном воспроизведении звука. Параметр «Stop» (Стоп) останавливает воспроизведение звука в определенном кадре. Если вы хотите использовать этот параметр в сочетании с другими параметрами аудиофайла, создайте новый ключевой кадр, где воспроизведение звука будет останавливаться. Параметр «Stream» (Поток) будет синхронизировать определенный звук с кадрами на других слоях. Этот параметр лучше использовать при вставке голосов персонажей.
    • Повторное воспроизведение. Задает число повторных воспроизведений определенного аудиофайла (один или множество раз). Если ваша анимация является цикличной, установите этот параметр на бесконечное воспроизведение аудиофайла.
  7. Этот формат воспроизводится практически любым веб-браузером. Также файл этого формата можно загрузить на определенные сайты (Newgrounds, Albino Blacksheep, Kongregate), чтобы его просмотрели другие пользователи.
  8. Эта статья рассказывает об основах создания флеш-анимации, но вы можете делать гораздо больше, например, создавать флеш-кнопки. Также вы можете пройти ускоренный курс ActionScript, чтобы изучить все тонкости создания и управления анимацией. Экспериментируйте, и вы научитесь всем хитростям создания анимации.
    Реклама

Советы

  • Если вы планируете редактировать анимацию, то сохраните ее в формате .fla.
Реклама

Об этой статье

Эту страницу просматривали 63 339 раз.

Была ли эта статья полезной?

Реклама