Рисуем на мониторе (Корел Дро, Фотошоп и Макромедия Флэш)

  НЕСКОЛЬКО УРОКОВ ПО ФЛЭШУ


    часть первая

УРОК ЧЕТВЕРТЫЙ
АНИМАЦИЯ

Возникает соблазн сразу же санимировать перемещение мазка кисти с одного края до другого с одновременным вращением и масштабированием (рис. 4-1). Увы, это невозможно. Программа Макромедия Флэш на самом деле представляет собой сборник ограничений.

Если вы хотите санимировать:

1. Перемещение объекта по прямой.
2. Вращение.
3. Масштабирование объекта.
по отдельности или вместе (рис. 4-1),
этот объект должен быть артистом (Graphic symbol, movie clip, button, грэфик симбл, муви клип, баттон) и должен находиться на отдельном слое.



Рис. 4-1

Понятие символа.

Весь файл Макромедии Флеш, т. е. редактируемый файл с расширением fla представляет собой иерархию символов, существующих в мультфильме параллельно или вложенных друг в друга.

Если вы желаете санимировать следующие деформации объекта :

1. Перемещение объекта по прямой.
2. Вращение.
3. Масштабирование объекта.
необходимо преобразовать этот объект в символ.

Если в мультфильме что-то будет происходить внутри объекта, например, какие-то его части будут двигаться относительно друг друга, то эти части также следует преобразовать в символы.

Предположим, что с первого по сороковой кадр меняется форма мазка кисти в составе символа. Это изменение формы есть ничто иное как перемещение управляющих точек и их ручек в местной системе координат символа (по плёнке, где нарисована фигура). А перемещение, вращение и масштабирование символа по экрану есть на самом деле ничто иное, как перемещение, вращение и масштабирование плёнки, на которой нарисован этот символ, в координатах экрана. Можно также сказать, что символ живет в своей собственной системе координат X, Y, и время. Чтобы обеспечить изменение символа во времени, у него имеются свои собственные слои и монтажная линейка. Символ может быть составным, содержащимм хотя бы в своём составе ещё одного артиста (лист плёнки).

Если мы создаем составные символы с вложением символов друг в друга, то мы помещаем одну систему координат в другую. Для иллюстрации мы несколько позже попробуем соорудить вот такой приборчик, прыгающий по экрану (рис. 4-2):



Рис. 4-2

1. Этот приборчик будет прыгать по сцене т. е. в системе координат сцены.
2. В координатах прыгающего приборчика, другими словами в координатах символа, будут происходить такие изменения:
Будет сжиматься пружина.
Голова с ушами будет перемещаться вниз.
3. В координатах головы будут происходить такие изменения:
Уши будут опускаться вниз.
Т. е. нам понадобится символ «Голова», который вместе с пружиной будет входить в состав символа «Прыгающий приборчик». А в состав символа «Голова» будут входить два символа «Уши».

А пока посмотрим, какие возможности мультипликации нам предоставляет простейший символ, содержащий на своей линейке один слой и в нём один единственный кадр.

УРОК ПЯТЫЙ
АНИМАЦИЯ СИМВОЛА

Здесь уместно повторить, что в программе Макромедия Флэш вы не перемещаете и не деформируете символ. На самом деле вы перемещаете и деформируете плёнку, на которой он нарисован. ТРЕТЬЕ ОТЛИЧИЕ ПЕРЕКЛАДКИ ФЛЭШ ОТ ДОКОМПЬЮТЕРНОГО СПОСОБА СОЗДАНИЯ МУЛЬТФИЛЬМОВ ТАКОГО РОДА СОСТОИТ В ТОМ, ЧТО ВЫ МОЖЕТЕ НЕ ТОЛЬКО ПЕРЕМЕЩАТЬ И ВРАЩАТЬ ПЛЁНКУ, НО И МАСШТАБИРОВАТЬ ЕЁ КАК РАВНОМЕРНО, ТАК И НЕТ.

Во Флеше существую следующие виды символов:

