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

Adobe Edge Animate

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

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

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

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

Adobe Edge Animate автоматически присваивает цвет каждому элементу Вашего проекта. Этот цвет можно увидеть на шкале времени рядом с именем элемента, а также он используется для отображения переходов — изменений значений свойств. Тот же самый цвет находится рядом с именами в панели Elements (Элементы). Когда Вам приходится иметь дело с десятками или даже сотнями элементов такое цветовое кодирование здорово помогает.

Кликните на кнопке-переключателе шпильки (Toggle Pin) на шкале времени, затем перетащите золотистую часть головки плейера к значению времени 0:03. Для того чтобы анимировать элемент, нужно чтобы его свойства изменялись в течении определенного промежутка времени. Головка и шпилька обеспечивают Вам возможность отметить две точки на шкале времени как показано на рисунке.

Головка и шпилька плейера в Edge Animate

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

Перенос элемента на сцену

Кликните на кнопке-переключателе шпильки (Toggle Pin). Нажмите клавишу Home, а затем клавишу пробел (spacebar). После нажатия Home головка вернется к 0:00. Нажав на пробел, Вы запустите воспроизведение анимации и сможете просмотреть ее в действии на сцене.

Переместите головку назад на 0:00 и затем в панели инструментов (в верхнем левом углу окна программы) кликните на букве Т. Этим действием Вы выбрали инструмент работы с текстом, при этом курсор должен изменится на крестик.

Кликните в любом месте сцены. Появится панель для ввода текста. Введите текст Hello World!. После того как Вы это сделали, нажмите клавишу ESC или кликните мышью на кнопке Х в верхнем правом углу панели для ввода текста. Фраза Hello World! появится на сцене, но ее положение и характеристики шрифта необходимо изменить для того, чтобы текст был нужных размеров и цвета.

В панели Properties измените ID только что созданного текстового элемента на HelloWorld. Это позволит Вам гораздо быстрее отличать и находить этот элемент на шкале времени и в панели Elements. В именах элементов не должно быть пробелов, поэтому используйте либо HelloWorld, либо Hello_World.

ID текста

Отформатируйте текст, используя панель Properties. Измените его цвет на белый или светло-голубой. Используйте шрифт Arial Black или другой жирный шрифт. Измените размер шрифта таким образом, чтобы текст заполнил сцену почти полностью по ширине (примерно 72 px). При этом программа фиксирует каждое изменение текста на шкале времени, добавляя слои свойств и создавая ключевые кадры.

Форматирование текста

Переместите текст на сцене в нужное положение, примерно в верхнюю треть сцены, отцентровав его по горизонтали.

Установите значение прозрачности (opacity) для текста на 0 (головка при этом находится на 0:00). Слайдер регулировки прозрачности находится наверху панели Properties. Таким образом, текст будет невидимым в начале анимации. На сцене видна только область выделения текста (голубой контур с узелками), но если Вы щелкните в любом пустом месте сцены, то она исчезнет. Однако, не беспокойтесь — Вы сможете выделить любой элемент, видимый или невидимый, кликнув на его имени в панели Elements.

Убедитесь, что кнопка Toggle Pin выключена. В этом случае кнопка не выглядит нажатой и шпилька движется вместе с головкой.

Переместите головку на 0:00. Выделите текст и кликните на ромбике (Add Keyframe for Opacity) рядом с прозрачностью в панели Properties. Когда Вы перетаскиваете головку плейера, то Вы видите, что земной шар перемещается на сцене. Кликнув на ромбике прозрачности, Вы создали ключевой кадр на второй секунде, при этом текст все еще невидим.

Настройка прозрачности текста

Кликните на кнопке Toggle Pin и переместите головку на 0:03. Теперь можно сделать еще один переход.

Выделите текст Hello World!, установите его прозрачность на 100. Программа создаст плавный переход, при котором текст будет постепенно изменять свою прозрачность от 0 (невидимый) до 100 (полностью видимый) в промежутке времени от 0:02 до 0:03 Вашей анимации.

Переход для прозрачности текста в Edge Animate

Переместите шпильку (pin) на 0:03, затем переместите головку на 0:04 и установите прозрачность текста снова на 0. Он исчезнет.

Нажмите Ctrl + S чтобы сохранить проект. Как уже объяснялось ранее Adobe Adge Animate сохраняет Вашу анимацию в виде нескольких файлов HTML и JavaScript. Главный HTML-файл носит имя, которое Вы дали своему проекту, когда впервые его сохраняли. Например, в Вашей папке проекта Вы можете видеть файл hello_world.html. Во время импорта картинки в проект, Edge Animate создал специальную папку images и поместил в нее копию этой картинки.

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

Нам осталось только просмотреть нашу анимацию в браузере и подвести некоторые промежуточные итоги.


Комментарии.
 Александр
Всё отлично, но Рыжая лиса не хочет правильно отображать текст
Отправлено 26.02.2013 23:03:07
Добавьте комментарий
bbcode:
[br]  [b][/b]  [i][/i]  [u][/u]
[img]link image[/img]
[color=colour][/color]
[url]link[/url]
[url=link]title[/url]
 
* Введите проверочный код
* Поля с красной звездочкой необходимо заполнить