Как создать Flash-анимацию (с изображениями)

Шаг 1. Изучите основы покадровой анимации

Это считается «традиционным» методом анимации, поскольку в каждом кадре есть одно и то же изображение, но с небольшими изменениями. Когда кадры воспроизводятся вместе, кажется, что изображения движутся. Это та же самая базовая техника, которую используют традиционные ручные аниматоры, и она требует больше времени, чем анимация (см. Следующий раздел).

По умолчанию Flash создает анимацию со скоростью 24 кадра в секунду (FPS). Это означает, что в одной секунде анимации будет 24 кадра, но не все кадры должны быть разными. Вы можете настроить это, если хотите, и во многих анимациях Flash используется 12 кадров в секунду, но при 24 кадрах анимация будет выглядеть более «плавно»

Шаг 2. Установите Flash Professional

Доступно множество программ для Flash-анимации, но самой мощной из них является Adobe Flash Professional CC. Вы можете установить пробную версию бесплатно или использовать другой продукт, если подписка на Adobe Creative Cloud вам не нравится. В остальной части этой статьи Flash Professional или любая другая программа редактирования будет называться «Flash».

Шаг 3. Создайте свои активы

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

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

Шаг 4. Создайте свой первый кадр

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

• Перед добавлением изображения создайте базовый фон для вашего фильма. Переименуйте слой 1 в «Фон», а затем заблокируйте слой. Создайте второй слой и назовите его как хотите. Это будет слой, на котором вы создадите свою анимацию.
• Добавьте свой рисунок на холст в первом кадре. Вы можете импортировать рисунок со своего компьютера или использовать инструменты рисования Flash, чтобы создать рисунок прямо в программе.
• Ваш первый кадр будет ключевым. Ключевые кадры - это кадры с изображением, которые составляют основу вашей анимации. Каждый раз при изменении изображения вы будете создавать новый ключевой кадр.
• Ключевые кадры обозначаются черной точкой на шкале времени.
• Вам не нужно новое изображение в каждом кадре. В целом, если ключевой кадр каждые четыре-пять кадров получается хорошей анимацией.

Шаг 5. Превратите рисунок в символ

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

• Выделите весь рисунок. Щелкните выделение правой кнопкой мыши и выберите «Преобразовать в символ». Это добавит изображение в вашу библиотеку, где вы сможете быстро получить к нему доступ в будущем.
• Удалите рисунок. Не волнуйтесь! Вы добавите его обратно в сцену, просто перетащив объект из вашей библиотеки. Вы можете легко добавить несколько экземпляров одного и того же рисунка в свою сцену!

Шаг 6. Добавьте пустые рамки

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

Шаг 7. Создайте второй ключевой кадр

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

• Чтобы создать ключевой кадр с использованием содержимого предыдущего ключевого кадра, нажмите F6. Чтобы создать пустой ключевой кадр, щелкните правой кнопкой мыши последний кадр на временной шкале и выберите «Вставить пустой ключевой кадр». Все, что есть в вашей сцене, будет удалено.
• После того, как вы создали свой второй ключевой кадр, вам нужно будет отрегулировать изображение, чтобы создать эффект движения. Если вы используете инструменты дизайна Flash, вы можете использовать инструмент «Преобразование», чтобы выбрать аспекты рисунка и немного их переместить, например, руку человека-палки.
• Если вы вставляете новую иллюстрацию для каждого ключевого кадра, вам нужно убедиться, что она размещена в том же месте или в следующем логическом месте на экране. Это гарантирует, что искусство не будет прыгать между кадрами.

Шаг 8. Повторите процесс

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

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

Часть 2 из 3: Создание двухточечной анимации (анимация)

Шаг 1. Изучите основы создания анимации

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

• Анимация особенно полезна для создания эффектов «морфинга», когда один объект становится другим в ходе анимации.
• Покадровую анимацию и анимацию движения можно использовать вместе в одном фильме.
• У вас может быть только один объект, подвергающийся анимации движения одновременно. Это означает, что если вы хотите, чтобы несколько объектов анимировались одновременно, все они должны быть на разных слоях.

