Фрай, Андерсон (Adobe Academy) / Классные проекты по флеш-анимации
В начале этого раздела мы будем изучать основные приемы анимации с помощью нескольких очень быстрых и простых проектов. Изучив основы Adobe Flash, вы примените свои навыки для создания описательных анимаций, которые точно отображают сложный процесс для вашей аудитории. Наконец, мы закончим изучением основанных на кадрах методов, чтобы создать проект, напоминающий анимированную игру. Возможность использовать мощное программное обеспечение для анимации, такое как Adobe Flash, - это навык, который можно применять в самых разных условиях на рабочем месте. Мы начнем с того, что пройдем несколько базовых уроков по мере изучения основ программного обеспечения. Затем мы создадим описательную анимацию, демонстрирующую сложный процесс. Наконец, мы будем использовать основанные на кадрах методы для создания анимации, которая будет очень похожа на 2-D видеоигру.
Анимации могут принимать разные формы. В этом разделе мы изучим характеристики нескольких типов анимации и то, для чего каждая из них обычно используется. Мы также изучим правильный процесс создания профессиональных анимаций и информацию о типах файлов. Вся эта информация поможет вам создавать стандартные анимации.
Методы и знания для создания интересных и эффективных анимаций можно использовать в самых разных условиях рабочего места. Вы можете делать привлекающую внимание рекламу, интерактивные игры или впечатляющие флеш-сайты. Мы будем изучать базовые методы 2-D анимации, что приведет к возможности изучения 3-D анимации на более продвинутых уровнях цифровых медиа. Делать объекты и текст движущимися, чтобы броситься в глаза, - это навык, которым обладают не все, поэтому он может быть весьма востребованным и выгодным при правильном применении в реальном мире.
Программное обеспечение, которое мы будем использовать в Digital Media для создания анимации, - Adobe Flash. Это стандартная программа, обладающая широкими возможностями и универсальностью. Flash использует интерфейс на основе временной шкалы, который может включать в себя как кадровую, так и векторную анимацию. Он также может использовать кодирование ActionScript для создания интерактивных функций, таких как кнопки и элементы управления. Это довольно дорого, особенно для аниматоров-любителей, но считается лучшим в отрасли.
Первый проект, который мы завершим с помощью Adobe Flash, поможет вам освоить основы создания объектов на сцене и перемещения их с места на место. Он использует сгенерированные компьютером формулы между ключевыми кадрами для определения траектории и скорости движения. Это известно как векторная анимация.
Анимация текста - отличный способ привлечь внимание и направить взгляд на рекламу. К счастью, есть несколько инструментов и функций Adobe Flash, которые делают этот процесс довольно простым и быстрым. В этом проекте вы будете анимировать свое имя, чтобы оно летало по сцене и собиралось в порядок.
Вам был предоставлен учебник в формате PDF со скриншотами и описаниями, которые помогут вам в создании этого проекта. Обучение себе - это важный навык, так как у вас не всегда будет учитель, который поможет вам в создании ваших цифровых медиапроектов.
В предыдущих проектах мы использовали компьютерные формулы для определения движения (так называемые анимации). В этом проекте мы изучим приемы анимации на основе кадров. Это может занять немного больше времени, но легче создать именно тот тип движения, который вы предполагали.
Этот проект научит вас, как использовать функцию оболочки из лука Adobe Flash. Полезно создавать плавные, последовательные движения с помощью техники на основе кадров. Вы также узнаете, как создавать отдельные сцены в одном анимационном проекте. Используйте предоставленные файлы и видеоуроки, чтобы узнать, как создать этот проект.
Добавление звука к анимации - это отличный способ поднять его на новый уровень и привлечь внимание аудитории. Это может помочь описать происходящее действие и сделать его более реалистичным. Adobe Flash имеет обширную звуковую библиотеку с бесплатными аудиоклипами, которые легко интегрируются в ваши анимации.
В этом проекте вы узнаете, как эффективно добавлять аудио в проект. Вы также узнаете, как облегчить анимацию в анимации в соответствии с типом изображаемого движения. Используйте данный учебник PDF для проекта, чтобы помочь вам завершить эту анимацию. Вы можете использовать любое изображение автомобиля, которое вам понравится, при условии, что ориентация соответствует вашей сцене.
В этом уроке вы узнаете, как создать анимированный баннер с помощью Flash. Вы узнаете, как создать автомобиль, движущийся по дороге с вращающимися шинами.
Здесь мы создадим баннер размером 728х300.
1. Откройте новый флэш-файл. Выберите « Окно»> «Свойства» в главном меню и откройте панель « СВОЙСТВА» .
Выберите кнопку « Редактировать» в области « СВОЙСТВА» на панели, откроется окно « Настройки документа» . Установите размеры 728 (ШИРИНА) и 300 (ВЫСОТА) и нажмите кнопку ОК , чтобы внести изменения.
2. Переименуйте существующий слой в здания и выберите « Файл»> «Импорт»> «Импортировать в библиотеку» в главном меню и импортируйте файлы, загруженные в начале учебника.
3. Выберите Window> Library из главного меню; отображается панель БИБЛИОТЕКА . Потяните изображения здания к области сцены и выровняйте это.
4. Выберите изображение и выберите « Изменить»> «Преобразовать в символ» в главной строке меню и назовите этот мувиклип building_animation .
5. Дважды щелкните мувиклип, выберите изображение здания, снова создайте видеоролик и назовите его как здание . Переименуйте слой как anim_building .
6. Выберите кадр 460 и добавьте ключевой кадр. Выберите строительный видеоролик и откройте панель « СВОЙСТВА» и установите значение X на -1450. Опубликуйте файл, чтобы увидеть анимацию. Если в какой-то момент вы обнаружите рывок в анимации, пожалуйста, отрегулируйте положение и кадры мувиклипа здания соответствующим образом.
7. Перейдите на главную сцену и создайте новый слой с именем road . Выберите инструмент «Прямоугольник» на панели « Инструменты» и создайте поле в нижней части области здания и выровняйте его, как показано на рисунке ниже. Убедитесь, что цвет дороги установлен на # 171717.
8. Затем создайте новый слой с именем дорожная полоса и создайте серо-белый прямоугольный узор с помощью инструмента «Прямоугольник» на панели « Инструменты» , как показано на рисунке ниже. Убедитесь, что длина рисунка дорожной полосы практически равна длине зданий.
9. Выберите дорожную полосу и выберите Free Transform Tool на панели « Инструменты» и исказите дорожную полосу, как показано на рисунке ниже. Удостоверьтесь, что цвет серой части в шаблоне полосы похож на тот, который используется на дороге .
10. Выберите « Изменить»> «Преобразовать в символ» в главном меню и назовите его « дорожная полоса» . Выберите мувиклип и снова выберите « Модификация»> «Преобразовать в символ» и назовите его анимацией дорожной полосы. Поместите эту анимацию в центр дороги.
11. Анимируйте дорожную полосу, как вы делали для видеоролика здания. Но убедитесь, что скорость дорожного полотна в два раза выше скорости движения зданий. Опубликуйте флэш-файл, чтобы увидеть переход в анимации.
12. Затем вернитесь к основной области сцены, создайте новый слой и назовите его логотипом . Перетащите файл logo.jpeg с панели «БИБЛИОТЕКА» и поместите его в сцену, сначала уменьшив его.
13. Создайте новый слой в основной области сцены и переименуйте его в пешеходную дорожку . Создайте тропинку, используя инструмент Rectangle Tool, как показано на рисунке ниже. Убедитесь, что длина ряда пешеходных дорожек соответствует ширине дорожной полосы.
14. Выровняйте тропинку.
15. С такой же скоростью анимируйте пешеходную дорожку, похожую на дорожную полосу. Опубликуйте флэш-файл, чтобы увидеть эффект.
16. Далее, в основной области сцены создайте новый слой и переименуйте его в автомобиль . Выберите « Изменить»> «Преобразовать в символ» и переименуйте его в « автомобиль» . Дважды щелкните автомобильный видеоклип, создайте новый слой и переименуйте его в tyre_front . Увеличьте область передней шины на экране и создайте рисунок с помощью инструмента «Прямоугольник».
17. Сделайте этот шаблон как мувиклип и переименуйте его как tire_mask . Дважды щелкните этот мувиклип, переименуйте существующий слой в bg, снова выберите шаблон креста и выберите « Изменить»> «Преобразовать в символ» в главной строке меню и переименуйте его в виде спиц . Выберите «Окно»> «Свойства» в главном меню и добавьте к нему фильтр размытия.
18. Затем создайте новый слой поверх него и переименуйте его в маску . Создайте овальную форму точно по форме обода автомобиля.
19. Активируйте слой bg и создайте ключевые кадры в кадрах 3 и 6. Поверните видеоклип спиц в кадре 3 примерно на 180 градусов и добавьте анимацию движения между ключевыми кадрами.
20. Затем активируйте слой маски и выберите кадр 6 и нажмите F5, чтобы расширить кадры. Теперь щелкните правой кнопкой мыши на слое маски и выберите Mask из выпадающего списка, спицы будут видны только в области обода.
21. Аналогичным образом добавьте тот же эффект к заднему колесу. Вернитесь в область основной сцены и дважды щелкните мувиклип car_animation и создайте ключевой кадр в кадре № 40. Немного переместите мувиклип автомобиля в верхнее правое положение. Затем добавьте еще один ключевой кадр в кадр № 75 и поместите автомобиль в нижнее правое положение. Добавьте еще один ключевой кадр в кадре 115 и поместите мувиклип в верхнее левое положение. Добавьте последний ключевой кадр в кадр 190 и поместите подвижный элемент в то же положение, что и в кадре 1. Добавьте анимацию движения между всеми ключевыми кадрами.
22. Разместите машину на главной сцене.
23. Опубликуйте флэш-файл, чтобы увидеть анимацию баннера.
24. Вы также можете использовать эту баннерную анимацию для создания баннерной рекламы для Mercedes Benz. Для этого создайте еще один слой в области сцены, переименуйте его в текст, добавьте его в сцену, сделайте так, чтобы он летел в области сцены, а затем остановитесь.
25. Опубликуйте флэш-файл в формате .gif, чтобы получить анимацию.
Смотрите видео здесь.