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

Adobe Edge Animate

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

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

Создание первой анимации в Edge Animate - часть 1

Видео: 10 мин. 41 сек. Формат: HD.

Следуя доброй традиции, давно укоренившейся в мире программистов, давайте используем для нашей первой анимации в Edge Animate фразу "Hello World!". Программа сгенерирует код, который будет показывать эту страницу и анимацию на ней. Этот и последующий уроки должны Вас привести  к результату, который показан ниже.

Чтобы повторить анимацию — перезагрузите страницу.

 

Для того чтобы это сделать нам понадобится:

Запустите Adobe Edge Animate. В главном меню программы выберите File → New для того чтобы создать новый документ. Итак, перед Вами пустая сцена. В данный момент она является единственным элементом, который отображается в панелях Свойства (Properties) и Элементы (Elements). Панель Свойства отображает ее размеры, цвет и другие параметры. Чуть позже мы поговорим о них более подробно.

Создание нового файла в Edge Animate

Создайте папку для Вашего проекта и в главном меню выберите File → Save As (Сохранить как) чтобы сохранить Ваш файл. Имя ему дайте любое. Пусть это будет hello_world.

Сохранение файла в Edge Animate

Вы можете создать папку в программе отличной от EA, например, используя Windows Explorer или создать ее как часть общей команды File → Save As. Выработайте у себя привычку сохранять каждый Ваш новый проект в Edge Animate с именем, из которого сразу понятно с чем этот проект имеет дело. Такие имена называют описательными.

Гораздо проще в самом начале работы сохранить проект, а затем периодически сохранять уже сделанное с помощью горячих клавиш Ctrl + S. Как уже объяснялось в предыдущих уроках, гораздо практичнее сохранять новый проект в новой папке, т.к. программа создает несколько файлов и папку edge_includes во время первого сохранения проекта.

С первого взгляда на Edge Animate можно понять сохранили ли Вы свой проект или нет. Если нет, то программа показывает звездочку * рядом с именем файла в верхней части окна.

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

Выбор цвета фона

Иногда, в процессе работы, если Вам заранее известно точное значение цвета, Вы будете пользоваться полями для ввода этих значений в форматах RGB или числовом шестнадцатиричном. Эти поля находятся в правой части панели.

Выберите темно-синий цвет, который ассоциируется с космосом. Если сомневаетесь, то попробуйте, например, такой R=25; G=30; B=60; A=100. Подсветка чисел оранжевым цветом означает, что Вы можете либо кликнуть на любом из них и ввести нужное Вам значение, либо кликнуть левой кнопкой мыши и удерживая ее потянуть влево или вправо, тем самым изменяя значение числа в поле. Вправо — увеличиваем, влево — уменьшаем.

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

Свойство Overflow в Edge Animate

В главном меню выберите File → Import. В появившемся окне найдите и выберите файл earth.png. Кликните на Open (Открыть), чтобы импортировать файл в Ваш проект.

После того как Вы это сделали импортированный файл появится в панели Элементы и отобразится на сцене. При этом он автоматически становится выделенным, что позволяет видеть его свойства в панели Свойства.

Свойство, отвечающее за видимость нашего первого элемента находится в верхней части панели. Ниже расположена панель Position and Size (Местоположение и размер).

Еще ниже — панель Transform (Трансформации), где Вы сможете вращать, наклонять и масштабировать элементы.

Далее, в разделе Image (Картинка), указывается имя файла-источника. Это хорошая подсказка в ситуации, когда Вы пытаетесь вспомнить, а какое же имя исходника у этой картинки!

Есть еще один секрет, который происходит за кулисами программы. Когда Вы импортируете картинки, то Edge Animate автоматически:

  • создает папку для их хранения;
  • создает копию выбранной картинки;
  • помещает ее в эту папку.

Кроме того, импортированная картинка появится в разделе Assets (Активы) панели Library (Библиотека).

Теперь, в самом верху панели Properties (Свойства) кликните на боксе ID (идентификатор) и измените earth на world.

ID элемента

Во время импорта графики программа присваивает ей имена файлов. В определенных случаях это удобно, но чаще Вы будете менять имена элементов (т.е. их ID) непосредственно в программе. Эта процедура не изменяет имени самого файла. Новый ID элемента будет использоваться только внутри программы.

ID элементов выполняют важную функцию внутри кода HTML, о которой Вы узнаете далее, в этих уроках. Заметьте также, что в панели Elements Ваш world появился с новым именем. Ну, и поскольку, он уже находится на сцене, то и на шкале времени он тоже отображен.

Имена элементов на шкале времени, которые не анимируются могут показываться, либо скрываться. Вы можете это сделать, нажав на небольшую кнопку с иконкой в виде воронки Only show animated elements (Показывать только анимированные элементы) внизу шкалы времени.

Убедитесь, что головка плейера на шкале времени находится в значении 0:00.

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

Перетащите world за пределы сцены вниз. Ранее мы обсуждали тот момент, что элементы, находящиеся вне сцены могут быть скрыты во время показа страницы в браузере. Если значение Overflow установлено как hidden, то такие элементы будут выглядеть немного темнее, чем обычно.

Убедитесь, что кнопка Auto-Keyframe Mode (Режим автоматического создания ключевых кадров) нажата. Это значит, что при изменении свойств элементов на шкале времени ключевые кадры будут создаваться автоматически. Маркеры ключевых кадров выглядят в виде небольших ромбов (о них чуть позже).

На панели Шкала времени, кнопки, которые активны, т.е. нажаты или включены выглядят темнее, а их иконки чуть ярче. Например, когда кнопка Auto-Keyframe Mode (с картинкой секундомера) нажата, то у секундомера циферблат ярко-красный.

Убедитесь, что кнопка Auto-Transition Mode (Режим автоматического создания переходов) нажата. Если этот режим включен, то Edge Animate автоматически создает плавные переходы между состояниями элемента во времени. В нашем примере, элемент world будет плавно перемещаться из одного положения на сцене в другое.

Перетащите головку плейера в значение 0:01 на шкале времени. 0:01 — это секунда времени анимации. Красная линия, которая тянется вниз от головки является своеобразным маркером для всех элементов и слоев.

Выделите элемент world, кликнув на нем, а затем в панели Properties в разделе Position and Size (положение и размер) кликните на ромбиках рядом с Х и Y.

На шкале времени появятся два ключевых кадра в виде ромбов, которые фиксируют положения левой и верхней границ элемента world. Свойства Х и У устанавливают положение элементов на сцене. Кликнув на ромбах рядом с Х и У в разделе Position and Size панели Properties, Вы в ручную определили положение элемента world на сцене. В результате он будет оставаться в этом положении в течение первой секунды анимации.

Кнопки включения режимов и головка плейера на шкале времени в Edge Animate

На этом первую часть урока можно закончить. Сделайте перерыв и переходите ко второй части.


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