Хлуднева Анна Владимировна
Факультет: Компьютерные информационные технологии и автоматика
Кафедра: Автоматики и телекоммуникаций
Специальность: Телекоммуникационные системы и сети
Анимация во Flash 8
Моим увлечением является разработка визуализированных объектов и их дальнейшая анимация в пакете Flash. В качестве индивидуального задания мною была нарисован и анимирован спортивный автомобиль. Полученный результат изображен на рисунке 1.
Рисунок 1 – Машина
Рассмотрим этапы рисования и анимации автомобиля. На начальном этапе представляем будущий объект и находим похожее на него изображение в формате JPEG. Выделяем на рисунке основные части автомобиля: корпус, кузов, крылья. Обводим эти части карандашом на кальке, приложив ее к изображению. Полученные трафареты вырезаем и собираем из них стилизованный силуэт машины. Переносим полученные трафареты во Flash, используя стандартные инструменты. Каждый трафарет заливаем одноцветной заливкой (solid) и конвертируем их в символы (нажимаем правой кнопкой мыши на трафарете и из выпадающего меню выбираем пункт “convert to symbol”). Накладываем полученные символы друг на друга, чтобы визуально получить цельный силуэт машины.
Визуализация автомобиля
Приступаем к визуализации. Процесс визуализации начинается с придания объема, т. е. наложения тени. Для правильного наложения тени мысленно определяем источник освещения. Выбираем черно-белый радиальный градиент на панели color mixer и заливаем каждую из составляющих в отдельности исходя из предположительного расположения источника освещения. В результате выполненных действий мы получили объемную базу для автомобиля.
На данном этапе добавляем к полученной базе главные детали: окна, радиатор, фары. Рисуем силуэты окон, фар и радиатора, следуя методике аналогичной рисованию базовых элементов корпуса автомобиля. Заливаем полученные детали черным цветом и располагаем их на корпусе машины.
Приступаем к визуализации стекол. Конвертируем их в символы и применяем к ним ряд фильтров. Визуализация радиатора начинается с применения радиального черно-белого градиента к контуру радиатора. После этого создаем уровень-маску, в котором воспроизводим маскирующую поверхность идентичную контурам базового изображения радиатора, исключая его контур. На уровне под маской рисуем группу из горизонтальных полосок и располагаем их на поверхности радиатора. Выйдя из режима редактирования радиатора, можем наблюдать, что полоски расположились в соответствии с маской и теперь образуют решетку радиатора. Применяем к ним радиальный градиент с растяжкой от черного до темно-серого (в центре). Радиатор готов.
Приступим к визуализации корпуса. Для этого введем детализирующие линии, очерчивающие контуры дверей и капота. Для эффекта объема конвертируем линии в символы и применяем к ним ряд фильтров.
Визуализацию фар начинаем с габаритных огней. Заливаем их светло-желтым цветом и применяем к ним фильтр “glow” (свечение). Далее рисуем корпус фары и заливаем его черно-белым радиальным градиентом. Для создания эффекта наличия стекла в фаре создаем блик. Рисуем небольшой прямоугольник и изгибаем его по воображаемой линии изгиба стекла в фаре с помощью инструмента “transform”. Заливаем прямоугольник белым цветом с параметром ?=30% и удаляем границу.
Автомобиль практически готов, но в нем не хватает колес. Создаем базу для колес в виде цилиндров черного цвета, ставим их на место и приступаем к визуализации. Рисуем линию, повторяющую огибающую колеса. На линии располагаем маленькие квадратики. Копируем несколько раз и вставляем, накладывая на поверхность колеса, смещая копии друг относительно друга вверх и вниз. Таким образом мы получили рисунок протекторов шин. Применяем к линиям тот же градиент, что и к решетке радиатора. Рисуем диски автомобиля. Для этого изображаем три эллипса, расположенные один внутри другого. И заливаем их черно-белым радиальным градиентом так, чтобы у первого и третьего эллипсов получилась выпуклая поверхность, а у второго вогнутая. На поверхности третьего эллипса располагаем маленькие кружочки с градиентной радиальной черно-белой заливкой.
Добавляем некоторые детали. Соединив два эллипса, поучаем зеркало бокового обзора. Конвертируем его в символ и добавляем к нему фильтр “drop shadow”. C помощью прямоугольника создаем ручку двери и применяем к ней тот же фильтр.
Визуализация окружающего пространства
Автомобиль готов. Приступаем к визуализации окружающего пространства. Рисуем два одинаковых по размеру небольших квадрата черного и белого цветов. Соединяем их вместе по боковой грани. Копируем и вставляем до тех пор, пока не получим структуру клетчатого пола. Размещаем пол под машиной и делаем фон документа темно-серым. Создаем зеркальное отражение пола на крыле машины. Ту же структуру из черных и белых квадратов искривляем с помощью инструмента “free transform” и накладываем на крылья машины, уменьшая при этом параметр прозрачности до 50% и применяя фильтр “blur” (размытие). Создаем тень под автомобилем. Рисуем черный эллипс, соизмеримый с размерами автомобиля, и уменьшаем у него параметр прозрачности до 70%, а также применяем к нему фильтр размытия.
Добавление цвета
Придаем автомобилю цветность. Выделяем все части автомобиля и конвертируем их в один макросимвол. Заходим в режим редактирования полученного символа и создаем уровень, находящийся выше уровня, на котором расположены элементы машины. Копируем их на верхний уровень и совмещаем с машиной на нижнем уровне. После этого используем команду “break apart”, удаляем ненужные элементы и получаем базу, покрывающую корпус автомобиля. Заливаем ее определенным цветом, конвертируем в символ и изменяем параметр “blend”. Теперь мы видим, что база стала прозрачной, и ее цвет предал оттенок автомобилю, но при этом сохранились все ранее наложенные тени и эффекты.
Анимация
Приступим к анимации. Любому дорогому автомобилю, находящемуся на выставке новых моделей присущ блеск, а лучи мерцающих прожекторов делают из него настоящую звезду. Сделаем разработанный автомобиль «гвоздем» программы. Создадим сверху машины два уровня. Верхний уровень пометим как “mask” и копируем на него базу для автомобиля, полученную при его окрашивании. На нижнем уровне нарисуем круг светло-желтого цвета и конвертируем его в символ с названием “circle” и применяем фильтр свечения “glow”. Далее заходим в режим редактирования символа и конвертируем его в символ еще раз с названием “circle_animated”. Заходим в режим редактирования полученного символа и создаем два слоя, верхний из которых помечаем как “motion guide”. На этом слое создаем направление движения: рисуем эллипс, охватывающий всю поверхность машины по ширине. На нижнем уровне расположен наш круг. Создаем на временной линии несколько ключевых кадров и включаем опцию “motion tweening” и привязку к направлению движения. Создаем еще один уровень поверх существующих и на нем размещаем код action script в первом и последнем ключевом кадре.
Код в первом кадре:
gotoAndPlay(random(170));
Код в последнем кадре:
gotoAndPlay(2);
Таким образом, мы получаем движущийся прожектор. Копируем и вставляем символ круга несколько раз в разных местах и, тестируя фильм, видим несколько движущихся по своей орбите прожекторов.
Добавим светящиеся искорки на корпус автомобиля. Рисуем четырехугольную звезду с помощью инструмента “polystar” и производим с ней аналогичные действия. За исключением того, что траектория движения нам не нужна, а вместо этого мы добавляем опцию поворота по часовой стрелке и уменьшаем размер звезды в последнем ключевом кадре по сравнению с первым. Код AS2 остается такой же.
Итак, наш анимированный автомобиль готов.
Ссылки
1. Официальный сайт разработчиков Flash