Главная > Детская комната > Flash для рисования. Рисование во Flash

Flash для рисования. Рисование во Flash

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

Начнем. Запускайте Flash и приготовьтесь читать. Получайте удовольствие!

Импорт наброска

Перво-наперво, я импортирую свой набросок, сделанный с помощью Photoshop`а или карандаша со сканером. Для этого, надо выбрать пункт меню File -> Import и выбрать файл, содержащий набросок (Замечание: я как минимум дважды проверяю, что мой набросок как минимум в два раза больше того, что я хочу получить в итоге).

В результате, набросок находится на самом первом слое в ключевом кадре.

Теперь я конвертирую свой набросок в символ (прим. пер.: название объекта во Flash`е). Для этого нажимаю F8, ввожу требуемое имя и в качестве поведения задаю "graphic" (можно и другое, здесь это не принципиально, просто так мне больше нравится).

Теперь я щелкаю по наброску и с помощью панели "Effect" изменяю непрозрачность изображения (экземпляр символа "Rough"), чтобы его было легче обрабатывать (обычно ставлю 20%).

Настройка слоя

Теперь я изменяю тип слоя на "Guide". Для этого щелкаю на него правой клавишей мыши и в выпадающем списке выбираю "Guide". Благодаря этому, когда я буду формировать мое окончательное изображение (как.swf или в каком-нибудь растровом формате), сам набросок не будет обрабатываться и в итоге не отобразится.

Еще я блокирую слой, что бы случайно не нарисовать на нем.

Обводка (наложение чернил)

Теперь я создаю новый слой, на котором буду выполнять обводку с помощью кисти. Цвет выбираю черный и включаю чувствительность к нажатию (прим.пер.: это относится к графическим планшетам). Какую толщину установить выбирайте сами, лично я использую 4й или 5й снизу списка.

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

Чистка проведенных линий

Наконец, грубая обводка завершена, и я приближаю ее и ищу области, сделанные неаккуратно. Я выбираю эти области с помощью инструмента "lasso".

Затем я нажимаю на кнопку "Smooth" несколько раз (если настроить для этой операции горячую клавишу можно реально сэкономить время) и в результате грязные линии вычищаются.

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

Закраска

Пришло время раскрашивать! Это и легко и просто. Я использую инструмент "Bucket" и заливаю области, ограниченные замкнутыми линиями.

Вы можете задаться вопросом, как заливать области, которые не замкнуты (подобно глазам на моей картинке). Я беру карандаш, включаю режим "Smooth" и, используя сильно контрастный цвет, рисую небольшие дуги, которые закрывают области так, чтобы я мог их заливать.

Теперь я заливаю полученные замкнутые области нужным цветом. Что бы избавиться от вспомогательных линий, используя инструмент "Arrow" дважды щелкните на любой части карандашной линии и нажмите "Delete".

Наложение теней

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

Карандашные линии великолепно подходят для данной работы потому, что вы можете делать острые углы, создавая пересечения отдельных линий. Так же вы можете сглаживать линии, выбирая их и нажимая кнопку "Smooth" , что бы получить желаемый результат.

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

Теперь, что бы избавиться от вспомогательных линий, дважды щелкаем по ним нажимаем "Delete". В результате вы должны получить великолепные, ясные тени (двойной щелчок выберет все линии присоединенные к сегменту, по которому вы щелкнули).

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

Теперь вы готовы к тому, что бы вывести ваше изображение и греться в лучах славы. ;o)

Более семи лет я удалённо работаю с зарубежными заказчиками из США, Канады, Австралии, Германии и других стран. Рисую графические ресурсы и анимацию для игр в Adobe Animate CC . Раньше редактор назывался Adobe Flash Professional CC .

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

Зачем нужен ещё один цикл уроков про рисование в Adobe Flash? Я много лет занимаюсь этим и считаю, что мой опыт может быть полезен начинающим. Особенно тем, кто раньше не рисовал с помощью графического планшета. Если вы хорошо рисуете на бумаге, но никогда не рисовали на компьютере, то мне точно есть, что вам рассказать.

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

Выбор графического планшета

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

Существует много производителей графических планшетов: Wacom, Genius, Huion. Я сталкивался только с первыми двумя. Всего я испробовал уже четыре планшета от Wacom и один от Genius, когда начинал. Я настоятельно рекомендую Wacom — это высокое качество за умеренную цену.

Если нет денег, не покупайте Genius, возьмите самый доступный маленький подержанный Wacom Bamboo Pen . Я использовал практически такой же, модель Wacom Bamboo Pen&Touch S CTH-460. Критических проблем за семь лет использования не было, хороший аппарат, чтобы начать. Если вы можете выделить больше денег, то берите модель покрупнее. Я использую Wacom Bamboo Fun Pen&Touch M CTH-670.

