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

Во первых удобнее всего рисовать при наличии скетча. Поэтому если у вас есть сканер – нет ничего проще, чем сделать карандашный рисунок, сканировать его и импортировать во flash.

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

Основные инструменты, которыми вы должны пользоваться – это pen , line , selection и subselection tools:

Для явно круглых и прямоугольных областей разумно использовать oval и rectangle .
Использование pensil не возбраняется, но не приветствуется, потому как он создаёт кучу лишних точек.

Итак, с помощью pen и line необходимо нарисовать все все контуры. Не пытайтесь сразу делать правельные дуги, рисуйте прямые линии, все они потом очень легко редактируются с помощью selection (чёрная стрелочка), а где не получается добиться нужного радиуса или угла, всегда можно прибегнуть к помощи subselection (белая стрелочка.)

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

Вот собственно видео процесса прорисовки этой иллюстрации. В сумме заняло 50 минут.

А теперь немного теории для тех, кто не умеет или не понимает как правильно работать с Selection Tool.

Работа с Selection Tool

Итак, с помощью selection tool можно выделять графические объекты, перемещать и редактировать.

1. Выделение
Если возле стрелочки вы видите значок пунктирного прямоугольника. значит инструмент Selection находится в режиме выделения и зажатием левой клавиши мыши (ЛКМ) можно выделить произвольную прямоугольную область.

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

3. Редактирование линий.
Если подвести курсор к краю прямой или кривой линии. то пиктограмма возле него поменяется на дугу. И теперь вы с лёгкостью можете регулировать кривизну линий.

4. Редактирование узловых точек.
Если подвести курсор к узловой точке на объекте, пиктограмма возле него поменяется на прямой угол. Теперь с помощью Selection можно перемещать узловые точки.

5. Добавление узловых точек.
С помощью Selection также можно добавлять точки. Для этого надо подвести курсор к месту где мы хотите добавить точку, чтобы пиктограмма возле него поменялась на дугу, зажать Alt и переместить курсор немного в сторону. в результате добавится новая точка. Поверьте, это намного быстрее, чем добавлять точки с помощью Pen.

6. Слияние точек.
Если вам надо удалить какую-либо точку, её на самом деле намного проще совместить с соседней. Для этого нужно подвести курсор к необходимой точке, чтобы пиктограмма поменялась на уголок и переместить на соседнюю. Внимание! У вас должна быть обязательна включена привязка к объектам, иначе ничего не получится.

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

1. Итак, одной из задач стояло нарисовать шоколадную конфету.
2. Самый лучший способ нарисовать реалистичное изображение – срисовать его с фотографии. Идём на www.istockphoto.com или любой дугой сайт с фотографиями и находим изображение шоколадной конфеты нужной нам формы и ракурса.
3. Дальше с помощью пера очерчиваем основные линии, определяющие форму конфеты. Заметьте, полосочки, идущие по кругу конфеты я выделила другим цветом, они нам ещё пригодятся.
4. Пипеточкой с фотографии берём цвета и делаем сложный градиент. Поверьте, если в градиенте использовать не 2 цвета, а хотя бы 3-4, он смотрится более интересно и выигрышно.
5. Далее, опираясь на ту же фотографию, определяем более светлые места. Тени можно сделать так же отдельно, но в данном случае они и так были хорошо обозначены градиентом.
6. Блики. Т.к конфета у нас имеет округлую форму сверху, то и блики мы сделаем с помощью радиального градиента. Опять же не боимся смешивать цвета, ориентируемся на фотографию и работаем с пипеткой.
7. Помните разделяющие линии, которые мы нарисовали в начале? Перекрашиваем их в коричневый цвет, преобразуем в заливку (это важно, ибо конфету мы будем скейлить) и помещаем поверх наших бликов, т.к в них свет попадать не должен.
8. Вуаля, наша шоколадная конфетка готова!
9. А это вариации на тему шоколадных конфет для другой игры. Они были нарисованы не по фотографии и с меньшей детализацией, но главное остаётся ощущение, что это шоколад.

