Я начал использовать Flash давно, когда еще это была версия 3, когда Flash был воспринят как новомодный векторный редактор на основе инструмента анимации, который вскоре мог бы захватить мир веб-дизайна штурмом. На протяжении многих лет Flash вырос в полноценный многофункциональный инструмент для разработки приложений, упакованный до краев «полезностями» .

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

Давайте начнем с того, с чего начал бы каждый в Flash (или в любом другом приложении для дизайна) — с рисования. Будь это рисование обычных форм или начертание линий, рисование — это одна из фундаментальных основ действий в Flash. Хотя, что делает Flash уникальным, так это то, каким образом создаются и редактируются формы. Программа ведет себя совсем не так, как большинство других инструментов для векторного рисования, и многие либо любят, либо ненавидят ее. Конечно, есть свои преимущества и недостатки в разделении каждой части объекта при самостоятельном редактировании. Давайте взглянем на некоторые причудливые мелочи, которые проделывает Flash и как использовать их наилучшим образом.

Хотя этот урок был написан для Flash Professional CS5, большинство советов должны будут работать прекрасно и в более старых версиях. Я постараюсь сделать акцент везде, где будет что-то очень специфическое в последних версиях Flash.

В этом уроке мы рассмотрим:

1. Правильные формы и формы-примитивы
2. Пример: создайте точную круговую диаграмму, используя примитивные формы
3. Свободная трансформация форм при помощи мыши
4. Пример: Сделаем волны простым способом
5. Сглаженные закругленные углы
6. Распределение градиентов между объектами
7. Поиграйте с пользовательскими контурами
8. Полезные подсказки
9. Вывод

Правильные формы и формы-примитивы

Как правило, когда вы рисуете правильную форму (прямоугольник или эллипс) в Falsh, создается объект с настройками выбранной заливки и контура. Затем вы можете выбрать заливку и/или контур индивидуально и отредактировать их свойства. В Flash CS3, Adobe представил то, что они называют инструментами «примитивных» форм. В отличие от инструментов форм по умолчанию, которые отделяют контур от заливки, эти инструменты создают форму, которая выбирается и редактируется как единое целое.

Хотя для ветеранов-дизайнеров Fhash это может быть и раздражающим изменением, но оно привносит уровень контроля, который не был виден в Flash в ранних версиях. Вы можете неожиданно изменить свойства объекта численно через панель свойств, добавить скругленные углы и конвертировать окружности в пироги с точностью десятичной точки. Существует не так много причин, чтобы вернуться к традиционным инструментам создания форм, как только вы начнете использовать примитивы, но многие дизайнеры, которых я знаю, продолжают пользоваться старомодным способом. Часть проблемы может быть ошеломляющее решение фирмы Adobe оставить простые формы в качестве инструментов по умолчанию, убрав примитивы в выпадающее меню панели инструментов.

Пример: создайте точную круговую диаграмму, используя примитивные формы

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

Как только мы получим проценты (которые добавляют до 100), мы умножим каждый на 3,6 , чтобы приравнять их к общему градусу 360 в окружности. Затем, это просто вопрос вставки шести окружностей друг над другом и назначения соответствующих стартовых и конечных углов для каждого из них, полученных на основе вычислений. Смотрите математические данные в таблице ниже, так же как и свойства для каждой круговой диаграммы, для лучшего понимания.

Свободная трансформация форм при помощи мыши

По своей природе, объекты в Flash свободно редактируемые всеми видами доступных способов. Вы можете выбрать заливку или контур формы, перетащить их и они окажут воздействие на все другие формы в этой области, пока находятся на той же плоскости. То, что произойдет, когда вы выбираете и/или перетаскиваете элемент, зависит от того, на что вы кликаете и где. Давайте взглянем на различные возможности:

• Выбор и перетаскивание формы, которая уже выбрана, будет просто двигать ее туда, куда вы передвинете мышь.
• Выбор и перетаскивание внутри заливки формы — даже если она не выбрана — выберет и передвинет ее. Заметьте, что это только двигает заливку, но не двигает контур. Если вы отпустите заливку поверх контура, то любая часть контура, которая будет находиться под заливкой, удалится.
• Нажатие мышью на прямой линии и перетаскивание сделает ее искривленной. Чем дальше вы перетаскиваете линию, тем круче будет изогнутая линия.
• Нажатие мышью и перетаскивание существующей изогнутой линии изменит ее кривизну.
• Нажатие мышью и перетаскивание угловой точки переместит только точку. Если включен параметр snapping (привязка), то точка будет притягиваться к любому другому углу рядом.

Пример: Сделаем волны простым способом

Давайте попробуем применить эти знания, чтобы сделать сложные волновые линии простым способом — при помощи прямых зигзагообразных линий. Начнем с простого рисования прямых линий, чтобы определить приблизительный размер и форму волны. Убедитесь, что линия не выделена. Затем, выберите и перетащите каждый сегмент линии, чтобы сделать изогнутость для волны. И наконец, выберите угловые точки и передвиньте их вверх или вниз до тех пор, пока они не притянутся и сделают изогнутую, плавную с обеих сторон.

Сглаженные закругленные углы

По какой-то причине, лучше всего известной Adobe, они никогда не решали унаследованную проблему с визуализацией скругленных углов в Flash. Если контур прямоугольника с закругленными углами — нечетное число (1, 3, 5, и т.д.), то углы, как правило, имеют уродливые артефакты, которые делают изображение размытым. Типичная уловка, которую я использовал и которую видел в действии, это убедился в том, что контуры прямоугольника с закругленными углами всегда равны 2, 4, 6 или любому другому числу. Но эта уловка по-прежнему не работает, если форма находится на подпиксельной координате — или x или y координата равна десятичному значению (2.6, 4.12, 98.57 и т.д.) — но эту проблему намного легче решить.

Но, что делать, если нужно, чтобы контур был размером в один пиксель? Один из способов, который я недавно нашел и широко применяю с этого времени, следующий:

• Нарисуйте прямоугольник, используя инструмент примитивный прямоугольник и установите ему любой размер, который нужен. Убедитесь, что координаты x и y прямоугольника являются целочисленными значениями без десятичных точек в них.
• Измените закругленность на свое усмотрение.
• Закрасьте объект цветом, который вам нужен для контура прямоугольника.
• Скопируйте и вставьте прямоугольник на это же место, затем подтолкните его на один пиксель вправо и вниз.
• Уменьшите высоту и ширину нового прямоугольника на два пикселя меньше, чем у оригинального, и измените заливку на тот цвет, который вам нужен для формы.
• Мы еще не закончили. Уменьшите закругленность нового прямоугольника на один меньше, чем у контура. Так как Flash назначает закругленность по пикселям, а не в процентах, наличие того же самого значения закругленности для обоих прямоугольников вызовет незначительные несоответствия по направлению к центру искривленности каждого.

Хотя этот метод должен работать в большинстве случаев, он не без ошибок. В нем нет смысла, например, в тех ситуациях, когда нужно, чтобы объект был полупрозрачным. Снижение альфа-канала заливки у прямоугольника отобразит только больше цвета контура от прямоугольника сзади. Уловка получить закругление может испортить оба прямоугольника (конвертировать их в обычные формы).

Вы также можете рассмотреть возможность использования параметра «stroke hinting» , который будет направлять при рисовании контуров на сцене.

Распределение градиентов между объектами

Кто же не любит градиенты? Дизайны в наши дни немного несовершенны без хотя бы слабого намека на градиент, который придает реалистичный и часто современный вид. Не смотря на проблему с тем, как Flash управляет формами, то, что каждая самодостаточная часть — это форма и имеет свои собственные свойства. Вы не можете применить градиентную заливку на группы объектов и нет способа «соединить» две различные формы. Что произойдет, потом, когда нужно, чтобы градиент распределился через несколько объектов — скажем, все слова в логотипе, сделанном на заказ?