Шаг 2. Создайте свой первый объект

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

• Перед добавлением изображения создайте базовый фон для вашего фильма. Переименуйте слой 1 в «Фон» и заблокируйте слой. Создайте второй слой и назовите его как хотите. Это будет слой, на котором вы создадите свою анимацию.
• Настоятельно рекомендуется использовать встроенные инструменты дизайна Flash или импортировать изображение из программы для векторного рисования. Векторы можно легко масштабировать без искажений, в то время как традиционные растровые изображения плохо масштабируются и трансформируются.

Шаг 3. Преобразуйте ваш объект в символ

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

Щелкните правой кнопкой мыши свой объект и выберите «Преобразовать в символ». Объект будет добавлен в вашу библиотеку, что упрощает клонирование объектов

Шаг 4. Создайте свою первую анимацию движения

Анимация движения перемещает объект из одного места в другое. Щелкните правой кнопкой мыши символ в сцене и выберите «Создать анимацию движения». К временной шкале будет добавлено 24 кадра, так как это длина анимации движения по умолчанию. Помните, что по умолчанию Flash будет анимировать со скоростью 24 кадра в секунду, а это означает, что анимация движения займет одну секунду.

При создании анимации движения вы автоматически переходите к последнему кадру анимации движения

Шаг 5. Создайте траекторию

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

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

Шаг 6. Расширьте фоновые рамки

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

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

Шаг 7. Добавьте ключевые кадры

Добавление ключевых кадров к вашей траектории позволит вам трансформировать ваш объект во время анимации движения. Вы можете вносить изменения в объект, только если он имеет ключевые кадры. Чтобы добавить ключевые кадры к траектории, сначала выберите кадр на временной шкале, который вы хотите превратить в ключевой кадр. Затем щелкните и перетащите объект в желаемое положение во время этого кадра. Ваша траектория изменится автоматически, и к временной шкале будет добавлен ключевой кадр. Ключевые кадры обозначены значками ромба на шкале времени.

Шаг 8. Настройте траекторию анимации движения

Чтобы изменить путь вашего объекта, вы можете щелкнуть и перетащить каждый из маркеров положения рамки на пути в новое место. Избегайте слишком большого изменения пути, иначе объект будет перемещаться беспорядочно (если это не ваша цель!).

Шаг 9. Преобразуйте свой объект

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

• Выберите кадр, в котором должно произойти преобразование.
• Откройте панель свойств объекта. Вы можете нажать Ctrl + F3, если панель в настоящее время не отображается.
• Измените любые значения в окне «Свойства», чтобы повлиять на объект. Например, вы можете изменить оттенок или цвет, добавить фильтры или изменить масштаб.
• Вы также можете использовать инструмент «Свободное преобразование», чтобы свободно изменять форму по своему усмотрению.

Шаг 10. Завершите работу над подростком

Проверьте свою анимацию движения, нажав Ctrl + ↵ Enter. Убедитесь, что преобразования выглядят хорошо и анимация движется с правильной скоростью. Если ваша анимация движется слишком быстро, вы можете либо уменьшить FPS сцены, либо увеличить диапазон анимации.

• По умолчанию FPS составляет 24, поэтому попробуйте снизить его до 12. Для этого щелкните за пределами сцены и затем измените FPS на панели «Свойства». Изменение его на 12 удвоит длину вашей анимации, но может сделать ее более «рывковой».
• Чтобы изменить диапазон анимации, выберите слой, содержащий анимацию движения, и с помощью ползунка вытяните его. Если вы хотите, чтобы анимация была вдвое длиннее, увеличьте ее до 48 кадров. Обязательно вставьте пустые кадры в фоновый слой, чтобы фон не исчез в середине анимации. Чтобы расширить фон, выберите слой, щелкните последний кадр анимации на шкале времени и нажмите F5.

Часть 3 из 3: Добавление звука и музыки