Ну и на закуску исходник этой конфеты для Flash CS4.

далее много букв и поясняющих картинок.

итак, у нас есть планшет wacom intuos3 со стандартными настройками. наша цель настроить его для себя и исключительно для flash. открываем свойства планшета, которые находятся в панеле управления windows.

выглядит наша панель настроек вот так.

чтобы наши последующие настройки работали исключительно для flash мы делаем следующие действия:
нажимаем на «+» возле параметра «приложение»

и в списке программ выбираем flash или нажимаем кнопку «обзор…» и задаём путь вручную если flash не запущен.

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

express keys

итак, начнём с экспресс клавиш.
по умолчанию на них назначены ctrl, alt, shift. как по мне абсолютно бесполезная вещь на планшете.

назначим на одну из клавиш команду shift+f5 (удалить кадр или группу выделенных кадров)
для этого в выпадающем списке выбранной клавиши выбираем команду «нажатие клавиши…»

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

затем даём имя команде, для себя, чтобы не забыть что мы там назначили.

вуаля! теперь мы можем удалять выделенные кадры одним нажатием на клавишу.
а если на другие клавиши левой группы назначить конвертирование ключевых кадров в статические (shift+f6), создание/удаления motion и shape анимации, то форматирование кадров будет вообще очень лёгким процессом!
лично мне работать с кадрами при помощи экспресс клавиш планшета стало гораздо удобнее и в несколько раз быстрее.

попутно может возникнуть вопрос, а какие горячие клавиши у команды create motion tween?
а их нету ) но их можно с лёгкостью создать. алгоритм прост:

• для начала вызываем пункт меню edit -> keyboard shortkuts…
• далее дублируем стандартные установки с помощью кнопки dublicate.
• из списка команд выбираем нужную. в нашем случае это insert -> timeline -> create motion tween
• добавляем новое сочетание с помощью кнопки add shortcut (плюсик)

• далее нажимаем нужное сочетание клавиш. если такое сочетание уже зарезервировано, появится сообщение содержащее описание команды на которую это сочетание зарезервировано. в данном случае я выбрала сочетание ctrl+shift+t (t – tween, легко будет запомнить).
• нажимаем ok. всё готово!

теперь при нажатии на эти клавиши у нас будет создаваться motion tween. и что ещё замечательно – этим же сочетанием движение можно удалить!

touch strip

но вернёмся к нашему планшету. а именно к полосам прокрутки

многие их отключают, но если вам всё же удобно ими пользоваться, то тут то и возникает вопрос: зачем нам 2 увеличения масштаба? что за непозволительная роскошь, когда одну из полосок можно настроить например… на отмену/откат (ctrl+z, ctrl+y)

и снова выбираем нашу любимую команду «нажатие клавиш» возле нужной полосы прокрутки (я выбрала левую)

теперь настраиваем верхнюю и нижнюю часть полоски на сочетания клавиш ctrl+z и ctrl+y таким же способом как и функциональные клавиши – задаём сочетание, пишем имя.

теперь мы можем с лёгкостью переходить от действия к действию!

pop-up menu

теперь о попапе.
8 экспресс клавиш и 2 полосы прокрутки может показаться недостаточным количеством, когда вспоминаешь всё, что хотелось бы на них повесить.
и тат на помощь приходит попап меню. выглядит оно вот так и содержит 2 стандартные настройки: переключение между режимами пера и мыши. если вы не используете вакомовскую мышь, то их можно сразу удалить. кстати, извините мне мой французский, но вакомовские мыши – гавно!

что же такое попап меню? по сути это альтернативное контекстное меню, которое можно вызывать верхней кнопкой пера (по умолчанию там двойное нажатие, которым мало кто пользуется).
итак. первое что надо сделать. это назначить pop-up menu нашему перу.

• переключаемся в инструментах с «функций» на «grid pen»
• выбираем кладку «перо»
• назначаем верхней кнопке пера команду «pop-up menu»

