Уроки

Новости

Статьи

Анимация

Анимация вращения блестящих предметов III

Анимация вращения блестящих предметов II

Анимация вращения блестящих предметов I

Создание анкерного колеса.

1 международный благотворительный фестиваль мультфильмов

2015-01

2014-12

2013-08

2013-03

2012-12

2012-11

2012-09

м/с "Пилот"

Аниматор.ру

От мульта

flash-animated.com

Клуб аниматоров рунета

Уроков: 19
Статей: 4
Комментариев: 68
Человек на сайте: 4

 

Яндекс цитирования   Jokerom Stock Images

Векторная кругосветка.

Автор: Игорь Романов

Дата: 2012-08-24

    Конечно, самый простой и самый трудоемкий способ позволяет использовать только Adobe Flash. Однако, для ускорения процесса желательно использовать комплексно две программы, это – Adobe Photoshop и Adobe Flash.
Adobe Photoshop – обработка растрового изображения (самая скрупулезная часть процесса).
Adobe Flash – перевод растрового изображения в векторный формат методом трассировки. Заливка нужным цветом или градиентом, преобразование в символьный объект одного из трех типов.
    Давайте сразу рассмотрим второй способ, как доступный для наиболее широкого круга пользователей.

    Шаг 1. Прежде всего, необходимо раздобыть само растровое изображение, которое мы будем преобразовывать в векторный формат. Для этого отправляемся на страничку Карты Google, Находим и нажимаем на клавиатуре кнопку Print Screen. Таким образом изображение с экрана захвачено и помещено в буфер обмена Windows. Сразу же запускаем Photoshop, комбинацией клавиш Ctrl+N открываем диалоговое окно "New" с параметрами нового документа. Цифровые значения в окошках Width (Ширина) и Height (Высота) уже будут соответствовать разрешению экрана Вашего монитора. Ничего не меняя в этом диалоговом окне, нажмите кнопку "OK". Откроется новый пустой документ, после чего, нажмите сочетание клавиш Ctrl+V (Вставить), и снимок экрана сразу же перекочует из буфера обмена в окно этого документа в виде нового слоя в палитре Layers (Слои). Нажав кнопку ниже, Вы сможете посмотреть визуальную последовательность описанных действий.



* Чтобы корректно отображались все всплывающие окна, на которые ссылаются такие кнопки,
пожалуйста, закрывайте после просмотра уже открытые окна,
иначе они будут перекрываться Ваши браузером с просматриваемой темой!


    Шаг 2. В Photoshop с помощью инструмента Crop Tool (Фрагмент), отсеките все лишнее, не относящееся к карте. Используя инструмент Pencil Tool (Карандаш), необходимо избавиться от всех названий, границ и зеленых островков, расположенных на суше, какие только найдутся на карте. Части суши, закрашивайте тем же бледно-серым цветом, что и вся суша (#f4f3f0). Названия океанов и государств, перекрывающие какую-либо водную поверхность, закрашивайте светло-голубым "океаническим" цветом (#a5bfdd). Бережно обращайтесь с береговой линией материков, островов и внутренних водоемов, но степень достоверности и подробности карты мира, для нашей задачи вещь – относительная, поэтому самые мельчайшие островки и лужицы размером в несколько пикселей, я думаю, можно спокойно закрасить. В результате у Вас должен получиться один двухцветный сегмент карты мира от ее левой до правой вертикальных границ.



    Шаг 3. Теперь необходимо максимально увеличить контраст между оттенками суши и водоемов, а именно сделать сушу белой, а воду черной. Для этого откройте диалоговое окно Levels (Уровни), нажав комбинацию клавиш Ctrl+L или воспользовавшись командой Главного меню Image => Adjustments => Levels (Изображение => Корректировки => Уровни). Под графической диаграммой тонов Input Levels введите новые цифровые значения: 236; 1; 238, и нажмите "ОК". Диалоговое окно закроется, а изображение карты мира станет черно-белым. Сохраните, получившийся результат, в файл "Карта мира" с расширением .jpg в удобной для Вас директории на своем компьютере. На этом работа в Photoshop закончена, программу можно закрыть и приступить к работе во Adobe Flash.


    Шаг 4. Создайте в Adobe Flash новый документ произвольной высоты и ширины, с произвольной частотой смены кадров и сохраните его на своем компьютере под названием "Векторная карта мира" в удобной для Вас директории. Импортируйте в рабочее пространство сцены только что созданное в Photoshop черно-белое изображение "Карта мира.jpg" – File => Import to Stage … (Ctrl+R). К выделенному в сцене изображению примените команду Главного меню: Modify => Bitmap => Trace Bitmap … (Изменить => Растр…=> Трассировать растр…). В открывшемся одноименном диалоговом окне установите следующие параметры: Minimum area3; Curve fitVery Tight, остальные параметры можно оставить без изменения. (Можете самостоятельно поэкспериментировать с этими и другими настройками, но, на мой взгляд, такие параметры трассировки самые оптимальные). После завершения операции трассировки все элементы, относящиеся к водоемам, можно удалить, их потом заменит общий фон, который можно разместить на слое ниже. Оставшуюся сушу, залейте нужным Вам цветом или градиентом, все острова и материки сгруппируйте или преобразуйте в символьный объект для последующего масштабирования или анимирования.


Подведение итогов:

    В этом уроке Вы узнали об очень удобном инструменте преобразования растрового изображения в векторный формат. Разумеется, с этой задачей можно было бы справиться и средствами только одной программы Adobe Flash, но тут многое зависит от навыков пользователя и производительности компьютера. К тому же, при трассировке скриншота, без обработки в Photoshop, число узловых точек векторного объекта составило бы примерно 50000, что достаточно заметно могло замедлить работу программы. Зато, заранее обработанный в Photoshop скришот после трассировки имеет чуть больше 14000 узловых точек. Где и как можно применить полученный результат, Вы узнаете, просмотрев урок "Крутится-вертится шар голубой …"




   Если у Вас возникнут какие-либо затруднения в процессе выполнения этого урока, можете задавать свои вопросы непосредственно в комментариях к этой теме. Желающие поделиться своими результатами, направляйте свои анимационные миниатюры на admin@flashcinema.ru


Данный урок подготовлен для Вас командой сайта www.flashcinema.ru
Правила перепечатки материалов сайта

Просмотров: 15915

Ваша оценка: 1 2 3 4 5


Пожалуйста, оставьте свой комментарий.
Спасибо!

Комментарий добавил(а): Samovarnet
Дата: 2012-09-09

Вот, спасибо! Пост отличный! Давно искал нечто подобное... Теперь буду атлас себе делать... Но вот вопрос: - Я не совсем понял работу инструмента Pencil Tool (Карандаш) в Фотошоп - Как убрать названия и т. д.?

Комментарий добавил(а): Игорь
Дата: 2012-09-09

Рад, что пригодилось! А карандаш используется просто для вымарывания (закрашивания) ненужных элементов изображения карты. В противном случае, эти названия и подобные элементы тоже подвергнуться обработке "трассировщика" и превратятся в области заливки с дополнительными узловыми точками. Сами названия, если они Вам необходимы, лучше писать уже в самом векторном редакторе, в данном случае в Adobe Flash.

Комментарий добавил(а): Samovarnet
Дата: 2012-09-21

Всем доброго времени суток! А я использовал другой подход при создании векторной карты мира http://samovarnet.ru/samovar-v-internete-nashel-globus/

Комментарий добавил(а): Игорь
Дата: 2012-09-21

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


Введите результат вычислений:

Поисковый запрос не должен
быть менее 4-х символов!