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

Adobe Edge Animate

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

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

Адаптивный дизайн

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

Пользователь может изменить размер шрифта на странице. Кроме того сами устройства, показывающие веб-сайт во многом отличаются:

  • настольный компьютер;
  • ноутбук;
  • интернет-планшет;
  • смартфон;
  • мобильный телефон;
  • LCD-дисплей, встроенный в панель управления автомобиля; 
  • и т.д.

Различные цифровые устройства

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

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

Дизайн с фиксированным размером

Прежде всего нужно сказать, что в программе можно создавать анимации, у которых фиксированный размер. Для этого нужно просто использовать px (пикселы) в качестве единиц измерения для сцены и всех элементов, которые на ней находятся. При таких условиях размеры сцены и объектов на ней будут неизменными, т.е. фиксированными.

Тогда, например, если окно браузера меньше чем анимация, то посетители будут видеть только ее часть. Чтобы увидеть остаток — используются полосы прокрутки.

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

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

Адаптивный дизайн

В этом случае, в качестве единиц измерения, нужно использовать % (проценты) вместо px (пикселов). Вы хотите, к примеру, чтобы сцена была во всю ширину экрана. Для этого установите свойство W (ширина) равной 100%. Даже если Ваш посетитель будет изменять размер окна браузера, анимация будет адаптироваться к имеющемуся пространству. Аналогичная ситуация и с элементами на сцене. Хотите чтобы они масштабировались вместе с окном браузера? Назначайте им % в качестве единиц измерения.

Создавая адаптивный дизайн, Вам нужно будет принимать решение по каждому элементу: какой метод использовать для его лучшего отображения в окне браузера. Возможно для текста это будет один способ, а для графики другой. Инструменты для создания адаптивного дизайна находятся в подразделе Position and Size (Местоположение и размер) панели Properties (Свойства).

Инструмент Relative Position Point (Точка отсчета относительного положения) позволяет выбрать точку, относительно которой программа будет рассчитывать свойства элемента X и Y. Кнопка-переключатель Global and Local (Глобальные и локальные) дает Вам возможность выбирать будут ли параметры элемента рассчитываться относительно сцены или его родительского контейнера (тег <div>).

Чтобы увидеть дополнительные опции, кликните на кнопке в левом нижнем углу подраздела Position and Size. Перед Вами появятся свойства Min W (минимальная ширина) и Max W (максимальная ширина). Они устанавливают ограничения на растягивание и сжатие элементов.

И, естественно, что выбор процентов для местоположения (X и Y) и размеров (W и H) является ключевым моментом при создании адаптивного дизайна.

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

Чтобы помочь Вам в этом, программа предлагает несколько стандартных предустановок. Выделите любой элемент на сцене, а затем в правом верхнем углу подраздела Position and Size кликните на кнопке меню Use Presets for Responsive Layout (Используйте предустановки для адаптивного дизайна). Перед Вами появятся варианты: Scale Position и Scale Size. О том, как их использовать Вы узнаете в соответствующих уроках.

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


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