Рисуем мультики во флэше!

Буквально в канун Нового года читатель Алексей написал достаточно длинное письмо, в котором рассказал, что купил своему восьмилетнему ребенку в подарок компьютер, они всей семьей посмотрели Масяню (любимый мультик), и его сын захотел рисовать мультфильмы самостоятельно. Соответственно, прозвучала просьба дать несколько небольших уроков во "флэше", так чтобы ребенку и ему (самому Алексею:)) было все понятно. Ну что же, желание похвально, особенно учитывая тот факт, что начало работы в данной программе - очень хороший задел на будущее, поскольку она уже сейчас является мощной объектно-ориентированной средой разработки с очень большими возможностями, не ограничивающимися только анимацией. Сейчас мы остановимся на самом простейшем варианте. Данный пример показан на базе Flash MX.

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

Действие №1 - раскадровка

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

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

• машина движется - улица стационарна,
• машина стоит на месте - улица движется ей навстречу,
• машина движется - улица движется ей навстречу.

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

Таким образом, у нас будет три слоя (layer'а):

Layer 1. Стационарный фон (небо).

Layer 2. Движущаяся улица.

Layer 3. Движущаяся машина.

Для пущей сложности добавим еще одну машину (Layer 4), которая проезжает навстречу мимо. То есть, в итоге четыре слоя.

Выбор панелей и инструментов. Начинаем рисовать

Я не думаю, что ребенку понадобятся какие-нибудь сложные инструменты в этом деле, и все, что вам нужно, это использовать обычную кисточку (Brush Tool) из меню Tools. С ее помощью он сможет все нарисовать и раскрасить с помощью указателя мыши. То есть, с этим разобрались. Чтобы ребенку не мешали остальные панели:

• нажмите F4, они исчезнут,
• а после откройте панель Tools (Ctrl+F2).

Далее мы разделим все на определенные этапы:

1. Нужно открыть четыре новых файла Flash Document (Ctrl+N) (вы помните, что у нас четыре слоя). В результате у вас появится четыре различных закладки, в которых будут находиться пустые "столы" (белые прямоугольники в рабочих областях серого цвета, соответствующие размеру основного экрана просмотра будущего swf-файла - для простоты скажем так).
2. На первом экране мы учимся работать с "кисточкой" и рисуем фон - небо, облака, солнце. Тут понадобится знать, что при выборе инструмента Brush Tools внизу на панельке опций (Options) появится небольшое меню, в котором можно выбрать форму следа кисточки при прикосновении, а также его величину. Над этой небольшой панелью опций находится выбор цвета, по нажатии на который перед вами открывается палитра. Все, можно рисовать и закрашивать в рамках стола.
3. После произведенных действий в панели Tools выбираем черную стрелку Selection Tool, обводим ею квадрат вокруг рисунка, все объекты выделятся, и группируем все эти элементы с помощью команды Group (Ctrl+G).

Далее все происходит по схожему сценарию. То есть, открываем вторую закладку с пустым документом и рисуем/закрашиваем там дома. Причем в данном случае вы можете не ограничиваться размером стола, а использовать всю рабочую область - это не принципиально. Ведь наша улица должна быть длинной. Единственное, что вам может еще понадобиться, так это текст, например, сделать надпись "магазин". Это делается быстро с помощью инструмента Text Tool (обозначен буквой "А"). После того, как улица создана, группируем все ее элементы.

В третьей закладке рисуем машину №1, в четвертой - машину №2. Группируем все элементы в каждом из случаев. Не забывайте, что ехать автомобили должны в разные стороны. Если ребенок ошибся, то не беда, поскольку все исправимо, если вы вызовете выпадающее каскадное меню Transform из пункта основного Modify и выберете Flip Horizontal (то есть, зеркально отразить по горизонтали).

Итак, все действующие персонажи готовы, приступим к анимации.

Анимация

Нужно отметить, что во "флэше" используется два основных вида анимации, а именно: покадровая (как в старые добрые времена) и автоматическая. В данном случае мы используем два варианта.

1-й слой, статический

Итак, возвращаемся к первому документу, где нарисован фон, и теперь нашими основными рабочими инструментами станут окно Timeline, рабочая область и пункт главного меню Insert.

В Timeline вы должны заметить, что там уже автоматически "прописан" Layer 1, то есть наш слой с фоном, и во временной (покадровой) области в самом начале стоит прямоугольник с черной точкой, это значит, что первый кадр у нас заполнен. Но кадров у нас будет намного больше (давайте возьмем, к примеру, 40), и нужно, чтобы фон был на них всех. Что для этого нужно сделать... Устанавливаем указатель мыши напротив 40-го кадра, делаем клик правой кнопкой мыши, соответствующий прямоугольник выделяется голубым цветом, а перед нами появится выпадающее меню, выбираем - Keyframe. После этого все прямоугольники между 1-м и 40-м кадром закрасятся в серый цвет и будут похожи на длинную полосу.

Все, на данном этапе можно в первый раз прокрутить наш анимационный ролик, установив курсор на первый кадр и нажав клавишу Enter (на клавиатуре). Но пока нет движения, есть только стационарный фон на всех 40 кадрах. Идем дальше.

2-й слой, движущийся

В закладке с проектом, где мы рисовали улицу, нажимаем на сгруппированный объект, копируем его (Ctrl+C), после чего переходим в закладку к первому проекту с фоном, добавляем туда еще один слой (это можно сделать как из главного меню: Insert -> Timeline ->Layer, так и из выпадающего меню в Timeline, названия слоев -> правая кнопка мыши -> Insert Layer). В результате появится новая строчка с названием Layer 2. Обратите внимание, что она стоит выше Layer 1, и чтобы не объяснять много, скажу, что таким образом может указываться положение слоев относительно друг друга.

После того, как второй слой создан, делаем Ctrl+V, то есть добавляем к фону нашу улицу. В первом фрейме (кадре) помещаем ее в крайнее правое положение относительно стола.

В окне для этого слоя Timeline будет располагаться полоска вплоть до 40 кадра, который будет отмечен пустым квадратом. Именно на нем, точно также, как и в предыдущем случае, вставляем Keyframe, переносим рисунок улицы в левую часть стола, после чего устанавливаем курсор на первый кадр, а в меню Insert -> Timeline выбираем опцию Create Motion Tween. В результате на временной полоске Timeline отобразится длинная стрелка. Это и есть отображение автоматической анимации.

Что произойдет в данном случае, вы сможете увидеть и сами, запустив проект на воспроизведение. За 40 кадров улица проедет справа налево. Это называется автоматической (tweened) анимацией, в рамках которой вы указываете только точки отправления и прибытия объекта, а дальше программа все высчитывает сама.

3-й слой, движущийся

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

Копируем ее из третьего проекта, переносим в новый слой (формируем Layer 3 в первом проекте) нашей анимации, ставим в левый угол, при этом 1 кадр у нас уже активен, добавляем Keyframe, в результате анимация сместится на второй кадр, там мы слегка сдвигаем автомобиль, и, кстати, тут не обязательно соблюдать ровность движения по горизонтали, поскольку мы показываем тряску, и так кадр за кадром вплоть до 40-го.

При запуске проекта на воспроизведение у вас действительно появится ощущение, что машина едет по городу.

4-й слой, движущийся

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

Все, анимация готова.

В завершение

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

Чтобы экспортировать мультфильм в swf или любой другой файл, поддерживаемый программой, нужно в панели свойств (Properties) выбрать пункт Publish. Потом, в процессе совершенствования, вы узнаете, что можно добавлять звуки, интерактивные отклики на различные события и так далее. Да и книг по "флэшу" достаточно много.

Кристофер,
christopher@tut.by