UMKD_KSIM

волинейный сегмент.

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

Рис. 60. Образец криволинейной линии

Задание 2. Инструменты изменения формы

2.1. Инструмент «Стрелка»

Для изменения формы рисованного объекта можно использовать ин-

струмент «Стрелка» . Не выделяя объекта, достаточно подвести курсор к его границе, чтобы под курсором появилось изображение дуги или угла, а затем нажать кнопку мыши и перемещать границу или угол объекта в нужном направлении. Результат выполнения данной операции зависит от того, в какой точке границы вы дотронулись указателем до объекта, т.е. изменение формы производится «на глаз», неточно (рис. 61).

Рис. 61. Изменение формы объекта инструментом «Стрелка»

2.2.Инструмент «Белая стрелка»

Вотличие то инструмента «Стрелка» с помощью этого инструмента можно регулировать форму объекта с большей точностью. Как только объ-

ект выделяется инструментом «Белая стрелка» , на границе объекта появляются опорные точки, причем не имеет значения, с помощью какого инструмента объект был создан.

С помощью инструмента «Белая стрелка» можно изменять свойства опорных точек: перемещать точки, менять направление вспомогательной линии, изменяя тем самым форму фигуры.

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

1.Выделите синусоиду инструментом «Белая стрелка» . На линии появились опорные точки.

2.Щелкните мышью по опорной точке на гребне волны.

170

3.Ухватите мышью за точку на правом конце вспомогательной линии

иповерните ее на 180о. на верхушке синусоиды образовался завиток. Аналогично создайте завитки на остальных верхушках (рис. 62).

2.Кривая Безье может включать в себя как прямолинейные сегменты, так и дуги. Тип сегмента зависит от способа создания опорной точки: щелчком мыши (угловая точка) или перемещением мыши при нажатой кнопке (точка сглаживания).

3.Чтобы удалить угловую точку, подведите курсор к этой точке и щелкните по ней мышью.

4.Чтобы преобразовать угловую точку в точку сглаживания,

щелкните по ней мышью.

5.Чтобы удалить точку сглаживания, подведите к ней курсор и дважды щелкните по ней.

6.Чтобы добавить опорную точку, подведите курсор к нужной позиции на линии (под курсором при этом должен появиться знак «+») и щелкните кнопкой мыши.

7.В качестве тренировки преобразуйте синусоиду с завитками в прямую линию.

2.4.Инструмент «Трансформация»

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

171

Перспектива. Подведите курсор к угловому ограничителю рамки. Когда курсор превратится в белую стрелку, перетащите ограничитель в нужном направлении (рис. 63, а).

Произвольное изменение формы. При включенном режиме на ог-

раничивающей рамке появляются дополнительные точки, перемещая которые можно изменить форму прилегающей к ограничителю кривой. Работа инструмента в этом режиме аналогична использованию инструмента «Белая стрелка» (рис. 63, б).

Задание 3. Анимация формы

3.1.Анимация с изменением формы объекта

1.Нарисуйте объект, например прямоугольник.

2.На панели Properties (Свойства) из раскрывающегося списка Tween выберите вариант Shape (форма) (рис. 64, а).

3.По команде Insert Keyframe вставьте конечный ключевой кадр анимации. Временная последовательность между ключевыми кадрами окрасится в светло-зеленый цвет, появится сплошная стрелка. Последний ключевой кадр тоже окрашен в зеленый цвет (рис. 64, б).

4.Находясь в последнем ключевом кадре, немного искривите верхнюю сторону прямоугольника, направив ее к центру (рис. 64, в). Для изме-

нения формы используйте инструмент «Стрелка» (или «Белая стрел-

ка» ).

а

б

172

в

Рис. 64. Создание анимации формы

Анимацию формы можно сочетать с перемещением объекта, изменением его цвета, поворотом, модификацией размера, перекосом (тем, что может делать инструмент «Трансформация»). Все эти изменения производятся в конечном ключевом кадре.

3.2.Анимация с заменой одного объекта другим

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

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

3.3.Анимация с изменением градиентной заливки

1.Нарисуйте прямоугольник. Выполните радиальную градиентную заливку с центров в левом верхнем углу.

2.Создайте анимацию формы.

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

лу (рис. 65).

4.Протестируйте анимацию.

5.Градиентная заливка имеет параметры, которые регулируются ин-

струментом «Редактирование заливки» . Применяя этот инструмент, вы можете добиться еще более интересных результатов.

Рис. 65. Анимация градиентной заливки

Задание 4. Задания для самостоятельного выполнения

Далее предлагаются примеры анимаций с использованием изменения

173

формы. Самостоятельно воспроизведите предложенные сюжеты. Наиболее важные моменты построения анимаций подробно рассматриваются.

4.1. Текст

Запустите файл 6-текст.swf. В процессе анимации овал трансформируется в текст. Для создания подобной анимации текст необходимо преобразовать в графический объект. Для этого примените дважды к выделенному тексту команду Modify → Break Apart (Изменить → Разделить отдельно).

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

4.2. Профиль

Запустите файл 6-профиль.swf. Профиль лица меняет свои очертания: сначала лицо улыбается, затем на нем отображается неудовольствие и вырастает длинный нос. Одновременно меняет форму разрез глаз и двигается зрачок.

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

