Создание и сохранение проекта в Edge Animate

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

Если Вам понравилось это видео, то поделитесь им с друзьми.

Нравится

Бороздя просторы всемирной сети ее сегодняшние пользователи ожидают увидеть красивые, стильные и интерактивные веб-сайты. Они ценят анимацию, которая добавляет сайтам качества (если, конечно, не нужно тратить много времени на ее просмотр :)

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

Что такое HTML

Язык, который структурирует содержание сайтов называется HTML (аббревиатура HyperText Markup Language). Он делает нужное предложение заголовком, опреленный кусок текста абзацем, а выбранную фразу ссылкой на другую страницу в сети и т.д. Как и любой другой язык он продолжает развиваться и адаптироваться к текущим нуждам и новым идеям. Последний шаг в этой эволюции — HTML 5.

Совместно с такими технологиями как CSS 3, JavaScript и jQuery он представляет в браузерах те самые красивые веб-страницы, которые сегодня посещают миллиарды людей.

Жизнь веб-дизайнеров становится легче

Вместо того чтобы создавать графику и визуальные эффекты с помощью кода, веб-дизайнеры теперь могут использовать для этих целей компьютерную программу Edge Animate (EA) — инструмент, который подходит им гораздо лучше.

В первой части этого курса Вы узнаете о том:

как EA создает код, который может читать браузер
затем Вы познакомитесь с основными элементами рабочего пространства программы.
а в конце протестируете Edge Animate: заставите двигаться картинку и создадите текст, который будет исчезать и повляться по Вашей команде.

Считайте это лишь началом, последующие уроки откроют Вам остальные детали.

Создание и сохранение нового проекта

У AE простая роль — он помогает создавать анимированные веб-страницы. Вы создаете графику, используя знакомые визуальные инструменты, а Edge Animate генерирует соответствующий программный код. Это практически тоже самое, что нанять веб-разработчика для написания того же кода (HTML / CSS / JavaScript / jQuery) для Вашего сайта.

А что за кулисами?

Для начала не плохо бы понять, что происходит за кулисами программы. Как это сделать? Да очень просто! Нужно создать и сохранить пустой проект в AE.

Для этого запустите Edge Animate тем же способом, что и любую другую программу на Вашем компьютере.
Когда Вы это сделаете, то первым делом перед Вами появится стартовый экран. C правой стороны Вы увидите ссылки на уроки и другие ресурсы компании Adobe. Слева — ссылки для создания нового проекта и открытия ранее созданных.
Щелкните левой кнопкой мыши на Create New (Создать новый файл). Перед Вами появится рабочее пространство программы с несколькими панелями и дополнительными ссылками на уроки от Adobe (не беспокойтесь по поводу того что все это значит, мы все изучим чуть позже в первой части этого курса).
Теперь, создайте новую папку на Рабочем столе Вашего компьютера и назовите ее Проект 1. Затем сделайте следующий шаг: в главном меню программы выберите File → New и затем File → Save As.
Найдите папку Проект 1 на Вашем Рабочем столе и сохраните Ваш первый проект в Edge Animate под любым именем. Теперь посмотрите на содержание папки. Вы обнаружите там 5 файлов и папку.

Если до этого момента Вы уже занимались разработкой веб-страниц, то, наверняка, Вам покажется знакомой большая часть ее содержания. Но там обнаружится и кое-что новое:

файл с расширением .an — это файл проекта;
файл с расширением .html описывает созданную веб-страницу с помощью HTML-разметки, точно также, как и миллионы других страниц в интернете;
файлы с расширением .js содержат код JavaScript, относящийся к Вашему проекту. Сейчас он пустой, но, тем не менее, этот код описывает пустую сцену и выполняет другие задачи, необходимые для всех проектов программы.

Откройте папку с именем edge_includes и Вы обнаружите там еще несколько файлов JavaScript. Это библиотеки кода JavaScript. Одна из них относится непосредственно к Edge Animate, а другие являются стандартными библиотеками JavaScript. На эти библиотеки есть ссылки с HTML-страницы, которую создала программа. По сути они являются своеобразным движком для Вашего проекта. Именно они приводят все в движение.

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

для каждого проекта создавайте отдельную папку;
не удаляйте, не перемещайте и не переименовывайте файлы и папки, которые были созданы программой, до тех пор пока Вы до конца не поймете их взаимосвязь

В следующем уроке Вы познакомитесь с рабочим пространством Edge Animate.

Добавьте комментарий