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

Adobe Edge Animate

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

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

Параметры сцены в Edge Animate: ID, Overflow, W, H, Max W, Min W, Autoplay, Down-Level Stage и Poster

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

Вы сможете создавать текст и простые геометрические формы непосредственно в Adobe Edge Animate, но скорее всего большую часть графических объектов Вы будете создавать в других программах таких, как, например, Illustrator или Photoshop, а затем импортировать их в Edge Animate.

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

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

Итак, начнем. Из предыдущих уроков Вы уже успели узнать, что если Вы помещаете элемент на сцену, то он становится видимым при просмотре файла в браузере. Однако существует пара способов спрятать или удалить элементы со сцены. Если у сцены свойство Overflow установлено как hidden, то помещая элементы за физические границы сцены Вы делаете их невидимыми при просмотре в браузере. В нашей первой анимации Вы также использовали свойство Opacity для скрытия текста Hello World!

Сцена, с которой Вы работаете в Edge Animate, представляет из себя лишь часть веб-страницы, на которой она воспроизводится. У сцены есть несколько свойств? среди которых наиболее очевидные ее размеры и цвет фона. Но Вы, наверняка, захотите познакомиться со всеми, поэтому давайте разберем их все по порядку, начиная с самого верху панели Properties:

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

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

Для того, чтобы заставить размеры сцены изменяться пропорционально нужно кликнуть на пиктограмме звена цепочки рядом с W и H. Чтобы изменять размеры независимо друг от друга — «разорвите цепочку».

Параметры сцены W и H в Edge Animate

В Edge Animate можно изменять единицы измерения с px (пикселы) на % (проценты). Например, если Вы установите ширину равной 80%, то она займет 80 процентов ширины окна веб-браузера, в котором просматривается веб-страница. Это очень полезное свойство при разработке приложений для настольных компьютеров, ноутбуков и мобильных телефонов. При этом, если окно браузера будет изменяться пользователем по ширине, то сцена будет автоматически адаптироваться к новому размеру!

Выбор цвета фона делается с помощью инструмента Пипетка (Color Picker). В панели Properties кликните на образце цвета чтобы появилась пипетка. Кликните на спектральной полоске с различными цветами слева чтобы сделать приблизительный выбор цвета. Затем кликните в прямоугольнике по центру панели, чтобы выбрать более точный оттенок. В месте клика появится небольшой кружок, а образец выбранного цвета отобразится в правом нижнем углу панели. В правом верхнем углу представлены образцых трех наиболее часто используемых цветов:

  • белый
  • черный
  • прозрачный

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

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

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

Свойство Overflow контролирует видимость элементов, которые находятся за пределами сцены. Чаще всего Вы будете устанавливать его как hidden, что делает элементы невидимыми если они находятся вне сцены. Это особенно полезно в случае, если Вы хотите чтобы элемент входил на сцену или уходил с нее во время анимации. Если Вы выберите visible, то элементы будут видимы вне зависимости от того, покинули они пределы сцены или нет. Опция scroll обеспечивает появление полос прокрутки справа и внизу сцены, если элементы покинули ее видимую часть. Опция auto автоматически добавляет полосы прокрутки, если за пределами сцены есть какие-то элементы.

Свойство сцены Overflow в Edge Animate

Для того чтобы анимация автоматически запускалась при открытии веб-страницы, нужно поставить галочку в чек-боксе Autoplay (Проигрывать автоматически). Если галочка не стоит, то для запуска анимации используется JavaScript.

Composition ID (ID композиции) нужен для идентификации конкретной сцены и сопутствующей ей шкалы времени. Это становится особенно актуальным при помещении двух и более анимаций на одной веб-странице. Об этом Вы узнаете подробнее в уроках про JavaScript.

Свойства Down-Level Stage (Сцена нижнего уровня) и Poster (Плакат) создают альтернативные элементы для веб-браузеров, которые не поддерживают HTML 5.

Preloader (Загрузчик) отвечает за загрузку всех ресурсов, которые необходимы для нормального воспроизведения Вашей композиции на веб-странице. Эти ресурсы включают в себя библиотеки JavaScript и графику.

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


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