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. Если объект покрылся сеточкой – значит, процедура прошла успешно:) И можно делать с ним все, что угодно.­

Приятной работы:)

Комментарии
Аватар пользователя Namelessspirit

Почему то, что находится за пределами размеров кадра, видно на выходе? Не могу нигде ответ найти Sad переклацала уже все настройки...с ума сойду скоро Sad помогите сиротке, пожалуйста ^^

Аватар пользователя Ilya_Walker

Namelessspirit пишет:
Почему то, что находится за пределами размеров кадра, видно на выходе? Не могу нигде ответ найти Sad переклацала уже все настройки...с ума сойду скоро Sad помогите сиротке, пожалуйста ^^

Может не верно указанна рабочая зона?

Аватар пользователя Дмитрий Mitsi101

"Flash Professional экспортирует первый кадр SWF-файла в виде JPEG-файла, если не задан другой ключевой кадр".

Аватар пользователя Alex80

Спасибо большое за ваши уроки и сайт.
Хочу во флеш игре-платформере создать главного героя и монстров (обитатели замка - привидения, вампиры и тп) графикой попроще типу такого:
http://www.heroeswm.ru/army_info.php?name=maiden
Как лучше рисовать эту анимацию? Видел несколько уроков где персонажей сначала рисовали пером, правда это были более сложные персонажи в изометрии. Мне как начинающему более проще рисовать карандашом/кистью. Как лучше-быстрей сделать анимацию - по принципу "марионеточной" сборки или с использованием bone tools? Что можете посоветовать для оптимизации работы над моим заданием, как эффективней его выполнить?
Спасибо за ответы.

Аватар пользователя Oksana

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

что касается анимации: если вы хорошо владеете костями - используйте их. я лично кости почти не использую, привыкла motion tween.

 

Аватар пользователя Alex80

Oksana пишет:
я лично кости почти не использую, привыкла motion tween

Имеется ввиду старый motion tween (cs4 и ниже) -- в cs5+ это уже classic tween или используете все же новый motion tween с motion редактором и тп?

И еще вопросы:
1) Для создания персонажей в cs5-6 лучше использовать символ graphic или movie clip? Какая практическая разница между ними для игростроя? graphic меньше "весит", лучше экспортируется или что-то еще? Я не говорю про удобство просмотра анимации на time-щкале и тп общеизвестные отличия, интересна именно практическая эффективность одного символа над другим при создании анимированых персонажей, динамичных фонов, тайлов, оптимизации и тп.
2) Я повторил урок с бегущими шахтерами (он есть на вашем сайте, да и в нете нарыл все уроки этого автора, очень интересно). Все получилось, доволен. Но вот swf файл с 3-мя шахтерами почти в 3 раза больше весит чем файл с 1-м. Поясните этот момент пожалуйста, я думал, что символы помогают довольно много места экономить а так получается что информация сумируется а не дублируется. Выслал на ваш мейл свою "работу". Очень интересно как бы вы ее оптимизировали и какие ошибки бросаются в глаза?
3) Какой обычно выставляется размер сцены при разработке флеш игр? У меня фон неба/травы у "бегущего шахтера" вылазит за края и это видно при проигрывании файла (Ctrl+Enter), хотя он нарисован именно в области сцены)
Буду очень благодарен за подробные ответы. Еще раз спасибо, понимаю, что сильно напряг. =))

Аватар пользователя Oksana

Ответила на почту, вы туда продублировали вопросы

Аватар пользователя Alex80

Спасибо, разобрался:)
1. Ответте плз еще на вопрос про motion tween.
2. И еще один момент. Вот, к примеру, у меня герой флеш-платформера стреляет по "монстру". В момент пересечения координат пули и монстра срабатывает анимация смерти монстра. Так вот, лучше эту анимацию персонажей делать graphic или movie clip? Насколько я знаю, graphic нельзя закодить as3, но во всех уроках, которые я видел в ютюбе художники рисуют персонажей (состояния покоя, бег, атаку и тп) именно в graphic и отправляют результаты програмисту. Помогите разобраться что же насамом деле там происходит.