Что значят цифры и буквы в названиях моделей Wacom

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

Wacom Bamboo Fun Pen&Touch M CTH -6 70

M — размер рабочей области. Существуют S — Small (маленький), M — Medium (средний), L — Large (большой);
CTH — обозначает модельный ряд. Существуют CTL и CTH — любительские модели начального уровня с необязательными кнопками и тачпадом, PTH — профессиональные модели, DTH и DTK — профессиональные модели с встроенным дисплеем;
6 — размер рабочей области в дюймах. Существуют 4 — Small (маленький), 6 — Medium (средний), 8 — Large (большой), а также 13 и больше, но это относится только к планшетам с встроенным дисплеем. Иногда в интернет-магазинах и в объявлениях не указывают буквенный индекс, тогда можно воспользоваться цифровым, чтобы понять габариты устройства;
70 — поколение и модель. Важно понимать, чем больше это число, тем новее устройство. Для сравнения мой старый планшет имеет индекс CTH-460, современный аналог — CTH-490. Поколения отличаются на 10: 460, 470 и так далее.

Размер графического планшета

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

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

Когда вы работаете на планшете, его рабочая область проецируется на всю ширину монитора. Поэтому, чем больше планшет, тем точнее вы можете наносить мазки. И наоборот, чем больше монитор и чем меньше планшет, тем сложнее и дискомфортнее вам будет рисовать. По опыту могу сказать, что после перехода с размера S на M при работе на 29-дюймовом ультрашироком мониторе, мне стало работать комфортнее на 25-30%. Мне требуется меньше усилий, чтобы нарисовать сложный контур, в целом взаимодействие ощущается более мягким и приятным.

Графические планшеты большего размера должны обеспечить еще более комфортные условия работы, но мне не приходилось работать на L-моделях, могу лишь предположить.

Отличия любительских и профессиональных планшетов Wacom

Покупая про-модель вы получаете беспроводное устройство, изготовленное из более качественного пластика с 2048 уровнями чувствительности к нажатию против 1024 у моделей подешевле, красивейшим дизайном, дополнительными органами управления в виде кнопок и сенсорного кольца. Меня полностью устраивают младшие устаревшие модели серии Bamboo, которые сняты с производства. Разница по стоимости любительской и про-версий составит более двух раз. Таблица расставит все по полочкам:

Настройка Wacom Bamboo Pen & Touch M CTH-670

Перед подключением устройства скачиваем драйвера с официального сайта Wacom .

Перечень моделей	Ссылка на драйвера
Intuos CTL-4100/6100/4100WL/6100WL Intuos Pro PTH-451/651/660/851/860 One CTL-471/671/472/672 Intuos CTL-480/490/680/690 Intuos CTH-480/490/680/690 Intuos 5 PTK-450/650 PTH-450/650/850 Intuos 4 PTK-440/640/840/1240/540WL	Windows macOS
Bamboo Pen&Touch CTH-460/470/471/660/661/670 Bamboo Pen CTL-460/471	Windows macOS

После подключения планшета и установки драйверов запускаем приложение Wacom Preferences , которое можно найти через поиск Windows (Win + S) или в панели управления.

Основные настройки планшетов компании не отличаются, похожим образом настраиваются как любительские, так и профессиональные модели.

На вкладке Tablet можно настроить планшет под правую и левую руку, а также назначить действия для клавиш. Для начала установите их в Disabled , со временем можно будет назначить горячие клавиши.

На следующей вкладке Pen находятся важные параметры:

Tip Feel — чувствительность к нажатию. Оставляйте по центру. В процессе поймёте какая жёсткость вам по душе и настроите по вкусу;
Tracking — режим отслеживания положения стилуса. Устанавливаем Pen Mode — рабочая область планшета растягивается на весь экран. Режим Mouse используется, как замена мыши;
Остальные настройки не столь важны. Pen Buttons позволяет назначить действие на кнопки стилуса. Eraser Feel — чувствительность резинки с обратной стороны стилуса. Не использую эту возможность, так как мне быстрее переключаться с помощью горячих клавиш.

В этой же вкладке в разделе Tracking нажимаем кнопку Mapping... , чтобы настроить проецирование рабочей области планшета на экран монитора. Откроется окно Pen Mode Details .

В разделе Screen Area выбираем Monitor , если у вас несколько мониторов и указываем основной. Если монитор один, то оставляем All Screens

В разделе Scaling обязательно ставим галочку напротив Force Proportions , чтобы рабочая область не растягивалась при проецировании на экран. В этом случае часть рабочей области планшета не будет использоваться, но у нас будут нормальные пропорции 1 к 1. И если вы нарисуете круг, то на экране он отобразится, как круг, а не вытянутый эллипс.