1. Группа.
2. Графический символ. Когда говорят о символе, обычно имеют в виду именно этот тип.
3. Клип. Собственный мультфильм такого артиста склеен в кольцо и повторяется бесконечно. Этим мультфильмом нельзя управлять из проигрывателя.
4. Кнопка. Символ, к которому присоединена программный код на языке Экшон скрипт.

Создадим вот такой довольно абстрактный листик (рис. 5-1a) и превратим его в символ. В момент превращения в символ он получит собственную киноленту с одним единственным кадром. На основной сцене мультфильма применим к нему последовательно следующие деформации:
1. Перемещение объекта по прямой.
2. Вращение.
3. Масштабирование.
4. Сдвиг.
сначала по одной, потом вместе, санимируем их и посмотрим, что из этого получится.

1. Растяните первый ключевой кадр до 60-го кадра.
2. В 60-м кадре примените деформацию.
3. В первом уже растянутом кадре закажите анимацию Моtion (моушен).
4. Посмотрите, что получилось.

1. Перемещение по прямой Флэш обработал правильно.
2. Вращение надо обсудить. Если вы заказали поворот по часовой стрелке больше, чем на 180°, то Флэш повернет против часовой. Чтобы в автоматических кадрах заказать поворот именно по часовой стрелке, надо в свойствах автоматических кадров вместо Аuto ввести CW. После этого Флэш почему-то предлагает нам повторить вращение 1 раз. Почему — загадка фирмы-изготовителя. Закажите 0 повторений поворота.
3. Масштабирование Флэш обрабатывает правильно, если только вы не пересекаете борт габаритного контейнера. В Кореле Дро мы привыкли легко и непринужденно использовать масштабирование для зеркального и осевого отражения объекта. Во Флэше этого делать нельзя (рис. 5-1).



Рис. 5-1a. 1-й кадр масштабирования
с пересечением борта контейнера.

Рис. 5-1б. 20-й кадр масштабирования
с пересечением борта контейнера.
Обозначенные желтым участки фигуры
вышли за пределы контейнера.

Рис. 5-1в. 60-й кадр масштабирования
с пересечением борта контейнера.

4. Сдвиг Флэш обрабатывает неправильно. (рис. 5-2)



Рис. 5-2a. 1-й кадр сдвига.

Рис. 5-2б. 30-й кадр сдвига.
Обозначенные желтым участки фигуры
вышли за пределы контейнера.

Рис. 5-2в. 60-й кадр сдвига.

Итак, Флэш только три деформации символа обрабатывает правильно:

1. Перемещение объекта по прямой.
2. Вращение.
3. Масштабирование до борта габаритного контейнера.

Однако и сдвиг и отражение можно ограниченно использовать, если помнить о том, что Флэш, в отличие от Корела и Иллюстратора, не деформирует объекты напрямую, а деформирует лист плёнки, на которой нарисован объект. Этот лист плёнки может вращаться и перемещаться (как в докомпьютерной перекладке), может растягиваться и сжиматься (это уже специфика Флэша), но масштабируется за борт габаритного контейнера объекта и сдвигается так, как показано на рис. 5-3.



Рис. 5-3

ЦЕНТР ДЕФОРМАЦИИ

В руководствах по Флэшу написано, что у символа имеется центр деформации (рис. 5-4-1). На самом деле это не так. Центр деформации имеется на листе плёнки, на которой нарисован этот символ. Нам кажется (вернее, Флэш нам так показывает), что вокруг этого центра происходит вращение или масштабирование символа. Но на самом деле вокруг него происходит вращение или масштабирование плёнки, на которой нарисован этот символ. Естественно, перемещение центра деформации плёнки по ней же не анимируется.



Рис. 5-4

Посмотрите мультипликацию 5-5.



Рис. 5-5

Правый маятник качается иначе, чем левый, но тем не менее вполне естественно. Центр деформации этого маятника смещается вместе с плёнкой, но относительно самой плёнки не смещается. Средний же маятник соверщает какие-то странные прыжки. Эти прыжки вызваны смещением центра трансформации среднего маятника по его же плёнке. Положение центра деформации задаётся не в системе координат символа, а со стороны. Поэтому, раз задав положение центра деформации символа, пользуйтесь только копиями этого символа.