Аватар пользователя Oksana

1) да,я имела ввиду classic tween

2) graphic стоит использовать для анимации, в особенности для анимации персонажей и сложных анимаций внутри символов, а movie clip в большей мере там, где необходимо использовать action script.

здесь можно прочиатть,если моя заметка не пролила свет на этот вопрос - http://flash-animation.ru/category/symbols/

Аватар пользователя Alex80

Я читал эту инфу Лерики, когда гуглил и сам пытался разобраться в этом вопросе. Просто мне показалось странным, что люди так тяготеют к graphic учитывая что к ним нельзя применить as3, фильтры (тень, блюр...), музыку и тп. Кстати, если человек сделал анимацию graphic, а потом вдруг осознал, что надо ее отфильтрить или закодить as3 как ему быстро переобразовать ее в movieclip?

Аватар пользователя Oksana

На панели  properties  легко поменять свойство клипа с графики на мувиклип и наоборот.

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

Аватар пользователя Alex80

Спасибо

Аватар пользователя Ле=)

Оксана, подскажите пожалуйста очень начинающему во Флеше человеку! Задача раскрасить набросок. Его я с горем пополам наваяла кистью - на одном слое куча отдельных линий. Теперь хочу раскрасить его, но заливка работает только для замкнутых контуров и я не понимаю, как можно ей воспользоваться? http://lemo4ka.tumblr.com/image/35989963636 - вот так это выглядит.
В итоге я красила так: выделяла каждую область пером на новом слое и заливала, но это заняло ОЧЕНЬ много времени. Есть ли способ проще?

Аватар пользователя Oksana

Можно выделить все линии и нажать Ctrl+B - тогда все слипнется (если расположено на одном слое) и можно закрашивать обычным способом с помощью Paint Bucket Tool (K). в чем минус - волосы и глаза слипнутся в кучу и появится куча ненужных перекрывающих линий. лучше в вашем случае волосы и челку выделить(удерживая Shift, кликаете по каждому кусочку) и перебросить на отдельный слой. а дальше - Ctrl+B и красим.

Аватар пользователя Михаил

Большое спаибо за статью и сайт в целом! Очень интересный!

Аватар пользователя Oksana

пожалуйста)

Аватар пользователя Гость

ув.Администрация,если можете подскажите вы,когда рисую во flash cs3 profesional карандашом,квадратом,кругом овалом,линией, они выделяются зеленым,вне зависимости от того какой я выбрал цвет

Аватар пользователя Oksana

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

Аватар пользователя Гость

Что делать???когда рисую цвет фигур не отображается,как собственно и заливка,кто знает что сделать надо?

Аватар пользователя Oksana

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

Аватар пользователя Svetlana

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

Аватар пользователя AnnTenna

Большое спасибо за статью! Многое из этого не знала))
Помню, как я с кисточкой долго мучилась и не понимала, от чего контуры растут, а вон оно что, оказывается! ))

Аватар пользователя Oksana

пожалуйста)

Аватар пользователя Роман

Не помню, оставлял уже комментарий или нет.

Ваш блог просто чудесный, не останавливайтесь - узнал много нового и интересного! Прекрасные приёмы, туториалы и важная информация - просто супер!

Спасибо!

Аватар пользователя Oksana

и вам спасибо за отзыв,Роман)

Аватар пользователя Disco Fish

Для обрисовки отсканированного рисунка, я делаю проще. Просто создаю пустую группу (ctrl+G) и тем самым рисунок становиться светлее. То есть черные линии будут светлее. Так гораздо быстрее и удобнее, нежели создавать дополнительные слои или кадры с "калькой" Smile

Аватар пользователя Oksana

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

Аватар пользователя Disco Fish

Это да, соглашусь с вами. Просто у меня привычка. Как можно меньше слоев Smile

Аватар пользователя Павел

