Трассировка растровых изображений

Трассировкой, или «векторизацией» называют процесс преобразования изображения из растрового формата в векторный. Если бы стояла задача трассировки без потери информации, то пришлось бы вокруг каждой точки, формирующей растровое изображение провести ограничивающую линию и внутри полученного контура создать заливку, соответствующего цвета. (на самом деле, линия не создаётся, а просто заливки касаются друг друга) Полученное изображение занимало бы очень много место. Поэтому при трассировке используются следующие допущения

• Точки с близкими цветами объединяются
• Отдельно стоящие точки или небольшие группы с отличающимися цветами игнорируются
• Ограничивающие линии сглаживаются

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

Перед началом трассировки изображение необходимо импортировать в редактор. В меню «File» выберите команду «Import» и укажите файл растрового изображения. Далее, в меню «Modify» выберите команду «Trace Bitmap». На экране появится диалог настройки трассировки.

«Color Threshold» устанавливает величину интервала цветов, в пределах которого, они считаются равными. Увеличение значения приводит к снижению качества изображения и уменьшению занимаемого им объёма памяти. При малых значениях «Color Threshold» векторное изображение лучше передаёт перепад цветов. На рисунке показаны исходное растровое изображение и результаты трассировки при значениях «Color Threshold» 20 и 100

Исходное изображение после трассировки СT=20 после трассировки CT=100

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

Параметры «Curve Fit» и «Corner Threshold» определяют форму границ между областями заливки. Первый параметр определяет степень сглаживания границ. При значении «Pixel» границы между областями заливки – прямоугольные и соответствуют точкам растрового изображения. При значении «Very Smooth» границы получаются максимально гладкими. На рисунке приведены увеличенные фрагменты изображений, полученные трассировкой с разными параметрами сглаживания. («Pixel» - слева, «Very Smooth» - справа)

При сильном сглаживании объём изображения снижается, но страдает и качество.

«Corner Threshold» теоретически определяет количество углов в границах между заливками. Отличия между изображениями, полученными при разных значениях данного параметра, автору визуально обнаружить не удалось, хотя изображение с малым числом углов («Few Corner») на доли процента занимало меньше места.

Упражнение

Получите векторное изображение человека, из растрового. Измените цвет одежды, глаз, волос.

Текстовые надписи

Текстовая надпись является особым объектом Flash. Она не взаимодействует с линиями или заливками. Её невозможно удалить ластиком. Для создания текстовой надписи необходимо выбрать инструмент . Далее мышкой указать её место положения. Надписи бывают постоянной и переменной ширины. Если щёлкнуть мышкой на сцене, то в точке щелчка возникнет прямоугольник с курсором и круглым маркером в верхнем левом углу. Вводимый текст будет увеличивать ширину надписи. Если вместо щелчка потащить мышь по сцене, то вместо кружка в углу возникнет квадрат. Такая надпись будет иметь постоянную ширину. Вводимый текст, если он не умещается, будет переноситься на новые строчки. Разумеется, о правилах русского языка при переносах не может быть и речи. Это не Word.

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

Средства настройки шрифта доступны на панели «Character». Раскрывающиеся списки позволяют выбрать шрифт и его размер, далее выбор цвета шрифта и начертания (жирный, курсивный).

Если выделить часть введённого текста, или всё текстовое поле целиком, то заполнив поле URL можно превратить текст в гиперссылку.

Для настройки параметров абзаца необходимо активизировать панель «Paragraph». Кнопками группы Align устанавливают выравнивание в текстовом поле, а списками ниже – отступы слева, справа, красную строку и междустрочный интервал.

При создании текстового поля, убедитесь, что на панели «Text Options» в раскрывающемся списке установлено значение «Static text».

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

Упражнение.

Напишите на сцене два, каких ни будь лозунга. Один в поле постоянной ширины, а другой – в поле переменной ширины. Преобразуйте надпись постоянной ширины в надпись переменной ширины. Со вторым лозунгом проведите обратную операцию. Могут ли в одной надписи находиться буквы разных цветов и размеров? Можно ли повернуть, или перекосить надпись?

Как пустить надпись по кругу? (Не мучайтесь, никак! Только делать отдельную надпись для каждой буквы. А может, можно?).

 

Текст надписи можно преобразовать в область заливки. Для этого следует выделить надпись и нажать комбинацию Ctrl B, или выбрать в меню «Modify» команду «Break Apart».

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

Упражнение

Создайте надпись, преобразуйте её в область заливки. Перечеркните буквы линией.

К верхним и нижним частям букв примените различные растровые заливки. Линию удалите.

Работа со слоями

