Библиотека Интернет Индустрии I2R.ru

Flash5. Шаг восьмой: движение по пути, слои

В прошлых статьях мы уже рассмотрели основные способы создания изображений, работу с инструментами рисования, понятие символов, некоторые способы создания анимации, а также затронули, пока косвенно, ряд других тем. Отвечая на вопросы читателей, хочется сказать, что мы все помним, и если какого-то вопроса коснулись вскользь, то это вовсе не значит, что о нем забыли, просто более подробно он будет рассмотрен в будущем и, скорее всего, на каком-либо конкретном примере для наглядности.

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

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

Мы уже рассмотрели ряд основных способов создания анимации, а именно:

• Покадровую анимацию, где изображение создавалось путем ручной прорисовки каждого кадра;
• Motion Tweening, здесь задавались начальная и конечная координаты объекта, а все промежуточные кадры программа генерировала сама.
• Shape Tweening, это более сложный способ создания анимации, так как в нем реализуется не только перемещение объекта, но и его деформация. Обратите внимание, что под словом деформация имеется в виду не только изменение формы какого-либо объекта, но и, например, переход одной формы в другую, по сути постепенная замена одного объекта другим.

Сегодня же мы поговорим еще об одном способе создания анимации, который является дополнительным, так как строится на уже рассмотренном выше, а именно на Motion Tweening. Здесь будет также осуществляться перемещение объекта, однако, по заданной создателем кривой.

Сперва несколько слов о том, зачем все это нужно.

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

• в первом случае придется прорисовать кучу кадров, что займет много времени, но зато вы сможете проследить за каждым перемещением объекта;
• во втором случае придется довольствоваться траекторией, выбранной компьютером; чтобы это исправить, можно создать промежуточные ключевые кадры, что приблизит второй способ к первому, а именно - покадровому;
• при работе с третьим методом проблемы аналогичны второму.

Поэтому возможность создавать анимацию по заданному пути не просто полезна, а очень полезна. Рассмотрим более подробно на конкретном примере.

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

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

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

После того, как небесное светило создано, выделите его полностью, вместе с его лучиками, если таковые имеются, используя инструмент Arrow Tool (горячая клавиша - V). Проделайте Insert4Create Motion Tween. После этого объект, состоящий из множества элементов, превратится в одно целое. Если после этого действия у вас возникнет необходимость внести в него какие-либо изменения, то для этого необходимо будет щелкнуть по нему двойным щелчком мыши, после чего все, что его окружает, станет покрыто белой пленкой, а он снова будет разбит на составляющие. Для того чтобы вернуться к обычному режиму работы, достаточно щелкнуть дважды левой клавишею мыши в любой точке пространства, вне редактируемого объекта.

Обратите внимание на то, что все дальнейшие действия будут касаться слоя с солнцем, поэтому на нем возьмите первый кадр и перетащите его мышью вперед, после чего полоса должна стать белой. Щелкните по нему правой клавишею мыши и из раскрывающегося списка выберите команду Insert Frame, верните кадр назад.

Далее выделите последний кадр мышью и переместите объект в другое место, в результате первый и последний кадры соединяться стрелкой и превратятся в обычную анимацию Motion Tweening. О ее возможностях было рассказано в одной из прошлых статей, поэтому на этом вопросе останавливаться не будем, а заметим лишь, что для того, чтобы ее просмотреть, следует нажать клавишу Enter или проделать Control4Play.

Следующим шагом будет реализация непосредственного движения по заданной кривой, для чего необходимо проделать следующее: Insert4Motion Guide.

Далее следует щелкнуть по первому кадру в образовавшемся надслое правой клавишею мыши и из раскрывающегося меню выбрать Insert Keyframe.

Возьмите инструмент Pencil и нарисуйте кривую, по которой должен двигаться ваш объект, (солнце), другими словами - создайте траекторию.

Вернитесь на слой с солнцем и, выбрав инструмент Arrow Tool, активизируйте режим Snap to Object.

Щелкните по первому кадру на слое с солнцем и установите его в начало кривой, затем по последнему - и привяжите к концу.

После этого можно просмотреть анимацию, в результате солнце должно двигаться по кривой.

На рисунке представлены два кадра: на первом солнце находится в своем первоначальном положении, а точками указана траектория, на втором - светило уже немного сдвинулось.

При желании можно обратиться к палитре Frame и внести некоторые коррективы в движение объекта. Например, задать ускорение или вращение. Подробнее о настройках, которые можно встретить здесь, написано в статье, посвященной Motion Tweening.

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

Для чего они нужны? В принципе, для того же, для чего и во всех других графических редакторах. Они упрощают работу, не давая запутаться в многочисленных объектах. С их помощью устанавливается порядок следования объектов, причем если один объект, расположенный на одном слое, и перекрывает другой, находящийся на ином слое, то при их относительном перемещении верхний не сотрет части нижнего.

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

Несомненным преимуществом работы со слоями в рассматриваемом графическом редакторе, а именно во Flash, является то, что здесь реализована возможность анимирования каждого слоя вне зависимости от других. Причем, обратите внимания, что воздействиям подвергаются не только разные объекты, - можно совмещать и различные способы анимации, о которых говорилось в начале статьи.

На рисунке представлена палитра слоев, взятая с анимации, процесс создания которой был описан выше. В данной палитре есть два слоя:

Layer 1 - слой с фоном (дома, облака, трава...).

Layer 2 - слой с солнцем.

И один надслой: Guide: Layer 2, в котором содержится путь движения солнца.

Обратите внимание на пиктограммы, расположенные справа.

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

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

Цветные квадратики, расположенные справа от каждого слоя, обозначают режим просмотра. Если они закрашены, как на приведенном примере, то вы увидите объекты целиком: если щелкнуть по такой пиктограмме, то заливка пропадет и рисунок будет представлен в контурном виде.

Далее внизу располагаются три иконки, позволяющие выполнять некоторые команды, а именно:

• Insert Layer - пиктограмма с изображением страницы с плюсом. Щелкнув по ней, вы тем самым создадите новый слой, расположенный над активным в момент создания.
• Add Guide Layer - пиктограмма страницы с волнистой линией. С помощью данной пиктограммы создается надслой, значение которого было разобрано в примере создания анимации, представленном выше.
• Delete Layer - пиктограмма с мусорной корзиной. Данная иконка применяется для удаления ненужного слоя.

Для изменения порядка следования слоев можно воспользоваться мышью и, просто зажимая левую клавишу, перемещать слои относительно друг друга.

• - Для того чтобы переименовать слой, что используется очень часто, особенно если изображение сложное, необходимо дважды щелкнуть левой клавишею мыши по нему, после чего ввести новое имя.


• - Кроме того, можно изменять некоторые параметры слоя в дополнительном меню, вызываемом двойным щелчком мыши. Здесь можно устанавливать по усмотрению пользователя цвет слоя в палитре, то есть его цвет в контурном режиме, можно поставить или убрать замок, сделать видимым слой или, наоборот, спрятать его.


• - Кроме того, можно поменять тип слоя. Из тех, с которыми мы сталкивались, это Normal и Guide, об остальных речь пойдет в следующих статьях.


• - Кроме того, есть возможность активизировать контурный режим.

Здесь даны лишь краткие сведения о слоях. Подробнее об этом можно будет узнать в последующих статьях, где мы обязательно коснемся незатронутых здесь вопросов, таких, например, как различные типы слоев, что станет понятно только после пояснения на конкретных примерах.

Галина Корабельникова
Компьютерная газета