Рисование во Flash. Хитрости Flash и советы для дизайнеров: рисование

10 хитростей, о которых должен знать флеш-художник

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

1.Рисовать во флеше можно и не имея графического планшета. На выручку приходит инструмент перо (Pen Tool). Но эскиз лучше нарисовать на бумаге и отсканировать.

2.Несложные персонажи очень просто сложить из примитивов, как конструктор.

3.Для отрисовки эскизов удобно использовать опцию Onion skin на таймлайне. Это своего рода инструмент-калька – позволяет просматривать предыдущие кадры. Итак, эскиз помещаем в первый кадр, а рисуем во втором, активировав Onion skin.

4.Рисовать желательно при увеличении рабочей области (zoom in). Где-то когда-то прочитала совет увеличивать рабочую область до 400 %. Не совсем понимаю почему именно 400, беру и больше:) Считается, что таким образом линии получаются более ровными и гладкими.

5.Кисть во флеше имеет свою особенность – она меняет свой размер по мере приближения и отдаления области рисунка. Чем дальше изображение, тем она толще, а чем ближе – тем тоньше соответственно.

6.Важно освоить инструменты коррекции линий Smooth и Straighten Tool на панели инструментов в графе Options. Smooth смягчает контуры, а Straighten – делает их жестче, прямее. И в этом случае флеш имеет особенность: сглаживание при разном масштабировании рабочей области происходит по-разному. При приближении объекта к нам оно более плавное и незаметное, при отведении – более грубое. Увеличивая – уменьшая рабочую область, можно регулировать степень сглаживания, чтобы добиться наилучшего результата. Желательно каждую линию, будь-то овал лица, контур волос, глаза прочее редактировать по-отдельности, так будет проще контролировать процесс сглаживания.

7.Карандаш. Чаще всего обращают внимания на его 3 режима на панели инструментов Options – Smooth (сглаживание), Straighten (выпрямление), Ink (чернильная линия), но реже упоминают о более полезном свойстве на панели Properties – соединение сегментов линий и форма окончания линии. Они могут быть скругленными, острыми и со скосом (bevel).

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

8.Оbjects drawing на панели инструментов – полезная опция, чтобы части рисунка не слипались, а существовали как отдельные объекты. Это позволяет редактировать картинку в будущем.

9.Чтобы уменьшить вес графики, используем функцию оптимизации. Это важно для банеров, ведь требования к банерам часто жесткие – до 15-25 кб, например. А в голову уже не приходит, что еще можно выбросить, чтобы втиснуться в нужный размер. То же касается и онлайн флеш-игр, в некоторых случаях графику нужно максимально упростить (уменьшить количество точек и кривых). В таких случаях оптимизируем графику: modify – shape – optimize. Если включить превью,можно наблюдать, как оптимизация отражается на внешней форме объекта.

10.Растровые картинки, линии и текст можно преобразовать в форму для дальнейшего редактирования.

– текст и растр – с помощью разбивки Ctrl+B:

– карандашные линии – путем преобразования линии в заливку : modify – shape – convert lines to fills. Если объект покрылся сеточкой – значит, процедура прошла успешно:) И можно делать с ним все, что угодно.­

Рисование во Flash. Хитрости Flash и советы для дизайнеров: рисование

Главная » Хитрости Flash и советы для дизайнеров: рисование

Хитрости Flash и советы для дизайнеров: рисование

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

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

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

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

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

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

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

Режимы рисования во Flash CS6

На этом уроке Flash CS6 я расскажу вам о режимах рисования в этой программе.

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

По умолчанию во Flash используется Merge Drawing mode (режим рисования: слияние), но при необходимости вы можете активизировать Object Drawing mode (режим рисования: объекты).

Если же во время рисования вы используете инструменты Rectangle Primitive tool (примитив прямоугольника) или Oval Primitive tool (примитив овала), то вы сможете использовать третий режим Primitive Drawing mode (режим рисования: примитивы)

Режим рисования Merge Drawing mode

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

Режим рисования Object Drawing mode

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

Для того, чтобы включить режим рисования Object Drawing mode , выберите инструмент рисования, который вы хотите использовать, а затем кликните на иконке Object Drawing в нижней части панели Tools , там где расположены различные опции.

Чтобы превратить объект в форму ( Merge Drawing mode ), выделите его на сцене и нажмите Ctrl+B .

Чтобы конвертировать форму в объект ( Object Drawing mode ), выделите ее, а затем в главном меню программы выберите Modify > Combine Objects > Union .

Режим рисования Primitive Drawing mode

Во время использования инструментов Rectangle Primitive tool или Oval Primitive tool , Flash рисует формы в виде отдельных объектов. Но в отличие от обычных объектов, вы можете изменять радиус углов, а также начальные и конечные точки у примитива прямоугольника и настраивать внутренний радиус примитива овала, используя панель Properties .

Источники:

https://flash-animated.com/10-khitrostei-o-kotorykh-dolzhen-znat-flesh-khudozhnik
https://jwinters.ru/adobe-flash/hitrosti-flash-i-sovety-risovanie/
https://uroki-flash-as3.ru/uroki-flash-cs6/rezhimy-risovaniya-flash-cs6.html