УРОК ШЕСТОЙ
СИМВОЛ НА НЕСКОЛЬКИХ КАДРАХ КИНОПЛЕНКИ

Для экспериментов с символами создадим самый незамысловатый мультфильм в этом курсе. В этом мультфильме одного актера (1 fps) будет блистать символ, представляющий собой что-то вроде счетчика кадров (рис. 6-1 и 6-2).



Рис. 6-1



Рис. 6-2. Кинолента и кадры символа.

Этот счетчик можно сделать в Кореле за 7 минут. На главной сцене будет находиться такой же счетчик кадров (рис. 6-3).



Рис. 6-3

Я задумал такой сценарий: Наш герой появится в мультфильме в пятом кадре, пересечет экран с пятого кадра по 15-й и останется в мультфильме до последнего, 24-го кадра (рис. 6-4).



Рис. 6-4

Поскольку я собираюсь применить к символу автоматический расчет промежуточных кадров, я обязан поместить его на отдельную киноленту. Неподвижные часы останутся на своей. На пленке символа я создам ключевой кадр №5, ключевой кадр №15 и растяну кадр № 15 до конца фильма. В кадре №5 я помещу символ в нижний левый угол экрана, в кадре № 15 в правый верхний угол экрана и с 6 по 14 кадр попрошу Флэш рассчитать промежуточные кадры (рис. 6-5). По умолчанию Флэш первый кадр символа привязывает к тому кадру основного мультфильма, в котором появился символ. Это привело к ошибке исполнения того сценария, какой мы задумали (рис. 6-5). Если к 15-му кадру основного фильма привяжется 11-й кадр символа, все будет о-кей. Здесь (1) вы можете ввести номер кадра символа, который цепляется к текущему кадру основного мультфильма.



Рис. 6-5

С использованием символа можно создать вот такую парочку мух: (рис. 6-6). Муха будет состоять из пяти кружочков разного цвета и хоботка (рис. 6-7), а за счет изменения цвета крылышек будет создаваться впечатление, что муха ими машет. Можно создать муху на пленке основного мультфильма, потом создать пустой символ и перенести все кадры мухи (а их всего два) на пленку нового символа. Если эта же муха в основном фильме появится второй раз во втором кадре, то крылышки мух будут колебаться в противофазе. В приведенном мультфильме это заметить невозможно, но в верстке это видно.



Рис. 6-6



Рис. 6-7

УРОК СЕДЬМОЙ
ПЛАНЕТАРНЫЙ РЕДУКТОР

На этом уроке мы построим вот такой планетарный редуктор (рис. 7-1).



Рис. 7-1

Поскольку нам предстоит конструировать планетарный редуктор, давайте посмотрим, как он работает и из чего стостоит (рис. 7-2).



Рис. 7-2

В самом центре планетарного редуктора находится ведущая шестерня, соединенная с тремя ведомыми шестернями. Ведомые шестерни соединены между собой ободком и перекатываются внутри картера, который тоже с чем-то соединен, причём неподвижно. Вал от двигателя входит в отверстие ведущей шестерни и фиксируется в нём. Во время работы редуктора ободок вращается в 4 раза медленнее вала двигателя. Ведомый вал каким-то образом прикрепляется к ободку. Т. е. мы будем собирать редуктор с передаточным числом 4:1.
В этом редукторе ведущая и ведомые шестерни имеют по 9 зубьев, а картер — 27.

Но начнем построение редуктора не с программы Флэш, а с Корела — в нем всё удобней делать. Потом сэкспортируем векторные объекты во Флэш и санимируем.

Мы в Кореле.

Посторение шестерен начнем с элементарной единицы — периода зубца (рис. 7-3а).



Рис. 7-3

Я предлагаю такой порядок действий:

1. Начертить прямоугольник 4 на 2 мм (рис. 7-3б).
2. Отразить его через угол налево и направо.
3. Заказать перемещение курсора 0,5 мм.
4. Превратить прямоугольники в кривые.
5. По две вершины каждого прямоугольника переместить внутрь на 0,5 мм.
6. Разбить получившиеся трапеции по вершинам и удалить лишние отрезки периметров.
7. Скомбинировать оставшиеся отрезки в одну фигуру и срастить вершины, как показано на рис. 7-3в. Удалить вершины.
Мы получили математически точный период зубца. На этом возможности Корела по математически точному построению шестеренок заканчиваются, всё же это не Автокад.

Теперь будем из периодов зубца собирать шестеренку (рис. 7-4):



Рис. 7-4

1. Где-то внизу, под периодом зубца нарисуйте центр шестеренки и отцентрируйте его по вертикали по отношению к периоду зубца (1).
2. Включите привязку к объектам и переместите центр вращения периода зубца в центр шестеренки.
3. Продублируйте период зубца 8 раз под углом 40°.
4. Возможно, вам придется переместить центр шестеренки и вместе с ним центр вращения периода зубца немного вверх или вниз артиллерийским способом: «недолет, перелет, попадание!».
5. Скомбинируйте все периоды зубца в одну фигуру и сварите все вершины между ними (2).
6. Проведите окружность по основанию зубцов (3).
7. Используя операцию объединения, создайте шестеренку.
8. Ведомые шестерни будут копиями ведущей. Расположите их, как показано на рис. 7-5.



Рис. 7-5

9. Продублируйте период зубца вокруг центра ведущей шестерни (1) 26 раз под углом 13,33°.
10. Скомбинируйте все периоды в одну фигуру, соедините их вершины отрезками, как показано на рис. 7-6, и, используя логические операции с окружностями, создайте картер редуктора.



Рис. 7-6

11. Расширьте отверстие в ведущей шестерне (рис. 7-7).



Рис. 7-7

12. В кольце, соединяющем ведомые шестерни, вырежьте достаточно большие отверстия для осей ведомых (1) и своё имя, поставьте красные точки, чтобы в будущем, когда редуктор будет работать, контролировать по ним вращение шестерен. Проследите за тем, чтобы в собранном редукторе были достаточно большие люфты, так как наши построения уже неточны сейчас, и в будущем, уже во Флэше, неточность еще более увеличится.
13. Пару ведомых можно удалить. На этом работа в Кореле заканчивается.

Не следует напрямую, через буфер обмена, переносить объекты из Корела во Флэш. При таком переносе меняется число управляющих точек и расположение управляющих ручек. Правильно следует переносить так:
Корел а eps а «Люстра» а Флэш

Во время импорта появится сообщение, что ваши объекты покрашены ЦМИКом (рис. 7-8). Ну и ладно. Флэш сам вполне сносно перекрасит их в РГБ.



Рис. 7-8

Когда вы выделите объекты на экране, вы увидите, что они обведены зеленой рамкой (рис. 7-9).



Рис. 7-9

Во Флэше цвет рамки зависит от типа объекта, который эта рамка окружает. Узнать, какой цвет рамки какому типу объектов соответствует, можно по меню Edit а Preferences... а General (рис. 7-10).



Рис. 7-10

Разгруппируем группу (рис. 7-11) и соберем объекты в символы согласно плану 7-2. При создании символов «Ведомая шестерня», «Ведущая шестерня» и «Ведомая тройка» в диалоговом окне (рис. 7-12) укажите тип символа movie clip (муви клип).



Рис. 7-11



Рис. 7-12

У вас должны появиться такие символы (рис. 7-13):



Рис. 7-13

РАБОТА С СИМВОЛОМ «ПЛАНЕТАРНЫЙ РЕДУКТОР»

1. Переместите ведущую шестерню на ее собственную ленту.
2. Растяните ключевой кадр с оставшимися объектами до 105-го кадра.
3. Совместите центр вращения символа «Ведущая шестерня» с центром картера.
4. Второй ключевой кадр ведущей шестерни создайте в 105-м кадре и поверните её на -10°.
5. В переходных кадрах задайте вращение по часовой стрелке с тремя повторами (рис. 7-14).



