Файл: Курсовая работа по дисциплине Технологии обработки информации Вариант 3 Фамилия Мельник.docx

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

Рисунок 6. Пример SVG миниатюр, использованных в текущем задании

Так же из https://deti-online.com/audioskazki/skazki-chukovskogo-mp3/muha-cokotuha/) была скачана аудиоверсия исходной сказки и с помощью онлайн инструмента редактирования аудиофайлов был вырезан отрезок по варианту.

Главные теоретические положения

Технология масштабируемой векторной графики SVG (Scalable Vector Graphics) позволяет объединить в одном формате текст, графику, анимацию и интерактивные компоненты и базируется на трех типах графических изображений: векторных формах, рисунках и тексте. Объекты, как это принято в векторной графике, представлены либо прямолинейными и криволинейными контурами, либо графическими примитивами (прямоугольниками, эллипсами и др.), а рисунки представляют собой импортированные растровые изображения.

Помимо этого, формат SVG поддерживает различные виды анимационных (напоминающих GIF и flash-анимацию) и интерактивных объектов, таких как гиперссылки, реакции на внешние события и прочие элементы навигации. Важно и то, что поскольку данный стандарт основан на языке XML, то SVG файл наряду с элементами, предназначенными для визуального отображения, может содержать также различные метаданные. Указанные особенности выдвигают SVG-технологии на лидирующие места в области проектирования и разработки веб-ресурсов [3].

Решение поставленной задачи

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

.

Как и в большинстве тегов, текущему можно присвоить id, ссылка на который позволит использовать его как «родительский объект», перемещение по которому позволит реализовать анимацию. Параметр d ответственен за построение кривой и представляет из себя набор точек и прочих параметров. Параметр style характеризует внешний вид, например невидимость.

В том же файле в текстовом редакторе можно добавить объекты, используя тег image, размещенный внутри тега g. Свойствами для размещения изображения выступают координаты объекта, его размеры и ссылка на файл, который представляет из себя векторное изображение размещаемого объекта.

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