Уроки WEB дизайна




 Создание покадровой анимации в Macromedia Flash


А теперь в целях закрепления пройденного материала, создадим простую покадровую анимацию, которая иллюстрирует растущую Луну. Удерживая клавишу Shift, выделим все кадры со второго по 10 и удалим их комбинацией Shift+F5.
Перейдем в первый кадр.
И удалим из него всю графику.
На панели Properties установим синий цвет фона.
Выделим вторую позицию шкалы и клавишей F7 вставим туда пустой ключевой кадр.
Выберем инструмент Овал. Определим светло-желтый цвет заливки. И нарисуем круг, котрый будет являться заготовкой нашей Луны.
Нажмаем клавишу V, для быстрого выбора инструмента Стрелка.
И выделим объект двойным щелчком.
На панели Properties или с помощью панели Info установим диаметр фигуры, равный 100 пикселам.
Создадим еще 5 копий второго ключевого кадра. Выделим третью позицию на шкале
и нажмем клавишу F6 - эта операция скопирует предыдущий ключевой кадр в выделенную позицию. Аналогичным образом вставим ключевые кадры в позиции, начиная с 4-ой по 6-ую. Таким образом, мы получили один пустой и пять ключевых кадров с одинаковым изображением. Передвинем маркер во второй кадр и выделим только контур фигуры. Затем переместим контур на 20 пикселов вправо. Это удобно делать с помощью клавиатуры. Удерживая клавишу Shift, дважды нажмем на клавишу со стрелкой вправо.
Каждое нажатие переместит выделенный объект на 10 пикселов в соответствующем направлении. Без клавиши Shift контур перемещался бы на один пиксел. Теперь снимем выделение. Вы уже знаете, что при этом контур разрежет нашу заливку на две части. Выделим весь контур
и правую часть заливки, и удалим их.
В результате, мы получили заливку в виде узкого желтого полумесяца. Проделаем похожие операции в других ключевых кадрах. В третьем кадре выделим и переместим контур на 40 пикселов.
После снятия выделения также удалим лишнюю часть графики. В четвертом кадре переместим контур на 60 пикселов. И затем проделаем те же операции. В 5 кадре сместим контур на 80 пикселов и повторим процедуру. Шестой кадр оставим практически без изменения. Удалим лишь контур фигуры. Теперь протестируем ролик, нажав CTRL+Enter. Как видите, мы получили покадровую анимацию лунных фаз. Конечно, полученный ролик можно до бесконечности совершенствовать. Так для получения более плавной анимации можно было бы смещать режущий контур не на 20 пикселов, а скажем на 10 или еще меньше. Но для этого нужно было бы добавлять еще ключевые кадры, что отняло бы слишком много времени. Для нас сейчас самое главное понять принцип покадровой анимации. Давайте сначала научимся пользоваться удочкой, а крупную рыбу попытайтесь ловить самостоятельно. А теперь приведем характерный пример, когда целесообразно использовать обычные, а не ключевые кадры. Напр. вы захотели, чтобы анимация происходила на фоне какого-либо статического пейзажа
Вставлять этот пейзаж в каждый ключевой кадр, абсолютно неразумно. Это и трудоемко и заметно увеличит размер файла. Гораздо лучше воспользоваться другим слоем с обычными кадрами. Создадим новый слой, щелкнув по кнопке со знаком +. Программа автоматически создаст в нем 6 кадров для выравнивания слоев по длительности. Первый кадр нового слоя - ключевой, а остальные простые, которые повторяют содержимое ключевого кадра.
Перетащим новый слой мышью в нижнюю часть списка. Теперь здесь можно создавать любой фон, который будет отображаться во всех кадрах анимации. Не мудрствую лукаво, изобразим закатное небо. Выберем инструмент прямоугольник
и нарисуем соответствующую фигуру. Выделим
и удалим его контур. Затем выберем инструмент Заливка и откроем панель Mixer.
Установим линейный градиент
и настроим переход цвета от светло-розового до темно-синего. Заполнм фигуру полученной заливкой.
И повернем градиент таким образом,
чтобы розовый цвет находился внизу. Эту операцию можно сделать и с помощью инструмента Fill Transform.
Затем выделим и с помощью модификатора Scale, отмасштабируем полученный прямоугольник таким образом, чтобы он занимал всю рабочую область. При желании здесь же можно нарисовать любую фигуру, здания, деревья, короче все, что душе угодно.
Протестируем полученный фильм. Заканчивая разговор о покадровой анимации, следует отметить, что этот вид анимации - процесс весьма трудоемкий, поэтому применяется обычно в тех случаях, когда он действительно необходим. Наприме, если нужно отобразить много быстрых мелких движений, в частности, анимацию мимики лица, игру на пианино или томку подобное. В большинстве случаев в программе Flash используются другие методы анимации: анимация формы или морфинг и анимация движения, о которых речь пойдет на следующих уроках. В заключении урока познакомимся с кнопками, расположенными под шкалой кадров, которые могут помочь нам при создании анимации. До сих пор мы предполагали, что в рабочей области отображается только текущий кадр. В большинстве случаев это действительно так, но иногда необходимо посмотреть сразу несколько кадров анимации.
Вы можете сделать это щелкнув по кнопке Onion Skin.
Дословно луковая кожура, но мы лучше назовем эту кнопку шлейфом. При этом вокруг маркера появятся границы шлейфа, имеющие вид квадратных скобок. Все кадры внутри скобок отобразятся в области рисования.
Текущий кадр будет показан четко, а остальные выглядят полупрозрачными. Для наглядности выберем инструмент Zoom
и увеличим масштаб. Теперь эффект хорошо заметен. Скобки, ограничивающие шлейф, можно перемещать мышью. И таким образом настраивать область отображения.
При перемещении маркера, перемещаются и границы шлейфа, оставаясь на том же расстоянии от маркера. Щелчок по кнопке Onion Skin Outlines - контурный шлейф,
дает похожий эффект, только все кадры кроме текущего будут отображаться в контурном виде. Это уменьшает нагрузку на компьютер и увеличивает скорость работы редактора на слабых машинах. Кнопка Edit Multiple Frames, включает режим одновременного редактирования нескольких кадров.
Такой режим удобен при работе с покадровой анимацией, когда необходимо модифицировать изображение сразу в нескольких соседних кадрах. Например, после создания ролика вы вдруг захотели изменить размер анимированной фигуры, в данном случае Луны. В обычном случае пришлось бы в каждом ключевом кадре производить масштабирование фигуры и при этом следить, чтобы коэффициент изменения масштаба был одинаков. Упомянутая кнопка поможет избавиться от этой рутинной работы. Включим режим Edit Multiple Frames
и настроим границы шлейфа так, чтобы они охватывали все кадры анимации. Перетаскиванием инструмента Arrow, произведем выделение объекта. При этом проследим, чтобы черным цветом были отмечены все кадры, которые мы хотим одновременно редактировать. Затем выберем модификатор Scale.
И самым обычным способом отмасштабируем фигуру. Аналогичным образом можно одновременно изменить координаты объекта во всех кадрах. Цвет и т.д. Протестируем ролик. Как видите, никаких недоразумений не произошло и синхронность анимации не нарушена. Закроем тестовое окно и выключим режим Edit Multiple Frames. Щелчок по самой правой кнопке данного ряда вызывает меню настроек шлейфа. Его нижняя секция позволяет устанавливать определенное расстояние от маркера до границы шлейфа.
Так выбор пункта Onion 2. Определит расстояние в 2 кадра от маркера до границы шлейфа.
А Onion All распространит шлейф на все созданные кадры. В этом меню имеется также установка, позволяющая показывать маркеры шлейфа всегда, даже когда режим отображения шлейфа отключен.
И установка закрепляющая границы шлейфа. И, наконец, самая левая кнопка этого ряда Center Frame - центрировать кадр, будет полезна только в том случае, если вы работает с анимацией содержащей большое количество кадров, которые не помещаются в окно шкалы времени. Ну, например, переместим слайдер шкалы и отметим 120 позицию.
Клавишей F5 вставим туда обычный кадр.
Снова переместим слайдер в исходное положение. Теперь для того, чтобы увидеть текущий кадр с маркером достаточно щелкнуть по вышеупомянутой кнопке.
Тем самым вы даете команду редактору передвинуть слайдер так, чтобы текущий кадр находился в середине шкалы.
На этом закончим урок и сделаем перерыв.

Карта сайта Реклама
На нашем сайте Вы сможете найти любую информацию о программах 3D Max, Macromedia Flash MX, Corel Draw 12, Adobe Illustrator и многих других. Вы не найдете на данном сайте различные серийники, ключи, активацию, русификаторы, кряк, crack, keygen, серийные ключи и кейгены для этих программ. Для приобретения или скачивания программ воспользуйтесь ссылками на официальных сайтах производителей.
Кнопка редактора Подробнее