Создание простейшей анимации в примерах
Здравствуй, уважаемый читатель. Эта статья открывает серию публикаций в разделе "Flash" на нашем сайте. Пусть изучение этой программы не будет для тебя утомительным. А поможет нам в этом - постоянный и активный посетитель нашего [Форума] - ils, который и написал эту статью. Сегодня будем разбираться с простейшими функциями Флеша, отвечающие за анимацию обьектов...
Известно, что во флеше используются два вида анимации: первый это движение (Motion), второй - морфинг (Shape). Они имеют свои особенности, которые мы сейчас и рассмотрим:
Движение (Motion). Для создания движения передвигаемый объект не может быть простой графикой. Это основная особенность "движения", т.е. если вы нарисуете прямоугольник, то не сможете просто заставить его двигаться, для этого его необходимо преобразовать в символ (Symbol), который и будет перемещаться по листу.
Нарисуйте в верхнем левом углу прямоугольник (Rectangle Tool, <R>), затем выделите его, используя для этого инструмент Arrow Tool (чёрная стрелка) в группе Tool, или просто нажав на клавиатуре <V>. Обратите внимание, что выделять объект необходимо целиком, захватывая в область выделения, иначе вы выделите не весь объект, а только его часть. После того как весь объект станет выделенным, нажмите по нему правой кнопкой мыши и в контекстном меню выберете "Convert to symbol:". Также, преобразовать объект в символ можно, выбрав в верхнем меню команду "Insert> Convert to symbol:" или нажать <F8>. Перед вами появиться одноимённое окно. Здесь вам надо задать имя будущему символу (Name), тип символа (Behavior), а так же точку регистрации объекта (Registration). Задайте любое имя, тип символа выберете Graphic, а точку регистрации оставьте по умолчанию. Нажмите "OK". После этого наш прямоугольник готов для создания движения.
Выше нашего рабочего листа располагается так называемая Временная линия (Timeline), она и служит инструментом по созданию анимации. Слева в этом окне находится список слоёв анимации, ну а справа сама линия времени, в которой и задаётся длительность фильма.
Выберите в линии времени, например, 20-й кадр. Нажав на нём правой кнопкой мыши, выберите "Insert Keyframe" (Insert>Keyframe, <F6>). Затем вернитесь на первый кадр и в нижнем окне Properties, в раскрывающемся списке Tween, выберите Motion, после этого на протяжении всей нашей анимации, с 1 по 20 кадр, протянется стрелка. Теперь нам останется только "поставить" наш символ в то место, куда он должен будет двигаться. Выделите 20 кадр и перетащите прямоугольник в правый нижний угол. Щёлкните по пустому месту рабочего листа и нажмите <Enter> для просмотра непосредственно в рабочей области, или <Ctrl+Enter> для публикации в клип и его просмотра во флеш плеере. Только не забудьте сохраниться перед публикацией, т.к. созданный клип будет помещён в туже папку, где и исходник.
Это был длинный путь по созданию анимации. Есть более короткий, но предыдущий путь более информативен и даёт более широкое понятие по принципу построения анимации в движении. Далее описываемый путь делает за вас некоторую работу - это преобразование объекта графики в символ и установка типа анимации.
Вновь создайте прямоугольник, только теперь вам не надо преобразовывать его в символ, а просто выделите первый кадр анимации и выберете в меню Insert>Create Motion Tween. И он сам преобразует объект в символ и задаст определённые свойства анимации. И вам останется только задать длительность фильма, указав количество кадров, также как это делалось выше, и поместить наш прямоугольник в ту точку, куда он должен двигаться.
Усложняем задачу: Теперь давайте усложним движение нашего прямоугольника. Заставим его двигаться с ускорением и вращаясь вокруг собственной оси. Выделите первый кадр, созданной ранее анимации, и в окне Properties ниже параметра Tween, в раскрывающемся списке Ease задайте -100 для ускорения или 100 для замедления движения. А в раскрывающемся списке Rotate задайте CW для движения по часовой стрелке или CCW для движения против часовой стрелки.
Наш прямоугольник можно заставить двигаться не только от точки "А" в точку "Б", но и по определённой траектории. Ну а это ещё проще сделать. Просто нажмите правой кнопкой мыши в окне Timeline по слою, где находиться наш прямоугольник, и в контекстном меню выберите Add Motion Guide (Insert>Motion Guide). После этого у нас появится новый слой с названием "Guide: Имя слоя", в первом кадре которого нам надо карандашом (Pencil Tool, <Y>) нарисовать траекторию движения прямоугольника. Нарисуйте, например, зигзагообразную кривую. А затем поместите наш прямоугольник на начало траектории в первом, и в конец в последнем кадре. После этого он будет двигаться по заданной нами траектории, которая после публикации не будет видна.
Мы разобрались с движением. Конечно, можно задавать более сложные условия анимации, но пока это всё - в ближайшее время надеюсь выложить статью о масках, работой с цветом и ещё кое о чём. Ну а пока разберёмся с противоположенным способом анимации - морфингом:
Морфинг (Shape). В отличие от Движения, Морфинг наоборот работает только с графическими объектами, но не с символами, т.е. чтобы заставить объект изменить свою форму вам необходимо в первом кадре фильма отобразить то, что он должен представлять в начале, и в последнем то, во что он должен превратиться.
Создайте новый документ, в первом кадре нарисуйте овал (Oval Tool, <O>). Затем нажмите, например, на 20 кадр. Вставьте в него пустой ключевой кадр, нажав правой кнопкой мыши по нему и выбрав Insert Blank Keyframe (Insert>Blank Keyframe, <F7>). После этого нарисуйте в этом кадре прямоугольник. Перейдите обратно на первый кадр, в окне Properties, в раскрывающемся списке Tween, выберите Shape. После этого посмотрите, что у вас получилось - овал должен плавно преобразовываться в прямоугольник.
Но не всегда нам удобно то, как он преобразует объекты. Для этого и существуют маркеры трансформации. Они позволяют контролировать морфинг и направлять изменение формы в нужную нам сторону.
Чтобы добавить такой маркер перейдите на первый кадр и в меню Modify>Shape выберите Add Shape Hint (<Shift+Ctrl+H>). Установите этот маркер на какую-нибудь границу овала, затем перейдите в последний кадр фильма и установите его на противоположенную границу прямоугольника. Если вы разместили их правильно, то в первом кадре маркер примет жёлтый цвет, а в последнем - зелённый. Посмотрите что у вас получилось и поэкспериментируйте, измените цвета овала и прямоугольника на разные, добавьте ещё несколько маркеров и вы увидите насколько может быть гибким процесс преобразования объектов.
Для этого вида анимации также можно задавать ускорение, как и в предыдущем. С помощью того же параметра Ease в окне Properties. Но и есть и другой параметр Blend, который позволяет сделать формы на промежуточных кадрах более или менее угловатыми. Описывать этот параметр не имеет смысла так, как применяется он для более сложных трансформаций, нежели преобразование овала в прямоугольник, так что разбирайтесь сами. Скажу одно - Distributive - параметр, позволяющий промежуточные формы сделать по возможности сглаженными. А Angular - промежуточные формы могут быть угловатыми, если изначальный фрагмент содержал углы и прямые линии.
Примечание:
DVK: Таким образом, автор статьи, aka ils, научил уважаемых читателей пользоваться простейшими функциями флеша, отвечающие за анимацию. Очень хочется надеяться, что читатели усвоили урок и научились создавать мультики с двигающимися обьектами по простым и не очень траекториям. Так же вы получили первые представления о том, как можно трансформировать обьекты. В данном случае рассматривалось преобразование овала в прямоугольник, растянутое на 20 кадров.
Автор: ils
Источник: www.mweb.ru
|
