Простейшая анимация

Автор: Tarus Среда, Апрель 4th, 2012 Нет комментариев

Рубрика: Флеш-технологии

Всех приветствую!
Итак, по просьбе пишу урок о простейшей анимации во флеше. Начинаем, как говорится, с малого. Потом обещаю добавить еще (по pop-up, если так и не напишут).

Открываем Flash MX.
Перед нами — наша рабочая сцена, меню, панель инструментов итд. Внизу есть такое вот окошко: Properties (Свойства). Там основные настройки вашего мульта.
Нас там интересует FRAME RATE — скорость прокрутки вашего мульта. Иначе 12 fps означает, что за одну секунду будет проигрываться 12 кадров (frame) вашего мульта. Эта скорость стандартная и, в принципе, то, что надо. Если вам надо замедлить ваш мульт — уменьшаете, надо сделать быстрее — увеличиваете эту цифру.

Теперь перейдем к самой анимации.
Во флеше есть два основных способа: shape tweening и motion tweening.
Рассмотрим первый. Shape — (англ.) форма. Вы уже понимаете, что тут речь пойдет именно об изменении формы. Создаем некую форму, например синий квадрат. Вверху, в строке времени (timeline) у нас на первом кадре появится кружочек на сером фоне — мы создали ключевой кадр (keyframe). Теперь создадим такой же кадр в 10-м кадре. Это можно сделать двумя способами: наводим мышку на 10 кадр, делаем клик (кадр стает синим) и в меню последовательно выбираем: Insert->keyframe; иначе можно: наводим на 10 кадр, кликаем, нажимаем F6. В строке времени все 10 кадров серые. Красная линия показывает на каком именно кадре мы находимся.

Переходим в 10 кадр. Выделяем наш квадратик (мышкой или нажатием ctrl+A,- данное сочетание клавиш выделяет все, что у нас находится в рабочей области). Перемещаем наш квадрат куда-нибудь в сторону (проследите, что вы в 10-м кадре!) и меняем цвет на, например желтый. Теперь переходим обратно в первый кадр. В строке Properties имеется выбор Tween, где по умолчанию стоит атрибут «none». То есть никакой анимации. Изменяем его на «shape». В строке времени наши кадры приобретают салатовый цвет со стрелочкой. Когда все сделано нажимаем «enter». КРАСОТА! Квадратик двигается, да еще и цвет меняет! Снова переходим в 10 кадр. Выделяем все (ctrl+A). И нажимаем клавишу delete (то есть удаляем). На месте квадратика рисуем какой-нить красненький кружочек. Снова переходим в первый кадр и нажимаем enter. Квадрат теперь стает кружком и красным. Вы уже поняли, что вам не надо прорисовывать каждый кадр — это за вас сделает flash! Хотя если вам нужна особая точность, или что-то — можете прорисовывать. тогда файл вырастет в размерах. Если вам нужен более плавный переход от квадратика к тому же, например, кружку — сделайте этот процесс не на 10, а, скажем, на 25 кадров. Если вам нужно более замысловатые движения и перемещения — для этого существуют слои-маски, но о них как-нибудь в следующий раз. Теперь вы умеете рисовать простейший мувик с изменением формы!

Теперь рассмотрим второй способ задания анимация: motion tweening (перевод что-то типа: построения промежуточной анимации движения). Здесь будет чуточку посложнее. Снова открываем новый файл флеша.
Чем отличаются shape и motion? Тем, что во втором случае мы будем работать не над формами, а над готовыми объектами, т.е. символами. Символ — это так сказать, простейшая единица анимации во флеше. Это более распространенный способ рисования. Повторяем все снова — в первом кадре рисуем синенький квадратик. выделяем его и нажимаем F8 (или выполняем последовательно: Insert->convert to symbol). Перед нами появляется диалоговое окно.

Что же это такое? Во флеше есть три типа символов: мувик (moovie clip) — это некая дополнительная анимация внутри символа. то есть, этот символ содержит в себе какую-нибудь анимацию и т.д. имеет точно такую строку времени, как и основная сцена; кнопка (button) — элемент, который реагирует на нажатие, присутствие мышки над ним итд. Короче, кнопка и есть; и третий элемент, самый статичный — graphic. То есть просто графика, некое изображение. Мы будем работать с последним. Как-то его называем, нажимаем «ОК». На квадратике появляется кружочек — иначе, центр нашего символа (центр тоже можно задать в том диалоговом окне). Все наши символы заносятся в библиотеку. Оттуда мы их можем редактировать, вставлять куда надо и куда не надо, удалять, добавлять. Чтобы посмотреть на свою библиотеку нажмите F11 или выполните действия: Window -> Library. В 10-м кадре создадим ключевой кадр (F6). Теперь можем переместить куда-то наш квадрат. Затем сделаем его невидимым: для этого выделим его в 10-м кадре. На панели propperties в разделе color зададим alpha (прозрачность). Поставим ему атрибут в процентах: 0. Вернемся на 1-й кадр. Выполним все те же действия, что и для shape tweening, только вместо shape отметим motion. Кадры во временной строке станут фиолетовыми и через них протянется стрелочка. Нажмем enter.

У нас получится эффект «квадрат летит в пустоту». Поздравляю! Вы знаете, как делать примитивную графику во флеше!

Еще одна важная особенность — на каждую анимацию у нас должен быть выделен отдельный слой (Layer). Если вам надо добавить еще один слой воспользуйтесь командой: Insert->Layer.
И совсем чуть-чуть о строке времени.

Как вы уже поняли — салатовое со стрелочкой — shape tweening, фиолетовое со стрелочкой — motion tweening. Салатовое или фиолетовое с линиями — вы задали анимацию, но эту анимацию создать невозможно, — вы сделали что-то не правильно. Серый цвет — все кадры с такой закраской являются точной копией предыдущего ключевого кадра (keyframe). Белая окраска линии означает, что в этих кадрах ничего нет. Черный кружочек — ключевой кадр. Белый кружочек — пустой ключевой кадр (blank keyframe). Ну, вроде все.

На этом пока что все. Этот тот минимум, с которым можно работать. Далее изучите добавление звука, контроль над звуком, и вперед — писать Масяню. :) Обещаю, что обязательно вскоре напишу еще один урок — по продвинутой анимации во флеше. Про то, как сделать «падение пера», про маски, про контроль над изменением формы в shape tweening’е.

Автор: Nirva
E-mail: nirva@ua.fm

Оставить комментарий

Чтобы оставлять комментарии Вы должны быть авторизованы.

Похожие посты