Экспресс-мини-курс по флеш-анимации — FlashMaster (Виталий Кадников)

Здравствуйте, с вами Виталий Кадников, сайт FlashMaster, и я снова рад приветствовать вас в моем новом экспресс-мини-курсе по флеш-анимации. Всем известно, что интерфейс и сама программа флеш-редактора Adobe Flash — сложная программа, и новичков отпугивает просто непонятность, его непонятность и сложность этой программы. На самом деле, нет ничего сложного, и я хочу развеять миф о том, что это очень сложный флеш-редактор и в нем очень сложно работать. На самом деле, поняв его принцип, очень легко создавать анимацию в данном флеш-редакторе.

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

И теперь в слое 5 первый текст. Вот так назовем первый текст и создадим, то есть в нем, в первом же кадре, мы создадим новый слой или новый элемент, новый текстовый элемент, и так экспресс-мини-курс. Давайте скопируем его Ctrl-C и создадим новый текстовый слой и напишем второй текст. Вставляем Ctrl-Shift-V в этот слой. Теперь у нас два слоя: Express Mini Course и второй слой мы, в принципе, можем отредактировать, зайдя внутрь его. Дважды кликаем по этому слою и меняем текстовку. На самом деле, как видите, нет ничего сложного в том, чтобы создать какие-то элементы.

Теперь мы будем создавать анимацию. Давайте поработаем с первым же элементом. Вот, кликаем по нему, мы видим, что он выделяется в слое первый текст. Теперь мы создаем анимацию где-то в 10 кадре, например, мы вставляем ключевой кадр. Это можно проделать с помощью правой клавиши мыши — вставить ключевой кадр, либо горячая клавиша F6. Вставляем ключевой кадр, и на самом деле очень легко создать анимацию движения. Кликаем по серому полю между кадрами или по промежутку между кадрами и выбираем.

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

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

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

Что нам теперь необходимо сделать, это в первом кадре задать прозрачность нашему вот этому элементу. Кликаем по нему, выбираем, вызываем панель свойств, и в разделе цветовой эффект мы выбираем альфа-канал. Альфа-канал нулевой по умолчанию может быть, может у вас стоять и 50, и сколько угодно. Мы убираем на 0, то есть здесь у нас будет происходить такая вот анимация проявления. Для того чтобы немножко разделить эти слои, мы выделяем второй текст и зададим ему анимацию.

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

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

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

Мы копируем анимацию текстового слоя текста 2. Для этого выделяем все кадры и кликаем на него правой клавишей мыши. Выбираем "Копировать кадры". В 21 кадре мы вставляем скопированные кадры. Кликаем правой клавишей мыши на следующий кадр после занятого. Первый же пустой кадр мы кликаем и выбираем "Вставить кадры". То есть мы вставили ту же самую анимацию.

Первый кадр у нас выделен, поэтому мы начнем с последнего кадра. Выделяем всю эту анимацию, кликаем на эту анимацию, то есть на дубль этой анимации, и жмем "Обратить кадры". То есть вот таким вот образом мы создаем исчезновение. Да, такое вот так вот делается исчезновение. И то же самое мы проделаем с нашим экспресс мини-курсом или текстом 1. Копируем правой клавишей мыши, кликаем на это выделенное поле, на выделенные кадры, выбираем "Копировать кадры" и вставляем кадры на первый же пустой кадр.

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

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

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

Давайте посмотрим, что у нас получилось. Жмем Ctrl-Enter, и мы видим вот такой вот приход и уход. Вот так вот, собственно говоря, мы и получаем такую флеш-анимацию. На этом я считаю, что урок можно закончить. Собственно говоря, экспресс мини-курс мы прошли вместе с вами и развеяли миф о сложности анимации в Adobe Flash, в редакторе Adobe Flash. И на этом я прощаюсь. Давайте изучать новые видеокурсы, новые уроки. С вами был Виталий Кадников, сайт "Флеш Мастеру".