Контуры (stroke) и заливки (fill) во Flash CS6

На этом уроке Flash CS6 мы начнем создавать статичную картинку для баннера абсолютно с нуля. Она создается для гипотетического кафе, продвигающего свои услуги в интернете.

Сначала вы нарисуете простые фигуры и немного модифицируете их. Затем узнаете, как их комбинировать для того, чтобы получать более сложные визуальные формы. Пока вы не будете создавать никакой анимации. Сначала нужно, как говорится, научиться ходить, а затем уже бегать! Умение создавать и изменять графику во Flash CS6 — это важный шаг, который вы должны освоить, прежде чем что-либо анимировать.

Создавая графику во Flash CS6 вы, практически, всегда будете начинать с рисования какой-нибудь фигуры (shape).

Фигура во Flash CS6 состоит из двух компонентов:

• заливки (fill) или внутренней части формы;
• контура (stroke) или линия вокруг формы.

Если вы всегда будете помнить об этих двух составляющих любой фигуры, то у вас не будет проблем с созданием красивых и сложных визуальных форм во Flash CS6.

Заливка и контур независимы друг от друга, поэтому вы можете удалить любой элемент из этой пары без ущерба для второго.

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

Контур и заливку можно перемещать независимо друг от друга. Если же вы хотите переместить полностью всю фигуру, то не забудьте проверить, что она вся выделена (и заливка и контур).

Прежде чем приступить к работе с инструментами, давайте создадим новый файл.

1. Откройте программу Adobe Flash Professional CS6.

2. Выберите File > New. В диалоговом окне New Document выберите ActionScript 3.0.

3. В правой части диалогового окна задайте размеры сцены 600 (Width — ширина) и 200 (Hight — высота) пикселов. Цвет сцены сделайте светло-коричневым. Кликните на маленьком прямоугольнике рядом с надписью Background color (цвет фона, появляется при наведении) и выберите цвет из палитры, которую предлагает операционная система. Кликните ОК.

4. Выберите File > Save. Назовите файл tea.fla и сохраните его в папке Урок 02. Сохранение файла в самом начале работы — это, как вы помните, очень хорошая привычка, даже если вы включили функцию Auto-Recovery (авто-восстановление). Это обезопасит вас от потери несохраненных данных в случае сбоя в работе программы или компьютера.

Создание фигур

Flash CS6 предлагает несколько инструментов для рисования, которые работают в нескольких рабочих режимах. Работа над большинством из ваших рисунков будет начинаться с создания простых фигур таких как, например, прямоугольник или овал. Поэтому очень важно хорошо изучить эти инструменты, чтобы без труда рисовать такие фигуры, изменять их форму, цвет и контур.

Давайте нарисуем чашку чая.

Использование инструмента Rectangle (прямоугольник)

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

1. В панели Tools (инструменты) выберите инструмент Rectangle (прямоугольник). Убедитесь в том, что иконка Object Drawing (рисование объектов) внизу панели Tools не выделена (не активна).

2. В панели Tools кликните на маленьком прямоугольнике цвета контура (Stroke Color) и в соответствующее поле введите значение цвета #663300 (темно-коричневый). Затем кликните на цвете заливки (Fill Color) и введите #CC6600 (светло-коричневый).

3. Нарисуйте на сцене прямоугольник, высота которого чуть больше чем ширина. Его точные размеры мы определим в шаге 6.

4. Выберите инструмент Selection (выделение).

5. Расположите курсор чуть выше левого-верхнего угла прямоугольника, кликните левой кнопкой мыши и тащите курсор к правому нижнему углу фигуры так, чтобы область выделения охватила весь прямоугольник. Отпустите кнопку мыши. Прямоугольник будет покрыт маленькими светлыми точками. Это значит, что он выделен и с ним можно работать дальше.

Кроме того, выделить фигуру можно дважды кликнув на ней. При этом выделятся и контур и заливка.

6. В панели Properties (свойства) введите значение 130 для ширины и 150 для высоты прямоугольника. Нажмите Enter для того, чтобы применить изменения.

Значения цветов во Flash CS6, HTML и многих других приложениях записываются в шестнадцатеричной системе счисления. Светло-серый цвет, например, записывается так: #999999. Белый: #FFFFFF. Черный: #000000. Полезно запомнить значения наиболее часто используемых вами цветов.

Использование инструмента Oval (овал)

Теперь давайте нарисуем овалы вверху и внизу нашей чашки.

1. В панели Tools кликните на инструменте Rectangle и удерживайте кнопку мыши нажатой до тех пор, пока не появится группа скрытых инструментов. Выберите инструмент Oval Tool.

2. Убедитесь в том, что опция Snap to Objects (прилипание к объектам) включена (активна). Эта опция очень полезна, т.к. заставляет объекты, которые вы рисуете на сцене прилипать друг к другу. Это обеспечивает точное совпадение линий и углов при рисовании. Эта опция находится внизу панели Tools.

3. Кликните мышью внутри прямоугольника и потяните курсор так, чтобы нарисовать овал. Опция Snap to Objects поможет точно соединить стороны двух фигур.

4. Нарисуйте еще один овал внузу прямоугольника.

На следующем уроке мы продолжим рисование этой чашки.