Слои используются во многих графических редакторах. Обычно они несут функцию третьего измерения, позволяя автору перемешать отдельные изображения на передний план, позволяя им перекрывать остальные. Иногда слои позволяют разделять рисунок по информационному признаку. Например, в программе Autocad чертёж может быть выполнен в одном слое, а размерные линии размещаться в другом. Часто слои используют для исключения взаимодействия различных изображений или для сохранения их от случайных изменений. Все эти функции несут слои и в редакторе Flash. Средство управления слоями расположено в левой части хронометрической линейки.

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

Кнопка добавит новый слой над текущим слоем. Кнопка удалит текущий слой. Те же операции можно произвести, щёлкнув на значке слоя правой кнопкой мыши и выбрав команды «Insert Layer» или «Delete Layer». Двойной щелчок по имени слоя позволит его переименовать. При щелчке по значку слоя он становится активным и всё, что рисуется на сцене, помещается именно в этот слой. Изменить порядок расположения слоёв, можно перемещая их за значки левой кнопкой мыши

Упражнение

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

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

Что будет, если щёлкнуть в область перекрытия пипеткой? ластиком? Можно ли сгруппировать фигуры, расположенные в разных слоях?

 

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

 

Упражнение

Отключите видимость слоя «круг». На месте расположения круга проведите ластиком. Включите видимость слоя.

Защититите слой «треугольник» от изменений. Можно ли теперь перекрасить треугольник? Удалить? Скопировать в буфер обмена? Можно ли удалить защищённый слой?

Отобразите все слои в виде контуров. Зависит ли цвет контуров от цвета изображения в нём?

Двойной щелчок по значку слоя вызывает диалог его свойств.

Диалог позволяет переименовать слой (Name), изменить его видимость (Show), запретить его изменения (Lock), или отобразить в виде контуров (View Layer as outlines). Можно также изменить цвет контуров (Outline Color) и высоту значков слоя на линейке (Layer Height). Важнее то что данный диалог позволяет изменить тип слоя. Краткая характеристика типов слоёв приводится в виде таблицы

 

Название	Значок	Назначение
Normal		Обычный слой для рисования
Guide		Слой сетка. Содержимое слоя не отображается в ролике, а служит лишь для примагничивания объектов из всех остальных слоёв
Guide		Слой направляющая для анимации движения (Motion tween) созданного в Guided слое. Содержимое слоя не отображается в ролике. Области заливки игнорируются.
Guided		Предназначен для анимации движения (Motion tween) маршрут для которого расположен в Guide слое
Mask		Слой маска. Содержимое слоя не отображается в ролике. Линии игнорируются. Области заливки трактуются как области прозрачности через которые видно содержимое слоя Masked
Masked		Обычный слой для рисования, подчинённый Mask слою. Отображается в ролике лишь в тех областях где в Mask слое имеются заливки

 

Упражнение.

Создайте в ролике слои типа «Mask» и «Masked». В слое «Mask» нарисуйте замочную скважину в виде области заливки. В слое «Masked» нарисуйте любое изображение, частично перекрывающееся с замочной скважиной. Заприте все слои, и Вы увидите действие маски.

Добавьте в ролик новый слой и превратите его в слой-сетку. Нарисуйте в нём прямоугольник, который с помощью инспектора объектов поверните точно на 15 градусов. Перейдите в обычный слой и нарисуйте в нём 4 маленьких круга. Убедитесь, что кнопка вжата. Перемещая круги за центры, расположите их точно в вершинах прямоугольника. Для просмотра результатов нажмите Ctrl+Enter или в меню «Control» выберите «Test Movie». Закройте окно документа.

Создайте в ролике слои всех типов.

Эталоны и экземпляры

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

 

Достаточно получить одно изображение снежинки (эталон), а потом уже на компьютере пользователя размножить его изображения. Форма снежинки хранится в эталоне, а для получения новых экземпляров снежинок на экране пользователя достаточно знать лишь их координаты, масштаб и ещё ряд индивидуальных особенностей каждого экземпляра. Разработчики Flash пошли именно по этому пути. Пусть, например, необходимо нарисовать еловый лес. Создадим в начале эталон одной ёлки. Для этого в меню «Insert» выберите «New symbol» или нажмите Ctrl F8. В появившемся окне «Symbol Properties» можно ввести имя эталона (делать это необязательно, хотя если эталонов в ролике больше десятка, их можно начать путать) и указать его поведение (Behavior) в данном случае «Movie Clip».

После подтверждения ввода вы увидите пустое поле для рисования с крестом посередине. Это и будет центр эталона. Чаще всего изображение рисуют так, что бы оно находилось в центре. Нарисуйте изображение ёлки. Для того, что бы вернуться на основную сцену ролика щёлкните по Scene 1, в верхней, левой части окна.

Изображения ёлки на основной сцене нет, так как оно хранится в виде эталона в библиотеке. Для того, что бы вызвать окно библиотеки в меню «Window» выберите «Library» или нажмите Ctrl-L.

