Книга: Macromedia Flash Professional 8. Графика и анимация
Назад: Глава 11 Покадровая анимация
Дальше: Глава 13 Создание составной анимации
Глава 12
Трансформационная анимация
А теперь настала пора познакомиться с трансформационной анимацией. То есть с тем, в чем так силен Macromedia Flash.
Подробно о трансформационной анимации рассказывалось в главе 1. Давайте вспомним, что это такое. Мы рисуем всего два ключевых кадра последовательности — начальный и конечный, — задающих положение анимируемого элемента до и после его перемещения, и определяем кое-какие параметры. Flash на основе всего этого создает необходимое количество промежуточных кадров, помещает их между ключевыми — и анимация готова. Просто, не правда ли?
Кроме простоты создания, трансформационная анимация имеет еще одно преимущество перед покадровой: в результирующем файле Shockwave/Flash она занимает меньше места. В самом деле, вместо того, чтобы хранить все кадры фильма, программа записывает в файл только несколько чисел — параметры функции, реализующей трансформационную анимацию. Сравним это с десятком изображений, пусть даже и векторных, из которых состоит покадровая анимация — это сравнение уж точно будет не в пользу последней.
Пожалуй, единственный недостаток трансформационной анимации — ограниченность ее возможностей. В самом деле, с ее помощью мы можем создать только:
□ различные перемещения элементов изображения по рабочему листу;
□ изменение формы элемента изображения с применением трансформаций (вращения, сдвига, изменения размеров и пр., в общем, всего того, что было описано в главе 4);
□ изменение цвета элемента изображения с помощью цветовых эффектов (изменения прозрачности, оттенка и пр.; все они были описаны в главе 8);
□ изменение параметров привязанных к элементу изображения фильтров (см. главу 9).
Негусто… Хоть Flash и предлагает нам достаточно мощные средства "оживить" изображения "малой кровью", красивые и сложные мультфильмы из одних трансформаций не сделаешь. Хотя для интернет-графики, которая обычно не отличается запредельной сложностью, этого более чем достаточно.
Что ж, пора за дело. Займемся трансформационной анимацией и посмотрим, что все-таки с ее помощью можно сделать. Flash, как всегда, нам поможет.
Два вида трансформационной анимации
Flash позволяет создавать трансформационную анимацию двух видов: движение и морфинг. Оба этих вида имеют практически одинаковые возможности, но применяются к разным видам элементов изображения.
Первый вид трансформационной анимации — движение — самый простой в реализации. Движение можно применить только к следующим разновидностям фрагментов изображения:
□ экземплярам образцов (см. главу 8);
□ группам (см. главу J);
□ текстовым блокам (см. главу 7).
К обычной графике, не являющейся ни тем, ни другим, ни третьим, движение неприменимо.
Как уже говорилось, движение создается очень просто — это его достоинство. Второе достоинство движения — в результирующем файле Shockwave/Flash оно занимает очень мало места. Недостаток же всего один — бедность изобразительных средств.
При создании движения нужно иметь в виду вот что. Каждый анимируемый элемент обязательно должен быть помещен на свой собственный слой. (О слоях см. главу 5.) Причем, кроме анимируемого экземпляра, на этом слое не должно находиться больше никакой графики. Иначе результат будет непредсказуемым.
Второй вид трансформационной анимации — морфинг. Он, в отличие от движения, может быть применен только к обычной графике. К экземплярам, группам и текстовым блокам он неприменим.
Недостатков у морфинга два. Во-первых, морфинг занимает в файле Shockwave/Flash больше места, чем движение (что понятно, ведь в этом случае приходится сохранять больше данных). Во-вторых, зачастую при морфинге бывает очень трудно получить нужный результат.
Выяснив все о двух поддерживаемых Flash типах трансформационной анимации, посмотрим теперь, как они создаются. Начнем с движения, как самого легкого в реализации.
Движение
В этом разделе мы выясним, как создается простейший вид трансформационной анимации — движение. Во время выяснения будем экспериментировать с созданным нами в главе 11 фильмом, демонстрирующим процесс деления клетки. Мы добавим к нему начальные титры, показывающие его название.
Создание простейшего движения
Откроем документ, содержащий созданный нами фильм "Деление клетки". И разобьем его на две сцены — так нам будет проще (о сценах см. главу 11).
Первая сцена будет содержать титры с названием фильма и носить "говорящее" название название. Для создания этих титров мы используем обычный текстовый блок, который потом анимируем (как мы помним, движение применимо и к текстовым блокам). Этот текстовый блок будет плавно "выезжать" сверху и останавливаться в центре рабочего листа. Отведем под этот процесс пять кадров — больше и не требуется.
Небольшое отступление. В главе 2 говорилось, что любая графика, выходящая за пределы рабочего листа, отбрасывается при экспорте в формат Shockwave/Flash. Так вот, в случае анимированных экземпляров, групп и текстовых блоков дело обстоит не так — они сохраняются. Этим можно воспользоваться для того, чтобы скрыть до поры до времени какой-либо элемент изображения.
Вторая же сцена нашего фильма будет содержать собственно покадровую анимацию, показывающую процесс деления клетки. Мы назовем ее Фильм. Здесь мы ничего менять не будем.
Создадим пустую пока сцену название и проследим, чтобы она шла в фильме первой. (Название фильма должно появляться в его начале, не так ли?) Дадим второй (имевшейся изначально) сцене имя Фильм. Сделаем сцену название текущей и выделим единственный пока находящийся в ней ключевой кадр. Создадим в центре рабочего листа текстовый блок, напишем в нем текст деление клетки. Потом сместим его точно вверх, пока он не выйдет за границы рабочего листа. Теперь все готово к созданию движения.
Первый ключевой кадр, содержащий скрытый за пределами рабочего листа текстовый блок, у нас есть. Нужно создать второй. Для этого выделим пустую позицию дорожки, в которой движение нашего текстового блока должно закончиться. Это будет позиция № 5, как мы договорились ранее. Создадим там новый ключевой кадр, выбрав пункт Keyframe подменю Timeline меню Insert или пункт Insert Keyframe контекстного меню выделенной позиции. Первый ключевой кадр тотчас растянется, заполняя все свободное пространство до второго ключевого кадра.
Создав второй ключевой кадр, выделим его и переместим текстовый блок с названием фильма на его законное место — в центр рабочего листа. Воспользуемся панелью Align, чтобы расположить его точно в центре.
Все — оба ключевых кадра готовы. Настало время создать саму анимацию.
Выделим любой подкадр первого, растянутого, ключевого кадра. После этого посмотрим на панель Properties. В ней находится не рассмотренный еще нами раскрывающийся список Tween, с помощью которого и создается трансформационная анимация — и движение, и морфинг.
Изначально в этом списке выбран пункт None. Это значит, что для выделенного кадра не задана никакая трансформационная анимация. Чтобы задать движение, мы выберем пункт Motion. В панели Properties тотчас появится множество других элементов управления, задающих специальные параметры созданной нами анимации. Эти элементы управления и соответствующие им параметры мы рассмотрим далее в этой главе.
Все! Мы создали простейшее движение. При этом Flash преобразовал все подкадры первого, растянутого, ключевого кадра в промежуточные кадры. Эти кадры, как мы помним из главы /, будут генерироваться самим проигрывателем Flash на основании содержимого ключевых кадров.
Щелкнем мышью на рабочем листе или временной шкале, чтобы убрать фокус ввода с панели Properties, и запустим воспроизведение анимации нажатием клавиши <Enter>. Наша анимация работает!
А теперь давайте посмотрим на временную шкалу, точнее, на растянутый ключевой кадр (рис. 12.1). Хорошо видно, что он стал голубым (на рис. 12.1 — серым), более того — по нему проходит тонкая черная стрелка, указывающая вправо. Именно так Flash обозначает примененное к кадру движение.
Если же мы захотим удалить созданное движение, то должны будем выделить любой промежуточный кадр задающей это движение последовательности и выбрать в раскрывающемся списке Tween панели Properties пункт None.
Что ж, наша первая трансформационная анимация готова. Давайте ее немного усложним.
Более сложное движение
Flash-аниматоры, как начинающие, так и опытные, очень любят такой эффект: какой-либо фрагмент изображения постепенно исчезает или, наоборот, появляется на экране. Это похоже на то, как на фотографии, опущенной в раствор проявителя, постепенно возникает изображение. Применим и мы этот прием. Пусть название фильма, закончив движение, постепенно исчезнет с экрана — как бы выцветет.
Для создания этого эффекта также используется трансформационная анимация, а именно — движение. Как мы помним, движение включает в себя не только собственно движение, но и трансформации, и цветовые эффекты. А с помощью задания цветового эффекта прозрачности можно заставить наш текстовый блок исчезнуть с экрана.
Здесь возникает одна небольшая проблема. Дело в том, что задавать цветовые эффекты можно только для экземпляров. А у нас — обычный текстовый блок! Как выйти из положения?
Выделим первый ключевой кадр нашей анимации и преобразуем текстовый блок в образец (о том, как это сделать, было рассказано в главе 8). Дадим образцу имя Название и присвоим тип "графический образец". После этого Flash создаст образец и преобразует текстовый блок в его экземпляр. Половина дела сделана.
Теперь выделим второй ключевой кадр нашей анимации и удалим текстовый блок. Растянутый ключевой кадр станет таким, как показано на рис. 12.2, — стрелка, обозначающая анимацию, превратится в пунктирную линию. Это значит, что наша анимация теперь фактически не имеет второго ключевого кадра ("оборванная" анимация), и Flash не знает, как ее закончить. (Кстати, такая же картина будет наблюдаться, если удалить второй ключевой кадр из последовательности кадров.)
Чтобы в буквальном смысле положить конец такой анимации, нужно поместить на рабочий лист второго ключевого кадра экземпляр созданного нами ранее образца название. После этого выровняем его точно по центру рабочего листа. Вот теперь все нормально.
Теперь заставим название фильма исчезнуть с экрана, для чего добавим к дорожке еще одну последовательность кадров. Эта последовательность будет следовать вслед за первой, и первым ее ключевым кадром станет второй ключевой кадр первой последовательности. Пусть вторая последовательность также состоит из пяти кадров — этого будет достаточно, чтобы зритель успел прочитать название фильма, прежде чем оно исчезнет.
Так, первый ключевой кадр новой последовательности у нас есть. Второй ее ключевой кадр мы поместим на позиции № 10 временной шкалы. Выделим любой из подкадров растянувшегося первого ключевого кадра и выберем в раскрывающемся списке Tween панели Properties пункт Motion. Результат этих действий показан на рис. 12.3.
Теперь выделим экземпляр образца название (название фильма) и выберем пункт Alpha в раскрывающемся списке Color панели Properties. В поле ввода с регулятором, расположенным правее этого списка, введем значение 0 % — полная прозрачность. Все — название нашего фильма теперь стало невидимым.
Проверим, что у нас получилось. Ура, работает!
Подобным образом мы можем создавать любые достаточно сложные анимации, просто добавляя во временную шкалу последовательности кадров, одну за другой. Анимированные элементы могут "гулять" по всему экрану, исчезать и снова появляться, менять цвета, отбрасывать тень, искажаться и восстанавливать свой первоначальный вид. Попробуйте поэкспериментировать — это не только позволит вам приобрести опыт, но и просто позабавит.
Однако для начала все-таки стоит узнать о движении еще кое-что.
Параметры движения
Настала пора рассмотреть поближе панель Properties и все ее элементы управления, доступные в том случае, если выделен любой из кадров анимации (рис. 12.4).
В верхнем левом углу панели Properties находится поле ввода Frame. С его помощью мы можем задать уникальное имя или примечание для какого-либо кадра. Имя кадра будет, в основном, полезно только для программирования сценариев и некоторых других возможностей, но мы можем воспользоваться этим полем, чтобы пометить нужный нам кадр.
Если мы зададим для кадра имя, он будет выглядеть так, как показано на рис. 12.5, т. е. заданное для него имя будет написано прямо на нем. Правда, это идеальный случай, поскольку кадр растянут, и имя помещается в нем целиком. Если же кадр занимает только одну позицию дорожки, в нем будет виден только красный флажок — знак того, что кадр имеет имя.
В качестве примечания к кадру мы можем записать какую-либо дополнительную информацию, например, напоминание, что нужно с этим кадром сделать. Примечание также вводится в поле ввода Frame, но его должны предварять два символа /.
Кадр, содержащий примечание, выглядит так, как показано на рис. 12.6. Обратим внимание на два зеленых символа / — именно так обозначается кадр с примечанием.
Примечания не экспортируются в результирующий файл Shockwave/Flash, поэтому мы можем сделать их достаточно развернутыми, не опасаясь, что результирующий файл получится слишком большим.
Под полем ввода Frame в панели Properties (см. рис. 12.4) находится раскрывающийся список Label type. В нем задается тип значения в поле ввода Frame: имя кадра (пункт Name), примечание (пункт Comment) или имя якоря (пункт Anchor). При этом, если выбрать пункт Comment, Flash сам добавит в начало значения, введенного в поле ввода Frame, два символа /.
Да, но что такое якорь! Так называется кадр, являющийся своего рода "зацепкой" для проигрывателя Flash. Если фильм Flash воспроизводится в окне Web-обозревателя, пользователь может пользоваться кнопками Forward (Вперед) и Back (Назад) этой программы, чтобы "прыгать" от одного якоря к другому. Так что в фильмах, предназначенных для распространения через Интернет, якоря могут пригодиться.
Пример якоря можно увидеть на рис. 12.7. Он обозначается желтым значком якоря, видимым, даже если кадр занимает одну позицию дорожки.
Флажок Scale нужно включить, если наш анимированный элемент при движении должен менять свои размеры. (Впрочем, этот флажок включен по умолчанию.) Если же его снять, размеры анимированного элемента меняться не будут.
С помощью поля ввода с регулятором Ease задается степень замедления движения анимированного элемента в конце анимации. Если мы введем в это поле значение от 1 до 100, элемент сначала будет двигаться быстро, а потом его движение замедлится. Если же, наоборот, мы введем значение от — 1 до -100, сначала его движение будет медленным, а потом ускорится. Если нам нужно, чтобы элемент всегда двигался равномерно, мы оставим в этом поле ввода значение по умолчанию — 0.
Раскрывающийся список Rotate задает направление вращения анимированного элемента, если, конечно, во время движения он должен вращаться. Всего в этом списке четыре пункта:
□ None — элемент не будет вращаться вообще, даже если на втором ключевом кадре он был повернут;
□ Auto — направление вращения элемента выберет сам Flash (значение по умолчанию);
□ CW — элемент всегда будет вращаться в направлении по часовой стрелке;
□ CCW — элемент всегда будет вращаться в направлении против часовой стрелки.
Если в списке Rotate были выбраны пункты CW или CCW, то становится доступным поле ввода times, расположенное правее этого списка. В нем задается количество дополнительных поворотов, которые сделает анимированный элемент, прежде чем займет свое конечное положение. Значение по умолчанию — 0, т. е. элемент сразу повернется на заданный угол, не совершая никаких дополнительных поворотов.
Если правее кнопки Edit (ее мы рассмотрим чуть позже) находится кнопка:
Это значит, что с нашей анимацией что-то не в порядке. При нажатии этой кнопки на экране появится окно-предупреждение, описывающее проблему, с которой столкнулся Flash при создании анимации.
Остальные элементы управления, показанные на рис. 12.4, мы опишем в следующих главах этой книги.
Дополнительные средства управления движением
Шкатулка сюрпризов, припасенная нам Flash 8, еще далеко не пуста. Очередной сюрприз для аниматоров, припасенный им, — это дополнительные средства для управления движением. С их помощью мы сможем, например, управлять скоростью движения анимированного элемента или насыщенностью его тени на каждом участке его траектории.
Чтобы задать параметры движения, нам будет нужно сначала выделить любой промежуточный кадр в последовательности, задающей это движение. После этого нажмем упомянутую ранее кнопку Edit панели Properties. На экране появится диалоговое окно Custom Ease In / Ease Out (рис. 12.8).
Рассмотрение этого окна мы начнем с раскрывающегося списка Property. Пять его пунктов позволят нам задать, чем именно мы собираемся управлять:
□ Position — местонахождением анимированного элемента на траектории его движения (если он должен двигаться);
□ Rotation — углом его поворота (если он должен вращаться);
□ Scale — его размерами (если они должны меняться);
□ Color — примененными к анимированному элементу цветовыми эффектами;
□ Filters — примененными к анимированному элементу фильтрами.
Если включен флажок Use one setting for all properties (а он включен по умолчанию), то все заданные нами настройки будут применены сразу ко всему: и к местонахождению, и к углу поворота, и к размерам, и к цветовому эффекту, и к фильтрам.
Большую часть окна Custom Ease In / Ease Out занимает график, задающий изменение выбранного нами в списке Property параметра с течением времени. Горизонтальная ось этого графика проградуирована в кадрах анимации и задает время. Вертикальная же его ось проградуирована в процентах и задает степень приложения заданного нами для анимированного элемента эффекта. Так, если наш элемент должен двигаться, то эта шкала задает его местоположение на траектории движения, а если он должен менять свою прозрачность — то степень изменения прозрачности.
Как хорошо видно на рис. 12.8, изначально график представляет собой прямую линию, начинающуюся в точке с координатами (0,0), а заканчивающуюся в точке (<последний кадр анимации>, 100 %). Это значит, что по умолчанию все заданные нами изменения эффекта, примененного к анимированному элементу, происходят плавно. Чтобы задать другие изменения, мы должны будем изменить сам график, скажем, превратив его линию в кривую.
Как это сделать? Исключительно просто! Помещаем курсор мыши на нужную точку графика, нажимаем левую кнопку и буксируем мышь, а когда график примет нужную форму, отпускаем левую кнопку. В точке, где мы щелкнули мышью, появится точка искривления и касательная, которой мы можем пользоваться для изменения формы графика. В общем, делается это так же, как и при работе с инструментом "перо" (см. главу 3).
Мы можем выделять точки искривления, щелкая по ним мышью. При этом на выделенной точке искривления появится касательная, а под графиком Flash выведет номер кадра и значение выбранного нами в списке Property параметра, относящиеся к этой точке.
Еще мы можем перетаскивать мышью созданные ранее точки искривления, чтобы исправить график. А чтобы удалить ненужную точку искривления, мы должны будем щелкнуть по ней, удерживая нажатой клавишу <Alt>.
Давайте, например, заставим название фильма пропадать с экрана сначала медленно, а потом все быстрее и быстрее. Для этого сначала выберем в раскрывающемся списке Property пункт Color, а потом исправим график таким образом, чтобы он походил на показанный на рис. 12.9.
Задав нужный нам график, нажмем кнопку ОК, чтобы применить его последовательности кадров, промежуточный кадр которой мы выделили ранее. Чтобы отказаться от управления движением, мы нажмем кнопку Cancel.
Осталось сказать немного. В левом нижнем углу окна Custom Ease In / Ease Out находится группа из двух кнопок, схожих с кнопками пульта (см. рис. 11.5). Правая кнопка позволит нам запустить воспроизведение дорожки, кадр которой мы выделили. Правда, нужно иметь в виду, что при этом будет воспроизведена вся дорожка, а не только последовательность кадров, которой принадлежит выделенный кадр. А левая кнопка останавливает воспроизведение.
Кнопка Reset окна Custom Ease In / Ease Out позволит нам вернуться к изначальному графику изменения выбранного в списке Property параметра (т. е. к прямой линии).
Еще раз об "оборванной" анимации
Заканчивая разговор о движении, укажем на "подводные камни", которые могут встретиться на пути начинающего Flash-аниматора. И, разумеется, поговорим о том, как эти "камни" обойти.
Как мы помним, "оборванная" анимация получается в том случае, когда Flash не знает, как закончить созданную нами анимацию. Такое может случиться по двум причинам:
□ если мы забыли создать второй ключевой кадр анимации или случайно его удалили;
□ если мы удалили во втором ключевом кадре анимации с рабочего листа анимируемый экземпляр.
В любом из указанных случаев Flash отобразит "оборванную" анимацию так, как показано на рис. 12.2. И, конечно же, он не сможет ее нормально воспроизвести.
Какой имеется выход из этого положения?
Если в нашей анимации нет второго ключевого кадра, мы должны будем его создать. После этого выделим его и поместим на рабочий лист экземпляр того образца, который находится в первом ключевом кадре. Это важно: если анимируемые экземпляры, находящиеся в разных ключевых кадрах, порождены разными образцами, Flash не сможет создать движение, и анимация так и останется "оборванной".
Во втором случае выход также очевиден: удаляем все с рабочего листа во втором ключевом кадре и помещаем на него экземпляр соответствующего образца. После этого Flash должен успешно создать нужное движение.
И последнее. Если мы выполнили операцию смены образца, на котором основан экземпляр, находящийся в первом ключевом кадре, то должны будем сделать то же самое и с экземпляром, который находится во втором ключевом кадре. Иначе наша анимация станет "оборванной".
Морфинг
Итак, с движением мы разобрались. Пора приступать к морфингу.
Как делается морфинг? В сущности, так же, как движение. Мы создаем ключевые кадры — начало и конец анимации, наполняем их содержимым и при желании задаем параметры анимации. А остальное, как говорится, дело техники.
Создание морфинга
Создание морфинга мы будем изучать на другом примере. Давайте создадим новый документ Flash и, воспользовавшись инструментом "эллипс", нарисуем на рабочем листе что?., правильно, эллипс. Заливку для него создавать не будем, чтобы изменение его формы было нагляднее.
Содержимое первого ключевого кадра нашей новой анимации готово. Теперь нужно создать второй ключевой кадр и — самое главное — дать понять Flash, чего мы от него хотим.
Создадим новый ключевой кадр, скажем, в позиции № 10 временной шкалы. Flash автоматически скопирует во второй ключевой кадр содержимое первого. А теперь превратим наш эллипс в подобие математического знака "бесконечность", как показано на рис. 12.10.
Ну, теперь можно создать морфинг. Выделим любой из подкадров первого ключевого кадра будущей анимации и выберем в раскрывающемся списке Tween панели Properties пункт Shape. Все — анимация создана!
Созданный нами морфинг обозначается на временной шкале почти так же, как движение (см. рис. 12.1), — в виде тонкой черной стрелки, пересекающей кадры. Только сами кадры будут уже не голубыми, а светло-зелеными.
Остается проверить результат. Нажмем клавишу <Enter>, предварительно убрав фокус ввода из панели Properties. Нарисованный нами эллипс прямо на глазах сплющивается и превращается в знак бесконечности.
Но, как говорил один из персонажей мультфильма "История игрушек", бесконечность — не предел. Мы можем заставить наш эллипс во время изменения формы менять еще и свой цвет. Для этого выделим последний ключевой кадр нашего морфинга, выделим все содержимое рабочего листа и изменим его цвет, воспользовавшись селектором цвета линий панели Properties. И посмотрим, что получится. Эх-х-х, красота!
Чтобы удалить созданный морфинг, мы выделим любой промежуточный кадр задающей этот морфинг последовательности и выберем в раскрывающемся списке Tween панели Properties пункт None.
А теперь мы можем попробовать создать, так сказать, римейк фильма о делении клетки исключительно средствами морфинга. Для этого создадим еще один новый документ Flash. И приступим…
Нарисуем первый ключевой кадр. Как он выглядит, мы знаем. Чтобы нарисовать второй ключевой кадр, воспользуемся одним из трюков Flash, позволяющих разделять изображение на части. (Собственно, мы уже им пользовались.) Сначала выделяем перетаскиванием мыши левую часть нашей "клетки" и относим ее влево, потом выделяем оставшуюся, правую, часть и относим вправо. Осталось только придать обеим половинам "клетки" вид их "родителя" — и второй ключевой кадр готов.
Теперь создаем сам морфинг и проверяем результат. Вот так штука! Наша "клетка" просто разваливается пополам, а вовсе не делится, как это делают настоящие, живые клетки. Да, Flash не так уж и интеллектуален, как мы о нем думали…
Увы, человеческие руки и навыки живого художника не может заменить ни одна, даже самая "интеллектуальная" программа. Даже Flash бессилен сделать что-то, требующее подлинного творчества! Что ж, человеку — человеческое, а компьютеру — компьютерово…
И все же морфинг — неплохая альтернатива покадровой анимации. По крайней мере, простые фильмы можно создавать только с его помощью. А вы как считаете?
Параметры морфинга
Если мы выделим любой промежуточный кадр морфинга, в панели Properties появится группа элементов управления (рис. 12.11). С их помощью мы можем задать некоторые параметры созданного нами морфинга.
Большинство этих элементов управления нам уже знакомо. Мы рассматривали их, когда говорили о параметрах движения. Поэтому сейчас речь пойдет только об элементах управления, задающих специфичные для морфинга параметры.
А такой элемент всего один — раскрывающийся список Blend. Он позволяет сделать фигуры, расположенные на промежуточных кадрах анимации более или менее угловатыми. В этом списке всего два пункта:
□ Distributive — промежуточные фигуры будут по возможности сглаженными (значение по умолчанию);
□ Angular — промежуточные фигуры могут быть угловатыми, если изначальный фрагмент содержал углы и прямые линии.
Нужно иметь, однако, в виду, что заданные с помощью списка Blend настройки справедливы только тогда, когда контур, подвергаемый морфингу, содержит углы и прямые линии. В других случаях эти настройки не действуют.
Также заметим, что для морфинга доступно гораздо меньше параметров, чем для движения. Так, мы не можем управлять морфингом с помощью диалогового окна Custom Ease In / Ease Out, как управляли движением.
Маркеры морфинга и их использование
Когда мы создаем морфинг в среде Flash, эта своевольная программа часто творит, что хочет, наплевав на наши творческие замыслы. Однако есть средство все-таки заставить Flash делать то, чего хотим мы, а не он. Это маркеры морфинга.
Маркер морфинга позволяет нам выбрать точку на анимируемом фрагменте графики и жестко задать ее местоположение в начале и конце анимации. Таких маркеров мы можем создать до 26 штук включительно. Каждый маркер при этом помечается маленькой латинской буквой от а до z.
Давайте испробуем маркеры морфинга в действии. Воспользуемся для этого предыдущим фильмом, основанным на морфинге и демонстрирующим превращение эллипса в математический знак бесконечности. Пусть наш эллипс в процессе превращения еще и переворачивается — вот такое у нас возникло желание.
Выделим первый ключевой кадр анимации и создадим в нем первый маркер морфинга. Для этого выберем пункт Add Shape Hint подменю Shape меню Modify или нажмем комбинацию клавиш <Ctrl>+<Shift>+<H>. На рабочем листе появится небольшой красный кружок с латинской буквой в центре; поскольку это первый маркер, который мы создали, в его центре будет стоять буква а.
Внимание!
По умолчанию маркеры морфинга не отображаются на рабочем листе. Чтобы вывести их на экран, включите пункт-выключатель Show Shape Hints меню View или нажмите комбинацию клавиш <Ctrl>+<Alt>+<H>.
Итак, первый маркер морфинга мы создали. Но он не привязан ни к одной точке на контуре нашей фигуры. Давайте исправим это. "Захватим" только что созданный маркер мышью и "приклеим" его к нужной точке контура, скажем, к правой стороне изначального эллипса. Все — мы задали первую контролируемую нами точку контура (рис. 12.12).
Далее создадим еще один маркер морфинга (он будет обозначен буквой b) и "приклеим" его к другой контролируемой точке эллипса.
Итак, начальное положение маркеров морфинга мы задали. Теперь нужно задать их конечное положение.
Пусть это будет левая его сторона. У нас должно получиться то, что показано на рис. 12.13.
Выделим второй ключевой кадр анимации. Мы увидим, что на рабочем листе находятся два точно таких же маркера, помеченные буквами а и b. Собственно, это те же самые маркеры, что были созданы на первом ключевом кадре, и они задают конечное положение отмеченных нами точек контура фигуры.
Поскольку наш эллипс во время превращения в знак бесконечности должен переворачиваться, мы "приклеим" их на те же точки конечной фигуры, только в обратном порядке. То есть маркер а должен быть помещен на левую сторону фигуры, которой станет эллипс, а маркер b — на правую сторону.
После того как мы "приклеим" маркеры морфинга на втором ключевом кадре на свои места, они станут зелеными. Если же теперь мы вернемся к первому ключевому кадру, то увидим, что "тамошние" маркеры стали желтыми. Это значит, что контролируемые нами точки заданы и на первом, и на втором ключевых кадрах анимации.
Запустим теперь готовую анимацию. Что ж, маркеры помогли — помеченные ими точки оказались как раз на нужных нам местах. Сравним рис. 12.14 и рис. 12.15: на первом при включенном режиме наложения показана наша анимация, выполненная без использования маркеров морфинга, на втором — с использованием этих маркеров. Результат, как говорится, налицо.
Мы можем добавлять новые маркеры морфинга, выбрав пункт Add Shape Hint в подменю Shape меню Modify или нажав комбинацию клавиш <Ctrl>+<Shift>+<H>. Также можно щелкнуть на уже существующем маркере правой кнопкой мыши и выбрать в появившемся на экране контекстном меню пункт Add Hint.
На заметку
При добавлении новых маркеров старайтесь, чтобы в первом ключевом кадре они располагались в порядке по часовой стрелке. Впоследствии вам будет проще отследить, откуда и куда они перемещались.
Мы можем перемещать маркеры мышью, "приклеивая" их к разным местам контура. (Собственно, мы уже этим занимались.) А удалить ненужный маркер можно двумя разными способами. Во-первых, мы можем щелкнуть на нужном маркере правой кнопкой мыши и выбрать в контекстном меню пункт Remove Hint. Во-вторых, мы можем просто "утащить" ненужный маркер прочь с рабочего листа.
Быстро удалить сразу все созданные нами маркеры морфинга можно выбором либо пункта Remove All Hints в контекстном меню любого маркера, либо одноименного пункта подменю Shape меню Modify.
Мы можем временно скрыть на рабочем листе все маркеры морфинга. Для этого достаточно отключить пункт-выключатель Show Shape Hints меню View или нажать комбинацию клавиш <Ctrl>+<Alt>+<H>. Еще можно отключить пункт-выключатель Show Hints в контекстном меню любого маркера. (Непонятно только, как его там снова включить. Еще одна загадка Flash…)
Кстати, используя маркеры морфинга, можно попытаться создать римейк фильма "Деление клетки", используя только морфинг. Скорее всего, нам придется задать несколько маркеров морфинга и поэкспериментировать с ними, помещая в разные точки контуров и внимательно следя за результатами. Получится, конечно, коряво, но хотя бы попробовать стоит. Пусть это будет вашим домашним заданием.
Что дальше?
Ну вот, с трансформационной анимацией мы покончили. Мы узнали, что она может быть двух видов — движение и морфинг, — и выяснили, как она создается. И даже немного попрактиковались.
Однако разговор о создании анимации еще далеко не закончен. Мы научились создавать только самые простые фильмы. А этого, согласитесь, недостаточно. Поэтому следующие две главы будут посвящены более сложным вопросам: а именно, составной анимации и использованию для ее создания слоев.
Назад: Глава 11 Покадровая анимация
Дальше: Глава 13 Создание составной анимации