Шаг 1. Запишите или найдите свои звуковые эффекты и музыку

Вы можете добавить звуковые эффекты к действиям, которые происходят в вашей анимации, чтобы выделить ее и придать индивидуальности. Музыка делает вашу анимацию более захватывающей и может превратить хорошую анимацию в невероятную. Flash поддерживает множество форматов файлов, включая AAC, MP3, WAV и AU. Выберите тот, который обеспечивает наилучшее качество при минимальном размере файла.

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

Шаг 2. Импортируйте звуковые файлы в свою библиотеку

Прежде чем вы сможете добавлять звуки в свой проект, их необходимо добавить в библиотеку Flash. Это позволит вам позже быстро добавить их в свой проект. Щелкните Файл → Импорт → Импортировать в библиотеку. Найдите звуковой файл на вашем компьютере. Убедитесь, что звуковой файл имеет легко запоминающееся имя, чтобы его можно было быстро найти в меню позже.

Шаг 3. Создайте новый слой для каждого звукового файла

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

Шаг 4. Создайте ключевой кадр, в котором будет начинаться звук

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

Шаг 5. Добавьте звуковой или музыкальный файл

Во фрейме «Свойства» вы увидите раздел «Звук». Возможно, вам придется развернуть его, чтобы увидеть варианты. Щелкните меню «Имя» и выберите нужный файл из своей библиотеки.

Шаг 6. Настройте звуковой файл

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

• Эффект - позволяет добавлять к звуку эффекты, такие как постепенное появление и исчезновение или добавление эха. Вы можете выбрать один из предустановленных параметров в раскрывающемся меню или щелкнуть значок карандаша рядом с меню, чтобы создать свои собственные параметры.
• Синхронизация - определяет, как песня воспроизводится в анимации. Событие будет воспроизводить звук до его завершения. Если тот же звук воспроизводится снова до того, как закончится первый, исходный будет воспроизводиться до тех пор, пока не закончится. Запуск работает как событие, но останавливается, если звук воспроизводится снова. Стоп останавливает звук в этом кадре. Если вы хотите использовать это в сочетании с другими свойствами звука, создайте новый ключевой кадр, в котором вы хотите, чтобы звук останавливался, и используйте эту опцию. Stream попытается сопоставить воспроизводимый звук с количеством кадров на других слоях. Это лучше всего использовать для диалога.
• Repeat - этот параметр позволяет установить, как долго звук будет повторяться. Вы можете настроить воспроизведение только один раз или сделать так, чтобы он воспроизводился столько раз, сколько захотите. Если ваша анимация представляет собой зацикленную анимацию, вы должны установить бесконечное воспроизведение музыки.

Шаг 7. Завершите свой проект

Когда вы, наконец, закончите свой проект, сохраните его как файл SWF. Это формат, используемый для воспроизведения фильма. Вы можете воспроизвести его практически в любом веб-браузере или использовать специальный Flash-плеер для просмотра. Есть также множество сайтов, на которые вы можете загрузить его, чтобы другие могли видеть, например Newgrounds, Albino Blacksheep и Kongregate.

Шаг 8. Развивайте свои будущие проекты

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

Рекомендуемые:

Как создать служебный трейлер: 7 шагов (с изображениями)

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

Как создать учетную запись Google: 7 шагов (с изображениями)

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

Как создать ярлык на рабочем столе: 8 шагов (с изображениями)

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

Как создать очень простую программу на Python (с изображениями)

Python - простой, но мощный язык программирования для изучения. Он подходит для программистов всех уровней, от новичков до продвинутых программистов. Python гибок и может работать с доступными операционными системами, например Mac, Windows и Linux.

Как создать график в Excel: 12 шагов (с изображениями)

Из этой статьи вы узнаете, как создать график или диаграмму в Microsoft Excel. Вы можете создать график из данных в версиях Microsoft Excel как для Windows, так и для Mac. Шаги Шаг 1. Откройте Microsoft Excel Значок его приложения представляет собой зеленую рамку с белым знаком «X».