далее назначаем какую-нибудь команду, я например выбрала flash команду optimaze... ибо использую я её достаточно часто, путь к ней длинный (modify->shape->optimaze…), а сочетание клавиш трудно запоминаемое (ctrl+alt+shift+c)

выбираем команду «нажатие клавиш» в списке «добавить» и назначаем нашу команду.

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

а вот так наше попап меню будет выглядеть непосредственно во flash

а ещё при рисовании кисточкой во flash не забываем включать режим пера и учёт наклона пера, а так же регулировать степень сглаженности линий на панели properties. и рисование будет вообще в удовольствие!

вот вроде и всё. кажется ничего не забыла.
кстати таким образом можно настроить любую программу.
приятной вам планшетной работы во flash!

1. итак, мы имеем на выходе вот такой симпатичный домик. рассмотрим по порядку все шаги, которые привели к этому результату.
2. всё всегда начинается со скетча (наброска) на бумаге. можно конечно и сразу на компьютере, если у вас есть планшет, но как по мне никакой планшет не сможет сравниться с простым карандашом и листком бумаги. этот домик был нарисован гелевой ручкой в блокноте.
3. первое что я делаю это выбираю контрастный цвет для контурных линий (зачастую это синий или красный) и прорисовываю все основные контуры с помощью инструмента pen и редактирую точки и линии инструментом arrow. не используйте при прорисовке pencil, его линии зачастую получаются кривые и содержат много точке, к тому же их сложнее редактировать.
4. когда все линии прорисованы, удаляем слой с наброском, меняем цвет линий на чёрный и корректируем элементы по композиции. я увеличила домик, передвинула окошки, дорисовала облака и велосипед. планировались ещё деревья, но они не вписались )
5. подбираем основные цвета картинке. обычно это процесс у меня занимает больше всего времени. если я не знаю, чего конкретно хочу от цветовой гаммы, на помощь приходит адобовский кулер. здесь я обошлась без него, заранее зная, что хочу картинку в тёплых тонах.
6. вот как выглядит наша картинка без контурных линий. не спешите их удалять, они могут вам ещё пригодится, лучше всего скопируйте их на отдельный слой.
7. далее добавляем градиенты. в идеале нужно использовать корректирующие слои (слой с градиентной заливкой в чётных или белых тонах с прозрачностью), чтобы мы в любой момент могли поменять основной цвет без ущерба градиентным переходам. но в данном случае цвета менять я не собиралась, поэтому работала без корректирующих слоёв – просто добавляла градиент основному цвету (от более всетлого к тёмного). результат вы можете видеть.
8. далее шёл кропотливый процесс добавления бликов и теней, который и привёл домик к «карамельному» виду. и добавлены детали такие как цветочек и кружка в окошке.
9. вот блики и тени без заливки. обратите внимание на контуры окошек и забора – это нично иное как наши контурные линии, просто где-то они чёрные, а где то белые с прозрачностью 15-25%. так же добавлены градиентные блики везде, где что-то может блестеть. даже шёрстка у кошки )
10. чтобы блики смотрелись симпатичнее я использовала градиентную заливку  не белого цвета, а светло-жёлтого, в результате чего блики кажутся теплее.
11. что касается теней, то часть из них это просто градиенты чётного с прозрачностью он 0 до 25% (см. тени вокруг окошек и двери), а часть – расблёреные movie clip-ы с обычной заливкой (см тени под велосипедом и забором).

вот собственно и весь секрет. пробуйте, экспериментируйте и у вас всё получится!!!

вот например процесс отрисовки нескольких «сладких» иконок.

stamp tool (скачать)
этот штамп не имеет ничего общего с фотошоповским, но функцию выполняет полезную. инструмент предназначен для быстрого расположения символов библиотеки на сцене с заданием позиции, размера, поворота и instance name.
посмотреть видео туториал.

вот что можно нарисовать за несколько секунд. это намного быстрее, чем копировать символы и менять каждому размеры и поворот. при этом заметьте, кажый из символов имеет уникальный instance name! а для тех, кто хочет просто перевести все символы в графический объект, достаточно выделить всё и нажать ctrl+b

