Как создать интерактивный svg кроссворд: рисуем картинку к игре
Как создать интерактивный svg кроссворд: рисуем картинку к игре
Небольшой урок о том, как нарисовать svg картинку к интерактивному кроссворду для последующего создания на основе неё простой игры для занятий с детьми или размещению на личном сайте (блоге). Отличительной чертой нашего будущего кроссворда является возможность работы с ним на любом ПК/ноутбуке (под Windows, Linux и др.), на любом мобильном устройстве или планшете и любой интерактивной доске.
Следует отметить, что любимая многими пользователями программа по созданию презентаций PowerPoint не может похвастаться подобной универсальностью. Но об этих недостатках мы ещё поговорим в уроках по созданию интерактивных svg презентаций. Поэтому смело закрывайте PowerPoint (если невольно её запустили) - он Вам более не понадобится. Моя задача рассказать о новом способе разработки интерактивных кроссвордов с использованием SVG графики. Наш интерактивный SVG кроссворд будет работать и с интерактивной доской, и в мобильном устройстве и даже на страницах личного сайта или блога. Заинтригованы? Тогда поехали. )
Первым делом просто обязан Вас предупредить о том, что интерактивный SVG кроссворд можно создать тремя способами:
- В графическом редакторе Inkscape (рисунок при помощи фигур).
- В любом текстовом редакторе (добавляя теги и строчки кода).
- В специальном онлайн конструкторе, который создал для Vneuroka.ru.
Создаваемый кроссворд у нас будет с ключевым словом: слова по горизонтали будут собирать одно ключевое слово по вертикали. Даже если Вы решите создать стандартный интерактивный кроссворд на svg, он должен состоять из нескольких слоёв:
- Нижний слой с квадратами для разметки кроссворда.
- Средний слой с буквами для слов интерактивного кроссворда.
- Верхний слой с квадратами (продублированный нижний слой), реагирующими на клик мышкой, который будет закрывать ячейки с буквами.
В любом случае нам нужно для начала определить ключевое слово интерактивного SVG кроссворда и подобрать к нему слова. Процедуру удобно выполнить на тетрадном листе в клетку. В результате мы получим разметку максимального количества квадратов (букв) кроссворда по горизонтали и по вертикали. Именно по этим максимальным значениям и будем потом готовить нашу сетку. Также сетка нам даёт информацию о том, какими по счёту от левого края являются ключевые квадраты, так как их следует окрасить в другой цвет. Далее речь пойдёт о том, как создать сетку для кроссворда аж двумя способами.
Создаём интерактивный SVG кроссворд в Inkscape
Этот способ подойдёт для тех, кто не особо любит работать в текстовых редакторах. Лично предпочитаю второй способ - писать код в SVG документе, так как процесс очень похож на создание обычной html страницы с тегами, свойствами и javascript. Если Вы уже создавали html сайты, то воспользуйтесь следующим способом создания интерактивного svg.
- Запустите векторный редактор Inkskape. Если его у Вас ещё нет, то установите его. Он распространяется свободно и является бесплатным. Inkscape имеет портативную версию, позволяющую работать прямо с флешки.
- В меню Файл → Свойства документа → определим размер нашего будущего svg кроссворда и укажем размеры width (ширины) = 1366 px и height (высоты) = 768 px в пикселях (px). Обратите внимание, что по умолчанию единицы измерения выставлены в миллиметрах, а нам нужно в пикселях.
- Сохраним наш будущий интерактивный кроссворд как cross.svg.
- На слое Layer 1 рисуем в редакторе Inkscape квадрат. Для этого жмём на кнопку F4 или выбираем фигуру прямоугольника в левой части программы. Кликнем по экрану, удерживая клавишу Ctrl, и тянем за край. при этом у нас получается прямоугольник с равными сторонами - квадрат.
- Снова выделим квадрат - под меню появится информация о координатах и размере квадрата. Укажем точные значения квадрата по ширине = 50 px и высоте = 50 px. Это будет ячейка для буквы нашего интерактивного кроссворда.
- Установите для квадрата цвет #008080 и обводку #000000 шириной 1 пиксель. Сохраните результат (Ctrl+S).
- Создадим текст из одной большой буквы 'W'. Цвет для буквы укажите белый, размер 27 пикселей, Bold (жирный), выравнивание по центру.
- Разместим букву над квадратом так, чтобы она выглядела по центру ячейки. Сгруппируем ячейку вместе с буквой: Меню → Объект → Сгруппировать (или Ctrl+G).
- Скопируйте группу квадрата с буквой и вставьте её 24 раза, всякий раз распределяя копии по горизонтали слева направо. Заметил, что если вести курсор, нажимая Ctrl+V (вставка), то новая копия создаётся ровно под курсором, что удобно.
- Выделим все квадраты. Откроем панель в Меню → Объект → Выровнять. В поле Ориентир: страница, выбрать Выровнять верхние края объектов и Выровнять интервалы между объектами по горизонтали. Если интервалы слишком большие, то можно двинуть правый квадрат, выделить все квадраты и повторять процедуру.
- Мы получили первую горизонтальную линию для сетки кроссворда. Теперь выделим все ячейки, сгруппируем их, скопируем группу и вставим на страницу 14 раз.
- Выделим все квадраты. Откроем панель в Меню → Объект → Выровнять. В поле Ориентир: страница, выбрать Выровнять левые/правые края объектов и Выровнять интервалы между объектами по вертикали.
- Это ещё не всё. Для удобной работы нам нужно все текстовые надписи перенести на новый слой. Для этого через Меню → Объект → Разгруппировать (или Shift+Ctrl+G) разгруппируем все объекты два раза.
- Создаём новый слой Layer 2. Выделяем любую букву и в Меню → Правка → Выбрать одинаковые → Тип объекта мы быстро и удобно выделили все буквы. Вырежим выделенные буквы: Меню → Правка → Вырезать (Ctrl+X). Теперь перейдём на слой Layer 2 и через Меню → Правка → Вставка на место (Ctrl+Alt+V) ставим буквы на другой слой. Сохраняем SVG документ с сеткой кроссворда. Сетка готова. Сеткой можно пользоваться как универсальным инструментом, поэтому сохраните её себе для создания интерактивных кроссвордов в Inkscape. Для простых кроссвордов она вполне подойдёт.
- Составим теперь интерактивный кроссворд на тему svg графики с ключевым словом INKSCAPE. Ключевое слово (если считать столбцы сетки слева направо) находится в 9 столбце. Придам 9 столбцу другой цвет (пусть будет жёлтый #ffff00), чтобы отделить его от других ячеек. Так игрок поймёт, что здесь ключевое слово. Также поступим с буквами столбца - пусть они будут чёрными #000000.
- В текстовые поля вводим заглавные буквы ключевого слова.
- Удаляем ненужные нижние строчки после ключевого слова.
- Теперь пишем в каждую строчку таблицы слова по горизонтали, также удаляя из сетки ненужные ячейки. Буквы удобно записывать, включив Caps Look.
- У меня получилось. :) Результат можно посмотреть, открыв SVG файл любым современным браузером (только не используйте Internet Explorer).
- Но это ещё не всё. Нам нужно закрыть все буквы ровно такими же квадратами-заглушками буквы SVG кроссворда. Для этого создадим новый слой под названием Layer 3 и скопируем в него весь Layer 1, вставив ячейки на место через Меню → Правка → Вставка на место (Ctrl+Alt+V).
- Пока наш кроссворд не имеет интерактивности - то есть не реагирует на наши действия, а ячейки кроссворда закрыли все буквы.
- Теперь нужно перейти в текстовый редактор - будем добавлять javascript код и стили для создания интерактивного кроссворда SVG. Поэтому закройте файл в редакторе Inkscape, да и сам редактор закройте во избежание ненужных действий. Результат работы будем смотреть в браузере - можно просто перетащить файл курсором мышки в браузер.
- Откроем файл в текстовом редакторе. На этот раз я выбрал для работы Brackets, так как он абсолютно бесплатен, кроссплатформенный и имеет портативную версию.
- Нас интересует слой, поэтому ищём строку inkscape:label="Layer 3" - это слой с нашими закрытыми ячейками, скрывающими буквы. Сейчас минуточку внимания: нам нужно добавить стиль к этой группе и javascript код:
style='cursor:pointer' onclick='multclip(evt)'
Старые значения style, если имеются, смело удаляйте. Сохраните, зайдите в браузер и обновите страничку (или загрузите файл снова), чтобы посмотреть изменения. Если всё сделали правильно, то при наведении на ячейку указатель курсора станет выглядеть так, словно вы навели на кнопку. - Остаётся совсем малость: прокрутите SVG документ в самый низ. Там будет находится строка </svg>, перед которой нужно вставить вот этот код:
<script> <![CDATA[ function multclip(evt){ var targetElement = evt.target; targetElement.style.setProperty('display', 'none'); } ]]> </script> - Сохраните созданный интерактивный svg кроссворд и заново откройте его в браузере (или обновите страницу). Если Вы всё сделали правильно, что он должен прекрасно работать. Если желаете оптимизировать кроссворд, то объедините одинаковые стили квадратов и текста, а потом встройте css непосредственно в svg документ.
- Теперь можете продолжить оформление интерактивного кроссворда в редакторе Inkscape.
Создаём интерактивный SVG кроссворд в текстовом редакторе
Более продвинутый способ, предоставляющий широкие возможности для творчества и создания интерактивного векторного SVG рисунка. Он может показаться сложным, но это лишь на первый взгляд. Освоив принципы работы с SVG графикой в текстовом редакторе можно научиться оптимизации. Векторные редакторы оставляют огромное количество сора и ненужной информации в коде. Также удобно работать с javascript кодом при создании интерактивной SVG графики.
- Откроем текстовый редактор (например, Brackets), создадим файл будущего интерактивного кроссворда cross2.svg и вставим в него следующую заготовку:
<?xml version='1.0' encoding='UTF-8' standalone='no'?> <svg xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='100%' height='100%' viewBox='0 0 1366 768' version='1.1' xml:space='preserve' id='multclip.ru' onload='Init(evt)'> <style type='text/css' > <![CDATA[ .fon{ fill:#e6e6e6; } .txt_big{ font-weight:bold; fill:#0093C8; text-anchor: middle; cursor:pointer; } .k1{ fill:blue; stroke:#000; stroke-width:1; } .k2{ fill:red; stroke:#000; stroke-width:1; } ]]> </style> <script type='text/javascript'> <![CDATA[ function Init(evt){ if (window.svgDocument==null){ //svgDocument = evt.target.ownerDocument; svgDocument = evt.target.ownerDocument.getElementById('multclip.ru'); } } function mcl(evt){ var targetElement = evt.target; targetElement.style.setProperty('display', 'none'); } ]]> </script> <title>Интерактивный кроссворд (svg by Multclip.ru)</title> <desc>Описание.</desc> <defs> <rect width='45' height='45' id='k1' class='k1'/> <rect width='45' height='45' id='k2' class='k2'/> </defs> <g id='l1'> <use xlink:href='#k1' x='0' y='0'/> <use xlink:href='#k1' x='50' y='0'/> </g> <g id='l2'></g> <g id='l3'></g> </svg> - Совсем немного теории. Строчки, заключённые между тегами script, - это javascript код, между тегами style - стили для элементов (фигур) нашего интерактивного кроссворда, а между тегами defs будет располагаться библиотека, из которой мы будем брать повторяющиеся фигуры. Другие теги: title - название svg файла, desc - описание файла. Размер будущего svg файла кроссворда будет 1366 на 768, чтобы было свободное место для творчества и оформления.
- Давайте теперь посчитаем максимальное количество букв по горизонтали и по вертикали, чтобы создать сетку для нашего кроссворда. Мой кроссворд имеет ключевое слово INKSCAPE, состоящее из 8 символов. Поэтому будущий интерактивный кроссворд будет иметь 8 строк. А вот по горизонтали столбцов будет больше. Слова JAVASCRIPT и PRESENTATION выпирают влево на 8 букв, а вправо - на 6: 8 + 6 + 1 = 15. То есть количество столбцов кроссворда 15, причём 9 столбец является ключевым. Ключевой столбец будет иметь другой цвет, чтобы выделяться от остальных. Соответственно и буквы 9 столбца будут также иметь свой цвет.
- Определившись, начинаем рисовать фигуры. При помощи тега use будем указывать координаты нужного нам квадрата слева направо. Первая линия будет иметь следующее содержание:
<use xlink:href='#k1' x='0' y='0'/> <use xlink:href='#k1' x='50' y='0'/> <use xlink:href='#k1' x='100' y='0'/> <use xlink:href='#k1' x='150' y='0'/> <use xlink:href='#k1' x='200' y='0'/> <use xlink:href='#k1' x='250' y='0'/> <use xlink:href='#k1' x='300' y='0'/> <use xlink:href='#k2' x='350' y='0'/> <use xlink:href='#k1' x='400' y='0'/> <use xlink:href='#k1' x='450' y='0'/> <use xlink:href='#k1' x='500' y='0'/> <use xlink:href='#k1' x='550' y='0'/> <use xlink:href='#k1' x='600' y='0'/> <use xlink:href='#k1' x='650' y='0'/> <use xlink:href='#k1' x='700' y='0'/>
- Указанные строчки нужно установить перед </svg>. Вы уже, наверное, догадались, что для добавления второй строки нам нужно скопировать предыдущий код и заменить в нём значение y='0' на y='50', для третьей строчки y='150' и т.д. В каждой строке (их всего 8) значение y прирастает на 50 пикселей.
- После того, как создадим 15 столбцов и 8 строчек из квадратов для интерактивного SVG кроссворда, нужно ровно таким же способом создать буквы при помощи тега text. Текст будет также привязан к каскадной таблице стилей. Для удобства буквы кроссворда заключим в отдельную группу, координаты укажем такие же, как и у квадратов. Пример первой строчки для 15 столбцов:
<g transform='translate(22,34)'> <text x='0' y='0' class='t1'>-</text> <text x='50' y='0' class='t1'>-</text> <text x='100' y='0' class='t1'>-</text> <text x='150' y='0' class='t1'>-</text> <text x='200' y='0' class='t1'>-</text> <text x='250' y='0' class='t1'>-</text> <text x='300' y='0' class='t1'>-</text> <text x='350' y='0' class='t2'>-</text> <text x='400' y='0' class='t1'>-</text> <text x='450' y='0' class='t1'>-</text> <text x='500' y='0' class='t1'>-</text> <text x='550' y='0' class='t1'>-</text> <text x='600' y='0' class='t1'>-</text> <text x='650' y='0' class='t1'>-</text> <text x='700' y='0' class='t1'>-</text> ... <text x='0' y='50' class='t1'>-</text> </g>
- Продолжим создание оставшихся семи строчек с приращением значений y на 50 пикселей в каждой новой строке. Вместо чёрточки мы потом будем вставлять значения букв. Если буквы для данного текстового поля нет, то это поле будем удалять вместе с пустым квадратом.
- Как Вы понимаете, подобным образом можно создать сетку для интерактивного кроссворда совершенно любого размера.
- Теперь нам необходимо закрыть буквы прямоугольниками и написать javascript код, который добавит кроссворду интерактивность. При клике по прямоугольнику будет отрываться буква. Для этого скопируем все квадраты и вставим их после группы с буквами. При этом каждому прямоугольнику допишем код вызывающий функцию onclick='mcl(evt):':
<use xlink:href='#k1' x='0' y='0' onclick='mcl(evt)/> <use xlink:href='#k1' x='50' y='0' onclick='mcl(evt)/> <use xlink:href='#k1' x='100' y='0' onclick='mcl(evt)/> <use xlink:href='#k1' x='150' y='0' onclick='mcl(evt)/> <use xlink:href='#k1' x='200' y='0' onclick='mcl(evt)/> <use xlink:href='#k1' x='250' y='0' onclick='mcl(evt)/> <use xlink:href='#k1' x='300' y='0' onclick='mcl(evt)/> <use xlink:href='#k2' x='350' y='0' onclick='mcl(evt)/> <use xlink:href='#k1' x='400' y='0' onclick='mcl(evt)/> <use xlink:href='#k1' x='450' y='0' onclick='mcl(evt)/> <use xlink:href='#k1' x='500' y='0' onclick='mcl(evt)/> <use xlink:href='#k1' x='550' y='0' onclick='mcl(evt)/> <use xlink:href='#k1' x='600' y='0' onclick='mcl(evt)/> <use xlink:href='#k1' x='650' y='0' onclick='mcl(evt)/> <use xlink:href='#k1' x='700' y='0' onclick='mcl(evt)/> ... <use xlink:href='#k1' x='0' y='50' onclick='mcl(evt)/> <use xlink:href='#k1' x='50' y='50' onclick='mcl(evt)/> ...
- Вот, собственно и всё. Если мы обновим страницу с SVG файлом в браузере, то увидим сетку кроссворда. При клике на скрытую ячейку будет появляться текст с буквой, подобно игре 'Поле чудес'. Переходим к удалению лишних ячеек и текстовых надписей.
Создание интерактивного SVG кроссворда: удаление лишнего
- Мы узнали о двух способах разметки (разработки сетки) создания интерактивного SVG кроссворда. При клике по ячейкам у нас уже открывается слой с буквами. Нам предстоит грамотно заполнить буквы в текстовых блоках и удалить ненужные элементы. И для первого, и для второго способа процесс довольно схож, процедуру можно выполнить как в редакторе Inkscape, так и в текстовом редакторе.
- Для примера разберём мой интерактивный кроссворд. Он состоит из следующих слов (по горизонтали):
- - - G R A P H I C S - - - - - - - P R E S E N T A T I O N - - - - - M A R K U P - - - - - - - - - - - C S S - - - - - - - I N T E R A C T I O N - - - - - - - - I M A G E - - - - J A V A S C R I P T - - - - - - - - - - - - V E C T O R - -
Ключевое слово интерактивного кроссворда - INKSCAPE, оно образовано путём пересечения 9 символа каждого слова по горизонтали, образуя слово по вертикали. - Теперь откроем заготовленную схему и начнём писать буквы в нужные ячейки. Если Вы создавали интерактивный кроссворд в графическом редакторе Inkscape, то нужно заблокировать (кликнуть по изображению замочка на слое) и сделать невидимым верхний слой Layer 2. Это действие откроет слой с буквами. Заполним слой буквами из слов нашего кроссворда, а поля с прочерками просто удалим.
- Удаляем из интерактивной схемы на нижнем слое ячейки с пустыми текстовыми полями. Остаётся разблокировать верхний слой и убрать из него все лишние прямоугольные элементы.
- Аналогичным образом обстоят дела с созданием интерактивного кроссворда на SVG с помощью текстового редактора. Смысл процедуры абсолютно такой же: заполнить корректно схему кроссворда буквами и удалить не использующиеся элементы. Результат тестировать в браузере, обновляя страницу.
- Интерактивный кроссворд готов. Если Вы хотите создать его без ручной вёрстки в редакторах - воспользуйтесь третьим способом.
Создаём интерактивный SVG кроссворд при помощи web приложения
Тем, кто не имеет свободного времени и возможностей (например, нет под рукой редактора, а нужно быстро подготовиться к занятию с использованием ИКТ или факультативу), в своё время я разработал небольшое web-приложение, позволяющее создавать интерактивные кроссворды. Результат можно сохранить на ПК/ноутбук и свободно пользоваться в своей педагогической практике. Это самый простой и быстрый способ разработки, не требующий абсолютно никаких знаний и навыков, так как всю работу за Вас (вплоть до подбора слов для кроссворда) будет выполнена в автоматическом режиме.
Почему сразу об этом не написал, а заставил ознакомиться со всеми вариантами создания интерактивного кроссворда? Ответ прост: знания, изложенные выше, дают Вам возможность творчески подойти к этой задаче. Результат, полученный в онлайн конструкторе, можно доработать в текстовом и/или графическом редакторе: добавить оформление, поменять расцветку кроссворда.
Теперь Вы можете сами определиться в том, какой из способов Вам более подходит. Ссылка на мой онлайн-конструктор интерактивных кроссвордов:
vneuroka.ru/krossvord_sozdat_online_iz_svoih_slov/