Обязательно ставим галочку напротив Use Windows Ink , чтобы работала чувствительность к нажатию.

На следующей вкладке Touch Options снимаем галочку напротив Enable touch input , чтобы переключить планшет в обычный режим.

На остальных вкладках у меня всё отключено, так как я не использую ни жесты режима Touch, ни фирменное выпадающее меню. На этом настройка графического планшета закончена.

Animate CC или Flash Professional CC?

Adobe Animate CC — это ребрендинг Adobe Flash Professional CC, в программу добавили несколько нововведений. Ещё со старым названием завоевала огромную популярность среди художников, аниматоров и разработчиков инди-игр. Векторные принципы построения позволяют создавать спрайты для любого разрешения. Для рисования подойдёт любая версия, какую сможете достать. Инструменты рисования не меняются уже много лет, а лишь незначительно улучшаются. Я буду использовать Adobe Animate CC, но всё написанное будет применимо и для старых версий Adobe Flash Professional. К слову, в последнее время компания Adobe перешла на модель помесячной подписки для получения доступа к своим продуктам вместо дорогостоящего одноразового лицензирования. Сейчас цена за использование Adobe Animate CC составляет 20 долларов в месяц.

Первый запуск Adobe Animate CC

После загрузки создаём новый файл и выбираем тип Action Script 3.0 . В этом же окне можно указать параметры сцены:

Width и Height — ширина и высота сцены в пикселях. Выставим в 1920 x 1024, как разрешение в современном мониторе или смартфоне;
Ruler units — единицы измерения, выставляем пиксели;
Frame rate — количество кадров в секунду, оставляем 24;
Background color — цвет фона, выставляем в серый.

Эти настройки можно изменить и после создания документа. Для этого нужно выбрать инструмент Selection Tool (горячая клавиша V), открыть окно Properties и развернуть раздел Properties . Если вы не можете найти это окно, то воспользуйтесь меню Window → Properties или сочетанием клавиш Ctrl + F3.

Настройка горячих клавиш

Чтобы повысить эффективность работы нужно использовать горячие клавиши по максимуму. На первых этапах это требует привыкания и запоминания новых комбинаций клавиш, но в дальнейшем обеспечивает солидный скачок в вашей эффективности. Я переопределил большинство горячих клавиш таким образом, чтобы они находились в правой стороне клавиатуры. Почему именно в правой? Дело в том, что я левша и, соответственно, мне так удобнее. Если вы правша, то вам придётся придумать свою схему. Кроме того, я использую Rapoo E9050 и Apple Wireless Keyboard , которые выполнены в форм-факторе клавиатур для ноутбуков, поэтому если вы используете полноразмерную, то, опять же, потрудитесь и придумайте свою схему — это окупится массой сэкономленного времени — а мою схему рассмотрите, как пример.

Поймите идею: сгруппируйте основные команды на удобной стороне клавиатуры, чтобы обеспечить быстрый доступ без постоянно изменения положения руки. Большую часть времени она должна лежать на одном месте, лишь пальцы "гуляют" в небольшом радиусе, нажимая кнопки. Конечно, останутся и команды, которые требуют смены положения, но их подавляющее меньшинство. Вот моя схема:

Команда	Описание	Старое сочетание	Новое сочетание
Select All	Выбрать всё	Ctrl + A	Ctrl + A, O
Deselect All	Снять выделение	Ctrl + Shift + A	Ctrl + Shift + A, P
Undo	Отменить действие	Ctrl + Z	Ctrl + Z, [, Z
Redo	Повторить действие	Ctrl + Y	Ctrl + Y, ]
Zoom	Масштабирование	Shift + Z, Z	Shift + Z, \
Zoom In	Увеличить изображение	Ctrl + =, Ctrl + Num =	Ctrl + =, Ctrl + Num =, =
Zoom Out	Уменьшить изображение	Ctrl + =, Ctrl + Num =	Ctrl + -, Ctrl + Num -, -
Straighten	Выпрямить выделенные кривые		9
Smooth	Сгладить выделенные кривые		0
Flip Horizontal	Отразить по горизонтали		F
Flip Vertical	Отразить по вертикали		Shift + F
Cut	Вырезать в буфер обмена	Ctrl + X	Ctrl + X, X
Duplicate Symbol...	Клонировать символ		Ctrl + D
Swap Symbol...	Сменить символ		Ctrl + ]

В большинстве случаев новые сочетания не заменяют старые, а дополняют их, вводится несколько новых команд. Произвести настройку нужно через меню Edit → Keyboard Shortcuts... . В поле для поиска вводим название команды, в колонке Shortcut кликаем на пустом месте напротив нужной команды и нажимаем новое сочетание клавиш.

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

Настройка кисти

Brush Tool (горячая клавиша B) — инструмент кисть, самый используемый при рисовании. Настройки сосредоточены в двух окнах:

Настройка кисти закончена, давайте нарисуем что-нибудь.

Рисуем с помощью кисти

Подберите подходящий цвет с помощью окна Color (Ctrl + Shift + F9), выберите инструмент кисть (B) и начните с одного длинного штриха с небольшим усилием, чтобы очертить будущую фигуру. Дальше обведите полученный контур, чтобы сгладить все неровности — кисточка готова.

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

Adobe Animate CC работает на векторных принципах. Все объекты описываются математически и могут масштабироваться без потери качества в отличии от растрового подхода. Это позволяет выполнять манипуляции с векторными объектами, чего мы никогда не сделаем с такой же легкостью в растровом редакторе. Мы можем сглаживать и упрощать контуры, выравнивать кривые линии, изменять пропорции и деформировать графические объекты без потери качества. Каждый штрих автоматически преобразовывается в математические кривые, которые мы можем точно подгонять и изменять.

Чтобы убедится во всём вышесказанном, активируйте инструмент Subselection Tool (горячая клавиша A) и выберите только что нарисованную кисть. Теперь вы можете разглядеть точки векторного контура и даже изменить их.

Заключение

Сегодня мы настроили Adobe Animate CC и готовы к началу рисования. Попрактикуйтесь немного прежде, чем мы продолжим. Научитесь рисовать простые геометрические фигуры без искажений, попробуйте различные цвета и настройки кисти (поэкспериментируйте с параметром Smoothing).

Рисование во Flash форм

Выберите инструмент рисования форм.

Щелкните на инструменте "прямоугольник" (rectangle tool) чтобы нарисовать прямоугольник или квадрат.

Щелкните на "овал" (oval) чтобы нарисовать овал или круг.

Щелкните на "примитив прямоугольника" (rectangle primitive) чтобы нарисовать прямоугольник в режиме объединения контура и заливки.

Щелкните на "примитив овала" (oval primitive) чтобы нарисовать овал в режиме объединения контура и заливки.

Щелкните на "многоугольник" (polystar tool) чтобы нарисовать многоугольник.
Заметьте, что Flash CS5 всегда показывает активной кнопку того инструмента, которым Вы пользовались последним.

Щелкните на инструменте "цвет контура" (stroke color).

Выберете цвет.

Щелкните на инструменте "цвет заливки" (fill color).

Выберете цвет.

В любом месте сцены (Stage) щелкните кнопкой мыши и не отпуская её потяните. Отпустите кнопку.

Вы создали фигуру.

Дополнительная информация

Для того чтобы во время рисования во Flash создать прямоугольник или овал с точными размерами необходимо вызвать диалоговое окно "размеры прямоугольника" (rectangle settings) или "размеры овала" (oval settings). В окне "размеры прямоугольника" можно задать радиус скругления угла если Вам нужен прямоугольник со скругленными углами. Для того чтобы открыть это диалоговое окно нажмите клавишу Alt и щелкните в любом месте на сцене (Stage). Диалоговое окно откроется. Введите в соответствующие поля ширину, высоту и радиус, там где это применимо. Нажмите кнопку OK. Flash поместит созданный прямоугольник или овал в то место на сцене, где Вы щелкнули.

Инструмент "примитив прямоугольника" (rectangle primitive) рисует прямоугольник с небольшими точками в углах для рисования прямоугольников со скругленными углами. Используя инструмент "выделение" (selection tool) Вы можете щелкнуть на одной из этих точек и потянуть, скругляя угол.

В случае с овалом, где тоже есть такие точки, Вы удалите определенный сектор в нем.

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

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

Рисование одежды во flash

Время от времени ко мне через сайт обращаются с просьбой подсказать что-то по рисованию или по анимации во флеше.

Я всегда стараюсь отвечать на вопросы, если, конечно, сама владею информацией.

Сегодня пришло письмо с просьбой написать урок по рисованию:

Цветовые ключи (Color keys). Поиск цветового решения

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

Как нарисовать волосы

Не так давно через сайт поступила просьба написать, как я рисовала волосы . Давненько не выкладывала уроков, и решила - а почему бы и нет, напишу пару строчек про волосы:) Я бы не называла это руководством к действию, как верно рисовать волосы. Что именно так они рисуются, и никак иначе. Просто коротко опишу сам процесс, как это делала я. Возможно, будет интересно не только одному человеку.

Техники и стили рисования во флеше

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

По характеру линий можно класифицировать:

1. Однородный контур – рисуется карандашом (Y), в итоге получаются линии одинаковой толщины. Чтобы рисунок не выглядел очень однообразно, можно использовать линии разной толщины, например, по краям толщину линии берем больше, а более мелкие детали (например, элементы одежды) прорисовываем линией потоньше. Такой контур очень удобен для быстрой заливки.