particlespray tool (скачать)
спрей имеет похожее действие – тоже использует символы из библиотеки. одним кликом вы распыляете нужные символы из библиотеки на сцену с рандобным размером, поворотом и альфой, имитируя действия спрея.
посмотреть видео туториал.

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

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

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

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

на самом деле для этого не нужно никаких специальных плагинов или сложных настроек, всё предельно просто.

1. нужно зайти в свойства символа и поставить галочку в свойстве enable guides for 9-slice scaling как показано на рисунке.

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

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

надеюсь данная информация будет кому-то полезна

поэтому сегодня я хотела бы дать несколько дельных советов любителям порисовать во флеше.

1. всегда! всегда удаляйте очищайте панель swatches от стандартных цветов. для этого используйте команду clear colors.
после очистки ваша панель будет иметь такой вид и у вас уже не будет искушения ткнуть в первый попавшийся цвет )

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

3. и собственно самое главное. что делать, когда нет времени, желания или способности подобрать правильно цвета.
для этого вам нужно просто взять изображение или часть изображения с понравившейся вам цветовой гаммой, пересохранить его в формате gif и импортировать с помощью команды add colors на панеле swatches.
в результате у вас будет приличный набор нестандартных цветов, который вы можете смело использовать!

удачных рисунков и анимаций вам!

но как поступить в случае, если фон неоднородный?

конечно можно сохранить нужный элемент в png и сделать отражение в фотошопе, но есть ещё один простой и интересный способ.

• нужно дублировать символ и создать в нём новый слой с градиентной заливкой. обязательно белой!!!



• символ должен быть movie clip. если это graphic, можно поменять ему тип на панели свойств.
• задать режим blend: multiply (тоже на панели properties)

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

если вы знаете ещё какие-нибудь способы, велкам в камменты
исходник можно скачать тут

1. все контурные линии одного цвета. зачастую чёрного.
2. контурные линии имеют оттенок цвета заливки, но более тёмного.
3. контурные линии не используются вообще
4. в качестве контура выступают линии нарисованные кистью.

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

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

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

если убрать контурные линии вообще, картинка станет аккуратнее, но в нашем случае некоторые детали сливаются:

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

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

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

• практически всегда наброски я рисую на бумаге карандашом или ручкой. возможно я консерватор, но никакой планшет не идёт в сравнение с обычным простым карандашом по части создания скетчей. советую поступать также. хотя иногда бывают исключения.
  
• скетч помещается в самый нижний слой и делается guige, чтобы при компиляции не отображался.
• используйте контурные линии контрастного цвета, например синюю или красную. чёрной прорисовывать очень не удобно.
• забудьте вообще о таком инструменте рисования как pencil! pen, line и oval – вот наши друзья, которые помогут нарисовать всё что угодно. все точки и линии я редактирую с помощью arrow (чёрная стрелка), subselct (белую стрелку) использую только в особо сложных узлах.
• используйте слои и группы. но без фанатизма! есть много элементов, которые можно без проблем совместить в один слой, ибо если слоёв много, с ними не удобно работать.
• не нужно сразу все элементы преобразовывать в символы, достаточно использовать группы. в символы можно будет преобразовать в самом конце, на начальном этапе они будут только мешать.
• при прорисовке я всегда меняю расположение панелей. т.к. анимации в ближайшее время не предполагается – разумно перенести панель timeline влево, при этом становится очень удобно работать со слоями, появляется больше свободного места:
  
• после того как основные контурные линии прорисованы я занимаюсь подбором цветов. во-первых практически всегда удаляю стандартную цветовую палитру, чтобы глаза не мозолила и ищу новые цветовые решения. моя палитра хорошо видна на предыдущей картинке.
• когда основные цвета подобраны, начинается кропотливая работа с градиентами, бликами и деталями.

вот собственно правила и этапы работы, которые использую я при прорисовке.
а как прорисовываете вы? что делаете в первую очередь, какие из приведённых этапов не используете и какие используете, не указанные здесь?

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