В анимации формы участвуют профиль и глаз; зрачок движется по правилам анимации движения; волосы неподвижны (рис. 66).

Рис. 66. Шкала времени задачи «Профиль»

4.3. Труба

Запустите файл 6-труба.swf. Труба медленно разворачивается таким образом, что становится частично видна ее внутренняя часть. Затем сквозь трубу катится мячик.

174

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

Труба

Чтобы можно было «заглянуть» внутрь трубы, ее надо развить на две составляющие: ближняя к зрителю стенка и дальняя – та, чья внутренняя область постепенно появляется перед глазами. Каждая половинка находится на своем слое и в начале анимации представляет собой прямоугольник. Так как внутренняя неосвещенная поверхность объекта всегда темнее, чем сам объект, две части трубы следует окрасить в один и тот же цвет, но с разными оттенками. Часть трубы, расположенная дальше от зрителя, в первый момент не видна – она прикрыта передней половиной трубы.

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

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

Верхняя половина трубы

Нижняя половина трубы

Результат наложения верхней половины на нижнюю после поворота

Рис. 67. Схема изменения формы трубы

Мяч

С примером движения с одновременным вращением вы уже знакомы

175

(вращение колес автомобиля). Качение мяча ничем не отличается от вращения колес. Но обязательно обратите внимание на то, в какую сторону будет катиться мяч.

Отдельный слой составляет изображение земли.

На рис. 68 представлена шкала времени с описанием анимации данного примера.

Рис. 68. Шкала времени задачи «Труба»

Усложните задачу с трубой. Пусть мячик, пройдя сквозь трубу, падает вниз, причем не строго вертикально, а по траектории – по дуге. Мяч может плыть по воде, прыгать по земле, ударятся об стенку и т. д.

4.4. Хищник

Запустите файл 6-хищник.swf. Хищное одноклеточное животное, жизнь которого протекает в постоянном движении и изменении формы, почувствовало «добычу» (шарик). Животное и шарик двигаются навстречу друг к другу. Хищник захватывает «добычу» своими щупальцами, и шарик начинает хаотично метаться, как бильярдный шар на игровом столе.

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

Остановимся на некоторых существенных моментах.

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

1-й этап. Шарик перемешается навстречу амебе (анимация движения), пока не коснется ее тела. Амеба движется в сторону шарика, одновременно удлиняя свои «щупальца» (анимация формы). Как только шарик

176

коснулся тела амебы, она начинает замыкать свои «щупальца», не давая шарику выйти.

2-й этап. Шарик мечется внутри полости амебы, отскакивая от стенок, как бильярдный шар (угол падения равен углу отражения). Задание: перемещение шарика между стенками оформить как движение по траектории.

На рис. 69 изображена шкала времени данного примера и состояния объектов в ключевых кадрах.

(4) (5)

Рис. 69. Схема решения задачи «Хищник»

Задание 5. Особенности последовательного сочетания анимации формы и анимации движения 5.1. Анимация формы анимация движения

Запустите файл 6-капля.swf. Дождевая капля постепенно увеличивается в размере, удлиняется и, наконец, падает.

1-й этап. Капля растет и удлиняется. Реализация с помощью анимации формы.

177

2-й этап. Падение капли. Сейчас вы находитесь в конечном ключевом кадре анимации изменения формы капли. В следующий по порядку кадр вставьте ключевой кадр (команда Insert Keyframe). Это первый кадр в перемещении, но пока он окрашен в зеленый цвет – признак анимации формы. На панели Properties (Свойства) в поле Tween выберите вариант Motion (аналог команды Create Motion Tween) и далее описывайте анимацию движения стандартным образом.

На рис. 70 приведена шкала времени, реализующая описанную анимацию.

Рис. 70. Шкала времени задачи «Капля»

5.2. Анимация движения анимация формы

Запустите файл 6-дно.swf. Загадочное животное плавно опускается на дно и плывет над дном, извиваясь.

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

1.Нарисуйте объект.

2.Выделите объект и сгруппируйте его по команде Modify → Group (Изменить → Группировать).

3.В кадре, где должна закончиться анимация, выполните команду Insert Keyframe.

4.Вернитесь в 1-й кадр и на панели Properties (Свойства) из списка Tween выберите вариант Motion (движение).

5.Перейдите в последний кадр, измените характеристики объекта (переместите объект вниз, ближе ко дну). Обратите внимание на цвет последнего ключевого кадра: он остался серым.

2-й этап.

1.В следующем кадре по команде Insert Keyframe создайте ключевой кадр. Это 1-й кадр анимации формы.

2.Инструментом «Стрелка» выделите объект и разгруппируйте его, выполнив команду Modify → Ungroup (Изменить → Разгруппиро-

178

вать).

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

На рис. 71 изображена шкала времени, реализующая описанную анимацию.

Рис.71. Шкала времени задачи «Дно»

Задание 6. Задания для самостоятельного выполнения

1.Превратить пирамиду в куб.

2.Превратить произвольный объект плоскости в другой.

3.Создать биение сердца.

4.Превратить цыпленка в курицу.

5.Превратить слово Flash в слово Флэш.

6.Последовательно превратить цифры 9 в 8, 8 в 7, и т. д.

7.Последовательно превратить изображения: Зерно в Росток, Росток

вРастение, Растение в Дерево, Дерево в Цветок, Цветок в Плод, и т. д.

179