Огромное спасибо, про оптимизацию не знал.
Из 4651 кривых получилось 262 Smile

Аватар пользователя Oksana

полезный инструмент,да)

Аватар пользователя Kashur

Спасибо все пригодилось :Д

Аватар пользователя Oksana

пожалуйста)

Аватар пользователя doc

подсмотрел в одном уроке.
там художник назначал straighten и smooth на хоткей кнтрл+2 . и сглаживал не всю линию, а выделяя ее кусочками.
очень быстро и удобно получается.
Только вот в flash cs5 я не смог привязать эти операции на хоткеи - их просто нет в списке тулзов. Может кто-то подскажет как это сделать.. Потому как каждый раз тянуться мышой к иконке...

Аватар пользователя Oksana

doc пишет:

подсмотрел в одном уроке. там художник назначал straighten и smooth на хоткей кнтрл+2 . и сглаживал не всю линию, а выделяя ее кусочками. очень быстро и удобно получается. Только вот в flash cs5 я не смог привязать эти операции на хоткеи - их просто нет в списке тулзов. Может кто-то подскажет как это сделать.. Потому как каждый раз тянуться мышой к иконке...

посмотрите здесь, последний плагин - smooth hotkey.

Аватар пользователя Oksana

да, в списке инструментов я их тоже не нашла.вот здесь решают похожую проблему для цс4, возможно,поможет - http://bbs.coldhardflash.com/viewtopic.php?f=19&t=3264

Аватар пользователя ArtPL

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

А зачем? Чем плохо сделать эскиз на одном слое а рисовать на другом? Так можно заблокировать картинку и случайно не нарисовать не на том слое.

Onion skin больше подходит для создания анимации (видно кадры до и после текущего)

Аватар пользователя Oksana

Как правило, карандашный рисунок,если его предварительно не осветлить сильно в фотошопе(а не все обрабатывают сканы в фотошопе),достаточно темный. Если рисовать темным по темному эскизу глазу быть неудобно,лично моему глазу совсем неудобно.К сожалению, нет во флеше возможности применить прозрачность к слою,как в фотошопе или в иллюстраторе.Чтобы эскиз сделать светлее и тем самым убрать лишние оттенки серого,которые отвлекают от основных линий - или пользуюсь onion skin, как описано выше, или сохраняю рисунок в символ и применяю к нему альфу,и дальше рисую на отд.слое,как вы описываете.Надеюсь,ответила на ваш вопрос,а зачем)

Аватар пользователя Павел

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

Аватар пользователя Игорь

слой нельзя сделать прозрачным, НО его содержимое преобразовываем в мувиклип, и уже мувику выставляем какое хочешь значение alpha, и просматривать удобнее результат (ctrl+enter) -- ставим слою с эскизом guide и при компиляции будет виден только наш оригинал Smile

Аватар пользователя Oksana

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

Аватар пользователя mak

Отличные советы! про масштабирование и смуфинг не знал раньше, спасибо!

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

Еще хотел бы поделиться полезной штукой.
Поставил на хоткей преобразование графики в Drawing Objects, чтобы постоянно не лазить в меню. Получается быстро разбивать и собирать объекты, если надо сделать тень, или добавить обводку.

Аватар пользователя Oksana

немножко чудной способ с накладывание поверх полупрозрачного прямоугольника,но результат тот же,поэтому зачет!Smile
а не знаете как на хоткеи поставить Smooth и Straighten? там человек, несколькими комментариями выше, спрашивает, у меня пока тоже не получилось, может, вы подскажете?

Аватар пользователя Алексей

Огромное спасибо. Очень много полезностей узнал!

Аватар пользователя Oksana

на здоровье)

Аватар пользователя Гость

Как всегда не в бровь а в глаз:)

Пожалуйста, оставьте ваш комментарий. Спасибо!
Содержимое этого поля является приватным и не будет отображаться публично.
CAPTCHA
Вопрос для проверки
Заполните поле проверки