Flash animation

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

Во первых удобнее всего рисовать при наличии скетча. Поэтому если у вас есть сканер – нет ничего проще, чем сделать карандашный рисунок, сканировать его и импортировать во 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, с помощью которого очень удобно редактировать линии даже мышкой, я бы сказала в первую очередь мышкой. И если вы присмотритесь, то легко заметите на видео, что я паботаю практически только этим инструментом.
Удачи вам и приятных рисунков.

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

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

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

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

далее много букв и поясняющих картинок. Read the rest of this entry »

меня уже несколько раз просили более подробно рассказать о прорисовке/рисовании во flash. в частности просили рассмотреть на примере «карамельного домика», который вы видите на 1-м слайде флешки. обещания я свои выполняю, поэтому присаживайтесь поудобнее и слушайте внимательно.

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

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

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

бороздя просторы интернета я наткнулась на интересный сайт www.flashlabs.eu, на котором представлены 3 занимательных flash расширения, которые в первую очередь будут интересны тем, кто любит рисовать во flash. итак, расскажу о каждом из них в отдельности.

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

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

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

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

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

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

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

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

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

Read the rest of this entry »

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

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

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

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

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

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

наверное один из самых распространённых элементов стиля web 2.0 это отражения.
его легко можно сделать с помощью альфа канала в градиентной заливке.
заливка должна быть того же цвета что и общий фон.

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

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

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



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

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

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

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

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

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

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

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

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

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

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

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

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

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

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