Адаптивный дизайн
В веб-дизайне трудно добиться контроля над тем, как посетители будут просматривать Ваши веб-страницы. Они могут, например, с легкостью изменять размеры окна браузера. Вы не знаете точно будет ли Ваша работа одинаково хорошо отображаться на мобильном телефоне и 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.
Добавьте комментарий