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

Adobe Edge Animate

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

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

Просмотр анимации в браузере

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

Посетители Вашего сайта или веб-страницы не смогут просмотреть созданную анимацию непосредственно в программе Adobe Edge Animate, а увидят ее в своем любимом веб-браузере. Это значит, что и Вы должны предварительно посмотреть ее там же (и желательно не в одном).

Для быстрого просмотра выберите File → Preview In Browser (Файл - Просмотреть в браузере). Программа запустит Ваш браузер, если он еще не работает, и откроет HTML-файл, который был создан при сохранения проекта.

Предварительный просмотр анимации в браузере - Edge Animate

Этот единственный HTML-файл является описанием веб-страницы, которую и увидят посетители.

Код HTML страницы созданной в Edge Animate

Все, что им будет нужно сделать — это загрузить ее в браузере.

Показ наимации в браузере

По сути, HTML-код этой страницы является своеобразным концентратором для других файлов, в которых нуждается анимация. Он ссылается на картинку earth.png, сохраненную в виде отдельного файла в папке images. Кроме того, с него идут ссылки на несколько файлов JavaScript, которые, собственно, и приводят все в движение.

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

Ну, а теперь, давайте подведем краткие итоги того, что мы уже узнали из предыдущих уроков и о чем мы должны обязательно помнить в будущем при создании анимаций:

  • Edge Animate создает несколько файлов и папок, поэтому сохранять каждый новый проект лучше всего в отдельной папке;
  • Вы можете создавать и сохранять свое пользовательское рабочее пространство в программе, которое лучше всего соответствует Вашим привычкам в работе;
  • Когда Вы импортируете графический файл в проект — Edge Animate создает его копию и сохраняет ее в папке images.
  • Для того чтобы поля с настройками свойств элемента отобразилась на экране нужно выделить сам элемент на сцене или в панели Elements и они появятся в панели Properties.
  • Чтобы изменить местоположение или визуальные характеристики элемента — выделите его и затем измените его соответствующие свойства. Например, для того чтобы переместить элемент на сцене — измените его свойства Х и У в разделе Position and Size панели Properties. Для того чтбы изменить его цвет или прозрачность — отрегулируйте свойства Color (цвет) и Opacity (прозрачность).
  • На шкале времени, ключевые кадры фиксируют состояние свойств элемента в данный момент времени.
  • Анимация возникает тогда, когда свойства элемента(ов) изменяются во времени и эти изменения отмечены ключевыми кадрами на шкале времени.
  • Анимационные переходы (в дальнейшем будем называть их просто переходы, для простоты) могут быть гладкими или резкими.
  • Горячие клавиши, которые нужно запомнить: Home — перемещает головку плейера в значение 0:00 на шкале времени; клавиша Пробел запускает анимацию; Ctrl+Enter — запускает анимацию в Вашем веб-браузере.

Несколько слов о формате HTML 5

Прежде всего нужно сказать, что переход веб-индустрии к полному соответствию HTML 5 не произойдет за одну ночь. Свойства, которые делают этот формат действительно ценным, реализуются постепенно в различных браузерах. Если Вы хотите протестировать свой браузер на предмет соответствия этим стандартам, то воспользуйтесь услугами сервиса The HTML 5 Test. На нем, бесплатно, Вы увидите какие свойства HTML 5 поддерживает Ваш браузер. Чтобы посмотреть как обстоят дела у его конкурентов кликните на ссылке other browsers (другие браузеры).

В интернете есть еще несколько достойных ресурсов, которые предоставляют информацию о возможностях браузеров. Например, Can I Use перечисляет элементы HTML 5, CSS и JavaScript. Кликните на любом из них и перед Вами появится таблица, отображающая браузеры и их версии, которые поддерживают этот элемент.

А вот еще один аналогичный сервис HTML 5 Please.

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


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