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

Adobe Edge Animate

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

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

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

Ну, что ж, хватит теории, давайте приступим к работе над настоящей анимацией в Edge Animate. В том упражнении, которое мы будем выполнять на этом уроке, нам нужно будет создать 4 прямоугольника. Мы дадим им имена, присвоим цвета и придадим им небольшой наклон (исказим). После этого мы определим их позиции на сцене и заставим двигаться, изменять форму и в конце исчезнуть. Такой визуальный эффект можно использовать в баннерах или во вступительной части к более сложной анимации.

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

Создайте и сохраните новый проект в Adobe Edge Animate. Присвойте ему любое имя, ну, например, color_bars. Не забудьте создать новую папку для Вашего проекта.

Цвет сцены измените на белый, а ее размеры определите как W = 550 px и H = 400 px. Программа запоминает последние установки, которые Вы использовали, поэтому если Вы выполняли упражнения из предыдущих уроков или сами экспериментировали в программе, то Вам нужно сделать такие изменения.

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

Во время движения курсора над кнопками или инструментами появляются их имена. Например, в верхней части шкалы времени можно увидеть Auto-Keyframe Mode, Auto-Transition Mode, Toggle Pin и Easing.

Нарисуйте прямоугольник и в поле ID в панели Properties введите его имя Red. Это поле находится в верхней части панели Properties, но чтобы оно появилось не забудьте выделить прямоугольник.

В панели Properties кликните на образце цвета фона и выберите чистый красный цвет, а толщину контура задайте как none. После этих действий цвет прямоугольника Red должен быть #ff0000.

Определите размер прямоугольника. Пусть он будет следующим W = 550px и H = 100 px. Самый быстрый способ это сделать — ввести значения ширины W и высоты H в соответствующих полях панели Properties, но если Вы хорошо управляетесь с мышью, то тогда тяните за маленькие белые квадраты по периметру объекта. Возможно Вам нужно будет кликнуть на маленькой кнопке в виде звена цепочки рядом с W и H, чтобы отдельно редактировать ширину и высоту фигуры.

Присвойте свойству SkewX значение 50°. Поле ввода значений горизонтального наклона расположено вверху. Положительные значения перемещают верхнюю грань влево, а нижнюю вправо.

Разместите Ваш красный скошенный прямоугольник в левом верхнем углу сцены таким образом, чтобы был виден только его кончик. Его местоположение должно быть таким X = -550 px, Y = 0 px. В идеале, в левом верхнем углу сцены должен быть виден только красный треугольник.

Выделите красный прямоугольник и нажмите горячий клавиши Ctrl + D. Измените ID копии красного прямоугольника на Green и задайте ему соответствующий цвет #00ff00. Изменение цветов объектов, созданных в Edge Animate можно делать как в панели Properties, так и в панели инструментов над сценой.

Команда дублирования элементов Ctrl + D аналогична двухшаговому процессу, состоящему из команд копирования Ctrl + C и вставки Ctrl + V. В любом случае Вы создадите новую копию элемента со словом "Copy" в конце его имени.

Выровняйте зеленый прямоугольник по нижнему краю красного ( Y = 100 px ). Затем, при нажатой клавише Shift сдвиньте зеленый прямоугольник вправо таким образом, чтобы на сцене был виден его кончик ( X = 430 px ).

Нажатая клавиша Shift помогает удерживать объект при перемещении строго горизонтально (ось X) или вертикально (ось Y). Вы можете, конечно, нарушать эту связь с осями, но объект «прилипает» когда нужно и это помогает с ним управляться.

Создайте еще два скошенных прямоугольника. Дайте им имена Blue и Yellow. Расположите их на противоположных сторонах сцены. Голубой цвет: #0000ff, а желтый: #ffff00. В итоге общая композиция на сцене должна выглядеть как на скриншоте ниже.

Если позднее у Вас будут проблемы с анимацией этих элементов, то нарисуйте с нуля последние два прямоугольника вместо того, чтобы создавать их с помощью дублирования. Дело в том, что некоторые ранние версии Edge Animate могут работать с ошибками при дублировании элементов более одного раза. Наверняка, этот недостаток будет устранен в последующих версиях программы.


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