Бесплатные видео-уроки

Adobe Edge Animate

Создание графики, анимации и интерактивного контента для веб

  • бесплатно
  • перспективно
  • быстро
  • доступно

Анимация прямоугольников в Edge Animate-2

Анимация с помощью ключевых кадров

В прошлом уроке Вы успешно создали и разместили на сцене цветные полоски и теперь пришло время их анимировать. Ранее, в уроке Создание первой анимации в Edge Animate - часть 2 Вы узнали как контролировать положение объекта с помощью ключевых кадров на шкале времени.

Если кнопка Auto-Keyframe Mode (Режим автоматического создания ключевых кадров) нажата, то при изменении значения любого свойства элемента Adobe Edge Animate создает ключевой кадр, в котором записывает это новое значение. Кроме того Вы можете создавать ключевые кадры в ручную, кликая на кнопках-ромбиках Add Keyframe for в панели Properties.

Итак, в начале нашей анимации мы создадим ключевые кадры для свойств Position (Местоположение), Size (Размер) и Opacity (Прозрачность). Затем, переместившись по шкале времени мы создадим другие ключевые кадры для этих же свойств. В результате мы получим анимацию. Приступим.

Убедитесь, что головка плейера находится в значении 0:00. Выделите красный параллелограмм Red и, затем, в панели Properties кликните на кнопках-ромбиках рядом со свойствами X, Y, W, H и Opacity.

Свойства X и Y находятся в подразделе Position and Size и контролируют местоположение элемента на сцене. Кнопки для W и H создают ключевые кадры для ширины и высоты. Слайдер Opacity расположен вверху панели Properties. На скриншоте ниже показаны кнопки-ромбики, ключевые кадры, а также эти свойства, расположенные на отдельных слоях шкалы времени. Ключевые кадры свойств записывают значения свойств (величину) в определенный момент времени. В итоге, на шкале времени Вы должны увидеть ключевые кадры и слои свойств для:

  • Width
  • Height
  • Opacity
  • Left
  • Top

Ключевые кадры на шкале времени

Если Вы не видите все эти ключевые кадры и шкалу времени для каждого из свойств элемента Red, то создайте их в ручную, кликая мышкой на кнопке-ромбике Add Keyframe for рядом со свойством в панели Properties.

Для того чтобы показывать-прятать слои свойств элемента на шкале времени, кликните на маленькой кнопке-треугольнике рядом с именем элемента. Кнопка над всеми слоями шкалы времени слева от слова Actions скрывает-показывает слои свойств всех элементов сразу.

Повторите все предыдущие действия для слоев Green, Blue и Yellow. Для того, чтобы ускорить процесс создания ключевых кадров и слоев свойств выделите все три элемента и затем кликайте на кнопках-ромбиках Add Keyframe for.

Убедитесь, что на шкале времени кнопки Auto-Keyframe Mode и Auto-Transition Mode нажаты, а другие нет.

Если кнопка Auto-Keyframe Mode нажата, то Edge Animate автоматически создает ключевые кадры для свойств элементов. Этот процесс состоит из двух шагов:

  • переместите головку плейера на шкале времени;
  • затем измените свойства элемента.

Эти изменения можно делать как в панели Properties, так и непосредственно на сцене с помощью инструментов Selection (Выделение) Transform (Трансформация).

Переместите головку плейера в значение 0:02 на шкале времени. На этом шаге кнопка Toggle Pin не должна быть нажата.

Переместите все полоски на сцене как показано на скриншоте ниже.

Секунда 2

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

Выделите все полоски и кликните на кнопке Add Key Keyframe (Добавить ключевой кадр) свойства Opacity (Прозрачность). Подвигайте головку плейера вперед-назад, чтобы увидеть анимацию. На шкале времени в точке 0:02 прозрачность для всех полосок установлена на 100%.

Перетащите головку плейера на 0:03.

Выделите все полоски и измените их высоту H до 300 px, а прозрачность до 50%. Это создает эффект увеличения полосок и в тоже время они становятся прозрачными. Помните о том, что Вам, возможно, нужно будет нажать кнопку Link Width and Height (Связать ширину и высоту), чтобы изменять свойства W и H независимо друг от друга.

Секунда 3

Переместите головку на 0:04. Затем измените высоту каждой полоски до 500 px, а прозрачность до 0%. В результате полоски продолжают увеличиваться и исчезают.

Секунда 4

Создание анимации закончено. Теперь давайте поговорим о предварительном просмотре и устранении ошибок.


Добавьте комментарий
bbcode:
[br]  [b][/b]  [i][/i]  [u][/u]
[img]link image[/img]
[color=colour][/color]
[url]link[/url]
[url=link]title[/url]
 
* Введите проверочный код
* Поля с красной звездочкой необходимо заполнить