Хорошо, «заблокируйте заливку» для помощи. При использовании инструмента «Paint Bucket» вы увидите значок внизу палитры инструментов с градиентом и замочком на нем. Выберите формы, которые нужно закрасить, переключите значок «Lock Fill» (заблокировать заливку), выберите градиент из палитры цветов заливки и кликните внутри любой выбранной формы. Не беспокойтесь, если не видите весь примененный градиент. Довольно часто незаблокированная заливка простирается далеко за пределы выбранных форм и необходимо использовать инструмент «Gradient Transform» , чтобы изменить размер градиента так, как вам это нужно.

Тем не менее этот метод не без недостатков. Вот некоторые вещи, о которых нужно помнить при использовании заблокированных заливок:

• Заблокированные заливки работают только с обычными формами. Если вы используете примитивные формы, то вам нужно будет разбить их на части, чтобы иметь возможность применить градиент между несколькими объектами.
• Если вы выберите одну форму из группы с заблокированной заливкой, а затем измените ее свойства, то эта форма отсоединится от группы.
• Как я говорил ранее, границы градиента в заблокированной заливке, как правило, становятся больше, чем область форм. Просто используйте инструмент «Gradient Transform» , выберите любую из форм и отрегулируйте границы градиента. Вам, возможно, понадобится немного уменьшить масштаб, чтобы видеть управляющие элементы градиента.

Поиграйте с пользовательскими контурами

Flash поставляется с набором стилей контуров по умолчанию — сплошной (solid), пунктирный (dashed), с точками (dotted), неровный (ragged), пунктир с точками (stripples) и со штриховкой (hatched) — которые в основном работают прекрасно. Для ситуаций, где вам нужно больше контроля над контуром, есть довольно мощный редактор контуров, который идет в поставке с Flash. Чтобы по-настоящему поиграть с контурами, нажмите на значок «edit» (редактирование) рядом со списком «Style» в панели свойств «Properties» выбранного контура.

Допустим, вам нужно нарисовать пунктирную линию, но знаки тире в настоящее время находятся слишком близко в стиле по умолчанию «dashed» . В панели «Edit Stroke» (редактирование контура), просто увеличьте число во втором поле ввода рядом с «dash» пока не получите нужный эффект. И в это же время установите параметр «sharp corners». Если вам надоели странные углы, которые вы получаете вместе с пунктирной линией, заданной по умолчанию в Flash, то это все исправит.

Полезные подсказки

Вот еще несколько полезных подсказок, чтобы помочь оптимизировать рабочий процесс при использовании форм в Flash.

• Из-за способа, которым Flash управляет формами, нажатие мышью на контур выделяет только одну линию контура, а не весь контур. Дважды кликните мышью на область контура, чтобы выбрать все его соединенные части сразу.
• Двойное нажатие мышью по заливке выделяет заливку и все области вокруг нее.
• Если вы хотите разделить форму вместе с некоторым пространством между двумя частями формы, то:
  1. Нарисуйте линию там, где нужно разделение.
  2. Отрегулируйте толщину линии в зависимости от того, сколько пространства нужно между частями формы.
  3. Убедитесь в том, что линия выделена; затем перейдите «Modify -> Shapes» в панели меню и выберите «Convert Lines to Fills» (преобразовать линии в заливку).
  4. Удалите линию.
• По умолчанию, в Flash у линий закругленные концы и углы, но если вам нужно, чтобы края были грубыми по каким-либо причинам, то вы можете установить значения свойств «Cap» и «Joint» в панели свойств «Properties» выбранной линии.

Вывод

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

Источник:
https://code.tutsplus.com/tutorials/flash-tips-and-best-practices-for-designers-drawing—active-8543