В окне библиотеки могут находиться следующие значки

Эталон типа Graphic

Эталон типа Button

Эталон типа Movie Clip

Звук

Эталон типа Smart Clip

Растровое изображение

Папка

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

Получился настоящий лес. Важно, что количество ёлок практически не влияет на размер ролика. Однако, все ёлки, слишком одинаковые. Щёлкая по отдельным экземплярам и используя кнопки , применяйте к ним операции масштабирования, поворота, скоса.

Неплохо также попробовать операции отражения («Modify» - «Transform» - «Flip Horizontal»).

Картинка станет куда более реалистичной. Обратите внимание, что экземпляры, созданные последними располагаются поверх остальных. Так же ведут себя и сгруппированные объекты. Для изменения порядка их расположения на сцене используйте команды в меню «Modify» – «Arrange»

 

 

«Bring to Front» (Ctrl Shift Up) – Переместить на передний план

«Move Ahead» (Ctrl Up) Переместить выше

«Move Behind» (Ctrl Down) Переместить ниже

«Send to Back» (Ctrl Shift Down) Переместить на задний план

В этом же меню находится команда «Lock» (Сtrl Alt L), позволяющая защитить от изменений выделенный объект. Снять защиту с объектов можно командой «Unlock All» (Ctrl Alt Shift L) Перечисленные функции применимы лишь к экземплярам и группам.

Угол поворота и масштаб, это ещё не все особенности, которыми можно наделить отдельную ёлочку в лесу. Подсветите щелчком один из экземпляров и активизируйте панель «Effect».

В раскрывающемся списке выберите одно из свойств «Brightness» - яркость «Tint» - цветовой оттенок «Alpha» – прозрачность и измените значение.

При выборе цветового оттенка цвет удобнее выбирать, нажав кнопку в центральной части диалога. Степень применения данного оттенка к экземпляру настраивается раскрывающимся списком, где в данный момент стоит значение 100%, что означает полное перекрашивание в выбранный цвет всего экземпляра. Уменьшив степень применения можно добиться лишь незначительного присутствия цвета. Например, одна из ёлок может быть немного голубоватой, но голубой цвет будет добавлен и к зелёным иголкам и к коричневому стволу.

В нашем примере для ёлок на заднем плане было уменьшено значение Alpha, чем был достигнут эффект тумана.

Для левой ёлки было изменено значение яркости.

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

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

Работа с окном библиотеки.

Рассмотрим основные возможности, котрые предлагает окно библиотеки.

В нижней правой части окна находятся основные кнопки. Кнопка создаёт новый эталон (аналог команды «Insert» «New Symbol») Кнопка создаёт новую папку, кнопка выводит диалог свойств подсвеченного эталона. Кнопка позволяет удалить выделенные объекты. Двойной щелчок по имени объекта позволяет его переименовать, двойной щелчок по папке откроет её или закроет. Двойной щелчок по значку эталона позволит его отредактировать. Для перемещения объекта в папку достаточно перетащить его мышкой или выбрать соответствующую команду в меню «Options» в верхней, правой части окна библиотеки.

 

Упражнение

Могут ли в библиотеке существовать эталоны с одинаковыми именами. А в разных папках?.

Подсветив экземпляр, и активизировав панель «Instance» можно увидеть, что стали доступны кнопки в нижней части панели. Первая кнопка служит для смены эталона, на котором основан текущий экземпляр. При этом, все особенности, которыми наделён данный экземпляр сохранятся. Если, например, создать эталон пальмы, а потом, подсветив экземпляр ёлки, переключить его на эталон пальмы, то на месте ёлки, действительно возникнет пальма. Обратите внимание, что изменения масштаба, поворот и прочие эффекты, отличающие данный экземпляр от других сохранились.

Очень важным свойством эталонов является возможность содержать в себе другие эталоны.

Используя команды «Insert» «New Symbol» Создайте эталоны квадрата, круга и треугольника разных цветов и размеров

Перейдите в редактирование эталона «квадрат» и переместите из окна библиотеки на него 4 экземпляра круга. Теперь перейдите в редактирование эталона «круг» и переместите на него 4 экземпляра «треугольник». Вернитесь на сцену ролика и переместите на неё из окна библиотеки экземпляр «квадрат». Используя окно библиотеки измените цвет кругов. Используя двойные щелчки по экземпляру на сцене измените цвет треугольников

Упражнение

Создать подобный экземпляр ни разу не открыв окно библиотеки (Используйте преобразование рисунка в экземпляр F8 и копирование экземпляров)

II. Анимация

Классификация

Анимацию создаваемую во Flash можно разделить на следующие классы

 

 

 

В программной анимации движением объектов на экране управляет скрипт. Подробным изучением программной анимации мы займёмся на последних занятиях.

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