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

Adobe Edge Animate

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

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

Создание прямоугольника и управление его свойствами в Edge Animate

Создание графики в Edge Animate

У текущей версии Edge Animate слегка ограниченный набор инструментов рисования — нет инструмента Pen (Ручка) и Gradient (Градиент). В связи с этим возникает законный вопрос : почему EA выглядит немного примитивнее других продуктов компании Adobe таких, как, например, Flash или Illustrator?

Частично из-за того, что эта программа новая. Понятно, что Adobe сначала реализовала те инструменты, которые легко освоить и использовать, а затем, через некоторое время, дополнит их более изощренными.

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

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

Если Вы предпочитаете бесплатные инструменты, то можете воспользоваться программами Inkscape и GIMP. Первая создает векторную графику (сходна с Illustrator), вторая растровую (похожа на Photoshop). Для редактирования фотографий прямо в интернете, используйте бесплатный сервис Pixlr.

Создание прямоугольника

Для создания и добавления на сцену цветных прямоугольников используйте инструмент Rectangle (Прямоугольник). Такие цветные блоки очень удобны для выделения определенных частей сцены. Например, вам нужно сделать панель в левой части веб-страницы. Добавьте туда цветной прямоугольник и поверх него разместите текст или графику, тем самым выделяя его среди остальных элементов. Скорее всего, Вы уже знакомы с основными приемами создания прямоугольников:

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

Создание прямоугольника в Edge Animate

Чтобы создать квадрат — удерживайте клавишу Shift нажатой, пока Вы тянете. Новый элемент появится на сцене и автоматически становится выделенным (активным). По его периметру расположены восемь маленьких белых квадратиков, которые используются для изменения размеров (ширины и высоты). Просто кликните мышью на любом из них и удерживая левую кнопку потяните в нужном направлении, затем отпустите. Размеры прямоугольника изменятся.

Основные свойства прямоугольника

ID (Идентификатор). После создания прямоугольника он появится в панели Elements. При выделении прямоугольника все его свойства отобразятся в панели Properties. Желательно сразу дать Вашему объекту осмысленное имя, как, например, header или sidebar. Для того, чтобы в последствии изменять это имя (если нужно), выделите его и сделайте это в поле ID в верхней части панели Properties. Смену имени можно сделать и в панели Elements дважды щелкнув на имени элемента.

Tag (Тег). В панели Elements Вы увидите, что сразу после имени элемента находится тег <div>. При создании прямоугольника ему автоматически присваивается этот тег для того, чтобы Edge Animate мог его идентифицировать, изменять местоположение и трансформировать. Работая с другими элементами Вы сможете выбирать другие теги. Например, после добавления фотографии в Вашу анимацию можно изменить <div> на <img>, что вполне логично.

Position (Местоположение). Сразу ниже поля с именем в панели Properties Вы обнаружите подраздел Position and Size (Местоположение и размер). Левый верхний угол сцены на осях координат принимает значения X = 0 и Y = 0. Перемещение слева на право увеличивает значения Х. Перемещение сверху вниз — Y.

Изначально, положение Вашего вновь созданного прямоугольника расcчитывается программой от точки, расположенной в его левом верхнем углу. Положение этой точки отсчета можно изменить, используя инструмент Relative to (Относительно ...). Он выглядит как прямоугольник с маленькими квадратами по углам. Предположим, что Вам нужно разместить элемент на определенном расстоянии от нижнего правого угла сцены. Для этого используйте нижний правый угол Вашего элемента в качестве точки отсчета. Просто кликните на на левом нижнем квадратике инструмента Relative to.

Size (Размер). Рядом со свойствами местоположения X и Y находятся свойства размеров: W (ширина) и H (высота). Они изменяются автоматически если тянуть за маленькие квадратики по периметру выделенного объекта. Кроме того можно вводить точные значения размеров, щелкнув в соответствующем поле или перемещая мышь влево и вправо при нажатой левой кнопке.

Изначально, для прямоугольников в качестве единиц измерения назначены px (пикселы). Однако, в любой момент, Вы можете изменить их на % (проценты). Прямоугольник с шириной в 20% будет занимать на сцене 20% ее ширины. Щелкнув на иконке звено цепочки, Вы можете включать и выключать пропорциональное изменение размеров.

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

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

  • Always On (Всегда включен)
  • On (Включен)
  • Off (Выключен)

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

Opacity (Прозрачность). Для того чтобы контролировать прозрачность прямоугольника используйте слайдер в верхней части панели Properties. Если Вы хотите, чтобы свойства заливки и контура прямоугольника изменялись независимо друг от друга, то щелкните на образцах их цветов (находятся ниже в подразделе Color (Цвет)) и измените свойство прозрачности А (альфа-канал).

Color (Цвет). Конструктивно прямоугольник состоит из двух частей: контура и заливки. Можно изменять их цвета независимо друг от друга или делать их прозрачными, изменяя значение альфа-канала. Размер контура измеряется в пикселах. Кроме того, контур может быть сплошным (solid), пунктирным (dashed), точечным (dotted) или отсутствовать совсем (none). В панели инструментов программы (в самом верху окна) предлагается еще один способ быстрого изменения цвета контура и заливки выделенного элемента. Он работает аналогично тому, который находится в панели Properties.


Комментарии.
 Boris
Можно ли менять прозрачность заливки отдельно от контура?
Отправлено 17.06.2013 22:29:55
Добавьте комментарий
bbcode:
[br]  [b][/b]  [i][/i]  [u][/u]
[img]link image[/img]
[color=colour][/color]
[url]link[/url]
[url=link]title[/url]
 
* Введите проверочный код
* Поля с красной звездочкой необходимо заполнить