Рис. 7-14

5. Переместите ободок с ведомыми на его собственную ленту.
6. Совместите центр вращения символа с центром символа «Картер».
7. В 105-м кадре создайте ключевой кадр и в нем поверните ободок с ведомыми на -3°.
8. В переходных кадрах задайте вращение по часовой стрелке без повтора (рис. 7-15).



Рис. 7-15

РАБОТА С СИМВОЛОМ «ВЕДОМАЯ ТРОЙКА»

1. Вставьте недостающие ведомые шестерни.

РАБОТА С СИМВОЛОМ «ВЕДОМАЯ ШЕСТЕРНЯ»

1. Создайте символ «Ведомая шестерня 2».
2. В первом кадре совместите центр вращения символа «Ведомая шестерня 2» с осью шестерни.
2. В 35-м кадре создайте ключевой кадр и поверните символ «Ведомая шестерня 2» на +10°.
3. В переходных кадрах задайте вращение против часовой стрелки без повтора (рис. 7-16).



Рис. 7-16

УРОК ВОСЬМОЙ
ПРЫГАЮЩИЙ ПРИБОРЧИК

...

УРОК ДЕВЯТЫЙ
СОБИРАЕМ ВСЁ ВМЕСТЕ

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

Постепенно проявляется занавес театра. В зале горит свет. Зрители, которых мы не видим, рассаживаются. Идут титры. Занавес расходится, и на сцене включают свет. И зрители видят, какие замечательные декорации нарисовала художница Марина Гуркина. Веселая зеленая гусеница прокатывается на мотороллере справа налево, потом слева направо, держа в руках большой красивый мяч. Собственно, всё. На сцене гаснет свет, занавес закрывается, в зале включают свет, идут титры. Зрители, которых мы не видим, расходятся.


Исходники:

1. Декорации, созданные в «Люстре».
2. Растровая гусеница.
3. Музыкальное сопровождение в виде файла *.mp3.

Подготовительные работы:

1. Декорации. Марина нарисовала их в «Люстре» (рис. 9-1). Флэш прекрасно сочетается с Иллюстратором. Самый удобный способ подготовить декорации — сгруппировать их в Иллюстраторе. Флэш сохранит группы.



Рис. 9-1

2. Не хватает самой сцены. Ее можно сотворить в Кореле или «Люстре».
3. В наличии имеет место быть растровая гусеница (рис. 9-2). Оставлять растровые картинки во Флэше — дурной тон. Во-первых, они неудовлетворительно масштабируются. Во-вторых, они много весят. В-третьих, нам может понадобиться их редактрование в самом Флэше. Учтя все «за», перерисовываем гусеницу в Кореле или «Люстре» — как кому удобнее (рис. 9-3).



Рис. 9-2.

Рис. 9-3.


4. Обычно в конце фильма появляется красивый логотип «The End». Давайте нарисуем его, используя деформирующую оболочку envelope (э'нвелоуп, рис. 9-4).



Рис. 9-4

План символов:

  1. Стены зрительного зала (рис. 9-5-1).
  2. Передний план сцены (рис. 9-5-1).
  3. Задний план сцены (рис. 9-5-2).
  4. Средний план сцены (рис. 9-5-3).
  5. Правый занавес (рис. 9-5-4).
  6. Левый занавес (рис. 9-5-5).
  7. Потолочная балка (рис. 9-5-6).
  8. Гусеница без мячика.
  9. Гусеница с мячиком.
10. Вращающееся колесо.
11. Невращающееся колесо.
12. Титры №1.
13. Титры №2.
14. Титры №3.
15. Титры №4.
16. Заплата.
17. Музыкальный фрагмент.

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



Рис. 9-5

Теперь мы имеем всё под рукой, чтобы создать такой фильм (рис. 9-6):



Рис. 9-6

    часть третья
Используются технологии uCoz