Анимация во Flash
Анимация бывает нескольких типов. Анимировать можно положение или форму фигуры, перемещая точки, тем самым трансформируя ее в другую фигуру. Можно так-же, анимировать свойства этой фигуры, такие, как цвет, прозрачность, расположение и настройки градиента, цвет, толщину и тип обводки. Это все касается фигур, нарисованных в рабочей области или внутри символов и называется Shape Tween. В процессе анимации можно пользоваться, либо ключевыми кадрами, либо покадровой анимацией. Ключевая анимация, конечно, проще, так как, изменять нужно не все кадры, часть их, между ключевыми, изменяется автоматически. Но, иногда бывает необходимость и в покадровой анимации. Когда какую использовать – на ваш выбор.
Motion Tween – второй способ анимации. Используется для анимации символов, таких, как Graphic, Movieclip и Button. Здесь доступны другие свойства. При помощи Motion Tween можно анимировать положение символов, их масштабирование, вращение, а так же параметры, находящиеся в селекторе Color панели Properties. К ним относятся: яркость, тонирование символа цветом, прозрачность и набор параметров Advanced, который сочетает в себе три предыдущие. При ключевой анимации поддерживается Easing, то есть, анимация с ускорением и замедлением, что весьма полезно при реалистичной анимации персонажей, да и любых других объектов, которые должны двигаться реалистично.
Shape Tween
Нарисуйте в рабочей области прямоугольник, с обводкой черного цвета и толщиной линии в 2-3 пикселя. Если он нарисуется с заливкой, выделите ее одиночным щелчком и удалите. Сейчас нам понадобится только обводка.
На таймлайне, щелкните правой кнопкой на вновь созданном кадре и выберите Create Shape Tween. Ключевой кадр станет зеленого цвета. Далее, выделите щелчком, кадр 10 на том-же слое и нажмите «F6″ для создания второго ключевого кадра.
Если вы все сделали правильно, на таймлайне будет вот такое:
Это и есть ваша первая анимация, поздравляю! Но, два ключевых кадра, еще не есть анимация. Щелкните на таймлайне на кадре 10, выделив его. Вместе с ним выделится все, что находится в рабочей области на этом кадре. Снимите выделение с фигуры и подведите курсор мыши к верхней горизонтальной линии нашего прямоугольника, чтобы рядом с курсором появился значок дуги. Это позволит изгибать сегменты фигуры. Схватите сегмент за середину и протащите немного вниз, чтобы он изогнулся. теперь можно посмотреть, что получилось. Протащите Playhead по вашим 10-ти кадрам анимации и посмотрите, как фигура трансформируется.
Вот, что получилось у меня. Если я что-то объяснил непонятно, вот исходник. Можно усложнить анимацию, добавив еще и заливку. Но делать это нужно на другом слое. Дело в том, что при построении ключей в сложной геометрии (а две одинаковые формы, лежащие друг на друге – очень сложная геометрия, спросите любого трехмерщика), программа ищет наиболее короткие пути для преобразований, поэтому, неизбежны искажения.
В этом примере, в первом ключевом кадре находятся две окружности, во втором, одна из них наезжает на другую. Так как обе фигуры в одном слое и представляют «как бы» одну фигуру для анимации, получилось вот такое. Если разнести их по разным слоям, этого не произойдет. По-хорошему, правильно анимироваться будут тлько самые простые формы, но так не всегда бывает. Если у вас целое поле анимированных объектов, анимацию не разнести по разным слоям. Их будет слишком много. Можно поэкспериментировать с «кучностью объектов», посмотреть, как они себя ведут друг с другом. Возможно, применить другой тип анимации.
Вот еще один пример неправильного Shape Tween. Я привел его, чтобы показать, как можно бороться с некоторыми недостатками этого метода. Итак, эта фигура просто поворачивается на 90 градусов, но так, как программа двигает точки по кратчайшему пути, получается такая кракозябра. Разработчики, видимо, ничего не смогли с этим сделать, поскольку придумали специальные прищепки, которые вешаются на точки и помогают программе их не путать при трансформации. Называются они Shape Hints. Устанавливаем первый при помощи команды Modify > Shape > Add Shape Hint или комбинацией Ctrl+Shift+H. Появляется красная точка с буквой «а«. Ее можно перетаскивать. Перетаскиваем ее на первую проблемную точку. Повторяем процедуру. Точка с буквой «b«. Ставим ее на вторую точку. И так далее, пока все проблемные точки не будут защиплены этими точками. Это, кстати, надо делать на первом ключевом кадре анимации. На втором ключевом кадре нужно определить, во что превратились наши первоначальные и передвинуть нужные хинты на них. У меня получилось вот так:
Что ж, результат вполне приличный, не считая того, что хинты пришлось поставить на каждую точку фигуры. Поэтому, я стараюсь, по возможности, избегать таких сложных трансформаций. Вот еще пара примеров простых трансформаций, которые без особых проблем, выполняются при помощи Shape Tween:
Motion Tween
С этим типом анимации все немного проще, с одной стороны. Сторона эта называется «символы». Именно с ними и работает этот тип анимации. Алгоритм действий тут такой-же. Только сначала нужно создать этот самый символ. Нарисуйте небольшую окружность на рабочем поле, затем выделите ее, нажмите F8 и преобразуйте выделение в символ Graphic, с центром посередине. Переместите его в левый верхний угол. Потом, точно так-же, кликните правой кнопкой мыши на кадре и выберите команду Create Motion Tween. Если снять выделение с кадра, вы увидите, что он стал голубым. На кадре 20 нажмите F6 для создания еще одного ключевого кадра и передвиньте символ в правый верхний угол. Далее, опять F6 на кадре 30 и передвигаем символ вниз, в правый нижний угол. Еще один ключевой кадр на 50-м кадре и сдвигаем символ вправо, до угла. Остался последний кадр. Можно поступить, как и в остальных случаях, но мне хочется, чтобы символ встал точно на то место, откуда он начал свое движение, поэтому, для создания ключевого кадра, я сделаю следующее: правой кнопкой нужно щелкнуть на первом ключевом кадре и выбрать команду Copy Frames, затем на кадре 60 опять щелкнуть правой кнопкой и выбрать команду Paste Frames. Последний ключевой кадр создастся и будет точной копией первого. Круг замкнулся. Вернее, прямоугольник.
Получилась вот такая анимация. Ее исходный файл можно взять здесь.
Easing
Сравните эти похожие, на первый взгляд, анимации. Видите разницу?
Да, возде углов, объект замедляется. Это возможно, благодаря функции Ease, которую можно применить к ключевому кадру, независимо от типа анимации, Shape Tween или Motion Tween. Делается это так: выделяете ключевой кадр, в панели Properties появляется такое:
Первый параметр Ease – это и есть наше сглаживание движения. Если установить там значение 100, анимация начнется линейно, а закончится с замедлением, если -100, наоборот – начнется линейно, а закончится с ускорением. Возможны и промежуточные значения. Все зависит от того, насколько сильным должен быть эффект.
рядом есть кнопка Edit. Если вы нажмете ее, появится вот такой график:
С его помощью можно точнее настроить поведение анимации. Если вы пользовались подобными установками, вы знаете, как оно работает. По вертикали идет процентное значение анимации, по горизонтали – кадры, в которых она совершается. Таким образом можно установить несколько точек изменения скорости анимации и отрегулировать их по вашим потребностям. Если снять галку с пункта Use one setting for all properties, становится доступной раздельная регулировка различных параметров. Таких, как положение, вращение, масштабирование, цвет и фильтры.
Анимация по пути
Этот тип Motion tween анимации представляет из себя, движение объекта по пути, который вы заранее построили на отдельном слое, при помощи инструмента Pen, например. Итак, создаем новый слой и рисуем пером, какую-нибудь, кривулину. У меня получилось вот так:
Теперь нам нужен еще один слой с графическим объектом на нем и Motion Tween – анимацией, чтобы прицепить к нему этот путь. Объект можно взять из предыдущего примера. Затем, на слое с путем нужно щелкнуть правой кнопкой мыши и выбрать в меню пункт Guide. Иконка слоя изменится и он станет слоем пути. Далее, нужно перетащить наш слой с графическим объектом, под слой пути. Чтобы он стал под ним и немного правее. Примерно, вот так:
Есть альтернативный путь для создания Guide-слоя. Надо щелкнуть правой кнопкой мыши на слое с графическим объектом и выбрать в меню Add Motion Guide. В этом случае, Guide-слой создастся автоматически.
Теперь нам надо настроить анимацию в двух ключевых кадрах. Дело в том, что, раз наш объект привязан к пути, то анимация возможна только в пределах этого пути. Куда бы вы не двигали объект, он все равно останется на нем. Итак, наша задача, установить начальную и конечную точки анимации. Выделяем первый ключевой кадр анимации и перемещаем объект в начальную точку, потом второй ключевой кадр и двигаем объект к конечной точке анимации.
Вот и все, собственно. В заключение могу добавить, что, вместе с этим типом анимации возможны и все другие, которые применимы к Motion Tween, то есть, Easing, изменения цвета, масштаба и т.д.
Маски
Маскирование объектов или их частей возможно, путем создания графических объектов, любого типа и назначения их, в качестве маски. Рассмотрим пару примеров.
Я создал текстовый объект, затем еще слой выше и на нем нарисовал прямоугольник, закрывающий весь текст. Для назначения этого слоя, в качестве маски, нужно щелкнуть на нем правой кнопкой мыши и выбрать Mask в меню.
Маска создается, «подминая» под себя ниже лежащий слой. При этом, оба они становятся заблокированными, как видите.
Маска работает только при этих условиях. Для ее анимации, вы, конечно можете ее разблокировать, однако, чтобы ее увидеть, придется все вернуть на место. Маска может действовать не только для одного слоя. Вы можете поместить под нее и другие слои. Так-же, возможна различная анимация, как применительно к маске, так и к маскируемым объектам.
В первом случае я просто подвинул маску сверху вниз, чтобы буквы открылись «шторкой». Анимирована маска при помощи Shape Tween, так как это не символ и создавать его нет нужды.
Во втором случае я применил покадровую анимацию маски, просто кистью закрашивая по букве в каждом кадре. Процесс это не быстрый, однако получилось довольно мило, на мой взгляд.
Обратите внимание на первый кадр маски, в проекте. там стоит точка на пустом месте. нужно это для того, чтобы скрыть основной объект. Если в этом кадре ничего не будет, маска не будет работать для этого кадра и содержимое маскируемого слоя будет видно.
Фильтры и эффекты
В качестве Motion Tween-анимации, к символам любого типа, можно применять различные фильтры и эффекты из панели Properties. Начнем по порядку:
В первом примере я создал Graphic-символ с полупрозрачным квадратом внутри, затем создал 4 одинаковых слоя с этим объектом и одинаковый Motion Tween на всех этих слоях. В первом кадре всех слоев я убрал прозрачность объектов до нуля и масштаб снизил до 20%. Вот, с этого места – подробнее. Для того, чтобы применить фильтр к объекту, надо выделить его на рабочей области и в панели Properties, в окошке Color выбрать нужный фильтр. Я выбрал Alpha:
В соседнем окошке можно установить значение. Я установил 0. Притом, если ключевые кадры разных объектов стоят на одном кадре по времени, можно выделить сразу несколько объектов для применения к ним одного фильтра. Я так и сделал.
Затем, в панели Transform я установил для всех объектов, начальный масштаб 20%. Можно, конечно было их и вручную сжать, но так точнее.
Все это было проделано на первом кадре для всех объектов. На втором ключевом кадре я изменил немного масштаб объектов, а фильтр Alpha удалился оттуда сам. Вот так выглядел таймлайн, в окончательном варианте:
Заключительным действием было раздвигание слоев во времени, чтобы эффекты действовали друг за другом. На последнем ключевом кадре каждого слоя я убрал Motion Tween и растянул их до конца анимации, чтобы объекты были видимыми. Кликнув на картинку, вы можете увидеть результат.
Со вторым примером, думаю, разберетесь и сами.
Эффекты представлены несколькими стандартными фильтрами (Blur, Glow, Drop Shadow etc.), которые применяются немного иначе. Начнем с того, что применяться они могут только к символам, типа Movieclip. Для назначения эффекта нужно выделить объект и перейти на вкладку Filters:
Нажать на плюсик и выбрать нужный эффект. Далее, все, как в предыдущем подразделе: на каждый ключевой кадр можно назначить изменение параметров фильтра. Однако, удалять их нельзя, иначе он удалится во всех кадрах анимации. Вот, пример, который расположен ниже.
Заключение
Ключевые кадры, создаваемые на таймлайне, необязательно могут содержать только Tween-анимацию между собой. Можно комбинировать их между tween и линейной анимацией. Например, нам нужно, чтобы объект переместился и остался до конца анимации, в одном месте. Создаем Motion Tween с двумя кадрами, перемещаем объект, куда надо, а на последнем кадре щелкаем правой кнопкой мыши и выбираем Remove Tween. А потом мы решаем, что, после того, как он постоит немного на месте, он опять должен переместиться или изменить цвет. Щелкаем на кадре, где должна начаться анимация и нажимаем F6, для создания ключевого кадра. Затем создаем на нем Tween, щелкая правой кнопкой и выбирая в меню Create Motion Tween (или «Create Shape Tween«) и создаем еще анимацию. В итоге, кадры на слое могут выглядеть вот так:
Смотрите, разбирайте проекты, думаю, там все понятно.